/* ---------- COMPONENTS ---------- */
const { useState, useEffect, useRef, useMemo } = React;

/* hook: reveal on intersect */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ============= TOP NAV ============= */
function TopNav() {
  const [open, setOpen] = useState(false);
  const links = [
    { href: "#marcadores", label: "Marcadores" },
    { href: "#cronica",    label: "Crónica"    },
    { href: "#campeones",  label: "Campeones"  },
    { href: "#camino",     label: "Camino"     },
    { href: "#partidos",   label: "Partidos"   },
    { href: "#galeria",    label: "Galería"    },
  ];
  return (
    <header className="fixed top-0 inset-x-0 z-50 backdrop-blur bg-ink/70 border-b border-bone/5">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 h-16 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3">
          <img src="public/logo.png" alt="Hontzuriak" className="h-9 w-9 invert" />
          <div className="leading-tight">
            <div className="font-cond text-bone text-lg tracking-[.08em]">HONTZURIAK</div>
            <div className="font-mono text-[10px] text-gold tracking-[.25em]">TXAPELDUNAK · 25–26</div>
          </div>
        </a>
        <nav className="hidden md:flex items-center gap-7 font-mono text-[11px] tracking-[.25em] uppercase text-bone/70">
          {links.map(l => (
            <a key={l.href} href={l.href} className="hover:text-gold transition-colors">{l.label}</a>
          ))}
        </nav>
        <button onClick={() => setOpen(v => !v)} className="md:hidden text-bone/80 font-mono text-[11px] tracking-[.25em] border border-bone/20 px-3 py-1.5">
          {open ? "CERRAR" : "MENÚ"}
        </button>
      </div>
      {open && (
        <div className="md:hidden border-t border-bone/10 bg-coal">
          <div className="px-5 py-4 grid gap-3 font-mono text-[12px] tracking-[.2em] uppercase text-bone/80">
            {links.map(l => <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="py-1">{l.label}</a>)}
          </div>
        </div>
      )}
    </header>
  );
}

/* ============= HERO ============= */
function Hero() {
  return (
    <section id="top" className="relative overflow-hidden bg-ink pt-16">
      {/* Backdrop owl */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-20 left-1/2 -translate-x-1/2 w-[140vw] max-w-[1800px] aspect-square opacity-[0.07]">
          <img src="public/logo.png" alt="" className="w-full h-full object-contain invert" />
        </div>
        {/* red ember glow */}
        <div className="absolute inset-x-0 bottom-0 h-[60%] bg-gradient-to-t from-blood/15 via-blood/5 to-transparent mix-blend-screen" />
        <div className="absolute -inset-x-10 bottom-0 h-40 bg-gradient-to-t from-ink to-transparent" />
      </div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-10 pt-12 md:pt-20 pb-16 md:pb-28">

        {/* meta strip */}
        <div className="flex items-center justify-between font-mono text-[11px] tracking-[.3em] uppercase text-bone/50">
          <div className="flex items-center gap-3">
            <span className="inline-block w-2 h-2 bg-ember rounded-full animate-pulse" />
            <span>Final Four · 09–10 Mayo · Urbi</span>
          </div>
          <div className="hidden md:block">Senior 2ª Especial · FViB</div>
        </div>

        <div className="mt-8 md:mt-12 grid md:grid-cols-12 gap-8 md:gap-6 items-center">
          {/* LEFT: type stack */}
          <div className="md:col-span-7 order-2 md:order-1">
            <div className="font-cond text-bone/60 text-2xl md:text-3xl tracking-[.4em] leading-none">INFERNUTIK</div>
            <h1 className="font-poster leading-[0.82] tracking-[-0.01em] mt-2">
              <span className="block text-bone text-[16vw] md:text-[10.5vw] lg:text-[160px]">HONTZURI<span className="text-ember">A</span>K</span>
            </h1>

            <div className="mt-6 flex items-center gap-4">
              <div className="hairline flex-1 max-w-[140px]" />
              <div className="font-cond gold-text text-3xl md:text-5xl tracking-[.18em]">TXAPELDUNAK</div>
              <div className="hairline flex-1" />
            </div>
            <div className="mt-2 font-mono text-[12px] md:text-[13px] tracking-[.3em] uppercase text-bone/60">
              Final Four · 2025 — 2026
            </div>

            <p className="mt-10 max-w-[520px] font-display text-2xl md:text-[34px] leading-[1.1] tracking-tight text-bone">
              No fue una temporada perfecta.<br/>
              <span className="ember-text">Fue una temporada campeona.</span>
            </p>

            <div className="mt-10 flex flex-wrap gap-3">
              <a href="#camino"     className="group relative inline-flex items-center gap-2 px-5 py-3 border border-bone/20 text-bone hover:border-gold hover:text-gold transition font-mono text-[11px] tracking-[.3em] uppercase">
                <span>Ver el camino</span><span className="text-gold">↘</span>
              </a>
              <a href="#campeones"  className="group relative inline-flex items-center gap-2 px-5 py-3 bg-bone text-ink hover:bg-gold transition font-mono text-[11px] tracking-[.3em] uppercase">
                <span>Ver campeones</span><span>★</span>
              </a>
              <a href="#galeria"    className="group relative inline-flex items-center gap-2 px-5 py-3 border border-bone/20 text-bone hover:border-ember hover:text-ember transition font-mono text-[11px] tracking-[.3em] uppercase">
                <span>Ver fotos</span><span>↘</span>
              </a>
            </div>

            {/* stat strip */}
            <div className="mt-12 grid grid-cols-4 gap-4 md:gap-8 border-t border-bone/10 pt-6">
              <Stat n="19" l="Victorias" />
              <Stat n="7"  l="Derrotas" />
              <Stat n="3º" l="Liga regular" />
              <Stat n="1º" l="Final Four" gold />
            </div>
          </div>

          {/* RIGHT: owl with crown */}
          <div className="md:col-span-5 order-1 md:order-2 relative">
            <div className="relative aspect-[4/5] max-w-[460px] mx-auto">
              {/* gold halo */}
              <div className="absolute inset-0 -m-8 bg-[radial-gradient(closest-side,rgba(216,168,63,0.18),transparent_70%)]" />
              <img src="public/buho-copa.png" alt="Hontzuriak Txapeldunak — búho con copa" className="relative w-full h-full object-contain invert brightness-110 contrast-125 drop-shadow-[0_30px_60px_rgba(255,77,0,0.25)]" />
              <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-gold to-transparent" />
            </div>
            <div className="text-center mt-4 font-mono text-[10px] tracking-[.4em] uppercase text-bone/40">
              ◆ Edizio Bereziya · 2025–26 ◆
            </div>
          </div>
        </div>
      </div>

      {/* ticker */}
      <div className="relative border-y border-bone/10 bg-coal/80 overflow-hidden">
        <div className="ticker whitespace-nowrap py-3 font-cond text-bone/40 text-2xl tracking-[.4em] flex">
          {Array.from({length: 2}).map((_,i) => (
            <span key={i} className="flex items-center gap-8 pr-8">
              <span>TXAPELDUNAK</span><span className="text-ember">★</span>
              <span>FINAL FOUR 2025–26</span><span className="text-gold">◆</span>
              <span>BERANGOKO HONTZURIAK</span><span className="text-ember">★</span>
              <span>SENIOR 2ª ESPECIAL</span><span className="text-gold">◆</span>
              <span>URBI · BASAURI</span><span className="text-ember">★</span>
              <span>EDIZIO BEREZIYA</span><span className="text-gold">◆</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l, gold }) {
  return (
    <div>
      <div className={`font-poster text-3xl md:text-5xl leading-none ${gold ? "gold-text" : "text-bone"}`}>{n}</div>
      <div className="mt-1 font-mono text-[10px] md:text-[11px] tracking-[.25em] uppercase text-bone/50">{l}</div>
    </div>
  );
}

/* ============= SCOREBOARDS ============= */
function Scoreboards() {
  return (
    <section id="marcadores" className="relative bg-ink py-24 md:py-32">
      <SectionHeader kicker="02 · Marcadores" title="LOS DOS PASOS DEL TÍTULO" sub="Dos partidos. Dos victorias. Una temporada que termina con la bocina del campeón." />
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 mt-12 md:mt-16">
        <div className="grid md:grid-cols-12 gap-6 md:gap-8">
          {/* SEMIFINAL — small */}
          <div className="md:col-span-5">
            <ScoreCard
              tag="Semifinal · 09.05.26"
              local="Kibuc Basauri BSK"
              away="Berangoko Hontzuriak"
              ls={81} as={90}
              size="sm"
            />
          </div>
          {/* FINAL — big */}
          <div className="md:col-span-7">
            <ScoreCard
              tag="Final · 10.05.26"
              local="Getxo SBT"
              away="Berangoko Hontzuriak"
              ls={71} as={87}
              size="lg"
              trophy
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function ScoreCard({ tag, local, away, ls, as, size = "sm", trophy = false }) {
  const big = size === "lg";
  return (
    <div className={`relative reveal pedestal ${trophy ? "gold-glow" : ""} p-6 md:p-10`}>
      <div className="absolute top-0 left-0 w-12 h-px bg-ember" />
      <div className="absolute top-0 left-0 w-px h-12 bg-ember" />
      <div className="absolute bottom-0 right-0 w-12 h-px bg-gold" />
      <div className="absolute bottom-0 right-0 w-px h-12 bg-gold" />

      <div className="flex items-center justify-between font-mono text-[10px] md:text-[11px] tracking-[.3em] uppercase text-bone/50">
        <span>{tag}</span>
        {trophy && <span className="text-gold">★ TXAPELDUNAK</span>}
      </div>

      <div className={`mt-6 grid grid-cols-[1fr_auto_1fr] items-center gap-4 md:gap-8`}>
        {/* local */}
        <div className="text-right">
          <div className={`font-cond ${big ? "text-2xl md:text-3xl" : "text-xl md:text-2xl"} tracking-[.05em] text-bone/70 leading-tight`}>{local}</div>
          <div className="font-mono text-[10px] tracking-[.3em] text-bone/30 mt-1">LOCAL</div>
        </div>
        {/* score */}
        <div className="flex items-center gap-3 md:gap-6">
          <div className={`tabular font-poster ${big ? "text-[88px] md:text-[140px]" : "text-[64px] md:text-[88px]"} leading-none text-bone/60`}>{ls}</div>
          <div className="text-bone/30 font-poster text-3xl">—</div>
          <div className={`tabular font-poster ${big ? "text-[88px] md:text-[140px]" : "text-[64px] md:text-[88px]"} leading-none ${trophy ? "gold-text" : "ember-text"}`}>{as}</div>
        </div>
        {/* away (us) */}
        <div className="text-left">
          <div className={`font-cond ${big ? "text-2xl md:text-3xl" : "text-xl md:text-2xl"} tracking-[.05em] text-bone leading-tight`}>{away}</div>
          <div className="font-mono text-[10px] tracking-[.3em] text-gold mt-1">CAMPEONES</div>
        </div>
      </div>

      {trophy && (
        <div className="mt-8 pt-6 border-t border-gold/30 flex flex-wrap items-center justify-between gap-4">
          <div className="font-cond text-2xl md:text-3xl gold-text tracking-[.05em]">"Y cuando sonó la bocina, decía 71-87. Pero decía mucho más."</div>
          <div className="font-mono text-[11px] tracking-[.3em] uppercase text-bone/40">Urbi · Basauri</div>
        </div>
      )}
    </div>
  );
}

/* ============= SECTION HEADER ============= */
function SectionHeader({ kicker, title, sub, light = false }) {
  return (
    <div className="max-w-[1400px] mx-auto px-5 md:px-10 reveal">
      <div className="flex items-center gap-4 font-mono text-[11px] tracking-[.3em] uppercase text-gold">
        <span className="w-8 h-px bg-gold" />
        <span>{kicker}</span>
      </div>
      <h2 className={`mt-5 font-poster text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight ${light ? "text-ink" : "text-bone"}`}>
        {title}
      </h2>
      {sub && <p className={`mt-5 max-w-[680px] font-body text-base md:text-lg leading-relaxed ${light ? "text-ink/70" : "text-bone/60"}`}>{sub}</p>}
    </div>
  );
}

/* ============= CRÓNICA ============= */
function Cronica() {
  return (
    <section id="cronica" className="relative bg-coal py-24 md:py-32 grain overflow-hidden">
      <div className="absolute inset-y-0 left-0 w-1/2 opacity-[0.04] pointer-events-none">
        <img src="public/buho-copa.png" alt="" className="w-full h-full object-contain object-left invert" />
      </div>
      <SectionHeader kicker="03 · Crónica" title={<>EL FIN DE SEMANA<br/><span className="ember-text">EN QUE TODO CUADRÓ</span></>} />

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-10 mt-14 grid md:grid-cols-12 gap-10">
        <div className="md:col-span-7 md:col-start-2 reveal">
          <p className="font-display text-2xl md:text-3xl leading-snug text-bone">
            Urbi no vio sólo una Final Four. <span className="gold-text">Vio a un equipo hacerse campeón.</span>
          </p>

          <div className="mt-8 space-y-6 font-body text-lg leading-[1.75] text-bone/75 max-w-[640px]">
            <p>
              El <span className="text-bone font-semibold">sábado</span>, Berangoko Hontzuriak salió a por la semifinal con decisión. Delante estaba <span className="text-bone">Kibuc Basauri BSK</span>, un rival duro, pero Berango llevó la iniciativa casi todo el partido. El equipo encontró ritmo, encontró confianza y castigó desde fuera con una lluvia de triples que abrió la primera gran brecha. Cuando el rival apretó, Hontzuriak respondió otra vez con carácter.
            </p>
            <p className="font-cond text-xl tracking-wide text-gold">
              El 81–90 no fue sólo una victoria: fue un aviso.
            </p>
            <p>
              El <span className="text-bone font-semibold">domingo</span> esperaba Getxo SBT. La final. El último paso. <br/>Y Berango no tembló.
            </p>
            <p>
              Desde el inicio, el equipo salió con hambre de campeón. <span className="text-bone">Losada</span> prendió la mecha, <span className="text-bone">Artiñano</span> lideró, y entre ambos empujaron a Hontzuriak a un arranque demoledor. La ventaja creció, la confianza también, y aunque Getxo intentó volver al partido, la ofensiva de Berango no bajó el ritmo.
            </p>
            <p className="font-cond text-xl tracking-wide text-ember">
              Cuando sonó la bocina, el marcador decía 71–87.
            </p>
            <p>Pero en realidad decía mucho más.</p>
          </div>

          {/* litany */}
          <div className="mt-10 grid grid-cols-2 md:grid-cols-5 gap-px bg-bone/10 border border-bone/10">
            {["Esfuerzo","Equipo","Temporada","Orgullo","Final"].map((w,i) => (
              <div key={w} className="bg-coal py-6 px-4 text-center font-cond text-2xl md:text-3xl tracking-[.1em]">
                <span className={i === 4 ? "gold-text" : "text-bone"}>{w}</span>
              </div>
            ))}
          </div>

          <div className="mt-8 font-poster text-5xl md:text-6xl gold-text tracking-[.04em]">TXAPELDUNAK.</div>
        </div>

        {/* pull-quote sidebar */}
        <aside className="md:col-span-3 md:col-start-10 reveal self-start md:sticky md:top-24">
          <div className="border-l border-gold/40 pl-6">
            <div className="font-mono text-[10px] tracking-[.3em] uppercase text-gold">Versión corta</div>
            <p className="mt-3 font-body text-[15px] leading-relaxed text-bone/70">
              Un fin de semana para el recuerdo. En semis, Hontzuriak derribó a Kibuc Basauri BSK por <span className="text-bone">81–90</span> con una lluvia de triples. En la final, ante Getxo SBT, abrió diferencias desde el inicio y cerró el título por <span className="text-bone">71–87</span>. Una gran temporada terminó del único modo posible:
            </p>
            <p className="mt-3 font-cond text-2xl gold-text tracking-wider">Siendo campeones.</p>
          </div>
        </aside>
      </div>
    </section>
  );
}

window.TopNav = TopNav;
window.Hero = Hero;
window.Scoreboards = Scoreboards;
window.SectionHeader = SectionHeader;
window.Cronica = Cronica;
window.useReveal = useReveal;