/* ============================================================
   SPECIAL EVENT — MAURO · Hosting Party
   Thursday August 27 · VENAO / UFF / CHINGONA / LIKIDIKI
   Route: #mauro — landing with RSVP + table reservations on the
   shared venue floor plan (CKFloorPlan from event-chacal.jsx).
   Bookings persist to PPDB.reservations, mirror to the Hub and
   hand off to WhatsApp exactly like every other flow, carrying
   promoter attribution.
   Lifecycle is automatic via the date engine (PP.eventState):
   upcoming → tonight → past (archived, sales closed).
   ============================================================ */

const MAURO = {
  route: "mauro",
  dateISO: "2026-08-27",
  startISO: "2026-08-27T20:00:00-04:00",
  timeLabel: "8:00 PM",
  nightIdx: 3, // Thursday — table minimums follow the Thursday program
  nightName: "MAURO · HOSTING PARTY",
  sets: ["VENAO", "UFF", "CHINGONA", "LIKIDIKI"],
  rsvpTel: "+13053171130",
  rsvpTelDisplay: "(305) 317-1130",
  // official ticket pricing for this night — presale via Eventbrite, cash/card
  // at the door. Drop the Eventbrite listing URL in `tickets.url` and the
  // buttons switch from "request by WhatsApp" to a direct link.
  tickets: { presale: 30, door: 40, url: "https://www.eventbrite.com/e/mauro-official-hosting-party-tickets-1998254001510?aff=oddtdtcreator" },
  // official table minimums for this night, by floor-plan zone
  zones: { top: 2500, vip: 1500, blue: 800, green: 600, red: 600, silver: 1500 },
  // Official artwork. `desktop` is the clean banner (no burned-in copy, so the
  // UI supplies date + CTAs over it); `flyer` is the full-detail piece with the
  // date, sets, phone and address; `piti` is the Mauro x El Piti banner.
  // Any missing file falls back to the CSS recreation automatically.
  art: {
    desktop: ["assets/events/mauro-hero-desktop.webp"],
    story: ["assets/events/mauro-flyer.webp"],
    flyer: ["assets/events/mauro-flyer.webp"],
    piti: ["assets/events/mauro-piti-banner.webp"],
  },
  video: "assets/events/mauro-teaser.mp4",
};

const mrFmt = (n) => "$" + Number(n).toLocaleString("en-US");
function mrState() { try { return window.PP.eventState(MAURO.dateISO); } catch (e) { return "upcoming"; } }
function mrZonePrice(z) { return MAURO.zones[z] || MAURO.zones.green; }
function mrTablePrice(tb) { return mrZonePrice(tb && tb.z); }

/* probe for the real exported artwork (first one that loads wins) */
function useMauroArtAt(list) {
  const [src, setSrc] = useState("");
  useEffect(() => {
    let live = true;
    const tryAt = (i) => {
      if (!live || i >= list.length) return;
      const url = window.__asset ? window.__asset(list[i]) : list[i];
      const im = new Image();
      im.onload = () => { if (live) setSrc(url); };
      im.onerror = () => tryAt(i + 1);
      im.src = url;
    };
    tryAt(0);
    return () => { live = false; };
  }, []);
  return src;
}
/* the clean banner (no burned-in copy) drives the hero; the full-detail flyer
   drives the event cards. Either falls back to the CSS recreation. */
function useMauroArt() { return useMauroArtAt(MAURO.art.desktop); }
function useMauroFlyer() { return useMauroArtAt(MAURO.art.flyer); }
function useMauroPiti() { return useMauroArtAt(MAURO.art.piti); }

/* the composed banner (CSS recreation) — used until the real art lands */
function MauroBannerContent({ compact }) {
  const t = useT();
  return (
    <div className="relative z-10 flex flex-col items-center text-center px-6">
      <div className="label text-white/80 text-[9px] md:text-[12px] mb-3">{t("Hosting Party", "Hosting Party")}</div>
      <h2 className={"ck-chrome " + (compact ? "text-[clamp(3rem,11vw,6rem)]" : "text-[clamp(3.4rem,13vw,9rem)]")}>MAURO</h2>
      <img src={window.__asset ? window.__asset("assets/logo-white.png") : "assets/logo-white.png"} alt="Pink Pony Club"
        className={"object-contain " + (compact ? "h-5 md:h-7 mt-4" : "h-6 md:h-9 mt-5")} loading="eager" />
      <div className={"flex items-center justify-center gap-3 md:gap-4 " + (compact ? "mt-4" : "mt-5")}>
        <span className="ck-hr w-10 md:w-20"></span>
        <span className="font-extrabold uppercase tracking-[0.1em] text-[#FF2E88] text-sm md:text-xl">{t("Thu · Aug 27", "Jue · 27 Ago")}</span>
        <span className="ck-hr w-10 md:w-20"></span>
      </div>
      <div className="label text-white/70 text-[8.5px] md:text-[10.5px] mt-3">{MAURO.sets.join(" · ")}</div>
    </div>
  );
}

/* ---------- hero slide (used inside the home HeroSlides carousel) ---------- */
function MauroHeroSlide({ active, go }) {
  const t = useT();
  const art = useMauroArt();
  return (
    <div className="absolute inset-0">
      {/* The art is 16:9. On a wide viewport it fills the slide edge to edge.
          On a portrait phone a cover crop would cut off both Mauro and the
          logotype, so the art is laid out as a band inside the column while a
          blurred, saturated echo of itself paints the rest of the frame. */}
      {art ? (
        <React.Fragment>
          <img src={art} alt="" aria-hidden="true" className="absolute inset-0 w-full h-full object-cover" style={{ filter: "blur(40px) brightness(.6) saturate(1.6)", transform: "scale(1.35)" }} />
          <div className="absolute inset-0" style={{ background: "radial-gradient(120% 70% at 50% 40%, rgba(255,46,136,.18), transparent 60%)" }}></div>
          {/* contained, never cropped — the wordmark stays whole at every width */}
          <img src={art} alt="Mauro — Hosting Party · August 27 · Pink Pony Club" className="absolute inset-0 w-full h-full object-contain hidden sm:block" style={{ filter: "brightness(.9)" }} />
        </React.Fragment>
      ) : <div className="absolute inset-0 ck-bg" aria-hidden="true"><div className="ck-spot" style={{ left: "8%" }}></div><div className="ck-spot" style={{ right: "8%" }}></div></div>}
      <div className="absolute inset-0" style={{ background: "linear-gradient(to top,#0B0B0C 4%,rgba(11,11,12,.25) 30%,transparent 55%)" }}></div>
      <div className={"relative z-10 h-full container flex flex-col items-center px-6 " + (art ? "justify-center sm:justify-end pb-24 sm:pb-16" : "justify-center text-center")}>
        {/* mobile: the banner itself, complete, with the date line under it */}
        {art && (
          <div className={"w-full sm:hidden text-center transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4")} style={{ transitionDelay: active ? "220ms" : "0ms" }}>
            <img src={art} alt="" aria-hidden="true" className="w-full h-auto rounded-2xl border border-white/10" style={{ boxShadow: "0 26px 70px -18px rgba(0,0,0,.9)" }} />
            <div className="flex items-center justify-center gap-3 mt-6">
              <span className="ck-hr w-10"></span>
              <span className="font-extrabold uppercase tracking-[0.1em] text-[#FF2E88] text-sm">{t("Thu · Aug 27", "Jue · 27 Ago")}</span>
              <span className="ck-hr w-10"></span>
            </div>
            <div className="label text-white/70 text-[8.5px] mt-2.5">{MAURO.sets.join(" · ")}</div>
          </div>
        )}
        {!art && (
          <div className={"transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4")} style={{ transitionDelay: active ? "220ms" : "0ms" }}>
            <MauroBannerContent compact />
          </div>
        )}
        <div className={"flex flex-col sm:flex-row gap-4 justify-center mt-7 sm:mt-0 " + (art ? "" : "mt-8 ") + "transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4")} style={{ transitionDelay: active ? "380ms" : "0ms" }}>
          <button onClick={() => { window.__mauroSection = "floorplan"; go(MAURO.route); }} className="gbtn ck-pink-btn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.18em] transition-all">
            {t("Reserve", "Reservar")} <Icon name="arrow-up-right" className="w-4 h-4" />
          </button>
          <button onClick={() => { window.__mauroSection = "tickets"; go(MAURO.route); }} className="gbtn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full border border-white/25 bg-white/5 backdrop-blur text-white text-[12px] font-bold uppercase tracking-[0.18em] hover:bg-white/12 transition-all">
            <Icon name="ticket" className="w-4 h-4" /> {t("Tickets from $" + MAURO.tickets.presale, "Tickets desde $" + MAURO.tickets.presale)}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- site-wide highlight strip ---------- */
function MauroStrip({ go }) {
  const t = useT();
  const nav = go || window.__ppGo || (() => {});
  if (mrState() === "past") return null;
  const badge = window.PP.eventBadge ? window.PP.eventBadge(MAURO.dateISO, t("en", "es")) : "AUG 27";
  return (
    <button onClick={() => nav(MAURO.route)}
      className="w-full group relative overflow-hidden rounded-2xl border border-[#FF2E88]/40 bg-gradient-to-r from-[#2a0817] via-[#17060e] to-[#2a0817] px-5 py-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-left hover:border-[#FF2E88]/80 transition-all">
      <span className="inline-flex items-center gap-2">
        <span className="w-2 h-2 rounded-full bg-[#FF2E88] ck-pulse"></span>
        <span className="label text-[#FF2E88] text-[10px]">{t("Special Event", "Evento Especial")} · {badge}</span>
      </span>
      <span className="font-black uppercase tracking-tight text-white text-sm md:text-base">MAURO — {t("Hosting Party", "Hosting Party")}</span>
      <span className="text-white/55 text-xs hidden md:inline">{MAURO.sets.join(" · ")}</span>
      <span className="text-white/55 text-xs">{t("Tickets $", "Tickets $") + MAURO.tickets.presale + t(" presale · $", " preventa · $") + MAURO.tickets.door + t(" door", " en puerta")}</span>
      <span className="inline-flex items-center gap-1.5 text-[#FF2E88] text-[11px] font-bold uppercase tracking-[0.16em] group-hover:gap-2.5 transition-all">
        {t("Get tickets", "Comprar")} <Icon name="arrow-right" className="w-3.5 h-3.5" />
      </span>
    </button>
  );
}

/* ---------- featured banner card (Events page · Special tab) ---------- */
function MauroEventBanner({ go }) {
  const t = useT();
  const art = useMauroFlyer();
  const past = mrState() === "past";
  return (
    <div className="relative rounded-2xl overflow-hidden border border-[#FF2E88]/35 mb-6 group cursor-pointer" onClick={() => go(MAURO.route)}>
      {art ? (
        <div className="relative">
          <img src={art} alt="Mauro — Hosting Party · August 27" loading="lazy" className="w-full h-auto block" style={past ? { filter: "grayscale(.85) brightness(.75)" } : undefined} />
          {past && <span className="absolute top-3 left-3 rounded-full bg-black/70 backdrop-blur border border-white/25 px-3.5 py-1.5 label text-white/80 text-[10px]">{t("Past event", "Evento pasado")}</span>}
        </div>
      ) : (
        <div className="relative min-h-[300px] md:min-h-[340px] flex items-center justify-center py-12 ck-bg">
          <MauroBannerContent compact />
        </div>
      )}
      <div className="relative z-10 pt-5 pb-7 flex flex-wrap items-center justify-center gap-3 px-6">
        {past ? (
          <span className="px-6 py-3 rounded-full border border-white/20 text-white/55 text-[11px] font-bold uppercase tracking-[0.14em]">{t("Event ended", "Evento finalizado")}</span>
        ) : (
          <React.Fragment>
            <button onClick={(e) => { e.stopPropagation(); window.__mauroSection = "floorplan"; go(MAURO.route); }} className="gbtn ck-pink-btn px-6 py-3 rounded-full text-white text-[11px] font-bold uppercase tracking-[0.14em]">
              <span className="inline-flex items-center gap-2"><Icon name="map-pin" className="w-4 h-4" />{t("Reserve a table", "Reservar mesa")}</span>
            </button>
            <button onClick={(e) => { e.stopPropagation(); window.__mauroSection = "tickets"; go(MAURO.route); }} className="gbtn px-6 py-3 rounded-full border border-white/25 bg-white/5 text-white text-[11px] font-bold uppercase tracking-[0.14em] hover:bg-white/12">
              <span className="inline-flex items-center gap-2"><Icon name="ticket" className="w-4 h-4" />{t("Tickets from $" + MAURO.tickets.presale, "Tickets desde $" + MAURO.tickets.presale)}</span>
            </button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ---------- countdown ---------- */
function MauroCountdown() {
  const t = useT();
  const [now, setNow] = useState(() => new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  const diff = new Date(MAURO.startISO) - now;
  if (diff <= 0) return null;
  const dd = Math.floor(diff / 86400e3), hh = Math.floor(diff / 3600e3) % 24, mm = Math.floor(diff / 60e3) % 60, ss = Math.floor(diff / 1e3) % 60;
  const cell = (v, lbl) => (
    <div className="text-center min-w-[64px] md:min-w-[80px]">
      <div className="font-black tabular-nums leading-none text-3xl md:text-5xl">{String(v).padStart(2, "0")}</div>
      <div className="label text-white/45 text-[8.5px] md:text-[10px] mt-1.5">{lbl}</div>
    </div>
  );
  return (
    <div className="inline-flex items-center gap-2 md:gap-4 rounded-2xl border border-white/12 bg-black/40 backdrop-blur-md px-4 py-3 md:px-7 md:py-4">
      {cell(dd, t("Days", "Días"))}<span className="text-white/25 text-xl md:text-3xl font-light pb-4">:</span>
      {cell(hh, t("Hrs", "Hrs"))}<span className="text-white/25 text-xl md:text-3xl font-light pb-4">:</span>
      {cell(mm, t("Min", "Min"))}<span className="text-white/25 text-xl md:text-3xl font-light pb-4">:</span>
      {cell(ss, t("Sec", "Seg"))}
    </div>
  );
}

/* ---------- the night: official teaser + the Mauro x El Piti banner ----------
   The teaser is click-to-play (never autoplayed) so nobody on cellular pays
   for a video they didn't ask for. */
function MauroTheNight() {
  const t = useT();
  const hero = useMauroArt();
  const piti = useMauroPiti();
  const [play, setPlay] = useState(false);
  const vid = window.__asset ? window.__asset(MAURO.video) : MAURO.video;
  if (!hero && !piti) return null;
  return (
    <section className="py-14 md:py-20 bg-[#0d0d10] border-y border-white/5">
      <div className="container max-w-4xl">
        <div className="text-center mb-8">
          <Eyebrow>{t("The Night", "La Noche")}</Eyebrow>
          <h3 className="text-3xl md:text-5xl font-black uppercase mt-4">MAURO <span className="serif-it font-normal text-[#FF2E88] lowercase">x</span> EL PITI</h3>
        </div>
        <div className="relative rounded-2xl overflow-hidden border border-white/10 bg-black" style={{ aspectRatio: "16/9" }}>
          {play ? (
            <video src={vid} controls autoPlay playsInline className="absolute inset-0 w-full h-full object-contain bg-black"></video>
          ) : (
            <button onClick={() => setPlay(true)} aria-label={t("Play the teaser", "Reproducir el teaser")} className="absolute inset-0 w-full h-full group">
              <img src={hero || piti} alt="" aria-hidden="true" className="absolute inset-0 w-full h-full object-cover" style={{ filter: "brightness(.55)" }} />
              <span className="absolute inset-0 flex items-center justify-center">
                <span className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[#FF2E88]/90 backdrop-blur flex items-center justify-center shadow-[0_0_40px_rgba(255,46,136,.55)] group-hover:scale-110 transition-transform">
                  <Icon name="play" className="w-7 h-7 md:w-8 md:h-8 text-white" />
                </span>
              </span>
              <span className="absolute bottom-4 left-5 label text-white/80 text-[10px]">{t("Official teaser", "Teaser oficial")}</span>
            </button>
          )}
        </div>
        {piti && (
          <img src={piti} alt="Mauro x El Piti — Pink Pony Club" loading="lazy"
            className="block w-full h-auto rounded-2xl border border-white/10 mt-4" />
        )}
      </div>
    </section>
  );
}

/* ---------- tickets (presale via Eventbrite · cash/card at the door) ----------
   MAURO.tickets.url holds the Eventbrite listing. While it's empty the CTA
   requests tickets through WhatsApp so nobody ever hits a dead link. */
function MauroTickets() {
  const t = useT();
  const eb = (MAURO.tickets.url || "").trim();
  const ask = () => {
    try {
      window.PP.waOpen(
        t("MAURO · Aug 27 — ticket request", "MAURO · 27 Ago — solicitud de tickets"),
        [[t("Event", "Evento"), "MAURO — Hosting Party · Aug 27"],
         [t("Presale", "Preventa"), mrFmt(MAURO.tickets.presale)],
         [t("At the door", "En puerta"), mrFmt(MAURO.tickets.door)]],
        t("Sent from clubpinkpony.com", "Enviado desde clubpinkpony.com"),
      );
    } catch (e) {}
  };
  const card = (label, price, note, hi) => (
    <div className={"rounded-2xl border px-6 py-7 text-center " + (hi ? "border-[#FF2E88]/60 bg-[#FF2E88]/[.07]" : "border-white/12 bg-[#0d0d10]")}>
      <div className={"label text-[10px] " + (hi ? "text-[#FF2E88]" : "text-white/45")}>{label}</div>
      <div className="font-black text-4xl md:text-5xl mt-2.5 tabular-nums">{mrFmt(price)}</div>
      <div className="text-white/45 text-[11.5px] mt-2">{note}</div>
    </div>
  );
  return (
    <section id="mauro-tickets" className="py-16 md:py-20 scroll-mt-24">
      <div className="container max-w-3xl">
        <div className="text-center mb-9 reveal">
          <Eyebrow>{t("Tickets", "Tickets")}</Eyebrow>
          <h3 className="text-3xl md:text-5xl font-black uppercase mt-4">{t(<>Get <span className="serif-it font-normal text-[#FF2E88]">your entry</span></>, <>Consigue <span className="serif-it font-normal text-[#FF2E88]">tu entrada</span></>)}</h3>
          <p className="text-white/50 text-sm mt-3">{t("Presale is the cheapest way in — the price goes up at the door.", "La preventa es la forma más barata de entrar — en puerta el precio sube.")}</p>
        </div>
        <div className="grid grid-cols-2 gap-4 reveal" data-d="1">
          {card(t("Presale", "Preventa"), MAURO.tickets.presale, t("On Eventbrite — while they last", "Por Eventbrite — hasta agotar"), true)}
          {card(t("At the door", "En puerta"), MAURO.tickets.door, t("Aug 27 · subject to capacity", "27 Ago · sujeto a capacidad"))}
        </div>
        <div className="flex flex-col sm:flex-row gap-3 justify-center mt-8 reveal" data-d="2">
          {eb ? (
            <a href={eb} target="_blank" rel="noopener noreferrer" className="gbtn ck-pink-btn inline-flex items-center justify-center gap-2.5 px-8 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em]">
              <Icon name="ticket" className="w-4 h-4" />{t("Buy on Eventbrite", "Comprar por Eventbrite")}
            </a>
          ) : (
            <button onClick={ask} className="gbtn ck-pink-btn inline-flex items-center justify-center gap-2.5 px-8 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em]">
              <Icon name="ticket" className="w-4 h-4" />{t("Request my tickets", "Pedir mis tickets")}
            </button>
          )}
          <a href={"tel:" + MAURO.rsvpTel} className="gbtn inline-flex items-center justify-center gap-2.5 px-8 py-4 rounded-full border border-white/25 bg-white/5 text-white text-[12px] font-bold uppercase tracking-[0.16em] hover:bg-white/12">
            <Icon name="phone" className="w-4 h-4" />{MAURO.rsvpTelDisplay}
          </a>
        </div>
        <p className="text-center text-white/35 text-[11px] mt-5">{t("Tickets cover entry only. Want a guaranteed spot and bottle service? Reserve a table below.", "Los tickets cubren solo la entrada. ¿Quieres lugar garantizado y servicio de botella? Reserva una mesa abajo.")}</p>
      </div>
    </section>
  );
}

/* ---------- booking (table reservation → PPDB + Hub + WhatsApp) ---------- */
function MauroBooking({ sel, setSel }) {
  const t = useT(); const { lang } = useLang();
  const [f, setF] = useState({ name: "", phone: "", email: "", guests: 4, notes: "" });
  const [done, setDone] = useState(null);
  const [promoter] = useState(() => { try { return window.PP.activePromoter ? window.PP.activePromoter() : null; } catch (e) { return null; } });
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const phoneDigits = f.phone.replace(/\D/g, "");
  const valid = f.name.trim() && phoneDigits.length >= 10 && /.+@.+\..+/.test(f.email);
  const total = sel ? mrTablePrice(sel) : 0;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) { window.toast && window.toast(t("Please complete your name, phone and email.", "Completa tu nombre, teléfono y correo."), "error"); return; }
    const phone = "+1" + phoneDigits.slice(-10);
    const what = sel ? (t("Table", "Mesa") + " " + sel.id + " · " + mrFmt(total) + "++") : t("RSVP · host assigns", "RSVP · el host asigna");
    const r = window.PPDB.reservations.add({
      fullName: f.name.trim(), phone, email: f.email.trim(),
      date: MAURO.dateISO, time: MAURO.timeLabel, guests: f.guests,
      experienceId: "mauro-table",
      experienceType: t("Special Event · ", "Evento Especial · ") + "MAURO — Hosting Party",
      night: MAURO.nightIdx, nightName: MAURO.nightName,
      tableId: sel ? sel.id : "",
      price: total, notes: f.notes.trim(), contactPref: "whatsapp",
      promoter: promoter ? promoter.name : "", promoterId: promoter ? promoter.id : "",
      promoterSlug: promoter && window.PP.promoterSlug ? window.PP.promoterSlug(promoter) : "",
      server: "",
    });
    try {
      window.PPHub && window.PPHub.submitReservation && window.PPHub.submitReservation({
        name: f.name.trim(), phone, email: f.email.trim(),
        night: MAURO.nightIdx, date: MAURO.dateISO, time: MAURO.timeLabel, guests: f.guests,
        tableId: sel ? sel.id : "", zone: MAURO.nightName, occasion: what,
        requests: [f.notes.trim(), "Ref " + r.code, "MAURO AUG 27", promoter ? ("Promotor: " + promoter.name) : ""].filter(Boolean).join(" · "),
        priceCents: total * 100,
      });
    } catch (err) {}
    try {
      window.PP.waOpen(
        t("MAURO · Aug 27 — reservation request", "MAURO · 27 Ago — solicitud de reserva"),
        [[t("Name", "Nombre"), f.name.trim()], [t("Phone", "Teléfono"), phone], [t("Email", "Correo"), f.email.trim()],
         [t("Guests", "Personas"), String(f.guests)], [t("Request", "Solicitud"), what], [t("Ref", "Ref"), r.code]],
        t("Sent from clubpinkpony.com", "Enviado desde clubpinkpony.com"),
      );
    } catch (err) {}
    setDone({ r, what, total });
  };

  if (done) return (
    <div className="text-center fade-view">
      <div className="w-16 h-16 rounded-full mx-auto mb-5 flex items-center justify-center bg-[#FF2E88]/15 border border-[#FF2E88]"><Icon name="check" className="w-8 h-8 text-[#FF2E88]" /></div>
      <div className="label text-[#FF2E88] mb-2">{t("Request sent", "Solicitud enviada")} · {done.r.code}</div>
      <h3 className="text-3xl font-black uppercase mb-3">{t("You're on the list", "Estás en la lista")}</h3>
      <p className="text-white/55 text-sm max-w-md mx-auto">{done.what} · {t("Our VIP team confirms your spot by WhatsApp shortly.", "Nuestro equipo VIP confirma tu lugar por WhatsApp en breve.")}</p>
      <a href={"tel:" + MAURO.rsvpTel} className="inline-flex items-center gap-2 mt-6 px-7 py-3.5 rounded-full border border-white/25 bg-white/5 text-white text-[12px] font-bold uppercase tracking-[0.16em] hover:bg-white/12">
        <Icon name="phone" className="w-4 h-4" />{t("Call", "Llamar")} {MAURO.rsvpTelDisplay}
      </a>
    </div>
  );

  const inp = "w-full bg-[#0d0d10] border border-white/12 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-[#FF2E88] transition-colors";
  return (
    <form onSubmit={submit} className="space-y-3.5">
      <div className="rounded-xl border border-white/12 bg-[#0d0d10] px-4 py-3 flex items-center justify-between">
        <span className="text-white/55 text-[12px]">{sel ? t("Table", "Mesa") + " " + sel.id : t("No table selected — host assigns", "Sin mesa — el host asigna")}</span>
        {sel ? <span className="font-black text-[#FF2E88]">{mrFmt(total)}++</span> : <span className="text-white/35 text-[11px]">{t("pick one below", "elige una abajo")}</span>}
      </div>
      <input value={f.name} onChange={(e) => set("name", e.target.value)} placeholder={t("Full name", "Nombre completo")} className={inp} />
      <div className="grid grid-cols-2 gap-3">
        <input value={f.phone} onChange={(e) => set("phone", e.target.value)} placeholder={t("Phone", "Teléfono")} inputMode="tel" className={inp} />
        <input value={f.email} onChange={(e) => set("email", e.target.value)} placeholder={t("Email", "Correo")} inputMode="email" className={inp} />
      </div>
      <div className="flex items-center gap-3">
        <span className="label text-white/45 text-[10px] shrink-0">{t("Guests", "Personas")}</span>
        <button type="button" onClick={() => set("guests", Math.max(1, f.guests - 1))} className="w-10 h-10 rounded-xl bg-[#0d0d10] border border-white/12 text-white active:scale-90 transition-transform">−</button>
        <span className="serif text-2xl w-10 text-center">{f.guests}</span>
        <button type="button" onClick={() => set("guests", Math.min(30, f.guests + 1))} className="w-10 h-10 rounded-xl bg-[#0d0d10] border border-white/12 text-white active:scale-90 transition-transform">+</button>
      </div>
      <textarea value={f.notes} onChange={(e) => set("notes", e.target.value)} rows="2" placeholder={t("Anything we should know?", "¿Algo que debamos saber?")} className={inp}></textarea>
      <button type="submit" className="gbtn ck-pink-btn w-full py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em] flex items-center justify-center gap-2.5">
        <Icon name="sparkles" className="w-4 h-4" />{t("Send my request", "Enviar mi solicitud")}
      </button>
      <p className="text-center text-white/35 text-[11px]">{t("No charge today — our team confirms availability first.", "Sin cargo hoy — nuestro equipo confirma disponibilidad primero.")}</p>
    </form>
  );
}

/* ---------- landing page (route #mauro) ---------- */
function MauroLandingPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const past = mrState() === "past";
  const art = useMauroFlyer();
  const [sel, setSel] = useState(null);
  useReveal(lang + "-" + (sel ? sel.id : ""));

  /* deep-link from the hero banner buttons → scroll to the right module */
  useEffect(() => {
    const target = window.__mauroSection; delete window.__mauroSection;
    if (!target || past) return;
    const id = target === "floorplan" ? "mauro-floorplan" : target === "tickets" ? "mauro-tickets" : "mauro-booking";
    const tm = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 320);
    return () => clearTimeout(tm);
  }, [past]);

  useEffect(() => {
    const prev = document.title;
    document.title = "MAURO · Hosting Party — Aug 27 · Pink Pony Club Miami";
    const ld = document.createElement("script");
    ld.type = "application/ld+json";
    ld.text = JSON.stringify({
      "@context": "https://schema.org", "@type": "MusicEvent", name: "MAURO — Hosting Party",
      startDate: MAURO.startISO, eventStatus: "https://schema.org/EventScheduled",
      location: { "@type": "Place", name: "Pink Pony Club", address: { "@type": "PostalAddress", streetAddress: "7971 NW 33rd St", addressLocality: "Doral", addressRegion: "FL", postalCode: "33122", addressCountry: "US" } },
      performer: { "@type": "Person", name: "Mauro" },
      url: "https://www.clubpinkpony.com/#mauro",
    });
    document.head.appendChild(ld);
    return () => { document.title = prev; try { document.head.removeChild(ld); } catch (e) {} };
  }, []);

  const infoChip = (ic, top, sub) => (
    <div className="flex items-center gap-3.5 rounded-2xl border border-white/12 bg-black/40 backdrop-blur px-5 py-4">
      <span className="w-10 h-10 rounded-full bg-[#FF2E88]/15 border border-[#FF2E88]/40 flex items-center justify-center shrink-0"><Icon name={ic} className="text-[#FF2E88]" style={{ width: 18, height: 18 }} /></span>
      <div className="text-left"><div className="font-bold text-sm leading-tight">{top}</div><div className="text-white/50 text-xs mt-0.5">{sub}</div></div>
    </div>
  );

  return (
    <div className="pb-24">
      {/* ============ HERO ============ */}
      <section className={"relative flex flex-col items-center overflow-hidden pt-24 pb-14 " + (art ? "" : "min-h-[100svh] justify-center ck-bg")}>
        {!art && <><div className="ck-spot" style={{ left: "8%" }}></div><div className="ck-spot" style={{ right: "8%" }}></div></>}
        <div className="relative z-10 w-full container flex flex-col items-center text-center">
          {art ? (
            <img src={art} alt="MAURO — Hosting Party · August 27 · Pink Pony Club"
              className="block w-full max-w-md md:max-w-4xl mb-9 h-auto rounded-2xl border border-white/10 shadow-2xl" />
          ) : (
            <>
              <div className="inline-flex items-center gap-2.5 rounded-full border border-[#FF2E88]/50 bg-[#FF2E88]/10 backdrop-blur-md px-4 py-2 mb-6">
                <span className="w-1.5 h-1.5 rounded-full pulse-dot" style={{ background: "#FF2E88" }}></span>
                <span className="label text-[9.5px] md:text-[11px] text-white">{t("Special Event · One Night Only", "Evento Especial · Solo Una Noche")}</span>
              </div>
              <MauroBannerContent />
            </>
          )}
          {past ? (
            <div className="inline-flex flex-col items-center gap-2.5">
              <span className="inline-flex items-center gap-2.5 rounded-full border border-white/20 bg-white/5 backdrop-blur px-6 py-2.5">
                <Icon name="calendar-days" className="w-4 h-4 text-white/45" />
                <span className="label text-white/70 text-[11px]">{t("PAST EVENT", "EVENTO PASADO")} · {t("Thursday Aug 27, 2026", "Jueves 27 Ago 2026")}</span>
              </span>
            </div>
          ) : <MauroCountdown />}
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-9">
            {past ? (
              <>
                <button onClick={() => go("events")} className="gbtn ck-pink-btn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.18em]">
                  <Icon name="calendar-days" className="w-4 h-4" /> {t("See what's next", "Mira lo que viene")}
                </button>
                <button onClick={() => go("reserve")} className="gbtn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full border border-white/25 bg-white/5 backdrop-blur text-white text-[12px] font-bold uppercase tracking-[0.18em] hover:bg-white/12">
                  <Icon name="map-pin" className="w-4 h-4" /> {t("Reserve a table", "Reservar mesa")}
                </button>
              </>
            ) : (
              <>
                <button onClick={() => { const el = document.getElementById("mauro-floorplan"); if (el) el.scrollIntoView({ behavior: "smooth" }); }} className="gbtn ck-pink-btn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.18em]">
                  <Icon name="sparkles" className="w-4 h-4" /> {t("Reserve a table", "Reservar mesa")}
                </button>
                <button onClick={() => { const el = document.getElementById("mauro-tickets"); if (el) el.scrollIntoView({ behavior: "smooth" }); }} className="gbtn inline-flex items-center justify-center gap-2.5 px-9 py-4 rounded-full border border-white/25 bg-white/5 backdrop-blur text-white text-[12px] font-bold uppercase tracking-[0.18em] hover:bg-white/12">
                  <Icon name="ticket" className="w-4 h-4" /> {t("Tickets from $" + MAURO.tickets.presale, "Tickets desde $" + MAURO.tickets.presale)}
                </button>
              </>
            )}
          </div>
          <div className="grid sm:grid-cols-3 gap-3 mt-10 w-full max-w-3xl">
            {infoChip("calendar-days", t("Thursday, August 27", "Jueves 27 de Agosto"), t("21+ with valid ID", "21+ con ID vigente"))}
            {infoChip("map-pin", "Pink Pony Club", "7971 NW 33rd St, Doral FL")}
            {infoChip("phone", "RSVP " + MAURO.rsvpTelDisplay, t("or WhatsApp us", "o escríbenos por WhatsApp"))}
          </div>
        </div>
      </section>

      {/* ============ ticker ============ */}
      <div className="relative border-y border-[#FF2E88]/25 bg-[#17060e] py-4 overflow-hidden">
        <div className="marquee">
          {["a", "b"].map((key) => (
            <div key={key} className="flex shrink-0 items-center">
              {MAURO.sets.concat(["MAURO", "HOSTING PARTY"]).map((it, i) => (
                <span key={i} className="flex items-center">
                  <span className="px-7 text-base font-bold uppercase tracking-[0.2em] text-white/75">{it}</span>
                  <span className="text-[#FF2E88]">✦</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>

      {past ? (
        <section className="py-16 md:py-20 bg-[#0d0d10] border-y border-white/5">
          <div className="container max-w-2xl text-center">
            <Icon name="calendar-check" className="w-8 h-8 mx-auto mb-4 text-white/30" />
            <h2 className="text-2xl md:text-3xl font-black uppercase mb-3">{t("This event already happened", "Este evento ya pasó")}</h2>
            <p className="text-white/55 mb-7">{t("RSVPs and table reservations for this night are closed. Check what's coming or lock a table for any night.", "Los RSVP y reservas de mesa para esta noche están cerrados. Mira lo que viene o asegura tu mesa cualquier noche.")}</p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <button onClick={() => go("events")} className="gbtn ck-pink-btn px-7 py-3.5 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em]">{t("Upcoming events", "Próximos eventos")}</button>
              <button onClick={() => go("reserve")} className="gbtn px-7 py-3.5 rounded-full border border-white/25 bg-white/5 text-white text-[12px] font-bold uppercase tracking-[0.16em] hover:bg-white/12">{t("Reserve a table", "Reservar mesa")}</button>
            </div>
          </div>
        </section>
      ) : (
        <>
          {/* ============ THE NIGHT — teaser + Mauro x El Piti ============ */}
          <MauroTheNight />

          {/* ============ TICKETS ============ */}
          <MauroTickets />

          {/* ============ BOOKING ============ */}
          <section id="mauro-booking" className="py-16 md:py-20 bg-[#0d0d10] border-y border-white/5 scroll-mt-24">
            <div className="container">
              <div className="text-center mb-10 reveal">
                <Eyebrow>{t("RSVP", "RSVP")}</Eyebrow>
                <h3 className="text-3xl md:text-5xl font-black uppercase mt-4">{t(<>Lock in <span className="serif-it font-normal text-[#FF2E88]">your night</span></>, <>Asegura <span className="serif-it font-normal text-[#FF2E88]">tu noche</span></>)}</h3>
                <p className="text-white/50 text-sm mt-3 max-w-xl mx-auto">{t("Send your request and our VIP team confirms by WhatsApp. Pick a table below or let the host assign the best spot for your group.", "Envía tu solicitud y nuestro equipo VIP confirma por WhatsApp. Elige una mesa abajo o deja que el host asigne el mejor lugar para tu grupo.")}</p>
              </div>
              <div className="max-w-2xl mx-auto"><MauroBooking sel={sel} setSel={setSel} /></div>
            </div>
          </section>

          {/* ============ FLOOR PLAN (shared venue map) ============ */}
          <section id="mauro-floorplan" className="py-16 md:py-24 scroll-mt-24">
            <div className="container">
              <div className="text-center mb-10 reveal">
                <Eyebrow>{t("Event Floor Plan", "Plano del Evento")}</Eyebrow>
                <h3 className="text-3xl md:text-5xl font-black uppercase mt-4">{t(<>Pick <span className="serif-it font-normal text-[#FF2E88]">your table</span></>, <>Elige <span className="serif-it font-normal text-[#FF2E88]">tu mesa</span></>)}</h3>
                <p className="text-white/50 text-sm mt-3 max-w-xl mx-auto">{t("Tap any table to see its minimum spend and add it to your request.", "Toca cualquier mesa para ver su consumo mínimo y agregarla a tu solicitud.")}</p>
              </div>
              {window.CKFloorPlan && (
                <window.CKFloorPlan sel={sel} onPick={(tb) => { setSel(tb); const el = document.getElementById("mauro-booking"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}
                  priceOf={mrTablePrice} soldOf={() => false} zoneFrom={mrZonePrice} hideSoldLegend />
              )}
              <div className="flex flex-wrap justify-center gap-2.5 mt-8">
                {[[t("Small table", "Mesa pequeña"), MAURO.zones.green],
                  [t("Standard · Blue", "Standard · Blue"), MAURO.zones.blue],
                  [t("VIP Lounge", "VIP Lounge"), MAURO.zones.vip],
                  [t("Second floor", "Segundo piso"), MAURO.zones.silver],
                  [t("Table Tops", "Table Tops"), MAURO.zones.top]].map(([lbl, p], i) => (
                  <span key={i} className="inline-flex items-baseline gap-2 rounded-full border border-white/12 bg-white/[.03] px-4 py-2">
                    <span className="label text-white/55 text-[9.5px]">{lbl}</span>
                    <span className="font-black text-[#FF2E88] text-sm">{mrFmt(p)}++</span>
                  </span>
                ))}
              </div>
              <div className="text-center mt-6 text-white/45 text-xs">
                {t("Prices are minimum spend ++ (tax & service). Table includes express entry for your group — our host confirms details.", "Los precios son consumo mínimo ++ (impuestos y servicio). La mesa incluye entrada express para tu grupo — el host confirma los detalles.")}
              </div>
            </div>
          </section>
        </>
      )}
    </div>
  );
}

Object.assign(window, { MAURO, MauroHeroSlide, MauroStrip, MauroEventBanner, MauroTheNight, MauroTickets, MauroLandingPage });