/* ============================================================
   CASTING CALL — public dancer-application landing + Typeform-style
   step-by-step application that validates the requirements and books
   an in-person audition (Mon–Fri, 12:00 PM – 12:00 AM).
   No backend: the finished application is routed to the club's
   WhatsApp via window.PP.waOpen (and the 3 photos are attached there).
   ============================================================ */

/* Shared input styles */
const CAST_INPUT =
  "w-full bg-white/[.04] border border-white/15 rounded-xl px-4 py-3.5 text-[15px] text-white focus:outline-none focus:border-coral focus:bg-white/[.06] transition-colors placeholder:text-white/30";
const CAST_LABEL = "label text-white/50 text-[10px] block mb-2";

/* A selectable pill (single or multi select) */
function CastPill({ active, children, onClick }) {
  return (
    <button
      onClick={onClick}
      className={
        "px-4 py-3 rounded-xl border text-[13.5px] font-semibold transition-all text-left " +
        (active
          ? "border-coral bg-coral/12 text-white shadow-[0_0_22px_-8px_rgba(255,107,91,.8)]"
          : "border-white/14 bg-white/[.03] text-white/75 hover:border-white/30")
      }
    >
      {children}
    </button>
  );
}

/* ---------- The Typeform-style application ---------- */
function CastingForm() {
  const t = useT();
  const { waOpen, WA_DISPLAY } = window.PP;

  const STEPS = 8; // 0 = welcome, 1..8 = questions, 9 = success
  const [step, setStep] = useState(0);
  const [f, setF] = useState({
    elig21: false,
    eligID: false,
    legalName: "",
    stageName: "",
    dob: "",
    phone: "",
    email: "",
    styles: [],
    clients: "",       // "yes" | "no"
    clientsCount: "",
    content: "",       // "yes" | "maybe" | "no"
    instagram: "",
    tiktok: "",
    day: "",
    time: "",
  });
  const [photos, setPhotos] = useState([]); // [{ url }]
  const fileRef = useRef(null);

  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const toggleStyle = (s) =>
    setF((p) => ({ ...p, styles: p.styles.includes(s) ? p.styles.filter((x) => x !== s) : [...p.styles, s] }));

  const STYLE_OPTS = [
    t("Pole dance", "Pole dance"),
    t("Exotic", "Exótico"),
    t("Strip show", "Strip show"),
    t("Go-go / podium", "Go-go / podium"),
    t("Hosting", "Hosting"),
    t("Bottle service", "Servicio de botellas"),
    t("Other", "Otro"),
  ];
  const DAYS = [
    ["Mon", t("Monday", "Lunes")],
    ["Tue", t("Tuesday", "Martes")],
    ["Wed", t("Wednesday", "Miércoles")],
    ["Thu", t("Thursday", "Jueves")],
    ["Fri", t("Friday", "Viernes")],
  ];
  // 12:00 PM → 12:00 AM (midnight)
  const TIMES = ["12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM",
    "6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM", "10:00 PM", "11:00 PM", "12:00 AM"];

  /* ---- photo upload (real files, local thumbnails) ---- */
  const onFiles = (e) => {
    const incoming = Array.from(e.target.files || []);
    setPhotos((prev) => {
      const next = [...prev];
      for (const file of incoming) {
        if (next.length >= 3) break;
        next.push({ url: URL.createObjectURL(file) });
      }
      return next;
    });
    e.target.value = "";
  };
  const removePhoto = (i) => setPhotos((prev) => prev.filter((_, idx) => idx !== i));

  /* ---- per-step validation ---- */
  const canNext = (() => {
    switch (step) {
      case 1: return f.elig21 && f.eligID;
      case 2: return f.legalName.trim() && f.phone.trim() && f.email.trim();
      case 3: return f.styles.length > 0;
      case 4: return f.clients !== "" && f.content !== "";
      case 5: return photos.length === 3;
      case 6: return true; // socials optional
      case 7: return f.day && f.time;
      default: return true;
    }
  })();

  const next = () => { if (canNext) setStep((s) => Math.min(s + 1, STEPS)); };
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const dayLabel = (DAYS.find((d) => d[0] === f.day) || [, ""])[1];

  const submit = () => {
    waOpen(
      t("Casting Call application — Pink Pony Club", "Aplicación a Casting Call — Pink Pony Club"),
      [
        [t("Legal name", "Nombre legal"), f.legalName],
        [t("Stage name", "Nombre artístico"), f.stageName],
        ["21+", f.elig21 ? t("Confirmed", "Confirmado") : ""],
        [t("Valid ID in person", "ID válido en persona"), f.eligID ? t("Yes", "Sí") : ""],
        [t("Date of birth", "Fecha de nacimiento"), f.dob],
        [t("Phone", "Teléfono"), f.phone],
        ["Email", f.email],
        [t("Experience", "Experiencia"), f.styles.join(", ")],
        [t("Brings clients/following", "Trae clientes/seguidores"),
          f.clients === "yes" ? (t("Yes", "Sí") + (f.clientsCount ? " (~" + f.clientsCount + ")" : "")) : t("No", "No")],
        [t("Open to content", "Dispuesta a contenido"),
          f.content === "yes" ? t("Yes", "Sí") : f.content === "maybe" ? t("Maybe", "Quizás") : t("No", "No")],
        ["Instagram", f.instagram],
        ["TikTok", f.tiktok],
        [t("Audition appointment", "Cita de audición"), f.day ? (dayLabel + " · " + f.time) : ""],
      ],
      t("I'll attach my 3 recent photos here in WhatsApp. Sent from clubpinkpony.com",
        "Adjunto mis 3 fotos recientes aquí en WhatsApp. Enviado desde clubpinkpony.com")
    );
    setStep(9);
  };

  /* ===================== WELCOME (step 0) ===================== */
  if (step === 0) {
    return (
      <div className="max-w-2xl mx-auto">
        <div className="rounded-3xl border border-white/10 bg-white/[.03] p-7 md:p-10 text-center">
          <div className="label text-coral mb-4">{t("Application", "Aplicación")}</div>
          <h3 className="text-3xl md:text-4xl font-black uppercase leading-[1.04] mb-5">
            {t(<>Apply to dance at <span className="serif-it font-normal text-coral">Pink Pony</span></>,
               <>Aplica para bailar en <span className="serif-it font-normal text-coral">Pink Pony</span></>)}
          </h3>
          <p className="text-white/60 text-[14px] leading-relaxed mb-6 max-w-lg mx-auto">
            {t("Thank you for your interest in applying to Pink Pony. Auditions are held Monday through Friday starting at 12:00 PM. All applicants must apply in person, present a valid ID, and be 21 years of age or older.",
               "Gracias por tu interés en aplicar a Pink Pony. Las audiciones son de lunes a viernes a partir de las 12:00 PM. Todas las aspirantes deben presentarse en persona, mostrar una identificación válida y ser mayores de 21 años.")}
          </p>
          <div className="grid sm:grid-cols-2 gap-3 text-left mb-7">
            {[
              ["calendar", t("Mon–Fri auditions", "Audiciones Lun–Vie"), t("From 12:00 PM, in person", "Desde las 12:00 PM, en persona")],
              ["shield-check", t("21+ with valid ID", "21+ con ID válido"), t("Government-issued photo ID", "Identificación oficial con foto")],
              ["image", t("3 recent photos", "3 fotos recientes"), t("Plus your social profiles", "Más tus perfiles sociales")],
              ["sparkles", t("Reviewed fairly", "Revisión justa"), t("Professionalism & presentation", "Profesionalismo y presentación")],
            ].map(([ic, ttl, sub]) => (
              <div key={ttl} className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/[.02] px-4 py-3.5">
                <div className="w-9 h-9 rounded-xl bg-coral/12 flex items-center justify-center shrink-0"><Icon name={ic} className="w-5 h-5 text-coral" /></div>
                <div><div className="text-[13px] font-bold leading-tight">{ttl}</div><div className="text-white/45 text-[11px] mt-0.5">{sub}</div></div>
              </div>
            ))}
          </div>
          <button onClick={() => setStep(1)} className="gbtn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-deep text-white text-[12.5px] font-bold uppercase tracking-[0.16em] rounded-full px-9 py-4" style={{ boxShadow: "0 16px 40px -12px rgba(255,107,91,.7)" }}>
            {t("Start application", "Comenzar aplicación")}<Icon name="arrow-right" className="w-4 h-4" />
          </button>
          <p className="text-white/35 text-[11px] mt-4">{t("Takes about 2 minutes · Sent to our talent team", "Toma unos 2 minutos · Va a nuestro equipo de talento")}</p>
        </div>
      </div>
    );
  }

  /* ===================== SUCCESS (step 9) ===================== */
  if (step === 9) {
    return (
      <div className="max-w-2xl mx-auto">
        <div className="rounded-3xl border border-green-500/25 bg-green-500/[.04] p-8 md:p-10 text-center">
          <div className="w-20 h-20 rounded-full bg-green-500/15 border border-green-500/60 flex items-center justify-center mx-auto mb-6"><Icon name="check" className="w-10 h-10 text-green-400" /></div>
          <h3 className="text-2xl md:text-3xl font-black uppercase mb-3">{t("Application sent", "Aplicación enviada")}</h3>
          <p className="text-white/60 text-[14px] leading-relaxed mb-2">
            {t("WhatsApp just opened with your application summary.", "Se abrió WhatsApp con el resumen de tu aplicación.")}
          </p>
          <div className="rounded-2xl border border-gold/25 bg-gold/5 px-5 py-4 text-[13px] text-white/75 my-6 text-left flex items-start gap-3">
            <Icon name="image" className="w-5 h-5 text-gold-soft shrink-0 mt-0.5" />
            <span>{t("Last step: attach your 3 recent photos in that WhatsApp chat and press send.",
                     "Último paso: adjunta tus 3 fotos recientes en ese chat de WhatsApp y presiona enviar.")}</span>
          </div>
          {f.day && (
            <div className="inline-flex items-center gap-2 rounded-full border border-coral/40 bg-coral/10 px-5 py-2.5 text-[13px] font-bold text-white mb-6">
              <Icon name="calendar-check" className="w-4 h-4 text-coral" />
              {t("Audition", "Audición")}: {dayLabel} · {f.time}
            </div>
          )}
          <div>
            <button onClick={() => { setStep(0); setPhotos([]); }} className="text-white/45 text-[11px] font-bold uppercase tracking-wider inline-flex items-center gap-2"><Icon name="rotate-ccw" className="w-3.5 h-3.5" />{t("Start over", "Empezar de nuevo")}</button>
          </div>
        </div>
      </div>
    );
  }

  /* ===================== QUESTION STEPS (1..8) ===================== */
  const titles = [
    null,
    t("Let's confirm you're eligible", "Confirmemos que eres elegible"),
    t("Tell us about you", "Cuéntanos de ti"),
    t("What's your experience?", "¿Qué experiencia tienes?"),
    t("Your following & content", "Tu público y contenido"),
    t("Upload 3 recent photos", "Sube 3 fotos recientes"),
    t("Your socials (optional)", "Tus redes (opcional)"),
    t("Book your audition", "Agenda tu audición"),
    t("Review & send", "Revisa y envía"),
  ];

  return (
    <div className="max-w-2xl mx-auto">
      <div className="rounded-3xl border border-white/10 bg-white/[.03] p-6 md:p-9">
        {/* progress */}
        <div className="flex items-center justify-between mb-2">
          <button onClick={back} className="w-9 h-9 rounded-full border border-white/14 flex items-center justify-center text-white/70 hover:border-white/40 transition-colors"><Icon name="chevron-left" className="w-4 h-4" /></button>
          <span className="label text-white/40 text-[10px]">{t("Step", "Paso")} {step}/{STEPS}</span>
          <div className="w-9"></div>
        </div>
        <div className="h-1 rounded-full bg-white/10 overflow-hidden mb-5"><div className="h-full rounded-full bg-gradient-to-r from-coral to-coral-deep transition-all duration-500" style={{ width: (step / STEPS * 100) + "%" }}></div></div>
        <h3 className="text-[22px] md:text-[26px] font-black uppercase leading-[1.05] mb-6">{titles[step]}</h3>

        {/* STEP 1 — eligibility gate */}
        {step === 1 && (
          <div className="space-y-3">
            {[["elig21", t("I am 21 years of age or older", "Tengo 21 años o más")],
              ["eligID", t("I can present a valid government-issued ID in person", "Puedo presentar una identificación oficial válida en persona")]].map(([k, lbl]) => (
              <button key={k} onClick={() => set(k, !f[k])} className={"w-full flex items-center gap-3.5 rounded-2xl border px-4 py-4 text-left transition-all " + (f[k] ? "border-green-500/50 bg-green-500/8" : "border-white/14 bg-white/[.03] hover:border-coral/50")}>
                <div className={"w-6 h-6 rounded-md flex items-center justify-center shrink-0 border " + (f[k] ? "bg-green-500 border-green-500" : "border-white/30")}>{f[k] && <Icon name="check" className="w-4 h-4 text-ink" />}</div>
                <span className="text-[14px] font-semibold">{lbl}</span>
              </button>
            ))}
            <p className="text-white/40 text-[12px] flex items-start gap-2 pt-1"><Icon name="info" className="w-4 h-4 text-gold-soft shrink-0 mt-0.5" />{t("Both are required to audition at Pink Pony.", "Ambos son obligatorios para audicionar en Pink Pony.")}</p>
          </div>
        )}

        {/* STEP 2 — about you */}
        {step === 2 && (
          <div className="space-y-4">
            <div className="grid sm:grid-cols-2 gap-4">
              <div><label className={CAST_LABEL}>{t("Legal name", "Nombre legal")}</label><input value={f.legalName} onChange={(e) => set("legalName", e.target.value)} placeholder="Sofía Marín" className={CAST_INPUT} /></div>
              <div><label className={CAST_LABEL}>{t("Stage name (optional)", "Nombre artístico (opcional)")}</label><input value={f.stageName} onChange={(e) => set("stageName", e.target.value)} placeholder="SCARLETT" className={CAST_INPUT} /></div>
            </div>
            <div className="grid sm:grid-cols-2 gap-4">
              <div><label className={CAST_LABEL}>{t("Date of birth", "Fecha de nacimiento")}</label><input value={f.dob} onChange={(e) => set("dob", e.target.value)} placeholder="MM / DD / YYYY" className={CAST_INPUT} /></div>
              <div><label className={CAST_LABEL}>{t("Phone", "Teléfono")}</label><input value={f.phone} onChange={(e) => set("phone", e.target.value)} placeholder="(305) 555-0148" className={CAST_INPUT} /></div>
            </div>
            <div><label className={CAST_LABEL}>Email</label><input value={f.email} onChange={(e) => set("email", e.target.value)} placeholder="sofia@email.com" className={CAST_INPUT} /></div>
          </div>
        )}

        {/* STEP 3 — experience */}
        {step === 3 && (
          <div>
            <p className="text-white/55 text-[13px] mb-4">{t("Select every style you have experience in.", "Selecciona todos los estilos en los que tienes experiencia.")}</p>
            <div className="grid grid-cols-2 gap-3">
              {STYLE_OPTS.map((s) => <CastPill key={s} active={f.styles.includes(s)} onClick={() => toggleStyle(s)}>{s}</CastPill>)}
            </div>
          </div>
        )}

        {/* STEP 4 — following & content */}
        {step === 4 && (
          <div className="space-y-6">
            <div>
              <label className={CAST_LABEL}>{t("Do you have clients or a following you'd bring to the club?", "¿Tienes clientes o seguidores que traerías al club?")}</label>
              <div className="grid grid-cols-2 gap-3">
                <CastPill active={f.clients === "yes"} onClick={() => set("clients", "yes")}>{t("Yes", "Sí")}</CastPill>
                <CastPill active={f.clients === "no"} onClick={() => set("clients", "no")}>{t("No", "No")}</CastPill>
              </div>
              {f.clients === "yes" && (
                <input value={f.clientsCount} onChange={(e) => set("clientsCount", e.target.value)} placeholder={t("Approx. how many?", "¿Aprox. cuántos?")} className={CAST_INPUT + " mt-3"} />
              )}
            </div>
            <div>
              <label className={CAST_LABEL}>{t("Would you be open to creating content to promote your nights?", "¿Estarías dispuesta a crear contenido para promocionar tus noches?")}</label>
              <div className="grid grid-cols-3 gap-3">
                <CastPill active={f.content === "yes"} onClick={() => set("content", "yes")}>{t("Yes", "Sí")}</CastPill>
                <CastPill active={f.content === "maybe"} onClick={() => set("content", "maybe")}>{t("Maybe", "Quizás")}</CastPill>
                <CastPill active={f.content === "no"} onClick={() => set("content", "no")}>{t("No", "No")}</CastPill>
              </div>
            </div>
          </div>
        )}

        {/* STEP 5 — photos */}
        {step === 5 && (
          <div>
            <p className="text-white/55 text-[13px] mb-4">{t("Add 3 clear, recent photos. These are shared only with our talent team.", "Agrega 3 fotos claras y recientes. Solo se comparten con nuestro equipo de talento.")}</p>
            <input ref={fileRef} type="file" accept="image/*" multiple onChange={onFiles} className="hidden" />
            <div className="grid grid-cols-3 gap-3">
              {[0, 1, 2].map((i) => {
                const p = photos[i];
                if (p) return (
                  <div key={i} className="relative aspect-[3/4] rounded-2xl overflow-hidden border border-white/15">
                    <img src={p.url} alt="" className="w-full h-full object-cover" />
                    <button onClick={() => removePhoto(i)} className="absolute top-1.5 right-1.5 w-7 h-7 rounded-full bg-ink/80 border border-white/20 flex items-center justify-center text-white/80"><Icon name="x" className="w-4 h-4" /></button>
                  </div>
                );
                return (
                  <button key={i} onClick={() => fileRef.current && fileRef.current.click()} className="aspect-[3/4] rounded-2xl border border-dashed border-white/25 bg-white/[.03] hover:border-coral/60 flex flex-col items-center justify-center gap-2 text-white/45 transition-colors">
                    <Icon name="image-plus" className="w-6 h-6" />
                    <span className="text-[11px] font-bold uppercase tracking-wide">{t("Add", "Agregar")}</span>
                  </button>
                );
              })}
            </div>
            <p className="text-white/40 text-[12px] mt-3">{photos.length}/3 {t("added", "agregadas")}</p>
          </div>
        )}

        {/* STEP 6 — socials (optional) */}
        {step === 6 && (
          <div className="space-y-4">
            <p className="text-white/55 text-[13px]">{t("Optional, but it helps us review faster.", "Opcional, pero nos ayuda a revisar más rápido.")}</p>
            <div><label className={CAST_LABEL}>Instagram</label>
              <div className="flex items-center rounded-xl bg-white/[.04] border border-white/15 focus-within:border-coral overflow-hidden"><span className="pl-4 text-white/40 text-[15px]">@</span><input value={f.instagram} onChange={(e) => set("instagram", e.target.value)} placeholder="yourhandle" className="flex-1 bg-transparent px-2 py-3.5 text-[15px] text-white focus:outline-none placeholder:text-white/30" /></div>
            </div>
            <div><label className={CAST_LABEL}>TikTok</label>
              <div className="flex items-center rounded-xl bg-white/[.04] border border-white/15 focus-within:border-coral overflow-hidden"><span className="pl-4 text-white/40 text-[15px]">@</span><input value={f.tiktok} onChange={(e) => set("tiktok", e.target.value)} placeholder="yourhandle" className="flex-1 bg-transparent px-2 py-3.5 text-[15px] text-white focus:outline-none placeholder:text-white/30" /></div>
            </div>
          </div>
        )}

        {/* STEP 7 — appointment */}
        {step === 7 && (
          <div className="space-y-6">
            <div>
              <label className={CAST_LABEL}>{t("Pick a day", "Elige un día")}</label>
              <div className="grid grid-cols-5 gap-2">
                {DAYS.map(([id, lbl]) => (
                  <button key={id} onClick={() => set("day", id)} className={"py-3 rounded-xl border text-[12px] font-bold uppercase transition-all " + (f.day === id ? "border-coral bg-coral/12 text-white" : "border-white/14 bg-white/[.03] text-white/70 hover:border-white/30")}>
                    <div>{id}</div>
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className={CAST_LABEL}>{t("Pick a time (12 PM – 12 AM)", "Elige una hora (12 PM – 12 AM)")}</label>
              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
                {TIMES.map((tm) => (
                  <button key={tm} onClick={() => set("time", tm)} className={"py-2.5 rounded-xl border text-[12.5px] font-semibold transition-all " + (f.time === tm ? "border-coral bg-coral/12 text-white" : "border-white/14 bg-white/[.03] text-white/70 hover:border-white/30")}>{tm}</button>
                ))}
              </div>
            </div>
            <p className="text-white/40 text-[12px] flex items-start gap-2"><Icon name="map-pin" className="w-4 h-4 text-gold-soft shrink-0 mt-0.5" />{t("Auditions are in person at 7971 NW 33rd St, Doral. Bring a valid ID.", "Las audiciones son en persona en 7971 NW 33rd St, Doral. Trae un ID válido.")}</p>
          </div>
        )}

        {/* STEP 8 — review */}
        {step === 8 && (
          <div className="space-y-3">
            <p className="text-white/55 text-[13px] mb-1">{t("Looks good? We'll open WhatsApp to send it to our talent team.", "¿Todo bien? Abriremos WhatsApp para enviarlo a nuestro equipo de talento.")}</p>
            {[
              [t("Name", "Nombre"), f.legalName + (f.stageName ? " · " + f.stageName : "")],
              [t("Eligibility", "Elegibilidad"), (f.elig21 && f.eligID) ? t("21+ · Valid ID ✓", "21+ · ID válido ✓") : t("Incomplete", "Incompleto")],
              [t("Experience", "Experiencia"), f.styles.join(", ") || "—"],
              [t("Following", "Público"), f.clients === "yes" ? (t("Yes", "Sí") + (f.clientsCount ? " (~" + f.clientsCount + ")" : "")) : t("No", "No")],
              [t("Content", "Contenido"), f.content === "yes" ? t("Yes", "Sí") : f.content === "maybe" ? t("Maybe", "Quizás") : t("No", "No")],
              [t("Photos", "Fotos"), photos.length + "/3"],
              [t("Audition", "Audición"), f.day ? (dayLabel + " · " + f.time) : "—"],
            ].map(([k, v]) => (
              <div key={k} className="flex items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/[.02] px-4 py-3">
                <span className="text-white/45 text-[12px] uppercase tracking-wide">{k}</span>
                <span className="text-white text-[13.5px] font-semibold text-right">{v}</span>
              </div>
            ))}
          </div>
        )}

        {/* nav */}
        <div className="mt-7">
          {step < STEPS && (
            <button onClick={next} disabled={!canNext} className={"gbtn w-full inline-flex items-center justify-center gap-2 text-[12.5px] font-bold uppercase tracking-[0.16em] rounded-full px-8 py-4 transition-all " + (canNext ? "bg-coral hover:bg-coral-deep text-white" : "bg-white/8 text-white/35 cursor-not-allowed")} style={canNext ? { boxShadow: "0 16px 40px -12px rgba(255,107,91,.7)" } : {}}>
              {t("Continue", "Continuar")}<Icon name="arrow-right" className="w-4 h-4" />
            </button>
          )}
          {step === STEPS && (
            <button onClick={submit} className="gbtn w-full inline-flex items-center justify-center gap-2 bg-coral hover:bg-coral-deep text-white text-[12.5px] font-bold uppercase tracking-[0.16em] rounded-full px-8 py-4" style={{ boxShadow: "0 16px 40px -12px rgba(255,107,91,.7)" }}>
              <Icon name="message-circle" className="w-4 h-4" />{t("Send via WhatsApp", "Enviar por WhatsApp")}
            </button>
          )}
          {!canNext && step < STEPS && (
            <p className="text-center text-white/35 text-[11px] mt-3">{t("Complete this step to continue", "Completa este paso para continuar")}</p>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- The full public page ---------- */
function CastingPage({ go }) {
  const t = useT();
  useReveal();

  return (
    <main className="pt-24">
      {/* HERO */}
      <section className="relative overflow-hidden py-20 md:py-28">
        <div className="absolute inset-0">
          <Photo src="assets/photos/performer-pink.jpg" alt="" className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.32)" }} />
          <div className="absolute inset-0 bg-gradient-to-b from-ink/70 via-ink/55 to-ink"></div>
          <div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-[36rem] h-[36rem] bg-coral/10 rounded-full blur-[130px]"></div>
        </div>
        <div className="container relative z-10 text-center max-w-3xl">
          <div className="reveal inline-flex items-center gap-2 rounded-full border border-coral/40 bg-coral/10 px-4 py-1.5 mb-6">
            <span className="w-1.5 h-1.5 rounded-full bg-coral pulse-dot"></span>
            <span className="label text-coral text-[10px]">{t("Casting Call · Now Hiring", "Casting Call · Contratando")}</span>
          </div>
          <h1 className="reveal text-5xl md:text-7xl font-black uppercase leading-[0.92] mb-6" data-d="1">
            {t(<>Dance at <br /><span className="serif-it font-normal text-coral">Pink Pony</span></>,
               <>Baila en <br /><span className="serif-it font-normal text-coral">Pink Pony</span></>)}
          </h1>
          <p className="reveal text-white/65 text-lg leading-relaxed mb-9 max-w-xl mx-auto" data-d="2">
            {t("Miami's premier gentlemen's club is casting dancers and entertainers. Top earnings, a professional stage and a team that promotes you. Apply below and book your audition.",
               "El club de caballeros premier de Miami está buscando bailarinas y entertainers. Altos ingresos, una tarima profesional y un equipo que te promociona. Aplica abajo y agenda tu audición.")}
          </p>
          <div className="reveal flex items-center justify-center" data-d="3">
            <PrimaryBtn icon="arrow-down" onClick={() => { const el = document.getElementById("apply"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>{t("Apply now", "Aplica ya")}</PrimaryBtn>
          </div>
        </div>
      </section>

      {/* WHAT WE LOOK FOR */}
      <section className="py-16 md:py-20 border-t border-white/8">
        <div className="container">
          <div className="text-center mb-12">
            <Eyebrow num="01" className="justify-center">{t("The role", "El rol")}</Eyebrow>
            <h2 className="reveal text-3xl md:text-5xl font-bold mt-4" data-d="1">{t(<>What we <span className="serif-it font-normal text-coral">look for</span></>, <>Qué <span className="serif-it font-normal text-coral">buscamos</span></>)}</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              ["sparkles", t("Professionalism", "Profesionalismo"), t("Reliable, respectful and ready to perform.", "Confiable, respetuosa y lista para actuar.")],
              ["star", t("Presentation", "Presentación"), t("Stage presence, styling and confidence.", "Presencia escénica, estilo y confianza.")],
              ["calendar-clock", t("Availability", "Disponibilidad"), t("Consistent nights, Mon through Sun.", "Noches consistentes, de Lun a Dom.")],
              ["shield-check", t("Compliance", "Cumplimiento"), t("21+, valid ID and club requirements.", "21+, ID válido y requisitos del club.")],
            ].map(([ic, ttl, sub]) => (
              <div key={ttl} className="reveal rounded-2xl border border-white/10 bg-white/[.03] p-6" data-d="1">
                <div className="w-11 h-11 rounded-xl bg-coral/12 flex items-center justify-center mb-4"><Icon name={ic} className="w-5 h-5 text-coral" /></div>
                <h3 className="text-[15px] font-black uppercase mb-1.5">{ttl}</h3>
                <p className="text-white/55 text-[13px] leading-relaxed">{sub}</p>
              </div>
            ))}
          </div>
          <p className="text-center text-white/40 text-[13px] max-w-2xl mx-auto mt-9 leading-relaxed">
            {t("All applicants are considered based on professionalism, presentation, availability, and compliance with club requirements.",
               "Todas las aspirantes son consideradas según profesionalismo, presentación, disponibilidad y cumplimiento de los requisitos del club.")}
          </p>
        </div>
      </section>

      {/* APPLICATION */}
      <section id="apply" className="py-16 md:py-24 bg-ink relative scroll-mt-24">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-coral/5 rounded-full blur-[120px] pointer-events-none"></div>
        <div className="container relative z-10">
          <div className="text-center mb-10">
            <Eyebrow num="02" className="justify-center">{t("Application", "Aplicación")}</Eyebrow>
            <h2 className="reveal text-3xl md:text-5xl font-bold mt-4" data-d="1">{t(<>Start your <span className="serif-it font-normal text-coral">audition</span></>, <>Inicia tu <span className="serif-it font-normal text-coral">audición</span></>)}</h2>
          </div>
          <CastingForm />
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CastingPage, CastingForm });