/* ============================================================
   SPORTS — featured hero + the real June Matchday watch parties
   (full flyers, ICS reminders, reserve CTAs)
   ============================================================ */
function SportsPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const F = window.PP.FEATURED_SPORT;
  const MD = window.PP.MATCHDAYS || [];

  /* next upcoming matchday (real date math) */
  const now = new Date();
  const todayIso = now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0") + "-" + String(now.getDate()).padStart(2, "0");
  const next = MD.find((m) => m.iso >= todayIso) || MD[MD.length - 1];
  useReveal();

  return (
    <div className="pt-20">
      {/* HERO */}
      <section className="relative min-h-[88vh] flex items-end overflow-hidden">
        <div className="absolute inset-0">
          <Photo src={window.PP.PHOTO(F.img, 1600, 1000)} alt={L(F.title, lang)} className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.45) contrast(1.05)" }} />
          <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/50 to-black/40"></div>
          <div className="absolute inset-0 bg-gradient-to-r from-ink/80 to-transparent"></div>
        </div>
        <div className="container relative z-10 pb-16 md:pb-24">
          <div className="flex items-center gap-3 mb-5">
            <span className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-coral text-white text-[11px] font-bold uppercase tracking-[0.2em]">
              <span className="w-2 h-2 rounded-full bg-white pulse-dot"></span>{t("Next Big Event", "Próximo Gran Evento")}
            </span>
            <span className="label text-white/60">{F.league} {F.num}</span>
          </div>
          <h1 className="text-5xl md:text-8xl font-black uppercase leading-[0.86] mb-5 max-w-4xl">{L(F.title, lang)}</h1>
          <p className="text-gold-soft font-bold tracking-[0.18em] uppercase text-sm mb-2">{L(F.date, lang)}</p>
          {next && <p className="text-white text-lg md:text-xl font-bold mb-2 flex items-center gap-2"><Icon name="trophy" className="w-5 h-5 text-coral" />{t("Next match:", "Próximo partido:")} {next.match} · {L(next.date, lang)} · {next.time}</p>}
          <p className="text-white/65 text-lg max-w-xl mb-8">{L(F.sub, lang)}</p>
          <div className="flex flex-col sm:flex-row gap-4">
            <PrimaryBtn icon="ticket" onClick={() => go("reserve")}>{t("Reserve a watch table", "Reserva mesa para verlo")}</PrimaryBtn>
            {next && <GhostBtn icon="bell" onClick={() => downloadICS(next.match + " — Watch Party · Pink Pony Club", next.iso, next.time)}>{t("Remind me", "Recuérdamelo")}</GhostBtn>}
          </div>
        </div>
      </section>

      {/* SCREENS STRIP */}
      <section className="py-12 bg-ink border-y border-white/8">
        <div className="container grid grid-cols-2 md:grid-cols-4 gap-6">
          {[["tv", "20+", t("4K Screens", "Pantallas 4K")], ["volume-2", "12", t("Audio Zones", "Zonas de Audio")], ["projector", "2", t("Mega Walls", "Mega Muros")], ["armchair", "VIP", t("Ringside Tables", "Mesas Ringside")]].map(([ic, n, l], i) => (
            <div key={i} className="reveal flex items-center gap-4" data-d={(i % 3) + 1}>
              <Icon name={ic} className="w-7 h-7 text-coral" />
              <div><div className="serif text-3xl text-gold-soft leading-none">{n}</div><div className="label text-white/50 text-[10px] mt-1">{l}</div></div>
            </div>
          ))}
        </div>
      </section>

      {/* MATCHDAY SCHEDULE — the real flyers */}
      <section className="py-20 md:py-28">
        <div className="container">
          <div className="reveal mb-9">
            <Eyebrow num="">{t("World Cup · Watch Parties", "Mundial · Watch Parties")}</Eyebrow>
            <Heading className="mt-3">{t(<>Every <span className="serif-it font-normal text-coral">Match</span>, Live</>, <>Cada <span className="serif-it font-normal text-coral">Partido</span>, en Vivo</>)}</Heading>
            <p className="text-white/55 mt-4 max-w-xl">{t("We show every World Cup match live on 20+ 4K screens — group stage through the final. Free lunch on weekdays, bottle specials at night. Below are our featured watch parties — reserve for any game.", "Mostramos cada partido del Mundial en vivo en 20+ pantallas 4K — desde fase de grupos hasta la final. Almuerzo gratis entre semana, especiales de botella en la noche. Abajo están nuestros watch parties destacados — reserva para cualquier partido.")}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-5">
            {MD.map((m, i) => {
              const past = m.iso < todayIso;
              return (
                <div key={i} className={"reveal group rounded-2xl overflow-hidden border bg-card transition-all " + (past ? "border-white/8 opacity-45" : "border-white/10 hover:border-coral/40 hover:-translate-y-1")} data-d={(i % 3) + 1}>
                  <div className="bg-black"><img src={m.img} alt={L(m.alt || { en: m.match, es: m.match }, lang)} loading="lazy" className="w-full h-auto object-contain" /></div>
                  <div className="p-3.5">
                    <div className="font-bold text-sm leading-tight truncate">{m.match}</div>
                    <div className="text-white/45 text-[11px] mt-0.5">{L(m.date, lang)} · {m.time}</div>
                    {!past && (
                      <div className="flex gap-1.5 mt-2.5">
                        <button onClick={() => { try { window.__resvExp = "game"; } catch (e) {} go("reserve"); }} className="flex-1 py-2 rounded-full bg-coral/15 border border-coral/40 text-coral text-[10px] font-bold uppercase tracking-wider hover:bg-coral hover:text-white transition-all">{t("Reserve", "Reservar")}</button>
                        <button onClick={() => downloadICS(m.match + " — Watch Party · Pink Pony Club", m.iso, m.time)} title={t("Add to calendar", "Agregar al calendario")} className="w-9 h-8 rounded-full border border-white/15 text-white/60 hover:text-white hover:bg-white/10 transition-all flex items-center justify-center"><Icon name="calendar-plus" className="w-3.5 h-3.5" /></button>
                      </div>
                    )}
                    {past && <div className="label text-white/35 text-[9px] mt-2">{t("Played", "Jugado")}</div>}
                  </div>
                </div>
              );
            })}
          </div>

          {/* every-match band — all tournament games are shown live */}
          <div className="reveal mt-8 rounded-2xl border border-coral/30 p-6 md:p-7 flex flex-col md:flex-row items-center gap-5 text-center md:text-left" style={{ background: "linear-gradient(120deg,rgba(255,107,91,.12),rgba(147,51,234,.08))" }}>
            <div className="w-12 h-12 rounded-2xl bg-coral/15 border border-coral/40 flex items-center justify-center shrink-0"><Icon name="trophy" className="w-6 h-6 text-coral" /></div>
            <div className="flex-1 min-w-0">
              <h3 className="text-xl md:text-2xl font-black uppercase leading-tight">{t("All 104 matches — live", "Los 104 partidos — en vivo")}</h3>
              <p className="text-white/60 text-sm mt-1">{t("Don't see your team's game above? Every single match of the tournament plays live at Pink Pony. Reserve a table for any fixture and we'll have it on.", "¿No ves el partido de tu equipo arriba? Cada partido del torneo se juega en vivo en Pink Pony. Reserva una mesa para cualquier juego y lo ponemos.")}</p>
            </div>
            <button onClick={() => { try { window.__resvExp = "game"; } catch (e) {} go("reserve"); }} className="gbtn shrink-0 px-6 py-3 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] transition-all inline-flex items-center gap-2">{t("Reserve any match", "Reservar cualquier partido")}<Icon name="arrow-right" className="w-4 h-4" /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SportsPage });