/* ============================================================
   SPECIAL EVENT — CHACAL & YAKARTA · Official Release Party
   Thursday July 30 · "Baby's on Fire" · Doors 8PM
   Route: #chacal — full landing with tickets ($50 presale /
   $100 day-of) + table reservations on the event floor plan.
   Bookings persist to PPDB.reservations, mirror to the Hub
   (PPHub.submitReservation) and hand off to WhatsApp (PP.waOpen)
   exactly like the main reservation flow.
   ============================================================ */

const CK = {
  route: "chacal",
  dateISO: "2026-07-30",
  startISO: "2026-07-30T20:00:00-04:00", // doors 8PM Miami
  timeLabel: "8:00 PM",
  nightIdx: 3, // Thursday
  nightName: "CHACAL & YAKARTA · RELEASE PARTY",
  presale: 50,
  door: 100,
  tableFrom: 1200,
  rsvpTel: "+13053171130",
  rsvpTelDisplay: "(305) 317-1130",
  ig: "https://www.instagram.com/p/DawXCqcu19s/",
  // Drop the real exported artwork at these paths (webp/jpg/png — first one
  // found wins) and the UI switches to it automatically (see
  // web/assets/events/README.md). Until then the banner renders as a
  // faithful CSS recreation.
  art: {
    desktop: ["webp", "jpg", "jpeg", "png"].map((e) => "assets/events/chacal-yakarta-hero-desktop." + e),
    story: ["webp", "jpg", "jpeg", "png"].map((e) => "assets/events/chacal-yakarta-hero-story." + e),
  },
};

/* ---------- event-night floor plan (from the official flyer) ---------- */
const CK_ZONES = {
  top:    { name: { en: "Table Tops", es: "Table Tops" },      color: "#FF2E88", from: 1200 },
  vip:    { name: { en: "VIP Lounge", es: "VIP Lounge" },      color: "#8B5CF6", from: 2500 },
  blue:   { name: { en: "Blue", es: "Blue" },                  color: "#3B82F6", from: 3000 },
  green:  { name: { en: "Green", es: "Green" },                color: "#22C55E", from: 4500 },
  red:    { name: { en: "Red · Premium", es: "Red · Premium" },color: "#EF4444", from: 5000 },
  silver: { name: { en: "Second Floor", es: "Segundo Piso" },  color: "#B7BCCB", from: 2500 },
};

/* x/y = center %, w/h = size % of each floor panel */
const CK_TABLES = [
  // ---- main floor ----
  { id: "BV1",     z: "top",   price: 1500, floor: "main", x: 36, y: 9,  w: 10, h: 12, shape: "diamond" },
  { id: "40",      z: "green", price: 4500, floor: "main", x: 50, y: 8,  w: 12, h: 9 },
  { id: "41",      z: "green", price: 4500, floor: "main", x: 63, y: 8,  w: 12, h: 9 },
  { id: "42",      z: "green", price: 4500, floor: "main", x: 76, y: 8,  w: 12, h: 9 },
  { id: "43",      z: "blue",  price: 4000, floor: "main", x: 52, y: 19, w: 11, h: 7.5 },
  { id: "44",      z: "blue",  price: 4000, floor: "main", x: 76, y: 19, w: 11, h: 7.5 },
  { id: "20",      z: "green", price: 4500, floor: "main", x: 5,  y: 32, w: 8,  h: 14 },
  { id: "21",      z: "green", price: 4500, floor: "main", x: 5,  y: 50, w: 8,  h: 14, sold: true },
  { id: "VIP 1",   z: "vip",   price: 2500, floor: "main", x: 24, y: 30, w: 12, h: 13.5, shape: "diamond" },
  { id: "VIP 2",   z: "vip",   price: 2500, floor: "main", x: 24, y: 47.5, w: 12, h: 13.5, shape: "diamond", sold: true },
  { id: "VIP 3",   z: "vip",   price: 2500, floor: "main", x: 24, y: 65, w: 12, h: 13.5, shape: "diamond" },
  { id: "30",      z: "blue",  price: 3000, floor: "main", x: 34.5, y: 37, w: 7, h: 13 },
  { id: "31",      z: "blue",  price: 3000, floor: "main", x: 34.5, y: 56, w: 7, h: 13 },
  { id: "Stage 2", z: "top",   price: 1200, floor: "main", x: 48, y: 35, w: 8.5, h: 10, shape: "diamond" },
  { id: "Stage 1", z: "top",   price: 1200, floor: "main", x: 63, y: 34, w: 11, h: 7 },
  { id: "107",     z: "top",   price: 1200, floor: "main", x: 58, y: 58, w: 9,  h: 7 },
  { id: "22",      z: "red",   price: 5000, floor: "main", x: 6.5, y: 73, w: 11, h: 17 },
  { id: "32",      z: "blue",  price: 3000, floor: "main", x: 39, y: 69, w: 11, h: 7.5 },
  { id: "33",      z: "blue",  price: 3000, floor: "main", x: 57, y: 69, w: 11, h: 7.5 },
  { id: "23",      z: "green", price: 4500, floor: "main", x: 23, y: 81, w: 12, h: 7.5 },
  { id: "24",      z: "green", price: 4500, floor: "main", x: 43, y: 81, w: 12, h: 7.5 },
  { id: "25",      z: "green", price: 4500, floor: "main", x: 63, y: 81, w: 12, h: 7.5 },
  // ---- second floor ----
  { id: "200", z: "silver", price: 4000, floor: "second", x: 22, y: 12, w: 32, h: 6.5 },
  { id: "201", z: "silver", price: 4000, floor: "second", x: 22, y: 23, w: 32, h: 6.5 },
  { id: "202", z: "silver", price: 4000, floor: "second", x: 22, y: 34, w: 32, h: 6.5, sold: true },
  { id: "203", z: "silver", price: 4000, floor: "second", x: 22, y: 45, w: 32, h: 6.5 },
  { id: "204", z: "silver", price: 4000, floor: "second", x: 22, y: 56, w: 32, h: 6.5 },
  { id: "205", z: "silver", price: 4000, floor: "second", x: 22, y: 67, w: 32, h: 6.5 },
  { id: "300", z: "silver", price: 4000, floor: "second", x: 64, y: 14, w: 28, h: 6.5 },
  { id: "301", z: "silver", price: 4000, floor: "second", x: 64, y: 36, w: 28, h: 6.5 },
  { id: "206", z: "silver", price: 2500, floor: "second", x: 80, y: 91, w: 28, h: 6 },
];

/* ---------- one-time CSS ---------- */
(function injectCKStyles() {
  if (document.getElementById("ck-css")) return;
  const s = document.createElement("style");
  s.id = "ck-css";
  s.textContent = `
  .ck-bg{background:
    radial-gradient(58% 90% at 50% 0%, rgba(255,46,136,.10), transparent 60%),
    radial-gradient(45% 70% at 10% 100%, rgba(255,46,136,.13), transparent 65%),
    radial-gradient(45% 70% at 90% 100%, rgba(255,46,136,.13), transparent 65%),
    linear-gradient(180deg,#0a0a0b 0%,#101014 55%,#17060e 100%)}
  .ck-chrome{font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.01em;
    background:linear-gradient(180deg,#fdfdfd 0%,#e8e9ee 28%,#b9bcc8 44%,#6f7280 50%,#e6e8ef 56%,#f8f9fb 72%,#9a9daa 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 20px rgba(255,46,136,.28))}
  .ck-amp{font-weight:800;background:linear-gradient(180deg,#fff,#8e93a1);-webkit-background-clip:text;background-clip:text;color:transparent}
  .ck-fire{display:inline-block;font-style:italic;font-weight:900;text-transform:uppercase;transform:rotate(-4deg) skewX(-8deg);
    background:linear-gradient(180deg,#ff6a3d 0%,#e01c2e 55%,#8f0f1d 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em;line-height:.9;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(224,28,46,.5))}
  .ck-spot{position:absolute;top:0;width:34%;height:70%;pointer-events:none;
    background:radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,.09), transparent 70%)}
  .ck-sep{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,#FF2E88,transparent)}
  .ck-hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,46,136,.8),transparent)}
  .ck-pink-btn{background:linear-gradient(90deg,#FF2E88,#D9166F);box-shadow:0 8px 30px rgba(255,46,136,.4)}
  .ck-pink-btn:hover{filter:brightness(1.1)}
  .ck-table{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:6px;border:1px solid;cursor:pointer;transition:all .25s;line-height:1.05;padding:1px}
  .ck-table:hover:not(:disabled){filter:brightness(1.35);z-index:5}
  .ck-table:disabled{cursor:not-allowed}
  .ck-table.ck-sel{z-index:6;box-shadow:0 0 0 2px #fff,0 0 24px rgba(255,46,136,.8);filter:brightness(1.25)}
  .ck-diamond{border-radius:10%;transform:translate(-50%,-50%) rotate(45deg)}
  .ck-diamond>span{transform:rotate(-45deg)}
  .ck-diamond.ck-sel{box-shadow:0 0 0 2px #fff,0 0 24px rgba(255,46,136,.8)}
  .ck-sold-ribbon{position:absolute;inset:auto;left:-8%;right:-8%;top:50%;transform:translateY(-50%) rotate(-8deg);
    background:#dc2626;color:#fff;font-size:8px;font-weight:800;letter-spacing:.18em;text-align:center;padding:1px 0;border-radius:2px;pointer-events:none}
  .ck-decor{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.5);letter-spacing:.22em;font-weight:700;text-transform:uppercase;pointer-events:none}
  @keyframes ckPulse{0%,100%{opacity:1}50%{opacity:.55}}
  .ck-pulse{animation:ckPulse 2.2s ease-in-out infinite}
  `;
  document.head.appendChild(s);
})();

/* probe for the real exported artwork (first extension that loads wins);
   falls back to the CSS recreation while none exists */
function useCKArt(srcs) {
  const [src, setSrc] = useState("");
  useEffect(() => {
    let live = true;
    const list = Array.isArray(srcs) ? srcs : [srcs];
    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; };
  }, [Array.isArray(srcs) ? srcs.join("|") : srcs]);
  return src;
}

const ckFmt = (n) => "$" + Number(n).toLocaleString("en-US");

/* is the presale rate still on? ($50 until the day of the event, then $100) */
function ckPresaleOn(now) {
  const d = now || new Date();
  return d < new Date(CK.dateISO + "T00:00:00-04:00");
}
function ckTicketPrice() { return ckPresaleOn() ? CK.presale : CK.door; }

/* ---------- countdown ---------- */
function CKCountdown({ compact }) {
  const t = useT();
  const [now, setNow] = useState(() => new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  const target = new Date(CK.startISO);
  const diff = target - now;
  if (diff <= 0) {
    if (now - target < 10 * 3600e3) return (
      <div className="inline-flex items-center gap-2.5 rounded-full border border-[#FF2E88]/60 bg-[#FF2E88]/15 px-5 py-2.5">
        <span className="w-2 h-2 rounded-full bg-[#FF2E88] ck-pulse"></span>
        <span className="label text-white text-[11px]">{t("Tonight — doors open 8PM", "Esta noche — puertas 8PM")}</span>
      </div>
    );
    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 " + (compact ? "min-w-[52px]" : "min-w-[64px] md:min-w-[80px]")}>
      <div className={"font-black tabular-nums leading-none " + (compact ? "text-2xl" : "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>
  );
}

/* ---------- banner artwork (CSS recreation · swaps to real files when present) ---------- */
function CKArt({ mode }) {
  // mode: "hero" (in-slider / landing) — text sizes scale with viewport
  const t = useT();
  const deskSrc = useCKArt(CK.art.desktop);
  const storySrc = useCKArt(CK.art.story);
  if (deskSrc || storySrc) {
    return (
      <picture>
        {storySrc && <source media="(max-width: 640px)" srcSet={storySrc} />}
        <img src={deskSrc || storySrc}
          alt="Chacal & Yakarta — Official Release Party · July 30 · Pink Pony Club"
          className="absolute inset-0 w-full h-full object-cover" style={{ filter: "brightness(.9)" }} />
      </picture>
    );
  }
  return (
    <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>
  );
}

/* the composed banner content (logo · date · chrome names · fire mark · doors) */
function CKBannerContent({ compact, hideLogo }) {
  const t = useT();
  return (
    <div className="relative z-10 flex flex-col items-center text-center px-6">
      {!hideLogo && (
        <img src={window.__asset ? window.__asset("assets/logo-white.png") : "assets/logo-white.png"} alt="Pink Pony Club"
          className={"object-contain " + (compact ? "h-6 md:h-8 mb-5" : "h-7 md:h-10 mb-6")} loading="eager" />
      )}
      <div className={"flex items-center justify-center gap-4 md:gap-6 " + (compact ? "mb-4" : "mb-6")}>
        <div className="text-right">
          <div className="label text-white/80 text-[9px] md:text-[12px]">{t("Thursday", "Jueves")}</div>
          <div className="font-black leading-[.85] text-[#FF2E88] text-4xl md:text-6xl">30</div>
          <div className="label text-white text-[9px] md:text-[12px]">{t("July", "Julio")}</div>
        </div>
        <div className="ck-sep"></div>
        <div className="text-left font-extrabold uppercase tracking-[0.12em] text-[#FF2E88] text-base md:text-2xl leading-tight">
          Official<br />Release Party
        </div>
      </div>
      <h2 className="ck-chrome text-[clamp(2.6rem,9.5vw,7.5rem)]">
        Chacal <span className="ck-amp text-[clamp(1.5rem,5vw,4rem)] align-middle">&amp;</span> Yakarta
      </h2>
      <div className={compact ? "mt-2" : "mt-3"}>
        <span className="ck-fire text-[clamp(1.4rem,4vw,2.9rem)]">Baby's on Fire</span>
      </div>
      <div className={"flex items-center gap-4 text-white/75 " + (compact ? "mt-5" : "mt-7")}>
        <span className="ck-hr w-16 md:w-28"></span>
        <span className="label text-[9px] md:text-[11px]">{t("Doors open at 8PM", "Puertas abren 8PM")}</span>
        <span className="ck-hr w-16 md:w-28"></span>
      </div>
    </div>
  );
}

/* ---------- hero slide (used inside the home HeroSlides carousel) ---------- */
function CKHeroSlide({ active, go }) {
  const t = useT();
  return (
    <div className="absolute inset-0">
      <CKArt mode="hero" />
      <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 justify-center text-center px-6">
        <div className={"inline-flex items-center gap-2.5 rounded-full border backdrop-blur-md px-4 py-2 mb-5 transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3")}
          style={{ borderColor: "#FF2E8866", background: "#FF2E8814", transitionDelay: active ? "150ms" : "0ms" }}>
          <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 · Live on Stage", "Evento Especial · En Vivo")}</span>
        </div>
        <div className={"transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4")} style={{ transitionDelay: active ? "220ms" : "0ms" }}>
          <CKBannerContent compact hideLogo />
        </div>
        <div className={"flex flex-col sm:flex-row gap-4 justify-center mt-8 transition-all duration-700 " + (active ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4")} style={{ transitionDelay: active ? "380ms" : "0ms" }}>
          <button onClick={() => go(CK.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 Now", "Reserva Ya")} <Icon name="arrow-up-right" className="w-4 h-4" />
          </button>
          <button onClick={() => { window.__ckSection = "tickets"; go(CK.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 $50", "Tickets desde $50")}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- site-wide highlight strip (events / reserve pages) ---------- */
function CKStrip({ go }) {
  const t = useT();
  const nav = go || window.__ppGo || (() => {});
  return (
    <button onClick={() => nav(CK.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 · Jul 30", "Evento Especial · 30 Jul")}</span>
      </span>
      <span className="font-black uppercase tracking-tight text-white text-sm md:text-base">CHACAL &amp; YAKARTA — {t("Official Release Party", "Official Release Party")}</span>
      <span className="text-white/55 text-xs hidden md:inline">{t("Tickets $50 · Tables from $1200++", "Tickets $50 · Mesas desde $1200++")}</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("Reserve", "Reservar")} <Icon name="arrow-right" className="w-3.5 h-3.5" />
      </span>
    </button>
  );
}

/* ---------- featured banner card (Events page · Special tab) ---------- */
function CKEventBanner({ go }) {
  const t = useT();
  return (
    <div className="relative rounded-2xl overflow-hidden border border-[#FF2E88]/35 mb-6 group cursor-pointer" onClick={() => go(CK.route)}>
      <div className="relative min-h-[340px] md:min-h-[380px] flex items-center justify-center py-12">
        <CKArt mode="hero" />
        <div className="relative z-10"><CKBannerContent compact /></div>
      </div>
      <div className="relative z-10 -mt-2 pb-7 flex flex-wrap items-center justify-center gap-3 px-6">
        <button onClick={(e) => { e.stopPropagation(); window.__ckSection = "tickets"; go(CK.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="ticket" className="w-4 h-4" />{t("Tickets $50", "Tickets $50")}</span>
        </button>
        <button onClick={(e) => { e.stopPropagation(); window.__ckSection = "floorplan"; go(CK.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="map-pin" className="w-4 h-4" />{t("Tables from $1200++", "Mesas desde $1200++")}</span>
        </button>
      </div>
    </div>
  );
}

/* ---------- interactive floor plan ---------- */
function CKTableBtn({ tb, sel, onPick }) {
  const t = useT();
  const zone = CK_ZONES[tb.z];
  const isSel = sel && sel.id === tb.id;
  const style = {
    left: tb.x + "%", top: tb.y + "%", width: tb.w + "%", height: tb.h + "%",
    borderColor: tb.sold ? "#7f1d1d" : zone.color + "AA",
    background: tb.sold ? "#7f1d1d33" : zone.color + "26",
    color: tb.sold ? "rgba(255,255,255,.45)" : "#fff",
  };
  return (
    <button type="button" disabled={tb.sold} onClick={() => onPick(tb)}
      aria-label={tb.sold ? tb.id + " — " + t("sold out", "agotada") : t("Table", "Mesa") + " " + tb.id + " — " + ckFmt(tb.price) + "++"}
      className={"ck-table " + (tb.shape === "diamond" ? "ck-diamond " : "") + (isSel ? "ck-sel" : "")} style={style}>
      <span className="flex flex-col items-center justify-center">
        <span className="font-extrabold text-[9px] md:text-[11px] tracking-wide">{tb.id}</span>
        <span className="text-[7.5px] md:text-[9.5px] font-semibold" style={{ color: tb.sold ? "rgba(255,255,255,.4)" : zone.color, filter: "brightness(1.5)" }}>{ckFmt(tb.price)}</span>
      </span>
      {tb.sold && <span className="ck-sold-ribbon">{t("SOLD", "VENDIDA")}</span>}
    </button>
  );
}

function CKFloorPlan({ sel, onPick }) {
  const t = useT(); const { lang } = useLang();
  const main = CK_TABLES.filter((x) => x.floor === "main");
  const second = CK_TABLES.filter((x) => x.floor === "second");
  const panelCls = "relative rounded-2xl border border-[#FF2E88]/35 bg-[#101013] overflow-hidden";
  return (
    <div>
      <div className="grid grid-cols-1 lg:grid-cols-10 gap-5">
        {/* main floor */}
        <div className="lg:col-span-7">
          <div className="label text-white/50 text-[10px] mb-2.5">{t("Main Floor", "Piso Principal")}</div>
          <div className={panelCls} style={{ aspectRatio: "6/5" }}>
            {/* decor */}
            <div className="ck-decor rounded-lg border border-white/15 bg-white/5 text-[8px] md:text-[10px]" style={{ left: "14%", top: "5%", width: "26%", height: "9%" }}>{t("Main Bar", "Barra Principal")}</div>
            <div className="absolute rounded-lg border border-white/12" style={{ left: "42%", top: "1.5%", width: "52%", height: "13%" }}></div>
            {/* stage — guitar silhouette */}
            <div className="absolute rounded-full border border-[#FF2E88]/40 bg-[#FF2E88]/10 flex items-center justify-center" style={{ left: "36%", top: "37%", width: "22%", height: "22%" }}>
              <span className="label text-[#FF2E88]/80 text-[8px] md:text-[10px]">{t("Stage", "Tarima")}</span>
            </div>
            <div className="absolute rounded-r-full border border-[#FF2E88]/40 bg-[#FF2E88]/10" style={{ left: "55%", top: "42.5%", width: "33%", height: "11%" }}></div>
            <div className="ck-decor rounded-lg border border-white/15 bg-white/5 text-[7px] md:text-[9px]" style={{ left: "93.5%", top: "44%", width: "6%", height: "26%", writingMode: "vertical-rl" }}>DJ Booth</div>
            {main.map((tb) => <CKTableBtn key={tb.id} tb={tb} sel={sel} onPick={onPick} />)}
          </div>
        </div>
        {/* second floor */}
        <div className="lg:col-span-3">
          <div className="label text-white/50 text-[10px] mb-2.5">{t("Second Floor", "Segundo Piso")}</div>
          <div className={panelCls} style={{ aspectRatio: "3/5" }}>
            <div className="ck-decor text-white/25 text-[9px] md:text-[10px]" style={{ left: "50%", top: "50%", width: "10%", height: "40%", writingMode: "vertical-rl" }}>{t("Second Floor", "Segundo Piso")}</div>
            <div className="ck-decor rounded-lg border border-white/15 bg-white/5 text-[7px] md:text-[8px]" style={{ left: "92%", top: "62%", width: "9%", height: "30%", writingMode: "vertical-rl" }}>{t("Bar #2", "Barra #2")}</div>
            <div className="absolute rounded-full border border-[#FF2E88]/40 bg-[#FF2E88]/10 flex items-center justify-center" style={{ left: "46%", top: "76%", width: "26%", height: "9%" }}>
              <span className="label text-[#FF2E88]/80 text-[7px]">Stage 2</span>
            </div>
            <div className="ck-decor rounded-lg border border-white/15 bg-white/5 text-[7px] md:text-[8px]" style={{ left: "16%", top: "91%", width: "22%", height: "5.5%" }}>{t("Balcony", "Balcón")}</div>
            {second.map((tb) => <CKTableBtn key={tb.id} tb={tb} sel={sel} onPick={onPick} />)}
          </div>
        </div>
      </div>
      {/* legend */}
      <div className="mt-6 rounded-2xl border border-white/12 bg-card px-5 py-4 flex flex-wrap items-center justify-center gap-x-7 gap-y-2.5">
        {Object.entries(CK_ZONES).map(([id, z]) => (
          <span key={id} className="inline-flex items-center gap-2 text-[11px] md:text-xs">
            <span className="w-2.5 h-2.5 rounded-full" style={{ background: z.color }}></span>
            <span className="font-bold uppercase tracking-wide">{L(z.name, lang)}</span>
            <span className="text-white/50">{t("from", "desde")} {ckFmt(z.from)}++</span>
          </span>
        ))}
        <span className="inline-flex items-center gap-2 text-[11px] md:text-xs">
          <span className="w-2.5 h-2.5 rounded-full bg-[#7f1d1d]"></span>
          <span className="text-white/50 uppercase font-bold tracking-wide">{t("Sold", "Vendida")}</span>
        </span>
      </div>
    </div>
  );
}

/* ---------- booking module (tickets + tables → PPDB + Hub + WhatsApp) ---------- */
function CKBooking({ mode, setMode, sel, setSel }) {
  const t = useT(); const { lang } = useLang();
  const [f, setF] = useState({ name: "", phone: "", email: "", qty: 2, guests: 4, notes: "" });
  const [done, setDone] = useState(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 ticketPrice = ckTicketPrice();
  const presale = ckPresaleOn();
  const total = mode === "ticket" ? ticketPrice * f.qty : (sel ? sel.price : CK.tableFrom);

  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 isTicket = mode === "ticket";
    const what = isTicket
      ? (t("Tickets", "Tickets") + " ×" + f.qty + " · " + (presale ? t("Presale $50", "Preventa $50") : t("Day of event $100", "Día del evento $100")))
      : (t("Table", "Mesa") + " " + (sel ? sel.id + " · " + ckFmt(sel.price) + "++" : t("Best available (host assigns)", "Mejor disponible (asigna el host)")));
    // 1) persist locally → Admin · Reservations pipeline (status: pending)
    const r = window.PPDB.reservations.add({
      fullName: f.name.trim(), phone, email: f.email.trim(),
      date: CK.dateISO, time: CK.timeLabel,
      guests: isTicket ? f.qty : f.guests,
      experienceId: isTicket ? "ck-tickets" : "ck-table",
      experienceType: (isTicket ? t("Tickets · ", "Tickets · ") : t("VIP Table · ", "Mesa VIP · ")) + "Chacal & Yakarta — Release Party",
      night: CK.nightIdx, nightName: CK.nightName,
      tableId: isTicket ? "" : (sel ? sel.id : ""),
      price: total, notes: f.notes.trim(), contactPref: "whatsapp",
    });
    // 2) mirror to the Hub so staff see it in real time (best-effort)
    try {
      window.PPHub && window.PPHub.submitReservation && window.PPHub.submitReservation({
        name: f.name.trim(), phone, email: f.email.trim(),
        night: CK.nightIdx, date: CK.dateISO, time: CK.timeLabel,
        guests: isTicket ? f.qty : f.guests,
        tableId: isTicket ? "" : (sel ? sel.id : ""),
        zone: CK.nightName, occasion: what,
        requests: [f.notes.trim(), "Ref " + r.code, "CHACAL & YAKARTA JUL 30"].filter(Boolean).join(" · "),
        priceCents: total * 100,
      });
    } catch (err) {}
    // 3) WhatsApp handoff (also captured as a lead by PP.waOpen)
    window.PP.waOpen(
      t("Chacal & Yakarta · Jul 30 — new request", "Chacal & Yakarta · 30 Jul — nueva solicitud"),
      [
        [t("Ref", "Ref"), r.code],
        [t("Booking", "Reserva"), what],
        [t("Name", "Nombre"), f.name], [t("Phone", "Teléfono"), phone], [t("Email", "Correo"), f.email],
        [t("Event", "Evento"), "Chacal & Yakarta — Official Release Party"],
        [t("Date", "Fecha"), t("Thursday July 30 · Doors 8PM", "Jueves 30 de Julio · Puertas 8PM")],
        [isTicket ? t("Tickets", "Tickets") : t("Guests", "Personas"), isTicket ? f.qty : f.guests],
        [isTicket ? t("Total", "Total") : t("Minimum spend", "Consumo mínimo"), isTicket ? ckFmt(total) : ckFmt(total) + "++"],
        [t("Notes", "Notas"), f.notes],
      ],
      t("Sent from clubpinkpony.com — press send on WhatsApp to confirm faster.", "Enviado desde clubpinkpony.com — presiona enviar en WhatsApp para confirmar más rápido."),
    );
    window.PP.track && window.PP.track("InitiateCheckout", { content_name: "chacal-yakarta-" + mode, value: total, currency: "USD" });
    setDone({ r, what, total, isTicket });
  };

  const inputCls = "w-full bg-white/5 border border-white/12 rounded-xl px-4 py-3.5 text-white text-sm focus:outline-none focus:border-[#FF2E88]/70 transition-all placeholder:text-white/35";
  const stepBtn = "w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-white/80 hover:bg-white/10 transition-colors disabled:opacity-30";

  if (done) return (
    <div className="rounded-3xl border border-[#FF2E88]/40 bg-card p-8 text-center fade-view">
      <div className="w-14 h-14 mx-auto rounded-full bg-[#FF2E88]/15 border border-[#FF2E88]/50 flex items-center justify-center mb-5"><Icon name="check" className="w-7 h-7 text-[#FF2E88]" /></div>
      <div className="label text-[#FF2E88] text-[10px] mb-2">{t("Request sent", "Solicitud enviada")}</div>
      <h3 className="text-2xl font-black uppercase mb-2">{t("You're on the list!", "¡Estás en la lista!")}</h3>
      <p className="text-white/60 text-sm max-w-md mx-auto">{done.what}</p>
      <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-5 py-2.5">
        <span className="label text-white/50 text-[9px]">{t("Reference", "Referencia")}</span>
        <span className="font-black tracking-widest text-[#FF2E88]">{done.r.code}</span>
      </div>
      <p className="text-white/45 text-xs mt-5 max-w-md mx-auto">
        {done.isTicket
          ? (ckPresaleOn() ? t("Your presale rate ($50) is locked with this reference — our team confirms payment & delivery by WhatsApp. Door price on July 30 is $100.", "Tu tarifa de preventa ($50) queda asegurada con esta referencia — el equipo confirma pago y entrega por WhatsApp. En puerta el 30 de julio es $100.") : t("Our team confirms your tickets by WhatsApp.", "El equipo confirma tus tickets por WhatsApp."))
          : t("No charge today — our VIP host confirms your table and minimum spend by WhatsApp.", "Sin cargo hoy — nuestro host VIP confirma tu mesa y consumo mínimo por WhatsApp.")}
      </p>
      {window.PPStripe && window.PPStripe.enabled() && (
        <button onClick={() => window.PPStripe.checkout({
            name: done.isTicket ? "Tickets · Chacal & Yakarta Jul 30 · " + done.what : "Table deposit · Chacal & Yakarta Jul 30",
            amountCents: done.isTicket ? done.total * 100 : window.PPStripe.depositCents(),
            ref: done.r.code, kind: done.isTicket ? "ck-tickets" : "ck-table-deposit",
          }).catch((e) => window.toast && window.toast(String((e && e.message) || e), "error"))}
          className="gbtn ck-pink-btn mt-6 w-full max-w-md mx-auto py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em] transition-all flex items-center justify-center gap-2.5">
          <Icon name="credit-card" className="w-4 h-4" />
          {done.isTicket ? t("Pay " + ckFmt(done.total) + " now — lock your tickets", "Pagar " + ckFmt(done.total) + " ya — asegura tus tickets") : t("Secure it — $" + (window.PPStripe.depositCents() / 100) + " deposit", "Asegúrala — depósito de $" + (window.PPStripe.depositCents() / 100))}
        </button>
      )}
      <div className="flex flex-wrap justify-center gap-3 mt-6">
        <button onClick={() => window.downloadICS && window.downloadICS("Chacal & Yakarta — Release Party · Pink Pony Club", CK.dateISO, CK.timeLabel)} className="gbtn px-5 py-2.5 rounded-full border border-white/20 text-white/80 text-[11px] font-bold uppercase tracking-[0.14em] hover:bg-white/5"><span className="inline-flex items-center gap-2"><Icon name="calendar-plus" className="w-4 h-4" />{t("Add to calendar", "Agregar al calendario")}</span></button>
        <button onClick={() => setDone(null)} className="gbtn px-5 py-2.5 rounded-full border border-white/20 text-white/80 text-[11px] font-bold uppercase tracking-[0.14em] hover:bg-white/5">{t("New request", "Nueva solicitud")}</button>
      </div>
    </div>
  );

  return (
    <div className="rounded-3xl border border-white/12 bg-card overflow-hidden">
      {/* mode tabs */}
      <div className="grid grid-cols-2">
        {[["ticket", t("Tickets", "Tickets"), "ticket"], ["table", t("VIP Table", "Mesa VIP"), "map-pin"]].map(([id, lbl, ic]) => (
          <button key={id} onClick={() => setMode(id)}
            className={"py-4 flex items-center justify-center gap-2 text-[12px] font-bold uppercase tracking-[0.14em] transition-all " + (mode === id ? "bg-[#FF2E88]/15 text-[#FF2E88] border-b-2 border-[#FF2E88]" : "text-white/55 border-b border-white/10 hover:text-white")}>
            <Icon name={ic} className="w-4 h-4" />{lbl}
          </button>
        ))}
      </div>
      <form onSubmit={submit} className="p-6 md:p-8 space-y-5">
        {mode === "ticket" ? (
          <React.Fragment>
            {/* price cards */}
            <div className="grid grid-cols-2 gap-3">
              <div className={"rounded-2xl border p-4 text-center " + (presale ? "border-[#FF2E88]/60 bg-[#FF2E88]/10" : "border-white/10 bg-white/5 opacity-60")}>
                <div className="label text-[9px] text-white/60 mb-1">{t("Presale", "Preventa")}</div>
                <div className="text-3xl font-black text-[#FF2E88]">$50</div>
                <div className="text-[10px] text-white/45 mt-1">{t("until Jul 29", "hasta 29 Jul")}</div>
              </div>
              <div className={"rounded-2xl border p-4 text-center " + (!presale ? "border-[#FF2E88]/60 bg-[#FF2E88]/10" : "border-white/10 bg-white/5")}>
                <div className="label text-[9px] text-white/60 mb-1">{t("Day of event", "Día del evento")}</div>
                <div className="text-3xl font-black text-white">$100</div>
                <div className="text-[10px] text-white/45 mt-1">{t("July 30 · at the door", "30 Jul · en puerta")}</div>
              </div>
            </div>
            {/* qty */}
            <div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-5 py-4">
              <div>
                <div className="font-bold text-sm">{t("How many tickets?", "¿Cuántos tickets?")}</div>
                <div className="text-white/45 text-xs mt-0.5">{ckFmt(ticketPrice)} {t("each", "c/u")} · 21+</div>
              </div>
              <div className="flex items-center gap-3">
                <button type="button" className={stepBtn} disabled={f.qty <= 1} onClick={() => set("qty", Math.max(1, f.qty - 1))} aria-label="-"><Icon name="minus" className="w-4 h-4" /></button>
                <span className="w-8 text-center text-xl font-black tabular-nums">{f.qty}</span>
                <button type="button" className={stepBtn} disabled={f.qty >= 20} onClick={() => set("qty", Math.min(20, f.qty + 1))} aria-label="+"><Icon name="plus" className="w-4 h-4" /></button>
              </div>
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            {/* selected table */}
            <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-4 flex items-center justify-between gap-3 flex-wrap">
              <div>
                <div className="label text-[9px] text-white/50 mb-1">{t("Your table", "Tu mesa")}</div>
                {sel ? (
                  <div className="flex items-center gap-3">
                    <span className="font-black text-lg">{sel.id}</span>
                    <span className="text-[11px] px-2.5 py-1 rounded-full border" style={{ borderColor: CK_ZONES[sel.z].color + "88", color: CK_ZONES[sel.z].color, background: CK_ZONES[sel.z].color + "1a" }}>{L(CK_ZONES[sel.z].name, lang)}</span>
                    <span className="text-white/70 text-sm font-bold">{ckFmt(sel.price)}++ <span className="text-white/40 font-normal text-xs">{t("min spend", "consumo mín")}</span></span>
                  </div>
                ) : (
                  <div className="text-white/60 text-sm">{t("Pick one on the floor plan — or let our host assign the best available.", "Elige en el plano — o deja que el host asigne la mejor disponible.")}</div>
                )}
              </div>
              {sel && <button type="button" onClick={() => setSel(null)} className="text-white/45 text-[11px] uppercase font-bold tracking-wider hover:text-white">{t("Clear", "Quitar")}</button>}
            </div>
            {/* guests */}
            <div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-5 py-4">
              <div className="font-bold text-sm">{t("Guests", "Personas")}</div>
              <div className="flex items-center gap-3">
                <button type="button" className={stepBtn} disabled={f.guests <= 1} onClick={() => set("guests", Math.max(1, f.guests - 1))} aria-label="-"><Icon name="minus" className="w-4 h-4" /></button>
                <span className="w-8 text-center text-xl font-black tabular-nums">{f.guests}</span>
                <button type="button" className={stepBtn} disabled={f.guests >= 30} onClick={() => set("guests", Math.min(30, f.guests + 1))} aria-label="+"><Icon name="plus" className="w-4 h-4" /></button>
              </div>
            </div>
          </React.Fragment>
        )}

        {/* contact fields */}
        <div className="grid md:grid-cols-2 gap-3.5">
          <input className={inputCls + " md:col-span-2"} placeholder={t("Full name", "Nombre completo")} value={f.name} onChange={(e) => set("name", e.target.value)} required />
          <input className={inputCls} type="tel" placeholder={t("Phone (WhatsApp)", "Teléfono (WhatsApp)")} value={f.phone} onChange={(e) => set("phone", e.target.value)} required />
          <input className={inputCls} type="email" placeholder={t("Email", "Correo")} value={f.email} onChange={(e) => set("email", e.target.value)} required />
          <textarea className={inputCls + " md:col-span-2 resize-none"} rows="2" placeholder={t("Notes — birthday, bottle preferences… (optional)", "Notas — cumpleaños, botellas… (opcional)")} value={f.notes} onChange={(e) => set("notes", e.target.value)}></textarea>
        </div>

        {/* total + submit */}
        <div className="flex flex-wrap items-center justify-between gap-4 pt-1">
          <div>
            <div className="label text-[9px] text-white/50">{mode === "ticket" ? t("Total", "Total") : t("Minimum spend", "Consumo mínimo")}</div>
            <div className="text-2xl font-black text-[#FF2E88]">{ckFmt(total)}{mode === "table" ? "++" : ""}</div>
            {mode === "table" && !sel && <div className="text-[10px] text-white/40">{t("from — depends on the table", "desde — según la mesa")}</div>}
          </div>
          <button type="submit" className="gbtn ck-pink-btn inline-flex items-center gap-2.5 px-8 py-4 rounded-full text-white text-[12px] font-bold uppercase tracking-[0.16em] transition-all">
            {mode === "ticket" ? t("Get my tickets", "Quiero mis tickets") : t("Reserve this table", "Reservar esta mesa")}
            <Icon name="arrow-up-right" className="w-4 h-4" />
          </button>
        </div>
        <p className="text-white/35 text-[11px] leading-relaxed">
          {t("No charge on this site — your request opens in WhatsApp and our team confirms payment & details. 21+ with valid ID.", "Este sitio no te cobra — tu solicitud se abre en WhatsApp y el equipo confirma pago y detalles. 21+ con ID válida.")}
        </p>
      </form>
    </div>
  );
}

/* ---------- Instagram post (official embed with graceful fallback) ---------- */
function CKInstagram() {
  const t = useT();
  const ref = useRef(null);
  const [embedded, setEmbedded] = useState(false);
  useEffect(() => {
    let cancelled = false;
    const process = () => {
      if (cancelled) return;
      try { window.instgrm && window.instgrm.Embeds && window.instgrm.Embeds.process(); setEmbedded(true); } catch (e) {}
    };
    if (window.instgrm) { process(); return; }
    const s = document.createElement("script");
    s.src = "https://www.instagram.com/embed.js"; s.async = true; s.onload = process;
    document.body.appendChild(s);
    return () => { cancelled = true; };
  }, []);
  return (
    <div className="grid md:grid-cols-2 gap-8 items-center">
      <div>
        <Eyebrow>{t("On Instagram", "En Instagram")}</Eyebrow>
        <h3 className="text-3xl md:text-5xl font-black uppercase leading-none mt-4 mb-4">{t(<>The <span className="serif-it font-normal text-[#FF2E88]">official</span> drop</>, <>La publicación <span className="serif-it font-normal text-[#FF2E88]">oficial</span></>)}</h3>
        <p className="text-white/60 mb-6 max-w-md">{t("Watch the announcement, tag your crew and share the night. Follow @clubpinkpony for line-up drops and surprises before July 30.", "Mira el anuncio, etiqueta a tu gente y comparte la noche. Sigue a @clubpinkpony para sorpresas y novedades antes del 30 de julio.")}</p>
        <a href={CK.ig} target="_blank" rel="noopener" className="gbtn inline-flex items-center gap-2.5 px-7 py-3.5 rounded-full border border-white/20 bg-white/5 text-white text-[12px] font-bold uppercase tracking-[0.16em] hover:bg-white/10 transition-all">
          <BrandIcon name="instagram" className="w-4 h-4" /> {t("Open the post", "Ver la publicación")}
        </a>
      </div>
      <div ref={ref} className="rounded-2xl overflow-hidden border border-white/12 bg-[#101013] min-h-[300px] flex items-center justify-center">
        <blockquote className="instagram-media" data-instgrm-permalink={CK.ig} data-instgrm-version="14"
          style={{ background: "transparent", border: 0, margin: 0, width: "100%", maxWidth: 540 }}>
          {/* fallback while (or if) the IG script can't load */}
          <a href={CK.ig} target="_blank" rel="noopener" className="flex flex-col items-center justify-center gap-4 py-16 text-center px-6">
            <span className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-[#FEDA75] via-[#D62976] to-[#4F5BD5] flex items-center justify-center"><BrandIcon name="instagram" className="w-8 h-8 text-white" /></span>
            <span className="font-black uppercase tracking-wide">@clubpinkpony</span>
            <span className="text-white/55 text-sm max-w-xs">Chacal &amp; Yakarta · Official Release Party — {t("tap to see the post on Instagram", "toca para ver la publicación en Instagram")}</span>
          </a>
        </blockquote>
      </div>
    </div>
  );
}

/* ---------- the landing page (#chacal) ---------- */
function ChacalLandingPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const [mode, setMode] = useState("ticket");
  const [sel, setSel] = useState(null);
  const bookRef = useRef(null);
  useReveal(lang + "-" + mode + "-" + (sel ? sel.id : ""));

  // SEO for the route (title + MusicEvent JSON-LD), restored on unmount
  useEffect(() => {
    const prev = document.title;
    document.title = "Chacal & Yakarta · Official Release Party — Jul 30 · Pink Pony Club Miami";
    const s = document.createElement("script");
    s.type = "application/ld+json"; s.id = "ck-jsonld";
    s.textContent = JSON.stringify({
      "@context": "https://schema.org", "@type": "MusicEvent",
      name: "Chacal & Yakarta — Baby's on Fire · Official Release Party",
      startDate: CK.startISO, endDate: "2026-07-31T05:00:00-04:00",
      eventStatus: "https://schema.org/EventScheduled",
      eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
      image: "https://www.clubpinkpony.com/assets/photos/crowd-pink.jpg",
      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": "MusicGroup", name: "Chacal" }, { "@type": "MusicGroup", name: "Yakarta" }],
      offers: [
        { "@type": "Offer", name: "Presale Ticket", price: CK.presale, priceCurrency: "USD", availability: "https://schema.org/InStock", validThrough: "2026-07-29T23:59:00-04:00", url: "https://www.clubpinkpony.com/#chacal" },
        { "@type": "Offer", name: "Day of Event", price: CK.door, priceCurrency: "USD", url: "https://www.clubpinkpony.com/#chacal" },
        { "@type": "Offer", name: "VIP Table (minimum spend)", price: CK.tableFrom, priceCurrency: "USD", url: "https://www.clubpinkpony.com/#chacal" },
      ],
      organizer: { "@type": "Organization", name: "Club Pink Pony", url: "https://www.clubpinkpony.com" },
    });
    document.head.appendChild(s);
    return () => { document.title = prev; const el = document.getElementById("ck-jsonld"); el && el.remove(); };
  }, []);

  // deep-section jump requested from other pages (hero slide / events banner)
  useEffect(() => {
    const target = window.__ckSection; delete window.__ckSection;
    if (!target) return;
    if (target === "tickets") setMode("ticket");
    if (target === "floorplan") setMode("table");
    setTimeout(() => {
      const el = document.getElementById("ck-" + (target === "tickets" ? "booking" : target));
      el && el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 250);
  }, []);

  const pickTable = (tb) => {
    setSel(tb); setMode("table");
    setTimeout(() => bookRef.current && bookRef.current.scrollIntoView({ behavior: "smooth", block: "start" }), 120);
  };
  const jump = (id, m) => {
    if (m) setMode(m);
    const el = document.getElementById(id);
    el && el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  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="w-4.5 h-4.5 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 min-h-[100svh] flex flex-col items-center justify-center overflow-hidden pt-24 pb-14">
        <CKArt mode="hero" />
        <div className="absolute inset-0 pointer-events-none" style={{ background: "linear-gradient(to top,#0B0B0C 2%,transparent 30%)" }}></div>
        <div className="relative z-10 w-full container flex flex-col items-center text-center">
          <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>
          <CKBannerContent />
          <div className="mt-8"><CKCountdown /></div>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-9">
            <button onClick={() => jump("ck-booking", "ticket")} 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">
              <Icon name="ticket" className="w-4 h-4" /> {t("Buy tickets — $50", "Comprar tickets — $50")}
            </button>
            <button onClick={() => jump("ck-floorplan", "table")} 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="map-pin" className="w-4 h-4" /> {t("Reserve a table — from $1200++", "Reservar mesa — desde $1200++")}
            </button>
          </div>
          <div className="grid sm:grid-cols-3 gap-3 mt-10 w-full max-w-3xl">
            {infoChip("calendar-days", t("Thursday, July 30", "Jueves 30 de Julio"), t("Doors open 8PM · 21+", "Puertas 8PM · 21+"))}
            {infoChip("map-pin", "Pink Pony Club", "7971 NW 33rd St, Doral FL")}
            {infoChip("phone", "RSVP " + CK.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">
              {["CHACAL & YAKARTA", "OFFICIAL RELEASE PARTY", "BABY'S ON FIRE", "JULY 30 · DORAL MIAMI", "TICKETS $50", "TABLES FROM $1200++", "DOORS 8PM"].map((it, i) => (
                <span key={i} className="flex items-center"><span className="px-7 text-base md:text-lg font-black uppercase tracking-[0.18em] text-white/75">{it}</span><span className="text-[#FF2E88]">✦</span></span>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* ============ THE NIGHT ============ */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <div className="reveal">
              <Eyebrow>{t("The Night", "La Noche")}</Eyebrow>
              <h3 className="text-3xl md:text-5xl font-black uppercase leading-[0.95] mt-4 mb-5">{t(<>Cuban urban royalty, <span className="serif-it font-normal text-[#FF2E88]">live on our stage</span></>, <>Realeza urbana cubana, <span className="serif-it font-normal text-[#FF2E88]">en vivo en nuestra tarima</span></>)}</h3>
              <p className="text-white/65 leading-relaxed mb-4">{t("Chacal and Yakarta take over Pink Pony Club for one night only — the official release party of “Baby's on Fire”. Full stage production, live performance, resident DJs before and after, and the loudest crowd in Doral.", "Chacal y Yakarta se toman el Pink Pony Club por una sola noche — la fiesta oficial de lanzamiento de “Baby's on Fire”. Producción completa de tarima, show en vivo, DJs residentes antes y después, y el mejor ambiente de Doral.")}</p>
              <p className="text-white/50 text-sm leading-relaxed mb-7">{t("Presale tickets are $50 — on July 30 the door is $100. VIP tables start at $1200++ minimum spend and include express entry and bottle service. This one sells out.", "La preventa es $50 — el 30 de julio la puerta es $100. Las mesas VIP inician en $1200++ de consumo mínimo e incluyen entrada express y servicio de botella. Esto se agota.")}</p>
              <div className="flex flex-wrap gap-3">
                <button onClick={() => jump("ck-booking", "ticket")} className="gbtn ck-pink-btn px-6 py-3 rounded-full text-white text-[11px] font-bold uppercase tracking-[0.14em]">{t("Tickets $50", "Tickets $50")}</button>
                <button onClick={() => window.downloadICS && window.downloadICS("Chacal & Yakarta — Release Party · Pink Pony Club", CK.dateISO, CK.timeLabel)} className="gbtn px-6 py-3 rounded-full border border-white/20 text-white/80 text-[11px] font-bold uppercase tracking-[0.14em] hover:bg-white/5"><span className="inline-flex items-center gap-2"><Icon name="calendar-plus" className="w-4 h-4" />{t("Save the date", "Guardar la fecha")}</span></button>
              </div>
            </div>
            <div className="reveal grid grid-cols-2 gap-4" data-d="1">
              {[["mic-vocal", "Chacal", t("Live performance", "Show en vivo")], ["flame", "Yakarta", t("Live performance", "Show en vivo")], ["disc-3", t("Resident DJs", "DJs Residentes"), t("All night long", "Toda la noche")], ["sparkles", t("Stage Production", "Producción de Tarima"), t("Lights · dancers · CO₂", "Luces · bailarinas · CO₂")]].map(([ic, top, sub], i) => (
                <div key={i} className="rounded-2xl border border-white/12 bg-card p-6 text-center hover:border-[#FF2E88]/40 transition-colors">
                  <span className="w-12 h-12 mx-auto rounded-full bg-[#FF2E88]/12 border border-[#FF2E88]/35 flex items-center justify-center mb-3"><Icon name={ic} className="w-5 h-5 text-[#FF2E88]" /></span>
                  <div className="font-black uppercase tracking-wide">{top}</div>
                  <div className="text-white/45 text-xs mt-1">{sub}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ BOOKING (tickets / table) ============ */}
      <section id="ck-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("Reserve", "Reserva")}</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("Buy your tickets or reserve your table right here — everything lands directly with our VIP team.", "Compra tus tickets o reserva tu mesa aquí mismo — todo llega directo a nuestro equipo VIP.")}</p>
          </div>
          <div className="max-w-2xl mx-auto" ref={bookRef}>
            <CKBooking mode={mode} setMode={setMode} sel={sel} setSel={setSel} />
          </div>
        </div>
      </section>

      {/* ============ FLOOR PLAN ============ */}
      <section id="ck-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 reserve it for July 30. Red-striped tables are already gone.", "Toca cualquier mesa para ver su consumo mínimo y reservarla para el 30 de julio. Las mesas marcadas ya volaron.")}</p>
          </div>
          <CKFloorPlan sel={sel} onPick={pickTable} />
          <div className="text-center mt-7 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>

      {/* ============ INSTAGRAM ============ */}
      <section className="py-16 md:py-20 bg-[#0d0d10] border-y border-white/5">
        <div className="container"><CKInstagram /></div>
      </section>

      {/* ============ INFO / RSVP ============ */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="grid md:grid-cols-3 gap-5">
            <div className="rounded-3xl border border-white/12 bg-card p-7">
              <Icon name="calendar-days" className="w-6 h-6 text-[#FF2E88] mb-4" />
              <div className="font-black uppercase tracking-wide mb-1.5">{t("When", "Cuándo")}</div>
              <p className="text-white/60 text-sm leading-relaxed">{t("Thursday, July 30 · Doors open 8PM until 5AM. Show announced night-of.", "Jueves 30 de Julio · Puertas 8PM hasta 5AM. El horario del show se anuncia esa noche.")}</p>
            </div>
            <div className="rounded-3xl border border-white/12 bg-card p-7">
              <Icon name="map-pin" className="w-6 h-6 text-[#FF2E88] mb-4" />
              <div className="font-black uppercase tracking-wide mb-1.5">{t("Where", "Dónde")}</div>
              <p className="text-white/60 text-sm leading-relaxed">Pink Pony Club<br />7971 NW 33rd St, Doral, FL 33122</p>
              <a className="inline-flex items-center gap-1.5 text-[#FF2E88] text-[11px] font-bold uppercase tracking-wider mt-3 hover:brightness-125" target="_blank" rel="noopener" href="https://maps.google.com/?q=Pink+Pony+Club+7971+NW+33rd+St+Doral+FL+33122">{t("Open in Maps", "Abrir en Maps")} <Icon name="arrow-up-right" className="w-3.5 h-3.5" /></a>
            </div>
            <div className="rounded-3xl border border-white/12 bg-card p-7">
              <Icon name="phone" className="w-6 h-6 text-[#FF2E88] mb-4" />
              <div className="font-black uppercase tracking-wide mb-1.5">RSVP</div>
              <p className="text-white/60 text-sm leading-relaxed mb-3">{t("Call or WhatsApp our VIP team for group packages and bottle presets.", "Llama o escribe al equipo VIP para paquetes de grupo y botellas.")}</p>
              <div className="flex flex-wrap gap-2.5">
                <a href={"tel:" + CK.rsvpTel} className="gbtn inline-flex items-center gap-2 px-4 py-2.5 rounded-full border border-white/20 text-white/85 text-[11px] font-bold uppercase tracking-wider hover:bg-white/5"><Icon name="phone" className="w-3.5 h-3.5" />{CK.rsvpTelDisplay}</a>
                <a href={window.PP.waLink("Chacal & Yakarta Jul 30 — I want to reserve!")} target="_blank" rel="noopener" className="gbtn ck-pink-btn inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-white text-[11px] font-bold uppercase tracking-wider"><Icon name="message-circle" className="w-3.5 h-3.5" />WhatsApp</a>
              </div>
            </div>
          </div>
          <div className="text-center mt-12">
            <button onClick={() => go("events")} className="text-white/45 text-[12px] font-bold uppercase tracking-[0.18em] hover:text-white transition-colors inline-flex items-center gap-2"><Icon name="arrow-left" className="w-4 h-4" />{t("All events", "Todos los eventos")}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CK, CKHeroSlide, CKStrip, CKEventBanner, ChacalLandingPage });