/* ============================================================
   CREW VIEW — host showcase for the talent & staff apps
   Three interactive phones + access to the Admin reservations module.
   ============================================================ */
function PhoneColumn({ num, label, sub, glow, children }) {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="text-center">
        <div className="label text-gold flex items-center justify-center gap-2 text-[10px]"><span className="text-gold-soft/60">{num}</span>{label}</div>
        <div className="text-white/40 text-[11px] mt-1">{sub}</div>
      </div>
      <PhoneShell glow={glow}>{children}</PhoneShell>
    </div>
  );
}

function CrewView({ go, embedded }) {
  const t = useT(); const { lang } = useLang();
  const { RES_TODAY } = window.PP;
  const preview = RES_TODAY.filter((r) => r.status !== "cancelled").slice(0, 4);
  const stMeta = { confirmed: { l: t("Confirmed", "Confirmada"), c: "#5FBFA8" }, seated: { l: t("Seated", "Sentada"), c: "#CBA35C" }, "no-show": { l: t("No-show", "No-show"), c: "#ef4444" } };
  const srcMeta = { direct: { l: t("Direct", "Directa"), ic: "globe" }, promoter: { l: t("Promoter", "Promotor"), ic: "megaphone" }, sevenrooms: { l: "SevenRooms", ic: "calendar" } };

  return (
    <div className={embedded ? "pb-10" : "pt-24 md:pt-28 pb-24 min-h-screen bg-[#08080a]"}>
      <div className="container">
        {/* header */}
        <div className="max-w-2xl mb-12">
          <div className="label text-coral flex items-center gap-3 mb-4"><span className="w-1.5 h-1.5 rounded-full bg-green-400 pulse-dot"></span>{t("Pink Pony · Crew & Talent", "Pink Pony · Equipo y Talento")}</div>
          <h1 className="text-4xl md:text-6xl font-bold leading-[1.03] mb-4">{t("The apps behind the floor", "Las apps detrás del piso")}</h1>
          <p className="text-white/55 text-base md:text-lg font-light leading-relaxed">{t("Self-service tools for the people who run the night — talent onboarding, the dancer's nightly dashboard, and live tip splits for staff. Each phone below is interactive.", "Herramientas self-service para quienes mueven la noche — registro de talento, el dashboard nocturno de la chica y el split de propinas en vivo para el staff. Cada teléfono es interactivo.")}</p>
        </div>

        {/* phones */}
        <div className="flex flex-wrap justify-center gap-x-10 gap-y-14 mb-16">
          <PhoneColumn num="01" label={t("Talent registration", "Registro de talento")} sub={t("Self-service onboarding", "Onboarding self-service")} glow="#FF6B5B"><ChicaRegister /></PhoneColumn>
          <PhoneColumn num="02" label={t("Dancer dashboard", "Dashboard de la chica")} sub={t("Earnings · fee · shifts", "Pagos · fee · turnos")} glow="#9333EA"><ChicaApp /></PhoneColumn>
          <PhoneColumn num="03" label={t("Staff tip split", "Split de propinas")} sub={t("Your live cut of the pool", "Tu parte del pool")} glow="#CBA35C"><WorkerTipsApp /></PhoneColumn>
        </div>

        {/* admin reservations access */}
        <div className="rounded-3xl border border-white/10 bg-card overflow-hidden">
          <div className="grid lg:grid-cols-2">
            {/* left — copy */}
            <div className="p-7 md:p-9 flex flex-col justify-center">
              <div className="label text-gold flex items-center gap-2 mb-3 text-[10px]"><span className="text-gold-soft/60">04</span>{t("Reservations admin", "Admin de reservas")}</div>
              <h2 className="text-3xl md:text-4xl font-bold leading-tight mb-3">{t("Manage tonight's book", "Gestiona el book de hoy")}</h2>
              <p className="text-white/55 text-sm font-light leading-relaxed mb-6">{t("The full reservations desk lives in the staff portal — seat tables, track sources (direct, promoter, SevenRooms), and charge no-show fees to the card on file.", "El escritorio completo de reservas vive en el portal de staff — sienta mesas, rastrea fuentes (directa, promotor, SevenRooms) y cobra no-shows a la tarjeta en archivo.")}</p>
              <div className="flex flex-wrap gap-2.5">
                <button onClick={() => go("admin")} className="gbtn inline-flex items-center gap-2 bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] rounded-full px-6 py-3.5 transition-colors"><Icon name="calendar-check" className="w-4 h-4" />{t("Open in staff portal", "Abrir en el portal")}</button>
                <span className="inline-flex items-center gap-2 text-white/40 text-[11px] px-2">{t("Reservations tab", "Pestaña Reservas")}</span>
              </div>
            </div>
            {/* right — preview */}
            <div className="p-5 md:p-6 bg-[#0c0c0f] border-t lg:border-t-0 lg:border-l border-white/8">
              <div className="flex items-center justify-between mb-3 px-1">
                <span className="label text-white/45 text-[9px]">{t("Tonight · live", "Hoy · en vivo")}</span>
                <span className="text-white/35 text-[10px]">{preview.length} {t("of", "de")} {RES_TODAY.length}</span>
              </div>
              <div className="space-y-2">
                {preview.map((r) => { const sm = stMeta[r.status] || stMeta.confirmed; const src = srcMeta[r.source]; return (
                  <div key={r.code} className="flex items-center gap-3 p-3 rounded-xl border border-white/10 bg-card">
                    <div className="text-center shrink-0 w-12"><div className="serif text-[13px] text-white leading-none">{r.time.replace(" ", "")}</div></div>
                    <div className="w-9 h-9 rounded-lg bg-coral/12 border border-coral/30 flex items-center justify-center font-extrabold text-coral shrink-0 text-[10px]">{r.table.replace("VIP ", "V")}</div>
                    <div className="flex-1 min-w-0"><div className="text-[12.5px] font-bold truncate">{r.name}</div><div className="text-white/45 text-[10px] flex items-center gap-1"><Icon name={src.ic} className="w-3 h-3" />{src.l} · {r.party} {t("guests", "pers")}</div></div>
                    <Chip color={sm.c} className="hidden sm:inline-flex">{sm.l}</Chip>
                  </div>
                ); })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CrewView, PhoneColumn });