/* ---------- COMPONENTS PART 2 ---------- */

/* ============= CHAMPIONS GRID ============= */
function ChampionsGrid() {
  const all = [...window.PLAYERS, window.COACH];
  return (
    <section id="campeones" className="relative bg-ink py-24 md:py-32 overflow-hidden">
      {/* large bg owl logo */}
      <div className="pointer-events-none absolute -right-40 top-20 w-[700px] opacity-[0.03]">
        <img src="public/logo.png" alt="" className="w-full invert" />
      </div>

      <SectionHeader kicker="04 · La plantilla" title={<>LOS <span className="gold-text">CAMPEONES</span></>} sub="Una temporada no la gana un solo partido. La ganan las personas que lo sostienen todo. Esta es la colección del equipo campeón." />

      <div className="relative max-w-[1500px] mx-auto px-5 md:px-10 mt-14 md:mt-20">
        {/* shelf label */}
        <div className="flex items-center justify-between font-mono text-[10px] md:text-[11px] tracking-[.3em] uppercase text-bone/40 mb-8">
          <div className="flex items-center gap-3">
            <span>◆ Edición limitada · {window.PLAYERS.length + 1} figuras</span>
          </div>
          <div className="hidden md:block">Berangoko Hontzuriak · 2025–26</div>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-px bg-bone/5 border border-bone/5">
          {window.PLAYERS.map((p, i) => (
            <FunkoCard key={p.name} player={p} idx={i} />
          ))}
          <CoachCard coach={window.COACH} idx={window.PLAYERS.length} />
        </div>

        <div className="mt-8 flex flex-wrap items-center justify-between gap-4 font-mono text-[10px] tracking-[.3em] uppercase text-bone/40">
          <div>Plantilla campeona · {window.PLAYERS.length} jugadores + 1 entrenador</div>
          <div className="flex items-center gap-2 text-gold">★ <span>Colección oficial</span> ★</div>
        </div>
      </div>
    </section>
  );
}

function FunkoCard({ player, idx }) {
  const num = String(idx + 1).padStart(2, "0");
  return (
    <div className="pedestal reveal relative aspect-[3/4] flex flex-col group">
      <div className="absolute top-3 left-3 font-mono text-[10px] tracking-[.25em] text-bone/30 group-hover:text-gold transition">N°{num}</div>
      <div className="absolute top-3 right-3 font-mono text-[10px] tracking-[.25em] text-bone/30">25–26</div>

      <div className="relative flex-1 flex items-end justify-center overflow-hidden px-4 pt-10 pb-2">
        {/* spotlight */}
        <div className="absolute inset-x-6 top-2 h-32 bg-[radial-gradient(closest-side,rgba(244,241,234,0.10),transparent_75%)]" />
        <img src={`public/funkos/${player.file}`} loading="lazy" alt={`Funko de ${player.name}`} className="funko-img relative max-h-[88%] w-auto object-contain drop-shadow-[0_30px_30px_rgba(0,0,0,0.6)]" />
        {/* floor reflection */}
        <div className="absolute inset-x-6 bottom-12 h-px bg-bone/10" />
      </div>

      <div className="relative px-4 pb-4 pt-2">
        <div className="h-px bg-gradient-to-r from-transparent via-gold/40 to-transparent" />
        <div className="mt-3 flex items-end justify-between">
          <div className="font-poster text-2xl md:text-3xl text-bone tracking-[.04em] leading-none">{player.name.toUpperCase()}</div>
          <div className="font-mono text-[9px] tracking-[.3em] text-bone/40">JUGADOR</div>
        </div>
      </div>
    </div>
  );
}

function CoachCard({ coach, idx }) {
  const num = String(idx + 1).padStart(2, "0");
  return (
    <div className="pedestal gold-glow reveal relative aspect-[3/4] flex flex-col group bg-gradient-to-b from-soot to-coal">
      <div className="absolute top-3 left-3 font-mono text-[10px] tracking-[.25em] text-gold">N°{num}</div>
      <div className="absolute top-3 right-3 font-mono text-[10px] tracking-[.25em] text-gold">25–26</div>

      <div className="relative flex-1 flex items-end justify-center overflow-hidden px-4 pt-10 pb-2">
        <div className="absolute inset-x-6 top-2 h-32 bg-[radial-gradient(closest-side,rgba(216,168,63,0.18),transparent_75%)]" />
        <img src={`public/funkos/${coach.file}`} loading="lazy" alt={`Funko de ${coach.name}`} className="funko-img relative max-h-[88%] w-auto object-contain drop-shadow-[0_30px_30px_rgba(0,0,0,0.6)]" />
        <div className="absolute inset-x-6 bottom-12 h-px bg-gold/30" />
      </div>

      <div className="relative px-4 pb-4 pt-2">
        <div className="h-px bg-gradient-to-r from-transparent via-gold to-transparent" />
        <div className="mt-3 flex items-end justify-between">
          <div className="font-poster text-2xl md:text-3xl gold-text tracking-[.04em] leading-none">{coach.name.toUpperCase()}</div>
          <div className="font-mono text-[9px] tracking-[.3em] text-gold">ENTRENADOR</div>
        </div>
      </div>
    </div>
  );
}

/* ============= EL CAMINO ============= */
function ElCamino() {
  const stats = [
    { n: "26", l: "Partidos disputados" },
    { n: "19", l: "Victorias" },
    { n: "7",  l: "Derrotas" },
    { n: "3º", l: "Liga regular" },
    { n: "2",  l: "Partidos en Final Four" },
    { n: "1º", l: "Campeón", gold: true },
  ];
  return (
    <section id="camino" className="relative bg-coal py-24 md:py-32 grain overflow-hidden">
      <SectionHeader kicker="05 · La temporada" title={<>EL CAMINO <span className="ember-text">AL TÍTULO</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-5 reveal">
          <div className="font-mono text-[11px] tracking-[.3em] uppercase text-bone/40">Temporada 2025–26</div>
          <div className="mt-2 font-cond text-3xl text-bone tracking-[.06em]">Senior 2ª Especial Masculina</div>
          <div className="font-cond text-xl text-bone/50 tracking-[.06em]">Grupo Único · FViB</div>

          <div className="mt-10 space-y-6 font-body text-[17px] md:text-lg leading-[1.75] text-bone/75 max-w-[520px]">
            <p className="font-display text-2xl text-bone leading-tight">No fue un camino recto.</p>
            <p>Hubo derrotas, aprendizajes y partidos que obligaron al equipo a crecer. Pero Hontzuriak respondió.</p>
            <p>Cerró la liga regular con <span className="text-bone">19 victorias</span> y <span className="text-bone">7 derrotas</span>, terminó <span className="text-bone">3º clasificado</span> y llegó a la Final Four preparado para competir con todo.</p>
            <p className="font-cond text-xl text-gold tracking-wide">Y allí, cuando más importaba, dio su mejor versión.</p>
          </div>
        </div>

        <div className="md:col-span-7 reveal">
          <div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-bone/10 border border-bone/10">
            {stats.map((s) => (
              <div key={s.l} className="bg-coal p-6 md:p-8">
                <div className={`font-poster text-5xl md:text-6xl leading-none ${s.gold ? "gold-text" : "text-bone"}`}>{s.n}</div>
                <div className="mt-3 font-mono text-[10px] md:text-[11px] tracking-[.3em] uppercase text-bone/50">{s.l}</div>
              </div>
            ))}
          </div>

          {/* W/L bar visualization */}
          <div className="mt-8">
            <div className="font-mono text-[10px] tracking-[.3em] uppercase text-bone/40 mb-3">Liga regular · Resultados por jornada</div>
            <div className="flex gap-1 h-14 items-stretch">
              {window.LEAGUE_MATCHES.map((m) => (
                <div key={m.j} title={`${m.j} · ${m.local} ${m.ls}-${m.as} ${m.away}`} className={`flex-1 ${m.win ? "bg-gold/80 hover:bg-gold" : "bg-blood/70 hover:bg-blood"} transition`}>
                </div>
              ))}
            </div>
            <div className="mt-2 flex justify-between font-mono text-[10px] tracking-[.25em] uppercase text-bone/40">
              <span>J1</span><span>J26</span>
            </div>
            <div className="mt-3 flex items-center gap-5 font-mono text-[10px] tracking-[.25em] uppercase text-bone/50">
              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-gold/80 inline-block" /> Victoria</span>
              <span className="flex items-center gap-2"><span className="w-3 h-3 bg-blood/70 inline-block" /> Derrota</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= PARTIDO A PARTIDO ============= */
function PartidoAPartido() {
  const [tab, setTab] = useState("all"); // all | wins | losses
  const filtered = useMemo(() => {
    if (tab === "wins")   return window.LEAGUE_MATCHES.filter(m => m.win);
    if (tab === "losses") return window.LEAGUE_MATCHES.filter(m => !m.win);
    return window.LEAGUE_MATCHES;
  }, [tab]);

  return (
    <section id="partidos" className="relative bg-ink py-24 md:py-32">
      <SectionHeader kicker="06 · El recorrido" title={<>PARTIDO A <span className="gold-text">PARTIDO</span></>} sub="26 jornadas de liga regular más la Final Four. La temporada completa, jornada a jornada." />

      <div className="max-w-[1400px] mx-auto px-5 md:px-10 mt-14">
        {/* Final Four spotlight */}
        <div className="grid md:grid-cols-2 gap-6">
          {window.FINAL_FOUR.map(m => (
            <div key={m.phase} className={`pedestal p-6 md:p-8 ${m.trophy ? "gold-glow" : ""}`}>
              <div className="flex items-center justify-between font-mono text-[10px] md:text-[11px] tracking-[.3em] uppercase">
                <span className={m.trophy ? "text-gold" : "text-ember"}>{m.phase} · Final Four</span>
                <span className="text-bone/40">{m.date}</span>
              </div>
              <div className="mt-5 flex items-center justify-between gap-4">
                <div className="flex-1 min-w-0">
                  <div className="font-cond text-xl md:text-2xl text-bone/70 truncate tracking-wide">{m.local}</div>
                  <div className="font-cond text-xl md:text-2xl text-bone truncate tracking-wide mt-1">{m.away}</div>
                </div>
                <div className="text-right tabular">
                  <div className="font-poster text-4xl md:text-5xl text-bone/60 leading-none">{m.ls}</div>
                  <div className={`font-poster text-4xl md:text-5xl leading-none mt-1 ${m.trophy ? "gold-text" : "ember-text"}`}>{m.as}</div>
                </div>
              </div>
              {m.trophy && <div className="mt-5 pt-4 border-t border-gold/30 font-mono text-[11px] tracking-[.3em] uppercase text-gold">★ Txapeldunak · Berangoko Hontzuriak ★</div>}
            </div>
          ))}
        </div>

        {/* tabs */}
        <div className="mt-14 flex items-center justify-between flex-wrap gap-4">
          <div className="font-mono text-[11px] tracking-[.3em] uppercase text-bone/50">Liga regular · 26 jornadas</div>
          <div className="flex gap-px bg-bone/10 border border-bone/10 font-mono text-[10px] md:text-[11px] tracking-[.3em] uppercase">
            {[
              { id: "all",    label: `Todos · 26` },
              { id: "wins",   label: `Victorias · 19` },
              { id: "losses", label: `Derrotas · 7`  },
            ].map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} className={`px-3 md:px-4 py-2 ${tab === t.id ? "bg-bone text-ink" : "bg-coal text-bone/70 hover:text-bone"}`}>{t.label}</button>
            ))}
          </div>
        </div>

        {/* desktop table */}
        <div className="mt-6 hidden md:block border border-bone/10">
          <div className="grid grid-cols-[60px_90px_1fr_140px_1fr_60px] items-center bg-coal/60 font-mono text-[10px] tracking-[.25em] uppercase text-bone/40">
            <div className="px-3 py-3">Jor.</div>
            <div className="px-3 py-3">Fecha</div>
            <div className="px-3 py-3">Local</div>
            <div className="px-3 py-3 text-center">Resultado</div>
            <div className="px-3 py-3">Visitante</div>
            <div className="px-3 py-3 text-center">Res.</div>
          </div>
          {filtered.map((m, i) => <MatchRow key={m.j} m={m} stripe={i % 2 === 1} />)}
        </div>

        {/* mobile cards */}
        <div className="mt-6 md:hidden grid gap-3">
          {filtered.map(m => <MatchCard key={m.j} m={m} />)}
        </div>
      </div>
    </section>
  );
}

function isUs(name) { return name.startsWith("Berangoko"); }

function MatchRow({ m, stripe }) {
  const lUs = isUs(m.local);
  const aUs = isUs(m.away);
  return (
    <div className={`grid grid-cols-[60px_90px_1fr_140px_1fr_60px] items-center border-t border-bone/5 ${stripe ? "bg-coal/30" : ""}`}>
      <div className="px-3 py-3 font-mono text-[12px] text-bone/60">{m.j}</div>
      <div className="px-3 py-3 font-mono text-[12px] text-bone/40 tabular">{m.date}</div>
      <div className={`px-3 py-3 font-cond text-lg tracking-wide ${lUs ? "text-bone" : "text-bone/60"}`}>{m.local}</div>
      <div className="px-3 py-3 flex items-center justify-center gap-3 tabular">
        <span className={`font-poster text-2xl ${lUs ? (m.win ? "gold-text" : "ember-text") : "text-bone/50"}`}>{m.ls}</span>
        <span className="text-bone/30">–</span>
        <span className={`font-poster text-2xl ${aUs ? (m.win ? "gold-text" : "ember-text") : "text-bone/50"}`}>{m.as}</span>
      </div>
      <div className={`px-3 py-3 font-cond text-lg tracking-wide ${aUs ? "text-bone" : "text-bone/60"}`}>{m.away}</div>
      <div className="px-3 py-3 text-center">
        {m.win
          ? <span className="inline-block w-7 h-7 border border-gold/60 text-gold font-mono text-[11px] leading-[26px]">W</span>
          : <span className="inline-block w-7 h-7 border border-blood/60 text-blood font-mono text-[11px] leading-[26px]">L</span>}
      </div>
    </div>
  );
}

function MatchCard({ m }) {
  const lUs = isUs(m.local);
  const aUs = isUs(m.away);
  return (
    <div className={`pedestal p-4 ${m.win ? "" : "opacity-90"}`}>
      <div className="flex items-center justify-between font-mono text-[10px] tracking-[.3em] uppercase text-bone/40">
        <span>{m.j} · {m.date}</span>
        {m.win
          ? <span className="text-gold">★ VICTORIA</span>
          : <span className="text-blood">DERROTA</span>}
      </div>
      <div className="mt-3 flex items-center justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className={`font-cond text-base tracking-wide truncate ${lUs ? "text-bone" : "text-bone/60"}`}>{m.local}</div>
          <div className={`font-cond text-base tracking-wide truncate mt-1 ${aUs ? "text-bone" : "text-bone/60"}`}>{m.away}</div>
        </div>
        <div className="text-right tabular">
          <div className={`font-poster text-3xl leading-none ${lUs ? (m.win ? "gold-text" : "ember-text") : "text-bone/50"}`}>{m.ls}</div>
          <div className={`font-poster text-3xl leading-none mt-1 ${aUs ? (m.win ? "gold-text" : "ember-text") : "text-bone/50"}`}>{m.as}</div>
        </div>
      </div>
    </div>
  );
}

window.ChampionsGrid = ChampionsGrid;
window.ElCamino = ElCamino;
window.PartidoAPartido = PartidoAPartido;