/* ============================================================
   VENUE — about the space, rental spaces, pro inquiry form,
   dress code, FAQ, policies
   ============================================================ */
function VenuePage({ go }) {
  const t = useT(); const { lang } = useLang();
  const { VENUE_SPACES, VENUE_GALLERY, FAQ, DRESS_CODE } = window.PP;
  const [sent, setSent] = useState(false);
  const [openFaq, setOpenFaq] = useState(0);
  const [lightbox, setLightbox] = useState(null);
  useReveal();

  // two-floor layout — every space the club has
  const MAIN_FLOOR = [
    ["drama", t("LED Center Stage", "Tarima Central LED"), t("Circular infinity-glass stage with a center pole", "Tarima circular de cristal infinito con pole central")],
    ["door-open", t("Copper Entrance Tunnel", "Túnel de Entrada en Cobre"), t("A dramatic ribbed arrival into the room", "Una entrada dramática y acanalada al salón")],
    ["martini", t("Main Bar", "Barra Principal"), t("Full bar with signature mixology", "Barra completa con mixología de firma")],
    ["wine", t("Tequila Bottle Vault", "Bóveda de Botellas"), t("Blue-lit acrylic display of premium bottles", "Vitrina acrílica iluminada de botellas premium")],
    ["armchair", t("Ringside VIP Seating", "Asientos VIP Ringside"), t("Velvet tub chairs wrapped around the stage", "Sillas de terciopelo alrededor de la tarima")],
    ["bath", t("Restrooms", "Baños"), t("Damask & marble, on both floors", "Damasco y mármol, en ambos pisos")],
  ];
  const SECOND_FLOOR = [
    ["crown", t("VIP Mezzanine", "Mezzanine VIP"), t("The whole second floor is VIP", "Todo el segundo piso es VIP")],
    ["eye", t("Stage Overlook", "Vista a la Tarima"), t("Look down on the stage through neon glass", "Mira la tarima desde arriba tras el cristal neón")],
    ["sparkles", t("Star-Light Velvet Walls", "Muros de Terciopelo con Luces"), t("Tufted velvet studded with starlight", "Terciopelo capitoné tachonado de luces")],
    ["door-closed", t("The Red Room", "El Red Room"), t("Private red-damask lounge with its own bar & pole", "Lounge privado de damasco rojo con bar y pole propios")],
    ["wine", t("Mezzanine Bar", "Barra del Mezzanine"), t("A full second bar upstairs", "Una segunda barra completa arriba")],
    ["gem", t("Corner VIP Suites", "Suites VIP de Esquina"), t("The best seats in the house", "Los mejores lugares de la casa")],
  ];
  // the nightly experience / live production
  const EXPERIENCE = [
    ["martini", t("Signature Mixology", "Mixología de Firma")],
    ["disc-3", t("DJ + Live Host", "DJ + Animador")],
    ["sparkles", t("Light Show", "Show de Luces")],
    ["drama", t("Dancer Shows", "Show de Dancers")],
    ["activity", t("Pole Dance", "Pole Dance")],
    ["flame", t("Sensual Dance", "Sensual Dance")],
    ["star", t("Guest Artists", "Artistas Invitados")],
    ["mic-vocal", t("Live Performances", "Performances en Vivo")],
    ["drum", t("Live Timbal", "Timbalero en Vivo")],
    ["camera", t("Professional Photography", "Fotografía Profesional")],
  ];
  // brand & corporate services
  const SERVICES = [
    ["palette", t("Graphic design for marketing campaigns", "Diseño gráfico para campañas de marketing"), t("In-house creative for your promo & assets.", "Creativo propio para tu promo y materiales.")],
    ["handshake", t("Brand collaborations & activations", "Colaboraciones y activaciones de marca"), t("Co-branded nights and product activations.", "Noches co-branded y activaciones de producto.")],
    ["briefcase", t("Corporate events", "Eventos corporativos"), t("Launches, parties and private buyouts.", "Lanzamientos, fiestas y buyouts privados.")],
    ["utensils", t("Active kitchen", "Cocina activa"), t("Chef-driven food served all night.", "Cocina de autor servida toda la noche.")],
  ];

  return (
    <div>
      {/* hero */}
      <section className="relative min-h-[80vh] flex items-end overflow-hidden">
        <Photo src="assets/venue/red-room.jpg" alt="Pink Pony venue" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.5)" }} />
        <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-black/40"></div>
        <div className="container relative z-10 pb-16">
          <div className="label text-gold-soft mb-4">{t("Private Events & Buyouts", "Eventos Privados y Buyouts")}</div>
          <h1 className="text-5xl md:text-8xl font-black uppercase leading-[0.86] mb-5 max-w-4xl">{t(<>Rent the <span className="serif-it font-normal text-coral">Room</span></>, <>Renta el <span className="serif-it font-normal text-coral">Salón</span></>)}</h1>
          <p className="text-white/70 text-lg max-w-xl">{t("Two floors of Miami's most exclusive nightlife — a circular LED infinity stage, a velvet mezzanine, the private Red Room, a blue-lit bottle vault and a chef-driven kitchen. From the copper entrance tunnel to the last pour.", "Dos pisos del nightlife más exclusivo de Miami — una tarima LED circular de infinito, un mezzanine de terciopelo, el Red Room privado, una bóveda de botellas iluminada y cocina de autor. Desde el túnel de entrada en cobre hasta el último trago.")}</p>
        </div>
      </section>

      {/* stats */}
      <section className="py-12 bg-ink border-y border-white/8">
        <div className="container grid grid-cols-2 md:grid-cols-4 gap-6">
          {[["2", t("Floors of VIP", "Pisos de VIP")], ["12–5", t("Open Daily (PM–AM)", "Abierto Cada Día (PM–AM)")], ["2", t("Giant Screens", "Pantallas Gigantes")], ["7", t("Nights a Week", "Noches por Semana")]].map(([n, l], i) => (
            <div key={i} className="reveal text-center" data-d={(i % 3) + 1}><div className="serif text-4xl md:text-5xl text-gold-soft">{n}</div><div className="label text-white/50 text-[10px] mt-1">{l}</div></div>
          ))}
        </div>
      </section>

      {/* TWO-FLOOR LAYOUT */}
      <section className="py-20 md:py-24">
        <div className="container">
          <div className="reveal mb-10 text-center"><Eyebrow num="" className="justify-center">{t("The Layout", "La Distribución")}</Eyebrow><Heading className="mt-3">{t(<>Two floors, <span className="serif-it font-normal text-coral">all VIP</span></>, <>Dos pisos, <span className="serif-it font-normal text-coral">todo VIP</span></>)}</Heading></div>
          <div className="grid lg:grid-cols-2 gap-5">
            {[[t("Main Floor", "Planta Principal"), t("Downstairs", "Abajo"), "var(--c-coral)", MAIN_FLOOR],
              [t("Second Floor", "Segundo Piso"), t("Upstairs · VIP", "Arriba · VIP"), "#9333EA", SECOND_FLOOR]].map(([title, sub, color, items], k) => (
              <div key={k} className="reveal rounded-3xl border border-white/12 bg-card p-6 md:p-7" data-d={(k % 3) + 1}>
                <div className="flex items-center justify-between mb-5">
                  <div><div className="text-2xl font-black uppercase">{title}</div><div className="label text-[10px] mt-0.5" style={{ color }}>{sub}</div></div>
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: color + "1f", border: "1px solid " + color + "55" }}><Icon name={k === 0 ? "store" : "layers"} className="w-5 h-5" style={{ color }} /></div>
                </div>
                <div className="space-y-2.5">
                  {items.map(([ic, name, d], i) => (
                    <div key={i} className="flex items-start gap-3 rounded-xl border border-white/8 bg-white/[.02] px-3.5 py-3">
                      <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style={{ background: color + "18" }}><Icon name={ic} className="w-4 h-4" style={{ color }} /></div>
                      <div className="min-w-0"><div className="font-bold text-[13.5px] leading-tight">{name}</div><div className="text-white/50 text-[12px] mt-0.5">{d}</div></div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* gallery — real club photography */}
      <section className="py-20 md:py-24">
        <div className="container">
          <div className="reveal mb-9 text-center"><Eyebrow num="" className="justify-center">{t("The Space", "El Espacio")}</Eyebrow><Heading className="mt-3">{t(<>Inside <span className="serif-it font-normal text-coral">Pink Pony</span></>, <>Dentro de <span className="serif-it font-normal text-coral">Pink Pony</span></>)}</Heading></div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
            {VENUE_GALLERY.map((g, i) => (
              <button key={i} onClick={() => setLightbox(g.img)} className={"reveal group relative overflow-hidden rounded-2xl border border-white/10 aspect-[4/3] " + (i === 0 ? "col-span-2" : "")} data-d={(i % 3) + 1}>
                <Photo src={window.PP.SRC(g.img, 1100, 825)} alt={L(g.name, lang)} className="absolute inset-0 w-full h-full" imgClass="object-cover transition-transform duration-[900ms] group-hover:scale-105" style={{ filter: "brightness(.84)" }} />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
                <div className="absolute inset-x-0 bottom-0 p-4 text-left"><div className="label text-white text-[10px] md:text-[11px]">{L(g.name, lang)}</div></div>
                <div className="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/40 backdrop-blur border border-white/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><Icon name="expand" className="w-4 h-4 text-white" /></div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* THE EXPERIENCE / live production */}
      <section className="py-20 md:py-24 bg-ink border-t border-white/8">
        <div className="container">
          <div className="reveal mb-10 text-center">
            <Eyebrow num="" className="justify-center">{t("The Experience", "La Experiencia")}</Eyebrow>
            <Heading className="mt-3">{t(<>A full <span className="serif-it font-normal text-coral">production</span>, every night</>, <>Una <span className="serif-it font-normal text-coral">producción</span> completa, cada noche</>)}</Heading>
            <p className="reveal text-white/55 max-w-xl mx-auto mt-4" data-d="2">{t("Mixology, live music and a stage show — choreographed into one unforgettable night.", "Mixología, música en vivo y show de tarima — coreografiados en una noche inolvidable.")}</p>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 md:gap-4">
            {EXPERIENCE.map(([ic, label], i) => (
              <div key={i} className="reveal group rounded-2xl border border-white/10 bg-card hover:border-coral/40 transition-all p-5 text-center flex flex-col items-center gap-3" data-d={(i % 3) + 1}>
                <div className="w-12 h-12 rounded-2xl bg-coral/12 flex items-center justify-center group-hover:scale-110 transition-transform"><Icon name={ic} className="w-6 h-6 text-coral" /></div>
                <div className="font-bold text-[13px] uppercase tracking-wide leading-tight">{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOR BRANDS & PRODUCTIONS */}
      <section className="py-20 md:py-24">
        <div className="container">
          <div className="reveal mb-10"><Eyebrow num="">{t("Brands & Productions", "Marcas y Producciones")}</Eyebrow><Heading className="mt-3">{t(<>Built for <span className="serif-it font-normal text-coral">collaborations</span></>, <>Hecho para <span className="serif-it font-normal text-coral">colaboraciones</span></>)}</Heading></div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {SERVICES.map(([ic, title, d], i) => (
              <div key={i} className="reveal rounded-2xl border border-white/10 bg-card p-6" data-d={(i % 3) + 1}>
                <div className="w-11 h-11 rounded-xl bg-gold/12 flex items-center justify-center mb-4"><Icon name={ic} className="w-5 h-5 text-gold-soft" /></div>
                <h3 className="font-black uppercase text-[15px] leading-tight mb-1.5">{title}</h3>
                <p className="text-white/55 text-[13px] leading-relaxed">{d}</p>
              </div>
            ))}
          </div>
          <div className="reveal mt-8 text-center"><PrimaryBtn icon="arrow-right" onClick={() => { const el = document.getElementById("venue-inquiry"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>{t("Plan your event", "Planifica tu evento")}</PrimaryBtn></div>
        </div>
      </section>

      {/* spaces */}
      <section className="py-20 md:py-24 bg-ink border-t border-white/8">
        <div className="container">
          <div className="reveal mb-9"><Eyebrow num="">{t("The Spaces", "Los Espacios")}</Eyebrow><Heading className="mt-3">{t(<>Choose your <span className="serif-it font-normal text-coral">canvas</span></>, <>Elige tu <span className="serif-it font-normal text-coral">lienzo</span></>)}</Heading></div>
          <div className="grid md:grid-cols-3 gap-5">
            {VENUE_SPACES.map((s, i) => (
              <div key={i} className="reveal group rounded-2xl overflow-hidden border border-white/10 bg-card hover:border-coral/40 transition-all" data-d={(i % 3) + 1}>
                <div className="relative h-52 overflow-hidden">
                  <Photo src={window.PP.SRC(s.img, 800, 600)} alt={L(s.name, lang)} className="absolute inset-0 w-full h-full" imgClass="object-cover transition-transform duration-[900ms] group-hover:scale-110" style={{ filter: "brightness(.78)" }} />
                  <div className="absolute inset-0 bg-gradient-to-t from-card to-transparent"></div>
                  <div className="absolute bottom-3 right-3"><Chip color="var(--c-gold)"><Icon name="users" className="w-3 h-3" />{t("Up to", "Hasta")} {s.cap}</Chip></div>
                </div>
                <div className="p-5"><h3 className="font-bold text-lg uppercase tracking-wide mb-1.5">{L(s.name, lang)}</h3><p className="text-white/55 text-sm">{L(s.d, lang)}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* inquiry form */}
      <section id="venue-inquiry" className="py-20 md:py-24 bg-ink border-y border-white/8 scroll-mt-20">
        <div className="container grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5 reveal">
            <Eyebrow num="">{t("Request a Proposal", "Solicita una Propuesta")}</Eyebrow>
            <h2 className="text-4xl md:text-5xl font-black uppercase leading-[0.95] mt-4 mb-5">{t(<>Let's build your <span className="serif-it font-normal text-coral">night</span></>, <>Construyamos tu <span className="serif-it font-normal text-coral">noche</span></>)}</h2>
            <p className="text-white/60 mb-7">{t("Share a few details and our events team will reply within 24 hours with availability and a custom proposal.", "Comparte algunos detalles y nuestro equipo de eventos responderá en 24 horas con disponibilidad y una propuesta personalizada.")}</p>
            <div className="space-y-4">
              <a href={"https://wa.me/" + window.PP.WA} target="_blank" rel="noopener" className="flex items-center gap-3 text-white/70 hover:text-white transition-colors"><Icon name="phone" className="w-4 h-4 text-gold" /> {window.PP.WA_DISPLAY}</a>
              <div className="flex items-center gap-3 text-white/70"><Icon name="mail" className="w-4 h-4 text-gold" /> events@clubpinkpony.com</div>
              <div className="flex items-center gap-3 text-white/70"><Icon name="map-pin" className="w-4 h-4 text-gold" /> 7971 NW 33rd St, Doral, FL</div>
            </div>
          </div>
          <div className="lg:col-span-7 reveal" data-d="1">
            {sent ? (
              <div className="h-full min-h-[340px] rounded-2xl border border-coral/40 bg-coral/8 flex flex-col items-center justify-center text-center p-10 fade-view">
                <div className="w-16 h-16 rounded-full bg-coral/15 border border-coral flex items-center justify-center mb-5"><Icon name="check" className="w-7 h-7 text-coral" /></div>
                <h3 className="text-2xl font-black uppercase mb-2">{t("Request received", "Solicitud recibida")}</h3>
                <p className="text-white/60 max-w-sm">{t("Our events team will reach out within 24 hours. Check your email for a confirmation.", "Nuestro equipo de eventos te contactará en 24 horas. Revisa tu correo para la confirmación.")}</p>
              </div>
            ) : (
              <form onSubmit={(e) => {
                  e.preventDefault();
                  const d = Object.fromEntries(new FormData(e.target));
                  window.PP.waOpen(
                    t("Private event / buyout inquiry — Pink Pony Club", "Solicitud de evento privado / buyout — Pink Pony Club"),
                    [
                      [t("Name", "Nombre"), d.name],
                      [t("Company", "Empresa"), d.company],
                      [t("Email", "Correo"), d.email],
                      [t("Phone", "Teléfono"), d.phone],
                      [t("Event type", "Tipo de evento"), d.eventType],
                      [t("Estimated guests", "Invitados estimados"), d.guests],
                      [t("Preferred date", "Fecha preferida"), d.date],
                      [t("Details", "Detalles"), d.details],
                    ],
                    t("Sent from clubpinkpony.com", "Enviado desde clubpinkpony.com"),
                  );
                  setSent(true);
                }} className="rounded-2xl border border-white/12 bg-card p-6 md:p-7 grid sm:grid-cols-2 gap-4">
                {[["name", "user", t("Full name", "Nombre completo")], ["company", "briefcase", t("Company (optional)", "Empresa (opcional)")], ["email", "mail", t("Email", "Correo")], ["phone", "phone", t("Phone", "Teléfono")]].map(([k, ic, ph], i) => (
                  <div key={k} className={"relative " + (k === "name" || k === "company" ? "" : "")}>
                    <Icon name={ic} className="w-4 h-4 text-white/35 absolute left-4 top-1/2 -translate-y-1/2" />
                    <input name={k} type={k === "email" ? "email" : k === "phone" ? "tel" : "text"} required={k !== "company"} placeholder={ph} className="w-full bg-ink border border-white/12 rounded-xl pl-11 pr-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
                  </div>
                ))}
                <label className="block"><span className="label text-white/45 text-[10px] block mb-1.5">{t("Event type", "Tipo de evento")}</span>
                  <select name="eventType" className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral">
                    {[t("Full buyout", "Venue completo"), t("Corporate", "Corporativo"), t("Birthday", "Cumpleaños"), t("Bachelor", "Despedida"), t("Brand / Launch", "Marca / Lanzamiento"), t("Production / Film", "Producción / Film")].map((o) => <option key={o} className="bg-ink">{o}</option>)}
                  </select>
                </label>
                <label className="block"><span className="label text-white/45 text-[10px] block mb-1.5">{t("Estimated guests", "Invitados estimados")}</span>
                  <input name="guests" type="number" min="1" placeholder="100" className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
                </label>
                <div className="sm:col-span-2"><span className="label text-white/45 text-[10px] block mb-1.5">{t("Preferred date", "Fecha preferida")}</span>
                  <input name="date" type="date" min={new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 10)} className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral" style={{ colorScheme: "dark" }} />
                </div>
                <textarea name="details" rows={3} placeholder={t("Tell us about your event…", "Cuéntanos sobre tu evento…")} className="sm:col-span-2 w-full bg-ink border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35 resize-none"></textarea>
                <button type="submit" className="sm:col-span-2 gbtn py-4 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.16em] transition-all">{t("Request proposal", "Solicitar propuesta")}</button>
              </form>
            )}
          </div>
        </div>
      </section>

      {/* dress code + policies */}
      <section className="py-20 md:py-24">
        <div className="container grid lg:grid-cols-2 gap-10">
          <div className="reveal">
            <Eyebrow num="">{t("Dress Code", "Código de Vestimenta")}</Eyebrow>
            <h3 className="text-3xl font-black uppercase mt-3 mb-6">{t("Dress to impress", "Vístete para impresionar")}</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="rounded-2xl border border-white/10 bg-card p-5">
                <div className="flex items-center gap-2 text-gold mb-3 label text-[11px]"><Icon name="check" className="w-4 h-4" />{t("Encouraged", "Recomendado")}</div>
                <ul className="space-y-2">{DRESS_CODE.yes.map((x, i) => <li key={i} className="text-sm text-white/70">{L(x, lang)}</li>)}</ul>
              </div>
              <div className="rounded-2xl border border-white/10 bg-card p-5">
                <div className="flex items-center gap-2 text-coral mb-3 label text-[11px]"><Icon name="x" className="w-4 h-4" />{t("Not allowed", "No permitido")}</div>
                <ul className="space-y-2">{DRESS_CODE.no.map((x, i) => <li key={i} className="text-sm text-white/70">{L(x, lang)}</li>)}</ul>
              </div>
            </div>
            <div className="mt-5 flex items-center gap-3 rounded-xl border border-gold/30 bg-gold/5 p-4">
              <Icon name="badge-check" className="w-5 h-5 text-gold shrink-0" />
              <p className="text-sm text-white/75">{t("Strictly 21+. A valid government-issued photo ID is required for entry — no exceptions.", "Estrictamente 21+. Se requiere identificación oficial con foto para entrar — sin excepciones.")}</p>
            </div>
          </div>
          <div className="reveal" data-d="1">
            <Eyebrow num="">{t("Good to Know", "Bueno Saber")}</Eyebrow>
            <h3 className="text-3xl font-black uppercase mt-3 mb-6">FAQ</h3>
            <div className="border-t border-white/10">
              {FAQ.map((f, i) => {
                const open = openFaq === i;
                return (
                  <div key={i} className="border-b border-white/10">
                    <button onClick={() => setOpenFaq(open ? -1 : i)} className="w-full flex items-center justify-between gap-4 py-4 text-left">
                      <span className={"font-semibold transition-colors " + (open ? "text-white" : "text-white/70")}>{L(f.q, lang)}</span>
                      <Icon name={open ? "minus" : "plus"} className="w-4 h-4 text-coral shrink-0" />
                    </button>
                    <div className="overflow-hidden transition-all duration-400" style={{ maxHeight: open ? 160 : 0 }}><p className="text-white/55 text-sm pb-4 pr-6">{L(f.a, lang)}</p></div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* lightbox */}
      {lightbox && (
        <div onClick={() => setLightbox(null)} className="fixed inset-0 z-[60] bg-black/92 backdrop-blur-sm flex items-center justify-center p-4 fade-view">
          <button onClick={() => setLightbox(null)} className="absolute top-5 right-5 w-11 h-11 rounded-full bg-white/10 border border-white/25 flex items-center justify-center text-white hover:bg-white/20 transition-colors"><Icon name="x" className="w-5 h-5" /></button>
          <img src={window.__asset ? window.__asset(lightbox) : lightbox} alt="" className="max-w-full max-h-[88vh] rounded-xl object-contain shadow-2xl" />
        </div>
      )}
    </div>
  );
}

Object.assign(window, { VenuePage });