/* global React, RDCLogo, CrownMark */
const { useState, useEffect, useRef } = React;

// ---------- Navbar ----------
const Navbar = ({ onCTA }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  ["Historia", "#historia"],
  ["Novedades", "#novedades"],
  ["Archivo de la Calle", "#equipo"],
  ["El Regreso", "#impacto"],
  ["Lo que dice la Cancha", "#prensa"],
  ["Contacto", "#contacto"]];

  return (
    <header
      className={
      "fixed top-0 inset-x-0 z-50 transition-all duration-500 " + (
      scrolled ?
      "bg-[#020100]/85 backdrop-blur-md border-b border-white/5 py-3" :
      "bg-transparent py-5")
      }>
      
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 flex items-center justify-between">
        <a href="#top" className="flex items-center" aria-label="Reyes de la Calle - Inicio">
          <CrownMark size={scrolled ? 56 : 68} color="#FFFFFF" />
        </a>
        <nav className="hidden lg:flex items-center gap-5">
          {links.map(([label, href]) =>
          <a
            key={label}
            href={href}
            className="text-[11px] uppercase tracking-[0.14em] text-white/75 hover:text-[#FF6D0D] transition-colors font-medium"
            style={{ fontFamily: "Inter, sans-serif" }}>
            
              {label}
            </a>
          )}
        </nav>
        <div className="flex items-center gap-2 md:gap-3">
          <a
            href="https://instagram.com/reyesdelacalle.cl"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Seguir en Instagram"
            className="inline-flex items-center gap-2 text-white font-bold text-[11px] uppercase tracking-[0.12em] px-3 py-2 rounded-sm transition-all hover:-translate-y-0.5 active:translate-y-0 shadow-[0_6px_18px_-6px_rgba(214,41,118,0.8)]"
            style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.14em", background: "linear-gradient(105deg, #FEDA77 0%, #F58529 22%, #DD2A7B 58%, #8134AF 82%, #515BD4 100%)" }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
            </svg>
            <span className="hidden sm:inline">Seguir</span>
          </a>
          <button
            onClick={onCTA}
            className="hidden lg:inline-flex items-center gap-1.5 bg-[#FF6D0D] hover:bg-[#ff8530] text-black font-bold text-[11px] uppercase tracking-[0.12em] px-3.5 py-2 rounded-sm transition-all hover:-translate-y-0.5 active:translate-y-0 shadow-[0_6px_18px_-6px_rgba(255,109,13,0.7)]"
            style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.14em" }}>
            
            Te esperamos
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </button>
          <button onClick={() => setOpen((o) => !o)} className="lg:hidden text-white p-2" aria-label="Menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              {open ? <path d="M6 6l12 12M18 6L6 18" /> : <path d="M3 6h18M3 12h18M3 18h18" />}
            </svg>
          </button>
        </div>
      </div>
      {/* Mobile drawer */}
      <div
        className={
        "lg:hidden overflow-hidden transition-[max-height] duration-500 " + (
        open ? "max-h-[600px]" : "max-h-0")
        }>
        
        <div className="bg-[#020100]/95 backdrop-blur-xl border-t border-white/5 px-6 py-6 flex flex-col gap-4">
          {links.map(([l, h]) =>
          <a key={l} href={h} onClick={() => setOpen(false)} className="text-white text-lg uppercase tracking-wider font-semibold" style={{ fontFamily: "'Anton', sans-serif" }}>
              {l}
            </a>
          )}
          <button onClick={onCTA} className="mt-2 bg-[#FF6D0D] text-black font-bold uppercase tracking-widest py-3 rounded-sm" style={{ fontFamily: "'Anton', sans-serif" }}>
            Te esperamos
          </button>
          <a href="https://instagram.com/reyesdelacalle.cl" target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)} className="inline-flex items-center justify-center gap-2 text-white font-bold uppercase tracking-widest py-3 rounded-sm transition-transform hover:-translate-y-0.5" style={{ fontFamily: "'Anton', sans-serif", background: "linear-gradient(105deg, #FEDA77 0%, #F58529 22%, #DD2A7B 58%, #8134AF 82%, #515BD4 100%)" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
            </svg>
            Seguir en Instagram
          </a>
        </div>
      </div>
    </header>);

};

// ---------- Hero ----------
// Pequeño botón que controla el audio del video del hero. Vive sobre el hero, top-right.
const HeroSoundToggle = () => {
  const [muted, setMuted] = useState(true);
  const [hidden, setHidden] = useState(false);

  const findVideo = () => document.querySelector('#top video');

  const toggle = () => {
    const v = findVideo();
    if (!v) return;
    if (muted) {
      v.muted = false;
      v.volume = 0.85;
      // Si el video ya terminó, lo reiniciamos para que se escuche
      if (v.ended) { v.currentTime = 0; v.play().catch(() => {}); }
      else { v.play().catch(() => {}); }
      setMuted(false);
    } else {
      v.muted = true;
      setMuted(true);
    }
  };

  // Cuando el video termina, mostramos un botón de "Repetir" más explícito
  useEffect(() => {
    const v = findVideo();
    if (!v) return;
    const onEnd = () => setHidden(false);
    v.addEventListener("ended", onEnd);
    return () => v.removeEventListener("ended", onEnd);
  }, []);

  return (
    <button
      onClick={toggle}
      className="absolute top-24 right-6 md:top-28 md:right-10 z-30 group flex items-center gap-2 bg-black/55 backdrop-blur-md hover:bg-[#FF6D0D] hover:text-black text-white border border-white/20 hover:border-[#FF6D0D] px-4 py-2.5 transition-all"
      style={{ fontFamily: "Inter, sans-serif" }}
      aria-label={muted ? "Activar sonido" : "Silenciar"}
    >
      {muted ? (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6"/></svg>
          <span className="text-[10px] uppercase tracking-[0.25em] font-semibold">Activar sonido</span>
        </>
      ) : (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 5L6 9H2v6h4l5 4V5zM15.54 8.46a5 5 0 010 7.07M19.07 4.93a10 10 0 010 14.14"/></svg>
          <span className="text-[10px] uppercase tracking-[0.25em] font-semibold">Sonando</span>
        </>
      )}
    </button>
  );
};

// ---------- Hero ----------
const Hero = ({ onPrimary, onSecondary }) => {
  return (
    <section
      id="top"
      data-screen-label="Hero"
      className="relative min-h-screen w-full overflow-hidden flex items-center pt-28 pb-12">
      
      {/* Background layers */}
      <div className="absolute inset-0">
        <video
          ref={(el) => {
            if (!el) return;
            // Autoplay sin sonido (requerido por navegadores), luego ofrecemos activar audio
            el.muted = true;
            el.defaultMuted = true;
          }}
          src="assets/hero.mp4"
          autoPlay
          muted
          playsInline
          disableRemotePlayback
          className="w-full h-full object-cover object-center bg-[#020100]"
          style={{ filter: "contrast(1.05) saturate(1.1)" }} />

        {/* Vignette mínimo para legibilidad */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#020100] via-transparent to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#020100]/65 via-transparent to-transparent" />
        {/* Orange light glow */}
        <div className="absolute -left-40 top-1/3 w-[600px] h-[600px] rounded-full bg-[#FF6D0D]/15 blur-[140px] pointer-events-none" />
      </div>

      {/* Sound control — esquina superior derecha */}
      <HeroSoundToggle />

      <div className="relative max-w-[1440px] mx-auto px-6 md:px-10 w-full">
        {/* Copy */}
        <div className="max-w-3xl z-10">
          <div className="inline-flex items-center gap-2 mb-6 border border-[#FF6D0D]/40 bg-[#FF6D0D]/10 px-3 py-1.5 rounded-full">
            <span className="w-1.5 h-1.5 rounded-full bg-[#FF6D0D] animate-pulse" />
            <span className="text-[#FF6D0D] text-xs uppercase tracking-[0.25em] font-semibold" style={{ fontFamily: "Inter, sans-serif" }}>DESDE 2003 · + QUE BALONCESTO ES TRANSFORMACIÓN

            </span>
          </div>

          <h1
            className="text-white"
            style={{
              fontFamily: "'Anton', sans-serif",
              fontSize: "clamp(56px, 9vw, 140px)",
              lineHeight: 0.88,
              letterSpacing: "-0.01em"
            }}>
            
            <span className="block reveal" style={{ animationDelay: "0.1s", fontSize: "60px", fontFamily: "Anton" }}>El streetball tiene reyes</span>
            <span className="block reveal" style={{ animationDelay: "0.25s" }}>
              <span className="text-[#FF6D0D] italic" style={{ fontSize: "60px" }}>Y la calle la corona</span>
              <span className="text-[#FF6D0D]">.</span>
            </span>
          </h1>

          <p
            className="mt-8 max-w-xl text-white/75 text-lg md:text-xl leading-relaxed reveal"
            style={{ fontFamily: "Inter, sans-serif", animationDelay: "0.5s" }}>
            
            Reyes de la Calle es el primer equipo oficial de streetbasquet en Sudamérica. Más de dos décadas
            construyendo cultura, comunidad y reyes en cada cancha de Chile.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row gap-4 reveal" style={{ animationDelay: "0.7s" }}>
            <button
              onClick={onPrimary}
              className="group inline-flex items-center justify-center gap-3 bg-[#FF6D0D] hover:bg-[#ff8530] text-black font-bold px-8 py-5 uppercase tracking-[0.18em] rounded-sm transition-all hover:-translate-y-0.5 active:translate-y-0 shadow-[0_16px_48px_-12px_rgba(255,109,13,0.6)]"
              style={{ fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.2em" }}>
              
              Entra a la cancha
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="transition-transform group-hover:translate-x-1">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </button>
            <button
              onClick={onSecondary}
              className="inline-flex items-center justify-center gap-3 bg-transparent border-2 border-white/30 hover:border-white text-white font-bold px-8 py-5 uppercase tracking-[0.18em] rounded-sm transition-all hover:bg-white/5"
              style={{ fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.2em" }}>
              
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
              Ver historia
            </button>
          </div>

          {/* Tagline strip */}
          <div className="mt-12 flex items-center gap-6 text-xs uppercase tracking-[0.3em] text-white/40 reveal" style={{ animationDelay: "0.9s", fontFamily: "Inter, sans-serif" }}>
            <span>Disciplina</span>
            <span className="text-[#FF6D0D]">·</span>
            <span>Pasión</span>
            <span className="text-[#FF6D0D]">·</span>
            <span>Respeto</span>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/40 text-[10px] uppercase tracking-[0.3em]" style={{ fontFamily: "Inter, sans-serif" }}>
        <span>Scroll</span>
        <div className="w-px h-10 bg-gradient-to-b from-[#FF6D0D] to-transparent" />
      </div>
    </section>);

};

// ---------- Animated counter ----------
const useCounter = (target, suffix = "", duration = 2000) => {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(target * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      },
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target, duration]);
  return [ref, val, suffix];
};

const Metric = ({ value, suffix, label, prefix, raw }) => {
  const [ref, v] = useCounter(value);
  return (
    <div ref={ref} className="relative group">
      <div className="border-t-2 border-[#FF6D0D]/30 group-hover:border-[#FF6D0D] transition-colors pt-4 pb-1">
        <div className="flex items-baseline gap-1">
          {prefix && <span className="text-[#FF6D0D] text-xl" style={{ fontFamily: "'Anton', sans-serif" }}>{prefix}</span>}
          <span
            className="text-white"
            style={{
              fontFamily: "'Anton', sans-serif",
              fontSize: "clamp(40px, 4vw, 64px)",
              lineHeight: 0.9
            }}>
            
            {raw ? v : v.toLocaleString("es-CL")}
          </span>
          {suffix && <span className="text-[#FF6D0D] text-xl md:text-3xl" style={{ fontFamily: "'Anton', sans-serif" }}>{suffix}</span>}
        </div>
        <div className="mt-3 text-white/60 text-xs uppercase tracking-[0.2em] max-w-[200px]" style={{ fontFamily: "Inter, sans-serif" }}>
          {label}
        </div>
      </div>
    </div>);

};

const Metrics = () => {
  return (
    <section id="historia" data-screen-label="Metricas" className="relative py-12 md:py-16 bg-[#020100] overflow-hidden">
      {/* Photo backdrop */}
      <div className="absolute inset-0 pointer-events-none">
        <img src="assets/respaldo-bg.jpeg" alt="" className="w-full h-full object-cover opacity-35" style={{ objectPosition: "center 30%" }} />
        <div className="absolute inset-0 bg-gradient-to-b from-[#020100]/75 via-[#020100]/90 to-[#020100]" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#020100]/85 via-transparent to-[#020100]/70" />
      </div>
      <div
        className="absolute inset-0 opacity-[0.05] pointer-events-none"
        style={{
          backgroundImage: "url('assets/camo-pattern.jpeg')",
          backgroundSize: "600px",
          mixBlendMode: "screen"
        }} />
      
      <div className="relative max-w-[1440px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-end mb-10">
          <div className="lg:col-span-7">
            <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
              ·  La calle nos respalda
            </div>
            <h2
              className="text-white"
              style={{
                fontFamily: "'Anton', sans-serif",
                fontSize: "clamp(40px, 6vw, 96px)",
                lineHeight: 0.92
              }}>
              
              23 AÑOS<br />
              <span className="text-[#FF6D0D]">El streetball tiene reyes</span> y creciendo.
            </h2>
          </div>
          <div className="lg:col-span-5 text-white/70 text-base md:text-lg leading-relaxed" style={{ fontFamily: "Inter, sans-serif", width: "700px", maxWidth: "100%" }}>En 2002, la marca de ropa deportiva AND1 llegó a Chile. Pero ya desde el 98 se veían acciones basquetboleras en los distintos puntos del país y sobre todo Santiago, gracias a la popularidad de las cintas del Mix Tape And 1 que circulaban mano a mano. Es así como de la mano de la marca y otras empresas organizamos un tour por la Región Metropolitana sumando talentos de los barrios, conformándose el primer equipo oficial de streetbasquet en Sudamérica, llevando el juego y sus valores a cada rincón de la comunidad.


          </div>
        </div>

        <div className="grid lg:grid-cols-12 gap-10 lg:gap-12 items-center">
          {/* Premium animated collage */}
          <div className="lg:col-span-5">
            <div className="rdc-collage group relative">
              <div className="absolute -inset-3 bg-[#FF6D0D]/20 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
              <div className="relative overflow-hidden border border-white/10 bg-black shadow-[0_30px_80px_-20px_rgba(0,0,0,0.9)]">
                <img
                  src="assets/collage-respaldo-v2.png"
                  alt="Archivo Reyes de la Calle — tour AND1, streetball y DJ en la cancha"
                  className="w-full h-full object-cover transition-transform duration-[1200ms] ease-out group-hover:scale-[1.04]" />
                <div className="absolute inset-0 bg-gradient-to-t from-[#020100]/60 via-transparent to-transparent pointer-events-none" />
                <div className="absolute bottom-0 left-0 right-0 p-4 flex items-end justify-between">
                  <div className="text-[10px] uppercase tracking-[0.3em] text-white/80" style={{ fontFamily: "Inter, sans-serif" }}>Archivo · Tour AND1</div>
                  <div className="text-[10px] uppercase tracking-[0.3em] text-[#FF6D0D]" style={{ fontFamily: "Inter, sans-serif" }}>2002—2003</div>
                </div>
              </div>
            </div>
          </div>

          {/* Metrics */}
          <div className="lg:col-span-7">
            <div className="grid grid-cols-2 gap-x-6 gap-y-8">
              <Metric prefix="" value={2003} raw label="Año de fundación — la primera generación" />
              <Metric value={20} suffix="+" label="Comunas visitadas con torneos y clínicas" />
              <Metric value={1} suffix="º" label="Equipo oficial de streetbasquet en Sudamérica" />
              <Metric value={500} suffix="+" label="Bolers han practicado con nosotros" />
            </div>
          </div>
        </div>

        {/* Quote band — video background */}
        <div className="mt-16 relative overflow-hidden border border-white/10 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.9)]">
          {/* Background video */}
          <div className="absolute inset-0">
            <video
              ref={(el) => {
                if (!el) return;
                el.muted = true;
                el.defaultMuted = true;
                el.play && el.play().catch(() => {});
              }}
              src="assets/quote-bg.mp4"
              autoPlay
              muted
              loop
              playsInline
              disableRemotePlayback
              className="w-full h-full object-cover object-center bg-[#020100]"
              style={{ filter: "contrast(1.05) saturate(1.05)" }} />
            {/* Legibility overlays — como en el hero */}
            <div className="absolute inset-0 bg-[#020100]/55" />
            <div className="absolute inset-0 bg-gradient-to-r from-[#020100]/85 via-[#020100]/40 to-[#020100]/20" />
            <div className="absolute inset-0 bg-gradient-to-t from-[#020100]/80 via-transparent to-[#020100]/40" />
          </div>

          {/* Quote content */}
          <div className="relative px-6 py-14 md:px-14 md:py-20">
            <div className="border-l-4 border-[#FF6D0D] pl-6 md:pl-10 max-w-3xl">
              <div className="text-[#FF6D0D] text-7xl leading-none" style={{ fontFamily: "'Anton', sans-serif" }}>"</div>
              <p className="text-white text-2xl md:text-4xl -mt-4 [text-shadow:0_2px_24px_rgba(0,0,0,0.7)]" style={{ fontFamily: "'Anton', sans-serif", lineHeight: 1.1 }}>El streetball promueve el deporte sano y la vida activa. Fomenta la creatividad y la identidad juvenil a través del movimiento. Integra la cultura urbana con el arte y la expresión personal. Una experiencia que transforma comunidades.

              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ---------- Gallery ----------
// Las listas de fotos y videos viven en el store del admin (localStorage).
// Merch se mantiene estático mientras la tienda esté en pausa.
const galleryMerch = [
{ src: "assets/polera-fundadores-v2.png", title: "Polera Fundadores", subtitle: "Oversize" },
{ src: "assets/cap-mockup.jpeg", title: "Jockey Desde 2003", subtitle: "Cuero + Algodón", size: "wide" },
{ src: "assets/shorts-camo.jpeg", title: "Shorts Camo", subtitle: "Drop 02" },
{ src: "assets/zendoh-tee-v2.png", title: "Polera Zendoh", subtitle: "Drop 01" }];


const Gallery = () => {
  const { useStore, STORE_KEYS, DEFAULT_FOTOS, DEFAULT_VIDEOS } = window;
  const [galleryFotos] = useStore(STORE_KEYS.fotos, DEFAULT_FOTOS);
  const [galleryVideos] = useStore(STORE_KEYS.videos, DEFAULT_VIDEOS);
  const [tab, setTab] = useState("Fotos");
  const [lightbox, setLightbox] = useState(null);
  const tabs = ["Fotos", "Videos", "Merch"];

  const tilesFotos = galleryFotos.map((it, i) =>
  <button
    key={it.id || it.src}
    onClick={() => setLightbox(it)}
    className={
    "group relative overflow-hidden bg-black border border-white/5 hover:border-[#FF6D0D]/60 transition-all " + (
    it.size === "wide" ? "col-span-2 row-span-2" : "")
    }
    style={{ animation: `fadeUp 0.6s ${i * 0.05}s both` }}>
      <img src={it.src} alt={it.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent opacity-90 group-hover:opacity-100" />
      <div className="absolute inset-x-0 bottom-0 p-4 md:p-5 text-left">
        <div className="text-[10px] uppercase tracking-[0.25em] text-[#FF6D0D] mb-1" style={{ fontFamily: "Inter, sans-serif" }}>{it.subtitle}</div>
        <div className="text-white text-lg md:text-2xl" style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.02em" }}>{it.title}</div>
      </div>
      <div className="absolute top-3 right-3 w-8 h-8 rounded-full bg-[#FF6D0D] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="3"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      </div>
    </button>);

  const tilesVideos = galleryVideos.map((v, i) =>
  <button
    key={v.id || i}
    onClick={() => setLightbox({ ...v, isVideo: true })}
    className={
    "group relative overflow-hidden bg-black border border-white/5 hover:border-[#FF6D0D]/60 transition-all " + (
    v.size === "wide" ? "col-span-2 row-span-2" : "")
    }
    style={{ animation: `fadeUp 0.6s ${i * 0.05}s both` }}>
      <img src={v.thumb || `https://img.youtube.com/vi/${v.youtubeId}/maxresdefault.jpg`} alt={v.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-black/20" />
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[#FF6D0D] flex items-center justify-center shadow-[0_8px_32px_-8px_rgba(255,109,13,0.8)] group-hover:scale-110 transition-transform">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z" /></svg>
        </div>
      </div>
      <div className="absolute top-3 left-3 flex items-center gap-2">
        <span className="bg-black/70 backdrop-blur-sm text-white text-[10px] uppercase tracking-[0.2em] font-semibold px-2 py-1 border border-white/10" style={{ fontFamily: "Inter, sans-serif" }}>
          YouTube
        </span>
        {v.duration && <span className="bg-black/70 backdrop-blur-sm text-white text-[10px] font-mono px-2 py-1 border border-white/10">{v.duration}</span>}
      </div>
      <div className="absolute inset-x-0 bottom-0 p-4 md:p-5 text-left">
        <div className="text-[10px] uppercase tracking-[0.25em] text-[#FF6D0D] mb-1" style={{ fontFamily: "Inter, sans-serif" }}>Reproducir ▶</div>
        <div className="text-white text-lg md:text-2xl" style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.02em" }}>{v.title}</div>
      </div>
    </button>);

  const tilesMerch = galleryMerch.map((it, i) =>
  <button
    key={it.src}
    onClick={() => setLightbox(it)}
    className={
    "group relative overflow-hidden bg-black border border-white/5 hover:border-[#FF6D0D]/60 transition-all " + (
    it.size === "wide" ? "col-span-2 row-span-2" : "")
    }
    style={{ animation: `fadeUp 0.6s ${i * 0.05}s both` }}>
      <img src={it.src} alt={it.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-80 group-hover:opacity-100" />
      <div className="absolute top-3 left-3 bg-[#FF6D0D] text-black text-[10px] uppercase tracking-widest font-bold px-2 py-1" style={{ fontFamily: "'Anton', sans-serif" }}>
        Merch
      </div>
      <div className="absolute inset-x-0 bottom-0 p-4 md:p-5 text-left">
        <div className="text-[10px] uppercase tracking-[0.25em] text-[#FF6D0D] mb-1" style={{ fontFamily: "Inter, sans-serif" }}>{it.subtitle}</div>
        <div className="text-white text-lg md:text-2xl" style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.02em" }}>{it.title}</div>
      </div>
    </button>);

  const currentTiles = tab === "Fotos" ? tilesFotos : tab === "Videos" ? tilesVideos : tilesMerch;
  const emptyMessage = tab === "Fotos" ?
  "Aún no hay fotos en la galería. Súmalas desde el panel admin." :
  tab === "Videos" ?
  "Aún no hay videos. Súmalos desde el panel admin." :
  null;

  return (
    <section id="equipo" data-screen-label="Galeria" className="relative py-12 md:py-16 bg-[#0A0807]">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
          <div>
            <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
              ·  Galería
            </div>
            <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.92 }} className="text-white">
              EL ARCHIVO<br /><span className="text-[#FF6D0D]">DE LA CALLE.</span>
            </h2>
          </div>
          <div className="flex flex-wrap gap-2">
            {tabs.map((t) =>
            <button
              key={t}
              onClick={() => setTab(t)}
              className={
              "px-5 py-2.5 text-xs uppercase tracking-[0.18em] font-semibold transition-all border " + (
              tab === t ?
              "bg-[#FF6D0D] border-[#FF6D0D] text-black" :
              "border-white/15 text-white/70 hover:border-white/40 hover:text-white")
              }
              style={{ fontFamily: "Inter, sans-serif" }}>
                {t}
              </button>
            )}
          </div>
        </div>

        {currentTiles.length === 0 && emptyMessage ?
        <div className="border border-dashed border-white/10 py-20 text-center text-white/40 text-sm" style={{ fontFamily: "Inter, sans-serif" }}>
            {emptyMessage}
          </div> :

        <div key={tab} className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4 auto-rows-[180px] md:auto-rows-[260px]">
            {currentTiles}
          </div>
        }

        {tab === "Merch" &&
        <div className="mt-8 flex justify-center">
            <a href="https://wa.link/w2aolp" target="_blank" rel="noopener noreferrer" className="bg-[#FF6D0D] hover:bg-[#ff8530] text-black font-bold px-8 py-5 uppercase tracking-[0.18em] transition-all hover:-translate-y-0.5 shadow-[0_16px_48px_-12px_rgba(255,109,13,0.5)] flex items-center gap-3" style={{ fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.2em" }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.733-.979zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/></svg>
              Pide tu catálogo
            </a>
          </div>
        }
      </div>

      {/* Lightbox */}
      {lightbox &&
      <div
        onClick={() => setLightbox(null)}
        className="fixed inset-0 z-[100] bg-black/95 backdrop-blur-md flex items-center justify-center p-6 cursor-pointer"
        style={{ animation: "fadeIn 0.25s ease" }}>
          <button className="absolute top-6 right-6 text-white/70 hover:text-white" aria-label="Cerrar">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
          <div className="max-w-5xl w-full" onClick={(e) => e.stopPropagation()}>
            {lightbox.isVideo ?
            <div className="w-full">
              <div className="relative w-full bg-black" style={{ aspectRatio: "16 / 9" }}>
                <iframe
                  className="absolute inset-0 w-full h-full"
                  src={`https://www.youtube.com/embed/${lightbox.youtubeId}?autoplay=1&rel=0&playsinline=1&origin=${encodeURIComponent(window.location.origin)}`}
                  title={lightbox.title}
                  frameBorder="0"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen />
              </div>
              <div className="mt-4 flex items-center justify-between text-white">
                <div>
                  <div className="text-xs uppercase tracking-[0.25em] text-[#FF6D0D]" style={{ fontFamily: "Inter, sans-serif" }}>Video</div>
                  <div style={{ fontFamily: "'Anton', sans-serif" }} className="text-2xl">{lightbox.title}</div>
                </div>
                <a
                  href={`https://www.youtube.com/watch?v=${lightbox.youtubeId}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-xs uppercase tracking-[0.2em] text-white/60 hover:text-[#FF6D0D] transition-colors"
                  style={{ fontFamily: "Inter, sans-serif" }}>
                  Ver en YouTube ↗
                </a>
              </div>
            </div> :
            <div>
              <img src={lightbox.src} className="w-full max-h-[80vh] object-contain" alt={lightbox.title} />
              <div className="mt-4 flex items-center justify-between text-white">
                <div>
                  <div className="text-xs uppercase tracking-[0.25em] text-[#FF6D0D]" style={{ fontFamily: "Inter, sans-serif" }}>{lightbox.subtitle}</div>
                  <div style={{ fontFamily: "'Anton', sans-serif" }} className="text-2xl">{lightbox.title}</div>
                </div>
              </div>
            </div>
            }
          </div>
        </div>
      }
    </section>);
};

Object.assign(window, { Navbar, Hero, Metrics, Gallery });