/* ============================================================
   EXPERIENCES — curated packages + VIP add-ons
   ============================================================ */
function ExperiencesPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const E = window.PP.EXPERIENCES;
  const A = window.PP.ADDONS;
  useReveal();

  return (
    <div className="pt-28 md:pt-32 pb-24">
      <div className="container">
        <div className="reveal max-w-2xl mb-12">
          <Eyebrow num="">{t("Curated For You", "Curado Para Ti")}</Eyebrow>
          <h1 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mt-4 mb-4">{t(<>The <span className="serif-it font-normal text-coral">Experiences</span></>, <>Las <span className="serif-it font-normal text-coral">Experiencias</span></>)}</h1>
          <p className="text-white/60 text-lg">{t("Bachelor parties, birthdays, fight nights and private galas — fully produced by our hospitality team.", "Despedidas, cumpleaños, noches de pelea y galas privadas — producidas por nuestro equipo de hospitalidad.")}</p>
        </div>

        {/* packages */}
        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {E.map((e, i) => (
            <div key={e.id} className="reveal group rounded-3xl overflow-hidden border border-white/10 bg-card hover:border-coral/40 transition-all hover:-translate-y-1.5" data-d={(i % 3) + 1}>
              <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" imgClass="object-cover transition-transform duration-[900ms] group-hover:scale-110" style={{ filter: "brightness(.7)" }} />
                <div className="absolute inset-0 bg-gradient-to-t from-card via-black/20 to-transparent"></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"><Icon name={e.icon} className="w-5 h-5 text-coral" /></div>
                <div className="absolute bottom-4 left-6 right-6">
                  <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>
              <div className="p-6">
                <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">
                  <div><span className="label text-white/40 text-[10px]">{t("From", "Desde")}</span><div className="serif text-3xl text-gold-soft leading-none">${e.from.toLocaleString()}</div></div>
                  <button onClick={() => 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"),
                    )} className="gbtn px-6 py-3 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] transition-all flex items-center gap-2">{t("Inquire", "Solicitar")}<Icon name="arrow-right" className="w-4 h-4" /></button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* add-ons */}
        <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></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" 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>

        {/* concierge band */}
        <div className="reveal mt-14 rounded-3xl overflow-hidden relative">
          <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("Plan with a VIP host", "Planea con un host VIP")}</h3>
              <p className="text-white/85 max-w-lg">{t("Tell us your night and budget — our concierge builds the whole experience for you.", "Cuéntanos tu noche y presupuesto — nuestro concierge arma toda la experiencia por ti.")}</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>
      </div>
    </div>
  );
}

Object.assign(window, { ExperiencesPage });