/* ============================================================
   CHICA (TALENT) — self-service mobile app
   ChicaRegister : onboarding wizard (datos · ID · house fee · disponibilidad)
   ChicaApp      : dashboard (inicio · ganancias · bookings · horario · perfil)
   ============================================================ */

/* ---------- small form field ---------- */
function Field({ label, ...props }) {
  return (
    <div>
      {label && <label className="label text-white/45 text-[9px] block mb-1.5">{label}</label>}
      <input {...props} className="w-full bg-white/[.05] border border-white/12 rounded-xl px-3.5 py-2.5 text-[13px] text-white focus:outline-none focus:border-coral placeholder:text-white/30" />
    </div>
  );
}

/* ============================================================
   REGISTRO — onboarding wizard
   ============================================================ */
function ChicaRegister() {
  const t = useT(); const { lang } = useLang();
  const { TALENT_NIGHTS, HOUSE_FEE } = window.PP;
  const [step, setStep] = useState(0);
  const [docs, setDocs] = useState({ front: false, back: false, selfie: false });
  const [nights, setNights] = useState(["fri", "sat"]);
  const [agree, setAgree] = useState(false);
  const [stageName, setStageName] = useState("");

  const STEPS = 4; // datos, verificación, house fee, disponibilidad (welcome=0, success=5)
  const toggleNight = (id) => setNights((n) => n.includes(id) ? n.filter((x) => x !== id) : [...n, id]);

  /* —— welcome —— */
  if (step === 0) return (
    <React.Fragment>
      <StatusBar />
      <div className="flex-1 relative flex flex-col">
        <div className="absolute inset-0" style={{ background: "radial-gradient(120% 70% at 50% 0%, #5b1f33 0%, #1a0b12 45%, #0b0b0c 80%)" }}></div>
        <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-64 h-64 rounded-full" style={{ background: "#FF6B5B", filter: "blur(90px)", opacity: 0.3 }}></div>
        <div className="relative flex-1 flex flex-col items-center justify-center text-center px-7">
          <img src={window.__asset ? window.__asset("assets/logo-pink-trimmed.png") : "assets/logo-pink-trimmed.png"} alt="Pink Pony Club" className="h-8 object-contain mb-7" />
          <div className="label text-gold-soft text-[10px] mb-3">{t("Talent onboarding", "Registro de talento")}</div>
          <h2 className="text-[26px] font-black uppercase leading-[1.05] mb-3">{t(<>Join the<br />Pink Pony cast</>, <>Únete al elenco<br />Pink Pony</>)}</h2>
          <p className="text-white/60 text-[12px] leading-relaxed mb-1">{t("Set up your profile, get verified and pick your nights — about 3 minutes.", "Crea tu perfil, verifícate y elige tus noches — unos 3 minutos.")}</p>
        </div>
        <div className="relative px-5 pb-6">
          <div className="flex items-center justify-center gap-4 text-white/45 text-[10px] mb-4">
            <span className="flex items-center gap-1.5"><Icon name="shield-check" className="w-3.5 h-3.5 text-gold-soft" />{t("21+ verified", "21+ verificado")}</span>
            <span className="flex items-center gap-1.5"><Icon name="lock" className="w-3.5 h-3.5 text-gold-soft" />{t("Private & secure", "Privado y seguro")}</span>
          </div>
          <button onClick={() => setStep(1)} className="gbtn w-full py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.16em] flex items-center justify-center gap-2" style={{ boxShadow: "0 14px 36px -10px rgba(255,107,91,.7)" }}>{t("Start registration", "Comenzar registro")}<Icon name="arrow-right" className="w-4 h-4" /></button>
        </div>
      </div>
    </React.Fragment>
  );

  /* —— success —— */
  if (step === 5) return (
    <React.Fragment>
      <StatusBar />
      <div className="flex-1 relative flex flex-col items-center justify-center text-center px-7">
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-52 h-52 rounded-full" style={{ background: "#5FBFA8", filter: "blur(90px)", opacity: 0.28 }}></div>
        <div className="relative w-20 h-20 rounded-full bg-green-500/15 border border-green-500 flex items-center justify-center mb-6"><Icon name="check" className="w-10 h-10 text-green-400" /></div>
        <h2 className="relative text-[24px] font-black uppercase leading-tight mb-3">{t("You're in the book", "Estás en el book")}</h2>
        <p className="relative text-white/60 text-[12.5px] leading-relaxed mb-2">{t("Your profile was submitted. Our talent team reviews new applications within 24–48 hours.", "Tu perfil fue enviado. Nuestro equipo revisa las solicitudes en 24–48 horas.")}</p>
        <div className="relative rounded-2xl border border-gold/25 bg-gold/5 px-4 py-3 text-[11px] text-white/70 mb-7">{t("You'll get a text with your check-in code once approved.", "Recibirás un texto con tu código de check-in al ser aprobada.")}</div>
        <button onClick={() => { setStep(0); setDocs({ front: false, back: false, selfie: false }); setAgree(false); }} className="relative text-white/45 text-[11px] font-bold uppercase tracking-wider flex items-center gap-2"><Icon name="rotate-ccw" className="w-3.5 h-3.5" />{t("Restart", "Reiniciar")}</button>
      </div>
    </React.Fragment>
  );

  const titles = [
    null,
    t("Your details", "Tus datos"),
    t("Verify identity", "Verifica identidad"),
    t("House fee & payout", "House fee y pago"),
    t("Your availability", "Tu disponibilidad"),
  ];
  const canNext = step === 3 ? agree : true;

  return (
    <React.Fragment>
      <StatusBar />
      {/* header + progress */}
      <div className="px-5 pt-1 pb-3 shrink-0">
        <div className="flex items-center justify-between mb-3">
          <button onClick={() => setStep((s) => s - 1)} className="w-8 h-8 rounded-full border border-white/12 flex items-center justify-center text-white/70"><Icon name="chevron-left" className="w-4 h-4" /></button>
          <span className="label text-white/45 text-[9px]">{t("Step", "Paso")} {step}/{STEPS}</span>
          <div className="w-8"></div>
        </div>
        <div className="h-1 rounded-full bg-white/10 overflow-hidden"><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>
        <h2 className="text-[20px] font-black uppercase mt-3 leading-none">{titles[step]}</h2>
      </div>

      <AppScroll className="px-5">
        {/* STEP 1 — datos */}
        {step === 1 && (
          <div className="space-y-3">
            <Field label={t("Legal name", "Nombre legal")} placeholder="Sofía Marín" defaultValue="Sofía Marín" />
            <div>
              <label className="label text-white/45 text-[9px] block mb-1.5">{t("Stage name", "Nombre artístico")}</label>
              <input value={stageName} onChange={(e) => setStageName(e.target.value)} placeholder="SCARLETT" className="w-full bg-white/[.05] border border-white/12 rounded-xl px-3.5 py-2.5 text-[13px] text-white uppercase tracking-wide focus:outline-none focus:border-coral placeholder:text-white/30 placeholder:normal-case" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Field label={t("Date of birth", "Fecha nac.")} placeholder="MM / DD / YYYY" />
              <Field label={t("Phone", "Teléfono")} placeholder="(305) 555-0148" />
            </div>
            <Field label="Email" placeholder="sofia@email.com" />
            <div className="flex items-start gap-2 rounded-xl border border-white/10 bg-white/[.03] px-3 py-2.5">
              <Icon name="info" className="w-3.5 h-3.5 text-gold-soft mt-0.5 shrink-0" />
              <p className="text-white/55 text-[10.5px] leading-snug">{t("You must be 21+ with a valid government-issued ID to perform.", "Debes ser 21+ con identificación oficial vigente para trabajar.")}</p>
            </div>
          </div>
        )}

        {/* STEP 2 — verificación */}
        {step === 2 && (
          <div className="space-y-3">
            <p className="text-white/55 text-[11.5px] leading-relaxed -mt-1">{t("Upload a clear photo of your ID and a quick selfie. Encrypted and only used for age & identity checks.", "Sube una foto clara de tu ID y una selfie rápida. Cifrado y usado solo para verificar edad e identidad.")}</p>
            {[["front", "credit-card", t("ID — front", "ID — frente")], ["back", "credit-card", t("ID — back", "ID — reverso")], ["selfie", "camera", t("Selfie", "Selfie")]].map(([k, ic, lbl]) => (
              <button key={k} onClick={() => setDocs((d) => ({ ...d, [k]: true }))} className={"w-full flex items-center gap-3 rounded-2xl border px-4 py-3.5 text-left transition-all " + (docs[k] ? "border-green-500/45 bg-green-500/8" : "border-dashed border-white/20 bg-white/[.03] hover:border-coral/50")}>
                <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: docs[k] ? "rgba(95,191,168,.15)" : "rgba(255,255,255,.05)" }}><Icon name={docs[k] ? "check" : ic} className="w-5 h-5" style={{ color: docs[k] ? "#5FBFA8" : "#FF6B5B" }} /></div>
                <div className="flex-1"><div className="text-[12.5px] font-bold">{lbl}</div><div className="text-white/45 text-[10px]">{docs[k] ? t("Uploaded", "Subido") : t("Tap to upload", "Toca para subir")}</div></div>
                {!docs[k] && <Icon name="upload" className="w-4 h-4 text-white/35" />}
              </button>
            ))}
          </div>
        )}

        {/* STEP 3 — house fee + card */}
        {step === 3 && (
          <div className="space-y-3.5">
            <div className="rounded-2xl border border-gold/25 bg-gold/5 p-4">
              <div className="flex items-center justify-between mb-1.5"><span className="label text-gold-soft text-[10px]">{t("Daily house fee", "House fee diario")}</span><Icon name="building-2" className="w-4 h-4 text-gold-soft" /></div>
              <div className="serif text-4xl text-gold-soft leading-none mb-2">${HOUSE_FEE}</div>
              <p className="text-white/60 text-[11px] leading-snug">{t("Collected at check-in each night. A card on file lets the club auto-charge any unpaid balance at check-out.", "Se cobra al check-in cada noche. Una tarjeta en archivo permite cobrar saldos pendientes al salir.")}</p>
            </div>
            <div>
              <label className="label text-white/45 text-[9px] block mb-1.5">{t("Card on file", "Tarjeta en archivo")}</label>
              <div className="rounded-xl border border-white/12 bg-white/[.05] px-3.5 py-3 flex items-center gap-3">
                <Icon name="credit-card" className="w-4 h-4 text-coral shrink-0" />
                <input placeholder="•••• •••• •••• ••••" className="flex-1 bg-transparent text-[13px] text-white focus:outline-none placeholder:text-white/30" />
              </div>
              <div className="grid grid-cols-2 gap-3 mt-3"><Field placeholder="MM / AA" /><Field placeholder="CVC" /></div>
            </div>
            <button onClick={() => setAgree((a) => !a)} className="w-full flex items-start gap-3 text-left">
              <div className={"w-5 h-5 rounded-md border flex items-center justify-center shrink-0 mt-0.5 transition-all " + (agree ? "bg-coral border-coral" : "border-white/30")}>{agree && <Icon name="check" className="w-3.5 h-3.5 text-white" />}</div>
              <span className="text-white/65 text-[11px] leading-snug">{t("I accept the house fee, payout and conduct policies, and authorize charges to my card on file.", "Acepto las políticas de house fee, pago y conducta, y autorizo cargos a mi tarjeta en archivo.")}</span>
            </button>
          </div>
        )}

        {/* STEP 4 — disponibilidad */}
        {step === 4 && (
          <div className="space-y-4">
            <div>
              <label className="label text-white/45 text-[9px] block mb-2">{t("Preferred nights", "Noches preferidas")}</label>
              <div className="grid grid-cols-7 gap-1.5">
                {TALENT_NIGHTS.map((n) => { const on = nights.includes(n.id); return (
                  <button key={n.id} onClick={() => toggleNight(n.id)} className={"aspect-square rounded-xl text-[10px] font-bold uppercase flex items-center justify-center transition-all " + (on ? "bg-coral text-white" : "bg-white/[.05] border border-white/10 text-white/55")}>{L(n.label, lang)}</button>
                ); })}
              </div>
            </div>
            <div>
              <label className="label text-white/45 text-[9px] block mb-2">{t("Usual shift", "Turno habitual")}</label>
              <div className="grid grid-cols-2 gap-2">
                {["9PM–3AM", "9PM–4AM", "10PM–5AM", "11PM–5AM"].map((s, i) => (
                  <button key={s} className={"py-2.5 rounded-xl text-[11px] font-bold transition-all " + (i === 1 ? "bg-coral/15 border border-coral/45 text-coral" : "bg-white/[.05] border border-white/10 text-white/55")}>{s}</button>
                ))}
              </div>
            </div>
            <div>
              <label className="label text-white/45 text-[9px] block mb-2">{t("Specialty", "Especialidad")}</label>
              <div className="flex flex-wrap gap-2">
                {[t("Aerial", "Aérea"), t("Pole", "Pole"), t("Go-Go", "Go-Go"), t("Fire", "Fuego"), t("Burlesque", "Burlesque"), t("Latin", "Latino")].map((s, i) => (
                  <span key={i} className={"px-3 py-1.5 rounded-full text-[10.5px] font-semibold " + (i < 2 ? "bg-grape/20 border border-grape/40 text-white" : "bg-white/[.05] border border-white/10 text-white/55")}>{s}</span>
                ))}
              </div>
            </div>
          </div>
        )}
      </AppScroll>

      {/* bottom CTA */}
      <div className="shrink-0 px-5 pt-2 pb-5 border-t border-white/8 bg-ink">
        <button onClick={() => setStep((s) => s + 1)} disabled={!canNext}
          className={"w-full py-3.5 rounded-full text-[12px] font-bold uppercase tracking-[0.14em] flex items-center justify-center gap-2 transition-all " + (canNext ? "gbtn bg-coral hover:bg-coral-deep text-white" : "bg-white/8 text-white/35")}>
          {step === 4 ? t("Submit profile", "Enviar perfil") : t("Continue", "Continuar")}<Icon name={step === 4 ? "send" : "arrow-right"} className="w-4 h-4" />
        </button>
      </div>
    </React.Fragment>
  );
}

/* ============================================================
   DASHBOARD — the dancer's nightly app
   ============================================================ */
function ChicaApp() {
  const t = useT(); const { lang } = useLang();
  const me = window.PP.TALENT_ME; const HOUSE_FEE = window.PP.HOUSE_FEE;
  const [tab, setTab] = useState("home");
  const [status, setStatus] = useState(me.status);          // in / out
  const [inAt, setInAt] = useState(me.in);
  const [feePaid, setFeePaid] = useState(me.feePaid);
  const [feeSheet, setFeeSheet] = useState(false);
  const [bookings, setBookings] = useState(() => me.bookings.map((b) => ({ ...b })));

  const now = () => new Date().toLocaleTimeString(lang === "es" ? "es" : "en", { hour: "numeric", minute: "2-digit" });
  const tabs = [
    { id: "home", ic: "home", label: t("Home", "Inicio") },
    { id: "earn", ic: "dollar-sign", label: t("Earnings", "Pagos") },
    { id: "book", ic: "calendar-check", label: t("Tables", "Mesas") },
    { id: "sched", ic: "calendar", label: t("Shifts", "Turnos") },
    { id: "me", ic: "user", label: t("Profile", "Perfil") },
  ];

  const Avatar = ({ size = 40 }) => (
    <div className="rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center font-black shrink-0" style={{ width: size, height: size, fontSize: size * 0.34 }}>{me.name.slice(0, 2)}</div>
  );

  return (
    <React.Fragment>
      <StatusBar />
      {/* brand header */}
      <div className="px-5 pt-1 pb-3 shrink-0 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <Avatar size={38} />
          <div><div className="text-[14px] font-black uppercase leading-none">{me.name}</div><div className="text-white/45 text-[10px] mt-0.5">{me.shift}</div></div>
        </div>
        <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border" style={{ borderColor: status === "in" ? "rgba(95,191,168,.4)" : "rgba(255,255,255,.15)", background: status === "in" ? "rgba(95,191,168,.1)" : "transparent" }}>
          <span className="w-1.5 h-1.5 rounded-full" style={{ background: status === "in" ? "#5FBFA8" : "#6b6b72" }}></span>
          <span className="text-[9px] font-bold uppercase tracking-wider" style={{ color: status === "in" ? "#5FBFA8" : "rgba(255,255,255,.5)" }}>{status === "in" ? t("On floor", "En piso") : t("Off", "Fuera")}</span>
        </div>
      </div>

      <AppScroll className="px-5">
        {/* ---------- HOME ---------- */}
        {tab === "home" && (
          <div className="space-y-3.5">
            {/* check-in card */}
            <div className="rounded-2xl border border-white/10 bg-gradient-to-br from-white/[.06] to-transparent p-4">
              <div className="label text-coral text-[9px] mb-1">{t("Tonight", "Esta noche")}</div>
              {status === "in" ? (
                <React.Fragment>
                  <div className="text-[15px] font-bold mb-0.5">{t("Checked in", "Dentro")} · {inAt}</div>
                  <div className="text-white/50 text-[11px] mb-3">{t("Pink Make Me Do It · Main Stage", "Pink Make Me Do It · Tarima Principal")}</div>
                  <button onClick={() => { setStatus("out"); }} className="w-full py-2.5 rounded-full border border-white/20 text-white/80 text-[11px] font-bold uppercase tracking-wider hover:bg-white/5">{t("Check out", "Hacer check-out")}</button>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div className="text-[15px] font-bold mb-0.5">{t("Ready for your shift?", "¿Lista para tu turno?")}</div>
                  <div className="text-white/50 text-[11px] mb-3">{t("Check in to go on the floor.", "Haz check-in para salir al piso.")}</div>
                  <button onClick={() => { setStatus("in"); setInAt(now()); }} className="gbtn w-full py-2.5 rounded-full bg-green-500/15 border border-green-500/40 text-green-400 text-[11px] font-bold uppercase tracking-wider hover:bg-green-500 hover:text-white transition-all">{t("Check in", "Check-in")}</button>
                </React.Fragment>
              )}
            </div>

            {/* house fee */}
            <div className={"rounded-2xl border p-4 flex items-center gap-3 " + (feePaid ? "border-green-500/30 bg-green-500/[.06]" : "border-coral/35 bg-coral/[.06]")}>
              <Icon name={feePaid ? "check-circle" : "alert-circle"} className="w-6 h-6 shrink-0" style={{ color: feePaid ? "#5FBFA8" : "#FF6B5B" }} />
              <div className="flex-1"><div className="text-[12.5px] font-bold">{t("House fee", "House fee")} · ${HOUSE_FEE}</div><div className="text-white/50 text-[10.5px]">{feePaid ? t("Paid tonight", "Pagado hoy") : t("Due at check-in", "Pendiente al check-in")}</div></div>
              {feePaid ? <Chip color="#5FBFA8">{t("Paid", "Pagado")}</Chip> : <button onClick={() => setFeeSheet(true)} className="px-4 py-2 rounded-full bg-coral text-white text-[11px] font-bold uppercase tracking-wider">{t("Pay", "Pagar")}</button>}
            </div>

            {/* stats */}
            <div className="grid grid-cols-2 gap-2.5">
              <MiniStat icon="dollar-sign" value={"$" + me.tonight.tips} label={t("Tips tonight", "Propinas hoy")} color="#CBA35C" />
              <MiniStat icon="calendar-check" value={bookings.length} label={t("Table requests", "Mesas pedidas")} color="#FF6B5B" />
              <MiniStat icon="drama" value={me.tonight.shows} label={t("Stage sets", "Shows")} color="#9333EA" />
              <MiniStat icon="star" value={me.rating} label={t("Rating", "Rating")} color="#5FBFA8" />
            </div>

            {/* next show */}
            <div className="rounded-2xl border border-white/10 bg-white/[.03] p-4">
              <div className="flex items-center justify-between mb-2"><span className="label text-white/45 text-[9px]">{t("Next on stage", "Próximo en tarima")}</span><Chip color="#9333EA">{me.shows[1].time}</Chip></div>
              <div className="text-[13px] font-bold">{L(me.shows[1].act, lang)}</div>
              <div className="text-white/50 text-[11px]">{L(me.shows[1].stage, lang)}</div>
            </div>
          </div>
        )}

        {/* ---------- EARNINGS ---------- */}
        {tab === "earn" && (
          <div className="space-y-3.5">
            <div className="rounded-2xl border border-white/10 p-5 relative overflow-hidden" style={{ background: "linear-gradient(135deg, rgba(201,146,154,.18), rgba(11,11,12,.4))" }}>
              <div className="label text-gold-soft text-[9px] mb-1.5">{t("Earned tonight", "Ganado hoy")}</div>
              <div className="serif text-[44px] text-white leading-none mb-1">${me.tonight.tips}</div>
              <div className="text-white/50 text-[11px]">{t("Week so far", "Semana")}: <b className="text-gold-soft">${me.week.tips.toLocaleString()}</b> · {me.week.nights} {t("nights", "noches")}</div>
            </div>
            {/* breakdown */}
            <div className="rounded-2xl border border-white/10 bg-white/[.03] p-4 space-y-3">
              <div className="label text-white/45 text-[9px]">{t("Tonight's breakdown", "Desglose de hoy")}</div>
              {[[t("Cash tips", "Propinas efectivo"), me.tonight.cash, "#5FBFA8"], [t("Digital tips", "Propinas digitales"), me.tonight.digital, "#9333EA"], [t("Table commission", "Comisión de mesa"), me.tonight.tableComm, "#CBA35C"]].map(([lbl, val, c], i) => (
                <div key={i}>
                  <div className="flex items-center justify-between text-[11.5px] mb-1"><span className="text-white/70">{lbl}</span><span className="serif text-[15px] text-white">${val}</span></div>
                  <div className="h-1.5 rounded-full bg-white/8 overflow-hidden"><div className="h-full rounded-full" style={{ width: (val / me.tonight.tips * 100) + "%", background: c }}></div></div>
                </div>
              ))}
            </div>
            {/* payouts */}
            <div>
              <div className="label text-white/45 text-[9px] mb-2 px-1">{t("Recent payouts", "Pagos recientes")}</div>
              <div className="space-y-2">
                {me.payouts.map((p, i) => (
                  <div key={i} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[.03] px-3.5 py-2.5">
                    <Icon name={p.method === "card" ? "credit-card" : "banknote"} className="w-4 h-4 text-white/40 shrink-0" />
                    <div className="flex-1 text-[12px] font-semibold">{L(p.date, lang)}</div>
                    <div className="serif text-[15px] text-gold-soft">${p.amt}</div>
                  </div>
                ))}
              </div>
            </div>
            <button className="w-full py-3 rounded-full bg-coral/15 border border-coral/40 text-coral text-[11px] font-bold uppercase tracking-wider flex items-center justify-center gap-2"><Icon name="wallet" className="w-4 h-4" />{t("Cash out to card", "Retirar a tarjeta")}</button>
          </div>
        )}

        {/* ---------- BOOKINGS ---------- */}
        {tab === "book" && (
          <div className="space-y-2.5">
            <p className="text-white/55 text-[11.5px] -mt-1 mb-1">{t("Tables requesting you tonight. Accept to be assigned by the host.", "Mesas que te piden esta noche. Acepta para que el host te asigne.")}</p>
            {bookings.map((b, i) => {
              const pend = b.status === "pending";
              return (
                <div key={i} className="rounded-2xl border border-white/10 bg-white/[.03] p-3.5">
                  <div className="flex items-center gap-3 mb-2.5">
                    <div className="w-11 h-11 rounded-xl bg-coral/12 border border-coral/30 flex items-center justify-center font-extrabold text-coral text-[11px] shrink-0">{b.table.replace("VIP ", "V")}</div>
                    <div className="flex-1 min-w-0"><div className="text-[13px] font-bold">{L(b.type, lang)}</div><div className="text-white/45 text-[10.5px]">{b.time} · {b.party} {t("guests", "pers")} · {t("Host", "Host")} {b.host}</div></div>
                    {!pend && <Chip color="#5FBFA8">{t("On", "Asignada")}</Chip>}
                  </div>
                  {pend && (
                    <div className="flex gap-2">
                      <button onClick={() => setBookings((bs) => bs.map((x, j) => j === i ? { ...x, status: "confirmed" } : x))} className="flex-1 py-2 rounded-full bg-coral text-white text-[10.5px] font-bold uppercase tracking-wider">{t("Accept", "Aceptar")}</button>
                      <button onClick={() => setBookings((bs) => bs.filter((x, j) => j !== i))} className="flex-1 py-2 rounded-full border border-white/15 text-white/60 text-[10.5px] font-bold uppercase tracking-wider">{t("Pass", "Pasar")}</button>
                    </div>
                  )}
                </div>
              );
            })}
            {bookings.length === 0 && <div className="text-center text-white/35 text-[12px] py-10">{t("No requests yet tonight.", "Sin solicitudes aún.")}</div>}
          </div>
        )}

        {/* ---------- SCHEDULE ---------- */}
        {tab === "sched" && (
          <div className="space-y-4">
            <div>
              <div className="label text-white/45 text-[9px] mb-2 px-1">{t("This week", "Esta semana")}</div>
              <div className="grid grid-cols-7 gap-1.5">
                {me.schedule.map((d, i) => (
                  <div key={i} className={"rounded-xl py-2.5 flex flex-col items-center gap-1.5 border " + (d.tonight ? "border-coral bg-coral/12" : d.shift ? "border-white/12 bg-white/[.04]" : "border-white/6 bg-transparent")}>
                    <span className="text-[9px] font-bold uppercase" style={{ color: d.tonight ? "#FF6B5B" : "rgba(255,255,255,.5)" }}>{L(d.day, lang)}</span>
                    <span className="w-1.5 h-1.5 rounded-full" style={{ background: d.shift ? (d.tonight ? "#FF6B5B" : "#CBA35C") : "rgba(255,255,255,.12)" }}></span>
                  </div>
                ))}
              </div>
            </div>
            {/* shifts list */}
            <div className="space-y-2">
              {me.schedule.filter((d) => d.shift).map((d, i) => (
                <div key={i} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[.03] px-3.5 py-3">
                  <Icon name="clock" className="w-4 h-4 shrink-0" style={{ color: d.tonight ? "#FF6B5B" : "rgba(255,255,255,.4)" }} />
                  <div className="flex-1 text-[12.5px] font-semibold">{L(d.day, lang)}</div>
                  <div className="text-[12px] text-white/70">{d.shift}</div>
                  {d.tonight && <Chip color="#FF6B5B">{t("Tonight", "Hoy")}</Chip>}
                </div>
              ))}
            </div>
            <button className="w-full py-3 rounded-full border border-white/15 text-white/70 text-[11px] font-bold uppercase tracking-wider flex items-center justify-center gap-2"><Icon name="calendar-plus" className="w-4 h-4" />{t("Request time off", "Solicitar día libre")}</button>
          </div>
        )}

        {/* ---------- PROFILE ---------- */}
        {tab === "me" && (
          <div className="space-y-4">
            <div className="flex flex-col items-center text-center pt-1">
              <div className="rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center font-black mb-3" style={{ width: 72, height: 72, fontSize: 24 }}>{me.name.slice(0, 2)}</div>
              <div className="text-[18px] font-black uppercase">{me.name}</div>
              <div className="text-white/45 text-[11px]">{me.handle} · {me.legal}</div>
              <div className="flex items-center gap-2 mt-2.5">
                <Chip color="#FF6B5B">VIP {t("Talent", "Talento")}</Chip>
                <span className="flex items-center gap-1 text-gold-soft text-[11px] font-bold"><Icon name="star" className="w-3.5 h-3.5" style={{ fill: "#CBA35C" }} />{me.rating}</span>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2.5">
              <MiniStat icon="image" value={me.posts} label={t("Content posts", "Posts contenido")} color="#9333EA" />
              <MiniStat icon="flame" value={me.week.nights} label={t("Nights this wk", "Noches sem")} color="#FF6B5B" />
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[.03] divide-y divide-white/8">
              {[["credit-card", t("Card on file", "Tarjeta"), "•••• " + me.card], ["image", t("Upload content", "Subir contenido"), ""], ["bell", t("Notifications", "Notificaciones"), ""], ["file-text", t("Policies & docs", "Políticas y docs"), ""], ["globe", t("Language", "Idioma"), lang.toUpperCase()]].map(([ic, lbl, val], i) => (
                <button key={i} className="w-full flex items-center gap-3 px-4 py-3 text-left">
                  <Icon name={ic} className="w-4 h-4 text-white/45 shrink-0" />
                  <span className="flex-1 text-[12.5px] font-semibold">{lbl}</span>
                  {val && <span className="text-white/40 text-[11px]">{val}</span>}
                  <Icon name="chevron-right" className="w-4 h-4 text-white/25" />
                </button>
              ))}
            </div>
            <button className="w-full py-3 rounded-full border border-white/12 text-white/55 text-[11px] font-bold uppercase tracking-wider flex items-center justify-center gap-2"><Icon name="log-out" className="w-4 h-4" />{t("Sign out", "Cerrar sesión")}</button>
          </div>
        )}
      </AppScroll>

      <TabBar tabs={tabs} active={tab} onChange={setTab} />

      {/* house fee sheet */}
      <SheetModal open={feeSheet} onClose={() => setFeeSheet(false)}>
        <div className="flex items-center justify-between mb-3"><h3 className="text-[17px] font-black uppercase">{t("Pay house fee", "Pagar house fee")}</h3><button onClick={() => setFeeSheet(false)}><Icon name="x" className="w-5 h-5 text-white/50" /></button></div>
        <div className="serif text-4xl text-gold-soft mb-4">${HOUSE_FEE}</div>
        <div className="rounded-xl border border-white/12 bg-white/[.04] p-3 flex items-center gap-3 mb-4"><div className="w-9 h-6 rounded bg-gradient-to-br from-coral to-grape"></div><div className="flex-1"><div className="text-[12.5px] font-semibold">•••• {me.card}</div><div className="text-white/40 text-[10px]">{t("Card on file", "Tarjeta en archivo")}</div></div><Icon name="shield-check" className="w-5 h-5 text-green-400" /></div>
        <button onClick={() => { setFeePaid(true); setFeeSheet(false); }} className="gbtn w-full py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] flex items-center justify-center gap-2"><Icon name="check" className="w-4 h-4" />{t("Pay", "Pagar")} ${HOUSE_FEE}</button>
      </SheetModal>
    </React.Fragment>
  );
}

Object.assign(window, { ChicaRegister, ChicaApp });