/* ============================================================
   MEMBERSHIP — shows what the Pink Pony app does (perks/features)
   and invites guests to a single waitlist. No tiers, no prices.
   The waitlist form saves to PPDB.memberships and goes straight to
   WhatsApp.
   ============================================================ */
function MembershipWaitlist() {
  const t = useT();
  const blank = { name: "", phone: "", email: "", note: "" };
  const [f, setF] = useState(blank);
  const [done, setDone] = useState(false);
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const phoneDigits = f.phone.replace(/\D/g, "");

  const submit = (e) => {
    e.preventDefault();
    if (!f.name.trim()) return window.toast(t("Enter your name.", "Escribe tu nombre."), "error");
    if (phoneDigits.length < 10) return window.toast(t("Enter a valid 10-digit phone.", "Ingresa un teléfono válido de 10 dígitos."), "error");
    if (!/.+@.+\..+/.test(f.email)) return window.toast(t("Enter a valid email.", "Ingresa un correo válido."), "error");
    const phoneFull = "+1" + phoneDigits.slice(-10);
    // save to the database
    window.PPDB.memberships.add({ name: f.name.trim(), phone: phoneFull, email: f.email.trim(), note: f.note.trim() });
    // send the request straight to the club WhatsApp (also a lead)
    try {
      window.PP.waOpen(
        t("Membership Waitlist — Pink Pony Club", "Lista de Espera de Membresía — Pink Pony Club"),
        [
          [t("Name", "Nombre"), f.name.trim()],
          [t("Phone", "Teléfono"), phoneFull],
          ["Email", f.email.trim()],
          [t("Note", "Nota"), f.note.trim()],
        ],
        t("Membership waitlist · sent from clubpinkpony.com", "Lista de espera de membresía · enviado desde clubpinkpony.com"),
      );
    } catch (e2) {}
    window.toast(t("You're on the waitlist! 🎉", "¡Estás en la lista de espera! 🎉"));
    setDone(true);
  };

  if (done) return (
    <div className="rounded-3xl border border-white/12 bg-card p-8 text-center fade-view">
      <div className="w-16 h-16 rounded-full bg-green-500/15 border border-green-500 flex items-center justify-center mx-auto mb-5"><Icon name="check" className="w-8 h-8 text-green-400" /></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 leading-relaxed">{t("Thanks for your interest. We'll message you the moment the membership app launches — you'll be first in.", "Gracias por tu interés. Te escribiremos en cuanto lance la app de membresía — serás de los primeros.")}</p>
    </div>
  );

  return (
    <form onSubmit={submit} className="rounded-3xl border border-coral/30 bg-card p-6 md:p-8 space-y-4" style={{ background: "linear-gradient(180deg,rgba(255,107,91,.08),rgba(20,20,22,.6))" }}>
      <div className="text-center mb-1">
        <div className="serif text-2xl text-coral mb-1">{t("Be first in", "Entra de primero")}</div>
        <p className="text-white/60 text-sm">{t("Join the waitlist and we'll text you when the app opens.", "Únete a la lista y te escribimos cuando abra la app.")}</p>
      </div>
      <input value={f.name} onChange={(e) => set("name", e.target.value)} placeholder={t("Full name *", "Nombre completo *")} 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" />
      <div className="grid sm:grid-cols-2 gap-4">
        <input type="tel" inputMode="numeric" value={f.phone} onChange={(e) => set("phone", e.target.value.replace(/[^\d() \-+]/g, "").slice(0, 16))} placeholder={t("Mobile *", "Móvil *")} 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" />
        <input type="email" value={f.email} onChange={(e) => set("email", e.target.value)} placeholder="Email *" 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" />
      </div>
      <input value={f.note} onChange={(e) => set("note", e.target.value)} placeholder={t("Anything we should know? (optional)", "¿Algo que debamos saber? (opcional)")} 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" />
      <button className="gbtn w-full py-4 rounded-full text-white text-[12px] font-black uppercase tracking-[0.16em] flex items-center justify-center gap-2" style={{ background: "linear-gradient(135deg,#FF2E88,#FF6B5B)", boxShadow: "0 10px 32px rgba(255,46,136,.4)" }}><Icon name="message-circle" className="w-4 h-4" />{t("Join the waitlist", "Unirme a la lista")}</button>
      <p className="text-white/30 text-[11px] text-center">{t("We'll save your spot and message you on WhatsApp. 21+ only. No payment now.", "Guardamos tu lugar y te escribimos por WhatsApp. Solo 21+. Sin pago ahora.")}</p>
    </form>
  );
}

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

  // what the Pink Pony app does
  const FEATURES = [
    ["zap", t("Skip the line", "Sin fila"), t("Walk straight in, every night.", "Entra directo, todas las noches.")],
    ["flame", "PonyMatch", t("Meet the crowd before you even arrive.", "Conoce a la gente antes de llegar.")],
    ["ticket", t("Free Drops", "Drops Gratis"), t("Claim free entries, bottles & skip-the-line passes weekly.", "Reclama entradas, botellas y pases sin fila cada semana.")],
    ["user-plus", t("Invite your crew", "Invita a tu gente"), t("Guest-list spots and points for every friend who joins.", "Lugares en guest list y puntos por cada amigo que entra.")],
    ["star", t("Loyalty rewards", "Recompensas de lealtad"), t("Earn points on every visit and redeem perks.", "Gana puntos en cada visita y canjéalos por beneficios.")],
    ["circle-play", t("Exclusive content", "Contenido exclusivo"), t("Backstage clips and performer-only videos.", "Clips de backstage y videos de performers.")],
    ["calendar-check", t("1-tap reservations", "Reservas en 1 toque"), t("Book your table in seconds from your phone.", "Reserva tu mesa en segundos desde tu teléfono.")],
    ["wallet", t("Wallet & member card", "Billetera y tarjeta"), t("Bottle credit and your digital membership card.", "Crédito de botellas y tu tarjeta digital de miembro.")],
  ];

  return (
    <main className="pt-28 md:pt-32 pb-24">
      {/* hero */}
      <div className="container text-center max-w-2xl mx-auto mb-14">
        <div className="reveal inline-flex items-center gap-2 rounded-full border border-gold/40 bg-gold/10 px-4 py-1.5 mb-5">
          <Icon name="smartphone" className="w-3.5 h-3.5 text-gold-soft" /><span className="label text-gold-soft text-[10px]">{t("The Pink Pony App · Coming soon", "La App Pink Pony · Próximamente")}</span>
        </div>
        <h1 className="reveal text-4xl md:text-7xl font-black uppercase leading-[0.92]" data-d="1">{t(<>The club, <span className="serif-it font-normal text-coral">in your pocket</span></>, <>El club, <span className="serif-it font-normal text-coral">en tu bolsillo</span></>)}</h1>
        <p className="reveal text-white/60 text-lg mt-5" data-d="2">{t("Everything Pink Pony — skip-the-line, free drops, rewards, exclusive content and 1-tap reservations — all from one app. Launching soon.", "Todo Pink Pony — sin fila, drops gratis, recompensas, contenido exclusivo y reservas en 1 toque — todo desde una app. Próximamente.")}</p>
      </div>

      {/* app features */}
      <div className="container">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
          {FEATURES.map(([ic, ttl, sub], i) => (
            <div key={i} className="reveal group rounded-2xl border border-white/10 bg-card hover:border-coral/40 transition-all p-6" data-d={(i % 3) + 1}>
              <div className="w-12 h-12 rounded-2xl bg-coral/12 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"><Icon name={ic} className="w-6 h-6 text-coral" /></div>
              <h3 className="font-black uppercase text-[15px] leading-tight mb-1.5">{ttl}</h3>
              <p className="text-white/55 text-[13px] leading-relaxed">{sub}</p>
            </div>
          ))}
        </div>

        {/* single waitlist invitation */}
        <div className="max-w-lg mx-auto">
          <div className="reveal text-center mb-6">
            <Eyebrow num="" className="justify-center">{t("Membership", "Membresía")}</Eyebrow>
            <h2 className="text-3xl md:text-4xl font-black uppercase mt-3">{t(<>Join the <span className="serif-it font-normal text-coral">waitlist</span></>, <>Únete a la <span className="serif-it font-normal text-coral">lista</span></>)}</h2>
            <p className="text-white/55 mt-3">{t("Memberships open soon. Leave your details and be first to get in — it takes 20 seconds.", "Las membresías abren pronto. Deja tus datos y sé el primero en entrar — toma 20 segundos.")}</p>
          </div>
          <MembershipWaitlist />
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { MembershipPage, MembershipWaitlist });