/* ============================================================
   CREW & TALENT — shared mobile shell primitives
   PhoneShell (bezel), StatusBar, AppScroll, TabBar, SheetModal, MiniStat
   ============================================================ */

/* ---------- device bezel ---------- */
function PhoneShell({ children, glow = "#FF6B5B", height = 712, width = 320 }) {
  return (
    <div className="relative shrink-0" style={{ width }}>
      <div className="relative rounded-[2.6rem] border border-white/15 bg-[#070708] p-2.5"
        style={{ boxShadow: `0 50px 110px -34px ${glow}55, 0 0 0 1px rgba(255,255,255,.05) inset` }}>
        {/* notch */}
        <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-6 bg-[#070708] rounded-b-2xl z-30"></div>
        {/* side buttons */}
        <div className="absolute -left-[3px] top-24 w-[3px] h-9 rounded-l bg-white/10"></div>
        <div className="absolute -left-[3px] top-36 w-[3px] h-12 rounded-l bg-white/10"></div>
        <div className="absolute -right-[3px] top-28 w-[3px] h-16 rounded-r bg-white/10"></div>
        <div className="relative rounded-[2.1rem] overflow-hidden bg-ink flex flex-col" style={{ height }}>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ---------- iOS-style status bar ---------- */
function StatusBar({ time = "1:24" }) {
  return (
    <div className="flex items-center justify-between px-6 pt-3.5 pb-1 shrink-0 relative z-20">
      <span className="text-[11px] font-semibold tracking-wide text-white">{time}</span>
      <div className="flex items-center gap-1.5">
        <Icon name="signal" className="w-3.5 h-3.5 text-white/85" />
        <Icon name="wifi" className="w-3.5 h-3.5 text-white/85" />
        <Icon name="battery-full" className="w-4 h-4 text-white/85" />
      </div>
    </div>
  );
}

/* ---------- scrollable content region (hides scrollbar) ---------- */
function AppScroll({ children, className = "" }) {
  return (
    <div className={"flex-1 min-h-0 overflow-y-auto crew-scroll " + className}>
      {children}
      <div style={{ height: 8 }}></div>
    </div>
  );
}

/* ---------- bottom tab bar ---------- */
function TabBar({ tabs, active, onChange }) {
  return (
    <div className="shrink-0 flex items-stretch border-t border-white/10 bg-[#0c0c0f] px-1.5 pt-2 pb-5 relative z-20">
      {tabs.map((tb) => {
        const on = active === tb.id;
        return (
          <button key={tb.id} onClick={() => onChange(tb.id)} className="flex-1 flex flex-col items-center gap-1 py-1 transition-colors">
            <Icon name={tb.ic} className="w-[19px] h-[19px]" style={{ width: 19, height: 19, color: on ? "#FF6B5B" : "rgba(255,255,255,.42)" }} />
            <span className="text-[8px] font-bold uppercase tracking-[0.08em]" style={{ color: on ? "#fff" : "rgba(255,255,255,.4)" }}>{tb.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ---------- bottom sheet modal (inside a phone) ---------- */
function SheetModal({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div className="absolute inset-0 z-40 flex items-end" onClick={onClose}>
      <div className="absolute inset-0 bg-black/65 backdrop-blur-[2px]"></div>
      <div className="relative w-full rounded-t-3xl border-t border-white/12 bg-[#101013] p-5 crew-sheet-in" onClick={(e) => e.stopPropagation()}>
        <div className="w-10 h-1 rounded-full bg-white/20 mx-auto mb-4"></div>
        {children}
      </div>
    </div>
  );
}

/* ---------- small stat tile ---------- */
function MiniStat({ icon, value, label, color = "#FF6B5B" }) {
  return (
    <div className="rounded-2xl border border-white/10 bg-white/[.03] p-3.5">
      <Icon name={icon} className="w-4 h-4 mb-2" style={{ color }} />
      <div className="text-[22px] font-black leading-none">{value}</div>
      <div className="label text-white/45 text-[8px] mt-1.5">{label}</div>
    </div>
  );
}

/* ---------- segmented control (in-phone) ---------- */
function Seg({ options, value, onChange }) {
  return (
    <div className="flex p-1 rounded-full bg-white/[.05] border border-white/10">
      {options.map(([id, lbl]) => (
        <button key={id} onClick={() => onChange(id)}
          className={"flex-1 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-[0.1em] transition-all " + (value === id ? "bg-coral text-white" : "text-white/55")}>{lbl}</button>
      ))}
    </div>
  );
}

Object.assign(window, { PhoneShell, StatusBar, AppScroll, TabBar, SheetModal, MiniStat, Seg });