/* mobile.jsx — Mobile preview (iPhone frame + dedicated mobile-optimized layouts) */

// ============================================================
// Mobile screens — same primitives, redesigned for narrow viewport
// ============================================================

function MobileHome({ onNav }) {
  const totalVendas = MOCK.salesTrend.reduce((a, b) => a + b, 0);
  const totalLY     = MOCK.salesLY.reduce((a, b) => a + b, 0);
  const yoy = ((totalVendas - totalLY) / totalLY) * 100;
  return (
    <div className="px-4 py-3 space-y-4">
      {/* Hero card */}
      <div className="relative panel p-4 overflow-hidden glow-accent">
        <div className="absolute -top-12 -right-12 w-40 h-40 rounded-full bg-[var(--accent-glow)] blur-2xl pointer-events-none" />
        <div className="flex items-center gap-2 mb-1.5">
          <span className="neon-dot" />
          <span className="text-[9px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Hoje · ao vivo</span>
        </div>
        <p className="text-[10px] text-[var(--fg-muted)]">Faturamento · 30 dias</p>
        <p className="num text-[28px] font-semibold tracking-[-0.02em] leading-none mt-1">{fmt.money(totalVendas, { compact: true })}</p>
        <div className="flex items-center gap-2 mt-2">
          <Delta value={yoy} />
          <span className="text-[10px] text-[var(--fg-muted)]">vs. 2025</span>
        </div>
        <div className="mt-3">
          <Spark points={MOCK.salesTrend} width={310} height={48} color="var(--accent)" />
        </div>
      </div>

      {/* KPI strip (horizontal scroll) */}
      <div className="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4 no-scrollbar">
        {[
          { l: "Vendas hoje",  v: "R$ 204k", d: 18.2 },
          { l: "Peças",        v: "3.812",   d: 11.4 },
          { l: "Atendimentos", v: "2.104",   d: 4.8 },
          { l: "% Meta",       v: "113%",    d: 6.1 },
        ].map((k) => (
          <div key={k.l} className="min-w-[125px] panel p-3">
            <div className="text-[9px] uppercase tracking-wider text-[var(--fg-muted)]">{k.l}</div>
            <div className="num text-[16px] font-semibold mt-0.5">{k.v}</div>
            <Delta value={k.d} />
          </div>
        ))}
      </div>

      {/* Quick actions */}
      <div className="grid grid-cols-2 gap-2">
        {[
          { id: "carteira", icon: "clipboard-list", label: "Carteira" },
          { id: "pedidos",  icon: "file-plus-2",    label: "Novo pedido" },
          { id: "ruptura",  icon: "shield-alert",   label: "Ruptura" },
          { id: "campanhas", icon: "megaphone",     label: "Campanhas" },
        ].map((q) => (
          <button key={q.id} onClick={() => onNav(q.id)} className="panel p-3 flex items-center gap-2.5 active:bg-[var(--panel-2)]">
            <div className="w-9 h-9 rounded-lg bg-[var(--accent-soft)] border border-[var(--accent)]/30 flex items-center justify-center">
              <Icon name={q.icon} className="w-4 h-4 text-[var(--accent)]" />
            </div>
            <span className="text-[12.5px] font-medium">{q.label}</span>
          </button>
        ))}
      </div>

      {/* Ranking lojas */}
      <div>
        <div className="flex items-center justify-between mb-2 px-1">
          <h3 className="text-[12px] font-semibold flex items-center gap-1.5"><Icon name="trophy" className="w-3.5 h-3.5 text-[var(--accent)]" /> Top filiais</h3>
          <span className="text-[10px] text-[var(--fg-faint)]">mês atual</span>
        </div>
        <div className="panel divide-y divide-[var(--border-soft)]">
          {MOCK.storesKPI.slice(0, 5).map((s, i) => (
            <div key={s.cod} className="flex items-center gap-3 p-3">
              <div className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border ${i === 0 ? "bg-[var(--accent-soft)] border-[var(--accent)] text-[var(--accent)]" : "bg-[var(--panel-2)] border-[var(--border)] text-[var(--fg-muted)]"}`}>
                {i + 1}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[12px] font-medium truncate">{s.loja}</div>
                <div className="text-[10px] text-[var(--fg-faint)] num">{fmt.int(s.qtd)} peças</div>
              </div>
              <div className="text-right">
                <div className="num text-[11.5px] font-mono font-medium">{fmt.money(s.vlr, { compact: true })}</div>
                <Delta value={s.yoy} />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* WOW · forecast preview */}
      <button onClick={() => onNav("forecast")} className="w-full text-left panel p-3 relative overflow-hidden">
        <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-[var(--accent-glow)] blur-2xl pointer-events-none" />
        <div className="flex items-center justify-between relative">
          <div className="flex items-center gap-2">
            <Icon name="line-chart" className="w-3.5 h-3.5 text-[var(--accent)]" />
            <span className="text-[12px] font-semibold">Previsão · 4 semanas</span>
            <span className="badge badge-accent text-[8px]">94% conf.</span>
          </div>
          <Icon name="chevron-right" className="w-4 h-4 text-[var(--fg-faint)]" />
        </div>
        <div className="num text-[20px] font-semibold mt-1 relative">{fmt.money(2890000, { compact: true })}</div>
        <Delta value={12.8} />
      </button>
    </div>
  );
}

function MobileVisao() {
  const [kpi, setKpi] = useState("vlr");
  const KPI_OPTS = [
    { id: "vlr", label: "Vendas" }, { id: "qtd", label: "Peças" }, { id: "cli", label: "Clientes" }, { id: "mkp", label: "MKP" },
  ];
  return (
    <div className="px-4 py-3 space-y-4">
      <div className="flex gap-1.5 overflow-x-auto pb-1 -mx-4 px-4 no-scrollbar">
        {KPI_OPTS.map((k) => (
          <button key={k.id} onClick={() => setKpi(k.id)} className={`px-3 py-1.5 text-[11px] font-medium rounded-full whitespace-nowrap border ${kpi === k.id ? "bg-[var(--accent)] border-[var(--accent)] text-[#00282d]" : "border-[var(--border)] text-[var(--fg-muted)]"}`}>
            {k.label}
          </button>
        ))}
      </div>

      <div className="panel p-3 chart-bg">
        <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] mb-2">{KPI_OPTS.find(x => x.id === kpi).label} por filial</div>
        <div className="space-y-2">
          {MOCK.storesKPI.map((s, i) => {
            const v = kpi === "vlr" ? s.vlr : kpi === "qtd" ? s.qtd : kpi === "cli" ? s.cli : s.mkp;
            const max = Math.max(...MOCK.storesKPI.map((x) => kpi === "vlr" ? x.vlr : kpi === "qtd" ? x.qtd : kpi === "cli" ? x.cli : x.mkp));
            const pct = (v / max) * 100;
            const display = kpi === "vlr" ? fmt.money(v, { compact: true }) : kpi === "mkp" ? `${v.toFixed(2)}×` : fmt.int(v);
            return (
              <div key={s.cod}>
                <div className="flex items-center justify-between mb-1">
                  <span className="text-[11px] font-medium">{s.loja}</span>
                  <div className="flex items-center gap-2">
                    <span className="num text-[11px] font-mono font-semibold">{display}</span>
                    <Delta value={s.yoy} />
                  </div>
                </div>
                <div className="w-full h-1.5 rounded-full overflow-hidden" style={{ background: "var(--border-soft)" }}>
                  <div className="h-full rounded-full" style={{ width: `${pct}%`, background: i === 0 ? "var(--accent)" : "var(--accent-2)" }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Weekly chart */}
      <div className="panel p-3">
        <div className="flex items-center justify-between mb-1">
          <div className="text-[11px] font-semibold">Semanal · 12 sem</div>
          <span className="text-[9px] text-[var(--fg-faint)] flex items-center gap-1">
            <span className="w-2 h-0.5 bg-[var(--accent)] rounded" /> 2026
            <span className="ml-1 w-2 h-0.5 bg-[var(--accent-2)] rounded" /> 2025
          </span>
        </div>
        <LineChart
          labels={MOCK.weekly.map(w => w.label)}
          series={[
            { name: "Atual", data: MOCK.weekly.map(w => w.atual), color: "var(--accent)" },
            { name: "LY", data: MOCK.weekly.map(w => w.prev), color: "var(--accent-2)", dashed: true },
          ]}
          height={160}
        />
      </div>
    </div>
  );
}

function MobileCarteira() {
  const pedidos = Array.from({ length: 12 }, (_, i) => ({
    id: `PED-${(2401 + i).toString().padStart(4, "0")}`,
    fornecedor: PH.suppliers[i % PH.suppliers.length],
    filial: PH.stores[i % PH.stores.length],
    itens: [4, 7, 12, 18, 5, 22, 8, 14][i % 8],
    valor: 18420 + i * 4800,
    status: ["aprovação", "produção", "transporte", "recebido"][i % 4],
    eta: `${10 + (i % 18)}/06`,
    color: ["var(--warn)", "var(--accent-2)", "var(--info)", "var(--pos)"][i % 4],
    progress: [25, 45, 70, 100, 30, 80, 55, 90, 20, 60, 75, 100][i],
  }));
  return (
    <div className="px-4 py-3 space-y-3">
      {/* Status pills */}
      <div className="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4 no-scrollbar">
        {[
          { l: "Todos", c: 24, a: true },
          { l: "Aprovação", c: 4 },
          { l: "Produção", c: 12 },
          { l: "Transporte", c: 8 },
          { l: "Recebidos", c: 27 },
        ].map((p) => (
          <button key={p.l} className={`px-3 py-1.5 text-[11px] font-medium rounded-full whitespace-nowrap flex items-center gap-1.5 border ${p.a ? "bg-[var(--accent)] border-[var(--accent)] text-[#00282d]" : "bg-[var(--panel)] border-[var(--border)] text-[var(--fg-muted)]"}`}>
            {p.l}
            <span className={`text-[9px] font-mono px-1 rounded ${p.a ? "bg-black/15" : "bg-[var(--panel-2)]"}`}>{p.c}</span>
          </button>
        ))}
      </div>

      <div className="space-y-2">
        {pedidos.map((p) => (
          <div key={p.id} className="panel p-3">
            <div className="flex items-start justify-between">
              <div className="flex-1 min-w-0">
                <div className="font-mono text-[10px] text-[var(--fg-faint)]">{p.id}</div>
                <div className="text-[12.5px] font-medium truncate mt-0.5">{p.fornecedor}</div>
                <div className="text-[10px] text-[var(--fg-muted)] mt-0.5 flex items-center gap-2">
                  <span className="flex items-center gap-1"><Icon name="store" className="w-3 h-3" /> {p.filial}</span>
                  <span className="flex items-center gap-1"><Icon name="package" className="w-3 h-3" /> {p.itens} itens</span>
                </div>
              </div>
              <div className="text-right">
                <div className="num font-mono text-[13px] font-semibold">{fmt.money(p.valor, { compact: true })}</div>
                <div className="text-[10px] text-[var(--fg-faint)] num">ETA {p.eta}</div>
              </div>
            </div>
            <div className="mt-2.5 flex items-center gap-2">
              <span className="badge text-[9px]" style={{ color: p.color, borderColor: `color-mix(in oklch, ${p.color} 40%, transparent)`, background: `color-mix(in oklch, ${p.color} 12%, transparent)` }}>{p.status}</span>
              <div className="flex-1"><Progress value={p.progress} height={4} color={p.color} /></div>
              <span className="num text-[10px] font-mono w-8 text-right text-[var(--fg-muted)]">{p.progress}%</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileAlerts() {
  return (
    <div className="px-4 py-3 space-y-3">
      <div className="grid grid-cols-3 gap-2">
        <div className="panel p-2.5"><div className="text-[9px] text-[var(--fg-muted)] uppercase">Críticos</div><div className="num text-[18px] font-semibold text-[var(--neg)]">27</div></div>
        <div className="panel p-2.5"><div className="text-[9px] text-[var(--fg-muted)] uppercase">Altos</div><div className="num text-[18px] font-semibold text-[var(--warn)]">56</div></div>
        <div className="panel p-2.5"><div className="text-[9px] text-[var(--fg-muted)] uppercase">Médios</div><div className="num text-[18px] font-semibold">42</div></div>
      </div>

      <div className="space-y-2">
        {PH.products.map((p, i) => {
          const sev = ["alta", "média", "alta", "baixa", "média", "alta", "média", "alta"][i % 8];
          const sevColor = sev === "alta" ? "var(--neg)" : sev === "média" ? "var(--warn)" : "var(--pos)";
          return (
            <div key={p} className="panel p-3 flex gap-3 active:bg-[var(--panel-2)]">
              <div className="w-1 rounded-full shrink-0" style={{ background: sevColor }} />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1.5">
                  <span className="font-mono text-[10px] text-[var(--fg-faint)]">{p.split(" · ")[0]}</span>
                  <span className={`badge text-[8px] ${sev === "alta" ? "badge-neg" : sev === "média" ? "badge-warn" : "badge-pos"}`}>{sev}</span>
                </div>
                <div className="text-[12px] font-medium truncate">{p.split(" · ")[1]}</div>
                <div className="text-[10px] text-[var(--fg-muted)] mt-0.5">
                  {PH.stores[i % PH.stores.length]} · estoque {[6, 11, 4, 18, 9, 22, 14, 28][i % 8]} pç · cob. {[4, 8, 6, 14, 9, 18, 12, 22][i % 8]}d
                </div>
              </div>
              <button className="text-[10px] font-semibold text-[var(--accent)] px-2 py-1 rounded-md border border-[var(--accent)] active:bg-[var(--accent-soft)] shrink-0 self-center">
                Repor
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MobileCampanhas() {
  const camps = [
    { nome: "Liquidação Sazonal", peso: 78, vendas: 412000, meta: 500000, cor: "var(--accent)", periodo: "01–14/06" },
    { nome: "Inverno · Lançamento", peso: 62, vendas: 286000, meta: 400000, cor: "var(--accent-2)", periodo: "10–30/06" },
    { nome: "Dia dos Namorados", peso: 91, vendas: 196000, meta: 200000, cor: "var(--pink)", periodo: "01–12/06" },
  ];
  return (
    <div className="px-4 py-3 space-y-3">
      {camps.map((c) => (
        <div key={c.nome} className="panel p-4">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: `color-mix(in oklch, ${c.cor} 14%, transparent)`, border: `1px solid color-mix(in oklch, ${c.cor} 40%, transparent)`, color: c.cor }}>
              <Icon name="megaphone" className="w-4 h-4" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-[13px] font-semibold truncate">{c.nome}</div>
              <div className="text-[10px] text-[var(--fg-muted)]">{c.periodo}</div>
            </div>
          </div>
          <div className="mt-3 space-y-2">
            <div>
              <div className="flex justify-between text-[10px] mb-1">
                <span className="text-[var(--fg-muted)]">Execução</span>
                <span className="num font-mono font-semibold">{c.peso}%</span>
              </div>
              <Progress value={c.peso} max={100} height={5} color={c.cor} />
            </div>
            <div>
              <div className="flex justify-between text-[10px] mb-1">
                <span className="text-[var(--fg-muted)]">Meta · {fmt.pct((c.vendas / c.meta) * 100, { dec: 0 })}</span>
                <span className="num font-mono font-semibold">{fmt.money(c.vendas, { compact: true })} / {fmt.money(c.meta, { compact: true })}</span>
              </div>
              <Progress value={c.vendas} max={c.meta} height={5} color="var(--accent)" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function MobileMore({ onNav, onExit }) {
  const items = [
    { id: "fechamento", icon: "sun-medium", label: "Fechamento do dia" },
    { id: "produtos",   icon: "package",    label: "Análise de produtos" },
    { id: "forecast",   icon: "line-chart", label: "Previsão de vendas" },
    { id: "ruptura",    icon: "shield-alert", label: "Ruptura & cobertura" },
    { id: "vendedores", icon: "users",      label: "Performance vendedores" },
    { id: "otb",        icon: "shopping-cart", label: "Open to Buy" },
    { id: "pedidos",    icon: "file-plus-2", label: "Cadastro de pedidos" },
  ];
  return (
    <div className="px-4 py-3 space-y-3">
      <div className="panel divide-y divide-[var(--border-soft)]">
        {items.map((it) => (
          <button key={it.id} onClick={() => onNav(it.id)} className="w-full flex items-center gap-3 p-3 active:bg-[var(--panel-2)] text-left">
            <Icon name={it.icon} className="w-4 h-4 text-[var(--accent)]" />
            <span className="flex-1 text-[12.5px]">{it.label}</span>
            <Icon name="chevron-right" className="w-3.5 h-3.5 text-[var(--fg-faint)]" />
          </button>
        ))}
      </div>

      <button onClick={onExit} className="w-full panel p-3 text-[12px] text-[var(--fg-muted)] flex items-center justify-center gap-2 active:bg-[var(--panel-2)]">
        <Icon name="monitor" className="w-4 h-4" />
        Sair da versão mobile
      </button>
    </div>
  );
}

// Lightweight wrapper for screens not yet adapted — uses the desktop screen at narrow width
function MobileWrappedDesktop({ Comp }) {
  return (
    <div className="px-3 py-3" style={{ fontSize: "12px" }}>
      <Comp onNavigate={() => {}} />
    </div>
  );
}

const MOBILE_SCREENS = {
  home:       { title: "Home",          Comp: MobileHome },
  visao:      { title: "Visão Geral",   Comp: MobileVisao },
  carteira:   { title: "Carteira",      Comp: MobileCarteira },
  alerts:     { title: "Alertas",       Comp: MobileAlerts },
  campanhas:  { title: "Campanhas",     Comp: MobileCampanhas },
  more:       { title: "Mais",          Comp: MobileMore },
  // Re-route others through desktop wrappers (still works in narrow column)
  fechamento: { title: "Fechamento",    Comp: () => <MobileWrappedDesktop Comp={FechamentoScreen} /> },
  produtos:   { title: "Produtos",      Comp: () => <MobileWrappedDesktop Comp={ProdutosScreen} /> },
  forecast:   { title: "Previsão",      Comp: () => <MobileWrappedDesktop Comp={ForecastScreen} /> },
  ruptura:    { title: "Ruptura",       Comp: () => <MobileWrappedDesktop Comp={RupturaScreen} /> },
  vendedores: { title: "Vendedores",    Comp: () => <MobileWrappedDesktop Comp={VendedoresScreen} /> },
  otb:        { title: "Open to Buy",   Comp: () => <MobileWrappedDesktop Comp={OTBScreen} /> },
  pedidos:    { title: "Novo pedido",   Comp: () => <MobileWrappedDesktop Comp={PedidosCadastroScreen} /> },
};

// ============================================================
// MobilePreview — full-screen mode (replaces desktop, no backdrop)
// ============================================================
function MobilePreview({ onClose, theme, onTheme }) {
  const [active, setActive] = useState("home");
  const [profileOpen, setProfileOpen] = useState(false);
  const dark = useDarkMode();
  const screen = MOBILE_SCREENS[active] || MOBILE_SCREENS.home;
  const ScreenComp = screen.Comp;

  // Bottom tab bar
  const tabs = [
    { id: "home",     icon: "house",          label: "Início" },
    { id: "visao",    icon: "bar-chart-3",    label: "Visão" },
    { id: "carteira", icon: "clipboard-list", label: "Carteira" },
    { id: "alerts",   icon: "bell",           label: "Alertas", dot: true },
    { id: "more",     icon: "menu",           label: "Mais" },
  ];

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[var(--bg-soft)] fade-in overflow-hidden">
      {/* Subtle decorative gradient mesh */}
      <div className="absolute inset-0 grid-dots opacity-30 pointer-events-none" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] rounded-full opacity-40 pointer-events-none" style={{ background: "radial-gradient(ellipse, var(--accent-soft), transparent 60%)" }} />

      {/* Top control bar */}
      <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-6 py-3.5 bg-[var(--panel)] border-b border-[var(--border)]">
        <div className="flex items-center gap-3">
          <img src="assets/dashm-logo.png" alt="DashM" className="w-7 h-7 object-contain" />
          <div className="flex items-center gap-2">
            <Icon name="smartphone" className="w-4 h-4 text-[var(--accent)]" />
            <span className="text-[13px] font-semibold">Pré-visualização mobile</span>
            <span className="badge badge-accent text-[9px]">live preview</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-[11px] text-[var(--fg-muted)] mr-2 hidden md:inline">Mesmas telas, mesmos dados — otimizado para celular</span>
          <Btn icon="monitor" variant="primary" onClick={onClose}>Voltar para desktop</Btn>
        </div>
      </div>

      {/* Centered iPhone */}
      <div className="slide-up mt-12">
        <IOSDevice width={402} height={874} dark={dark}>
          <div className="flex flex-col h-full bg-[var(--bg)] text-[var(--fg)] overflow-hidden" style={{ fontFamily: "Geist, system-ui", paddingTop: 60, paddingBottom: 34 }}>
            {/* App header */}
            <div className="shrink-0 px-4 pt-2 pb-3 bg-[var(--panel)] border-b border-[var(--border)] flex items-center gap-3 relative">
              <img src="assets/dashm-logo.png" alt="DashM" className="w-7 h-7 object-contain" />
              <div className="leading-tight flex-1 min-w-0">
                <div className="text-[12px] font-semibold truncate">{screen.title}</div>
                <div className="text-[9px] text-[var(--fg-faint)] uppercase tracking-wider">DashM · OS</div>
              </div>
              <button className="w-8 h-8 rounded-full bg-[var(--panel-2)] border border-[var(--border)] flex items-center justify-center">
                <Icon name="bell" className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
              </button>
              <button
                onClick={() => setProfileOpen((o) => !o)}
                className="w-8 h-8 rounded-full bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-[10px] font-semibold text-white"
              >
                DM
              </button>

              {/* Profile dropdown */}
              {profileOpen && (
                <>
                  <div className="absolute inset-0 z-30" onClick={() => setProfileOpen(false)} />
                  <div className="absolute right-3 top-full mt-1 w-[230px] rounded-xl border border-[var(--border)] bg-[var(--panel-hi)] shadow-[var(--shadow-lg)] z-40 overflow-hidden fade-in">
                    <div className="px-3.5 py-3 border-b border-[var(--border)]">
                      <div className="text-[12px] font-medium">Operador Demo</div>
                      <div className="text-[10.5px] text-[var(--fg-muted)]">demo@dashm.example</div>
                      <div className="mt-1.5 flex items-center gap-1.5"><span className="badge badge-accent text-[8px]">Tenant Demo</span><span className="badge text-[8px]">Plano Pro</span></div>
                    </div>
                    {[
                      { icon: "user", label: "Meu perfil" },
                      { icon: "shield-check", label: "Administração" },
                      { icon: "key-round", label: "API & Webhooks" },
                      { icon: "life-buoy", label: "Suporte" },
                    ].map((it) => (
                      <button key={it.label} className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12px] text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)]">
                        <Icon name={it.icon} className="w-3.5 h-3.5" />
                        {it.label}
                      </button>
                    ))}
                    {/* Theme switcher */}
                    <div className="px-3.5 py-2.5 border-t border-[var(--border)] flex items-center gap-2">
                      <Icon name={theme === "dark" ? "moon" : "sun"} className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
                      <span className="text-[12px] text-[var(--fg-muted)] flex-1">Tema</span>
                      <div className="inline-flex p-0.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] gap-0.5">
                        <button onClick={() => onTheme && onTheme("light")} className={`px-2 py-0.5 rounded text-[10px] font-medium ${theme === "light" ? "bg-[var(--panel-hi)] text-[var(--fg)]" : "text-[var(--fg-muted)]"}`}>Claro</button>
                        <button onClick={() => onTheme && onTheme("dark")}  className={`px-2 py-0.5 rounded text-[10px] font-medium ${theme === "dark"  ? "bg-[var(--panel-hi)] text-[var(--fg)]" : "text-[var(--fg-muted)]"}`}>Escuro</button>
                      </div>
                    </div>
                    <button onClick={onClose} className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12px] text-[var(--accent)] hover:bg-[var(--accent-soft)] border-t border-[var(--border)]">
                      <Icon name="monitor" className="w-3.5 h-3.5" />
                      Voltar para desktop
                    </button>
                    <button className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12px] text-[var(--neg)] hover:bg-[color-mix(in_oklch,var(--neg)_8%,transparent)] border-t border-[var(--border)]">
                      <Icon name="log-out" className="w-3.5 h-3.5" />
                      Sair
                    </button>
                  </div>
                </>
              )}
            </div>

            {/* Scrollable content */}
            <div className="flex-1 overflow-y-auto pb-2" key={active}>
              <div className="fade-in">
                <ScreenComp onNav={setActive} onExit={onClose} />
              </div>
            </div>

            {/* Bottom tab bar */}
            <div className="shrink-0 px-3 pt-2 pb-3 bg-[var(--panel)] border-t border-[var(--border)] flex gap-1">
              {tabs.map((t) => {
                const a = active === t.id;
                return (
                  <button key={t.id} onClick={() => setActive(t.id)} className={`flex-1 flex flex-col items-center gap-0.5 py-1.5 rounded-lg transition-colors ${a ? "bg-[var(--accent-soft)]" : ""}`}>
                    <div className="relative">
                      <Icon name={t.icon} className={`w-5 h-5 ${a ? "text-[var(--accent)]" : "text-[var(--fg-muted)]"}`} />
                      {t.dot && <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[var(--neg)]" />}
                    </div>
                    <span className={`text-[9px] font-medium ${a ? "text-[var(--accent)]" : "text-[var(--fg-faint)]"}`}>{t.label}</span>
                  </button>
                );
              })}
            </div>
          </div>
        </IOSDevice>
      </div>

      {/* Footer caption */}
      <div className="absolute bottom-4 left-0 right-0 text-center text-[11px] text-[var(--fg-faint)] z-10">
        Vista prévia mobile · interativa · mesmas telas, mesmos metros de dados
      </div>
    </div>
  );
}

Object.assign(window, { MobilePreview });