/* ============================================================
   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("Watch Parties", "Watch Parties")}</Eyebrow>
            <Heading className="mt-3">{t(<>June <span className="serif-it font-normal text-coral">Matchdays</span></>, <>Matchdays de <span className="serif-it font-normal text-coral">Junio</span></>)}</Heading>
            <p className="text-white/55 mt-4 max-w-xl">{t("Every match live on 20+ 4K screens — doors open at 12PM, free lunch on weekdays, bottle specials at night.", "Cada partido en vivo en 20+ pantallas 4K — puertas a las 12PM, almuerzo gratis entre semana, especiales de botella en la noche.")}</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={() => 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>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SportsPage });