/* ============================================================
   EXPERIENCES — conversion-focused: hero value prop, social
   proof, how-it-works, curated packages (preselect → reserve),
   VIP add-on upsells, closing concierge CTA.
   Interactive 3D-tilt package cards (cursor tracking + glow).
   ============================================================ */

/* one cursor-reactive 3D-tilt package card */
function ExpCard({ e, idx, badge, onReserve, onInquire }) {
  const t = useT(); const { lang } = useLang();
  const ref = useRef(null);
  const onMove = (ev) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (ev.clientX - r.left) / r.width;
    const py = (ev.clientY - r.top) / r.height;
    el.style.setProperty("--ry", ((px - 0.5) * 13).toFixed(2) + "deg");
    el.style.setProperty("--rx", ((0.5 - py) * 11).toFixed(2) + "deg");
    el.style.setProperty("--mx", (px * 100).toFixed(1) + "%");
    el.style.setProperty("--my", (py * 100).toFixed(1) + "%");
  };
  const reset = () => {
    const el = ref.current; if (!el) return;
    el.style.setProperty("--rx", "0deg"); el.style.setProperty("--ry", "0deg");
  };
  return (
    <div className="exp-wrap reveal relative" style={{ perspective: "1100px" }} data-d={(idx % 3) + 1}>
      <div className="exp-glow"></div>
      <div ref={ref} onMouseMove={onMove} onMouseLeave={reset}
        className="exp-card relative rounded-3xl overflow-hidden border border-white/10 bg-card"
        style={{ transform: "rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))" }}>
        {/* image */}
        <div className="relative h-60 overflow-hidden">
          <Photo src={window.PP.SRC(e.img, 900, 600)} alt={L(e.name, lang)} className="absolute inset-0 w-full h-full exp-img" imgClass="object-cover" style={{ filter: "brightness(.66)" }} />
          <div className="absolute inset-0 bg-gradient-to-t from-card via-black/20 to-transparent"></div>
          <div className="exp-spot"></div>
          <div className="exp-shine"></div>
          <div className="absolute top-4 left-4 w-11 h-11 rounded-xl bg-black/45 backdrop-blur-md border border-white/15 flex items-center justify-center exp-lift" style={{ ["--z"]: "60px" }}><Icon name={e.icon} className="w-5 h-5 text-coral" /></div>
          {badge && <div className="absolute top-4 right-4 rounded-full bg-coral text-white text-[10px] font-black uppercase tracking-[0.12em] px-3 py-1.5 shadow-lg exp-lift" style={{ ["--z"]: "50px" }}>{badge}</div>}
          <div className="absolute bottom-4 left-6 right-6 exp-lift" style={{ ["--z"]: "40px" }}>
            <h3 className="text-3xl font-black uppercase leading-none">{L(e.name, lang)}</h3>
            <p className="serif-it text-white/75 text-lg mt-1">{L(e.tagline, lang)}</p>
          </div>
        </div>
        {/* body */}
        <div className="p-6 relative exp-lift" style={{ ["--z"]: "26px" }}>
          <ul className="space-y-2.5 mb-6">
            {e.includes.map((x, j) => <li key={j} className="flex items-start gap-3 text-sm text-white/80"><Icon name="check" className="w-4 h-4 mt-0.5 shrink-0 text-gold" />{L(x, lang)}</li>)}
          </ul>
          <div className="flex items-center justify-between gap-3 pt-4 border-t border-white/8">
            <div>
              <span className="label text-white/40 text-[10px]">{t("Packages from", "Paquetes desde")}</span>
              <div className="serif text-3xl text-gold-soft leading-none">${e.from.toLocaleString()}</div>
            </div>
            <div className="flex items-center gap-2 shrink-0">
              <button onClick={() => onInquire(e)} className="px-4 py-3 rounded-full border border-white/15 text-white/80 text-[12px] font-bold uppercase tracking-[0.12em] transition-all hover:bg-white/5">{t("Inquire", "Solicitar")}</button>
              <button onClick={() => onReserve(e.id)} className="gbtn px-5 py-3 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.12em] transition-all flex items-center gap-2">{t("Reserve", "Reservar")}<Icon name="arrow-right" className="w-4 h-4" /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExperiencesPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const E = window.PP.EXPERIENCES;
  const A = window.PP.ADDONS;
  useReveal();
  useEffect(() => { try { window.scrollTo({ top: 0, behavior: "auto" }); } catch (e) {} }, []);

  // map each curated package to a reservation "experience" so it can be
  // preselected when the guest jumps into the booking flow.
  const RESV_MAP = { bachelor: "bachelor", birthday: "birthday", fight: "game", corporate: "corporate" };
  const reserveWith = (id) => { try { window.__resvExp = RESV_MAP[id] || "group"; } catch (e) {} go("reserve"); };
  // light "sales" badges per package
  const BADGE = { birthday: t("Most popular", "Más popular"), bachelor: t("Crowd favorite", "El favorito") };

  const inquire = (e) => window.PP.waOpen(
    t("Experience inquiry — Pink Pony Club", "Solicitud de experiencia — Pink Pony Club"),
    [[t("Package", "Paquete"), L(e.name, lang)], [t("From", "Desde"), "$" + e.from.toLocaleString()]],
    t("Sent from clubpinkpony.com", "Enviado desde clubpinkpony.com"),
  );

  const WHY = [
    ["user-check", t("Your own VIP host", "Tu propio host VIP"), t("One dedicated host runs your whole night — bottles, timing, surprises.", "Un host dedicado maneja toda tu noche — botellas, tiempos, sorpresas.")],
    ["zap", t("Skip the line", "Sin fila"), t("Walk straight past the line and into your reserved table.", "Pasa directo, sin fila, a tu mesa reservada.")],
    ["sparkles", t("The big moment", "El gran momento"), t("Bottle parade, sparklers and the LED stage spotlight on you.", "Desfile de botellas, luces y el spotlight de la tarima LED para ti.")],
    ["sliders-horizontal", t("Built around you", "Hecho a tu medida"), t("Any group size, any budget — fully customized, start to finish.", "Cualquier grupo, cualquier presupuesto — personalizado de principio a fin.")],
  ];
  const STEPS = [
    ["mouse-pointer-click", t("1 · Pick your vibe", "1 · Elige tu vibe"), t("Choose a package or tell us what you're celebrating.", "Elige un paquete o cuéntanos qué celebras.")],
    ["pen-line", t("2 · We build it", "2 · Lo armamos"), t("Your host locks the table, bottles, production and surprises.", "Tu host asegura la mesa, botellas, producción y sorpresas.")],
    ["party-popper", t("3 · Just show up", "3 · Solo llega"), t("Walk in, skip the line and celebrate — we handle the rest.", "Llega, sin fila, y celebra — nosotros nos encargamos.")],
  ];

  return (
    <div className="pb-24">
      {/* interactive-card animations (scoped) */}
      <style>{`
        .exp-card{transform-style:preserve-3d;transition:transform .2s cubic-bezier(.22,1,.36,1);will-change:transform;z-index:1}
        .exp-img img,.exp-img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
        .exp-wrap:hover .exp-img img{transform:scale(1.09)}
        .exp-glow{position:absolute;inset:-1.5px;border-radius:26px;background:conic-gradient(from 0deg,#FF6B5B,#9333EA,#C9929A,#FF2E88,#FF6B5B);opacity:0;filter:blur(9px);transition:opacity .45s;animation:expSpin 6s linear infinite;z-index:0}
        .exp-wrap:hover .exp-glow{opacity:.8}
        .exp-spot{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,107,91,.30),transparent 46%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
        .exp-wrap:hover .exp-spot{opacity:1}
        .exp-shine{position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none;z-index:7}
        .exp-wrap:hover .exp-shine{animation:expShine 1.05s cubic-bezier(.22,1,.36,1)}
        .exp-lift{transition:transform .25s cubic-bezier(.22,1,.36,1)}
        .exp-wrap:hover .exp-lift{transform:translateZ(var(--z,30px))}
        @keyframes expSpin{to{transform:rotate(360deg)}}
        @keyframes expShine{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
        .exp-orb{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.55;pointer-events:none;will-change:transform}
        @keyframes expAurora1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.2)}}
        @keyframes expAurora2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-8%,-6%) scale(.9)}}
        @keyframes expAurora3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-9%) scale(1.14)}}
        @media (hover:none){.exp-card{transform:none!important}.exp-glow{display:none}}
        @media (prefers-reduced-motion:reduce){.exp-card,.exp-lift,.exp-img img{transition:none}.exp-glow,.exp-shine,.exp-orb{animation:none}}
      `}</style>

      {/* ===== HERO ===== */}
      <section className="relative min-h-[78vh] flex items-end overflow-hidden">
        <Photo src="assets/photos/crowd-pink.jpg" alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.4) saturate(1.08)" }} />
        {/* animated aurora */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="exp-orb" style={{ width: "46vw", height: "46vw", left: "-6%", top: "8%", background: "radial-gradient(circle,#FF6B5B,transparent 68%)", animation: "expAurora1 16s ease-in-out infinite" }}></div>
          <div className="exp-orb" style={{ width: "42vw", height: "42vw", right: "-8%", top: "-6%", background: "radial-gradient(circle,#9333EA,transparent 68%)", animation: "expAurora2 19s ease-in-out infinite", opacity: 0.45 }}></div>
          <div className="exp-orb" style={{ width: "38vw", height: "38vw", left: "40%", bottom: "-12%", background: "radial-gradient(circle,#FF2E88,transparent 68%)", animation: "expAurora3 22s ease-in-out infinite", opacity: 0.4 }}></div>
        </div>
        <div className="absolute inset-0" style={{ background: "linear-gradient(to top,#0B0B0C 6%,rgba(11,11,12,.45) 45%,rgba(11,11,12,.15) 75%)" }}></div>
        <div className="container relative z-10 pb-14 pt-32">
          <div className="reveal inline-flex items-center gap-2 rounded-full border border-coral/40 bg-coral/10 backdrop-blur px-4 py-1.5 mb-5">
            <span className="w-1.5 h-1.5 rounded-full bg-coral pulse-dot"></span>
            <span className="label text-coral text-[10px]">{t("Curated VIP Experiences", "Experiencias VIP Curadas")}</span>
          </div>
          <h1 className="reveal text-5xl md:text-8xl font-black uppercase leading-[0.86] max-w-4xl" data-d="1">{t(<>Throw the night<br />they'll <span className="serif-it font-normal text-coral">never forget</span></>, <>La noche que <br /><span className="serif-it font-normal text-coral">nunca olvidarán</span></>)}</h1>
          <p className="reveal text-white/70 text-lg md:text-xl mt-5 max-w-xl" data-d="2">{t("Bachelor parties, birthdays, game nights and private galas — fully produced by our hospitality team. You celebrate, we handle everything.", "Despedidas, cumpleaños, noches de partido y galas privadas — producidas por nuestro equipo. Tú celebras, nosotros nos encargamos.")}</p>
          <div className="reveal flex flex-col sm:flex-row gap-4 mt-8" data-d="3">
            <PrimaryBtn icon="arrow-right" onClick={() => { const el = document.getElementById("packages"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>{t("See packages", "Ver paquetes")}</PrimaryBtn>
            <GhostBtn icon="message-circle" onClick={() => { const el = document.getElementById("exp-concierge"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>{t("Plan with a host", "Planea con un host")}</GhostBtn>
          </div>
          {/* trust chips */}
          <div className="reveal flex flex-wrap gap-2.5 mt-8" data-d="3">
            {[["map-pin", t("Doral · Miami", "Doral · Miami")], ["calendar-check", t("Open 7 nights", "7 noches")], ["crown", t("Fully produced in-house", "Producción propia")], ["shield-check", "21+"]].map(([ic, lbl], i) => (
              <span key={i} className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[.04] backdrop-blur px-3.5 py-2 text-[11.5px] text-white/75"><Icon name={ic} className="w-3.5 h-3.5 text-gold-soft" />{lbl}</span>
            ))}
          </div>
        </div>
      </section>

      {/* ===== WHY US value strip ===== */}
      <section className="bg-ink border-y border-white/8 py-12 md:py-16">
        <div className="container grid grid-cols-2 lg:grid-cols-4 gap-4">
          {WHY.map(([ic, ttl, sub], i) => (
            <div key={i} className="reveal" data-d={(i % 3) + 1}>
              <div className="w-11 h-11 rounded-xl bg-coral/12 border border-coral/25 flex items-center justify-center mb-3.5"><Icon name={ic} className="w-5 h-5 text-coral" /></div>
              <div className="font-black uppercase text-[14px] leading-tight mb-1.5">{ttl}</div>
              <p className="text-white/55 text-[13px] leading-relaxed">{sub}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ===== PACKAGES ===== */}
      <section id="packages" className="py-20 md:py-24 scroll-mt-24">
        <div className="container">
          <div className="reveal max-w-2xl mb-10">
            <Eyebrow num="">{t("Curated For You", "Curado Para Ti")}</Eyebrow>
            <Heading className="mt-3">{t(<>Pick your <span className="serif-it font-normal text-coral">experience</span></>, <>Elige tu <span className="serif-it font-normal text-coral">experiencia</span></>)}</Heading>
            <p className="text-white/55 mt-3">{t("Every package is a starting point — your host customizes it to your group. No charge to inquire.", "Cada paquete es un punto de partida — tu host lo personaliza a tu grupo. Consultar no tiene costo.")}</p>
          </div>
          <div className="grid md:grid-cols-2 gap-6 md:gap-7">
            {E.map((e, i) => (
              <ExpCard key={e.id} e={e} idx={i} badge={BADGE[e.id]} onReserve={reserveWith} onInquire={inquire} />
            ))}
          </div>
          {/* urgency line */}
          <p className="reveal text-center text-white/45 text-[13px] mt-7 flex items-center justify-center gap-2"><Icon name="flame" className="w-4 h-4 text-coral" />{t("Weekends book out fast — lock your date early to guarantee your table.", "Los fines de semana se llenan rápido — asegura tu fecha con tiempo para garantizar tu mesa.")}</p>
        </div>
      </section>

      {/* ===== HOW IT WORKS ===== */}
      <section className="py-20 md:py-24 bg-ink border-y border-white/8">
        <div className="container">
          <div className="reveal text-center mb-12"><Eyebrow num="" className="justify-center">{t("How It Works", "Cómo Funciona")}</Eyebrow><Heading className="mt-3">{t(<>Booked in <span className="serif-it font-normal text-coral">three steps</span></>, <>Reservado en <span className="serif-it font-normal text-coral">tres pasos</span></>)}</Heading></div>
          <div className="grid md:grid-cols-3 gap-5">
            {STEPS.map(([ic, ttl, sub], i) => (
              <div key={i} className="reveal rounded-2xl border border-white/10 bg-card p-7 text-center" data-d={(i % 3) + 1}>
                <div className="w-14 h-14 rounded-2xl bg-coral/12 border border-coral/25 flex items-center justify-center mx-auto mb-4"><Icon name={ic} className="w-6 h-6 text-coral" /></div>
                <div className="font-black uppercase text-[15px] mb-2">{ttl}</div>
                <p className="text-white/55 text-[13.5px] leading-relaxed">{sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== ADD-ONS upsell ===== */}
      <section className="py-20 md:py-24">
        <div className="container">
          <div className="reveal mb-8"><Eyebrow num="">{t("Make It Bigger", "Hazlo Más Grande")}</Eyebrow><Heading className="mt-3">{t(<>VIP <span className="serif-it font-normal text-coral">add-ons</span></>, <>Add-ons <span className="serif-it font-normal text-coral">VIP</span></>)}</Heading><p className="text-white/55 mt-3 max-w-xl">{t("Stack any of these onto your package to turn the volume all the way up.", "Suma cualquiera de estos a tu paquete para subir el volumen al máximo.")}</p></div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {A.map((a, i) => (
              <div key={i} className="reveal flex items-center gap-4 p-5 rounded-2xl border border-white/10 bg-card hover:border-coral/30 transition-colors" data-d={(i % 3) + 1}>
                <div className="w-12 h-12 rounded-xl bg-coral/12 border border-coral/30 flex items-center justify-center shrink-0"><Icon name={a.icon} className="w-5 h-5 text-coral" /></div>
                <div className="flex-1 min-w-0">
                  <div className="font-bold text-sm">{L(a.name, lang)}</div>
                  <div className="text-gold-soft text-sm serif">{a.price ? "$" + a.price : (a.note ? L(a.note, lang) : t("Included", "Incluido"))}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== closing concierge CTA ===== */}
      <section className="container">
        <div id="exp-concierge" className="reveal rounded-3xl overflow-hidden relative scroll-mt-24">
          <div className="absolute inset-0 bg-gradient-to-r from-coral via-[#d6554a] to-grape opacity-95"></div>
          <div className="relative z-10 p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-6 text-center md:text-left">
            <div>
              <h3 className="text-3xl md:text-4xl font-black uppercase mb-2">{t("Not sure where to start?", "¿No sabes por dónde empezar?")}</h3>
              <p className="text-white/85 max-w-lg">{t("Tell us your night, group size and budget — your VIP host designs the whole experience for you, free of charge.", "Cuéntanos tu noche, tamaño del grupo y presupuesto — tu host VIP diseña toda la experiencia por ti, sin costo.")}</p>
            </div>
            <a href={window.PP.waLink(t("Hi Pink Pony — I'd like a VIP host to plan my night.", "Hola Pink Pony — quiero que un host VIP planee mi noche."))} target="_blank" rel="noopener" className="gbtn shrink-0 inline-flex items-center gap-2 bg-white text-coral px-8 py-4 rounded-full text-[13px] font-bold uppercase tracking-[0.16em] hover:scale-105 transition-transform shadow-2xl"><Icon name="message-circle" className="w-4 h-4" />{t("Message concierge", "Escribir al concierge")}</a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ExperiencesPage });