/* ============================================================
   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();

  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("16,000 sq ft of Miami's most exclusive nightlife — built for galas, launches, productions and private celebrations.", "16,000 ft² del nightlife más exclusivo de Miami — para galas, lanzamientos, producciones y celebraciones privadas.")}</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">
          {[["500", t("Guest Capacity", "Capacidad")], ["16K", t("Sq Ft", "Pies²")], ["2", t("Floors", "Pisos")], ["20+", t("4K Screens", "Pantallas 4K")]].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>

      {/* 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>

      {/* 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 className="py-20 md:py-24 bg-ink border-y border-white/8">
        <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 });