// ===== Mobile galeria · 7 telas iOS lado a lado =====

function PhoneFrame({ title, children, accent = false }) {
  return (
    <div className="shrink-0">
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2 text-center">{title}</div>
      <div className="relative bg-pleita-ink rounded-[44px] p-2 shadow-pl-md" style={{ width: 280, height: 580 }}>
        <div className="relative bg-pleita-paper rounded-[36px] overflow-hidden h-full">
          {/* Dynamic Island */}
          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-[88px] h-[26px] bg-pleita-ink rounded-full z-30 flex items-center justify-end pr-2 gap-1">
            <span aria-hidden className="size-1.5 rounded-full bg-pleita-paper/30" />
            <span aria-hidden className="size-2 rounded-full bg-pleita-paper/15" />
          </div>
          {/* Status bar */}
          <div className="flex items-center justify-between px-5 pt-2.5 pb-1 pl-num text-[10px] text-pleita-ink font-semibold z-10 relative">
            <span>9:41</span>
            <span className="flex items-center gap-[3px]">
              <span className="block w-3 h-1.5 bg-current rounded-sm" />
              <svg viewBox="0 0 16 12" className="size-3" fill="currentColor"><path d="M8 1.5c2.1 0 4.1.8 5.6 2.2l1.4-1.4C13.1 0.5 10.6 0 8 0S2.9.5 1 2.3l1.4 1.4C3.9 2.3 5.9 1.5 8 1.5z"/><path d="M8 5c1.3 0 2.5.5 3.4 1.4l1.4-1.4C11.5 3.7 9.8 3 8 3s-3.5.7-4.8 2L4.6 6.4C5.5 5.5 6.7 5 8 5z"/><circle cx="8" cy="9" r="2"/></svg>
              <span className="ml-0.5 block w-5 h-2 border border-current rounded-sm relative"><span className="absolute inset-0.5 w-3 bg-current rounded-[1px]" /></span>
            </span>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}

function MEditaisList() {
  const items = [
    { v: "go",      m: 89, t: "Aquisição equip. TI", o: "Pref. Campinas",  d: "21 mai · 14h32" },
    { v: "go",      m: 92, t: "Locação impressoras", o: "TRF 3ª",          d: "26 mai" },
    { v: "go",      m: 84, t: "Manut. elevadores",   o: "USP",             d: "15 mai" },
    { v: "caution", m: 71, t: "Limpeza TJ-MG",        o: "TJ-MG",           d: "19 mai" },
    { v: "caution", m: 67, t: "Mobiliário escolar",   o: "SEDUC-PE",        d: "30 mai" },
  ];
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <h1 className="font-display text-2xl text-pleita-ink mt-2">Hoje<span className="text-pleita-lime">.</span></h1>
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mt-0.5">8 matches · 312 editais</div>
      <div className="space-y-2 mt-4">
        {items.map((it, i) => (
          <div key={i} className="rounded-2xl bg-surface-card border border-pleita-line p-3 shadow-pl-sm">
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
                <div className="text-[13px] text-pleita-ink font-medium truncate">{it.t}</div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">{it.o} · {it.d}</div>
              </div>
              <span className={`shrink-0 pl-num text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded font-semibold ${it.v === "go" ? "bg-verdict-go/15 text-verdict-go" : "bg-verdict-caution/15 text-verdict-caution"}`}>{it.v === "go" ? "go" : "cuid"}</span>
            </div>
            <div className="mt-2 flex items-center gap-2">
              <div className="flex-1 h-1 rounded-full bg-surface-2 overflow-hidden">
                <div className={`h-full ${it.v === "go" ? "bg-verdict-go" : "bg-verdict-caution"}`} style={{ width: `${it.m}%` }} />
              </div>
              <span className="pl-num text-[10px] text-pleita-stone">{it.m}%</span>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active="home" />
    </div>
  );
}

function MEditalDetail() {
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <div className="pl-num text-[10px] text-pleita-stone-2 mt-2">← Editais</div>
      <h1 className="font-display text-[20px] text-pleita-ink leading-tight mt-1">Aquisição equipamentos de TI</h1>
      <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">EDT-2026-04-A1B2 · Pref. Campinas</div>

      <div className="mt-4 rounded-2xl bg-pleita-lime/20 border border-pleita-lime/40 p-3 text-center">
        <div className="text-3xl mb-1">🟢</div>
        <div className="font-display text-base text-pleita-ink">PARTICIPE</div>
        <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">score 89 · margem 18%</div>
      </div>

      <div className="grid grid-cols-2 gap-2 mt-3">
        <div className="rounded-xl bg-surface-card border border-pleita-line p-2.5">
          <div className="pl-num text-[8px] uppercase tracking-wider text-pleita-stone-2">valor</div>
          <div className="pl-num text-sm text-pleita-ink font-semibold">R$ 1,2M</div>
        </div>
        <div className="rounded-xl bg-surface-card border border-pleita-line p-2.5">
          <div className="pl-num text-[8px] uppercase tracking-wider text-pleita-stone-2">abertura</div>
          <div className="pl-num text-sm text-pleita-ink font-semibold">21 mai</div>
        </div>
      </div>

      <div className="mt-3 space-y-1.5">
        {[["🎯", "Analista", "89"], ["⚖️", "Jurídico", "viu cláusula 4.3"], ["💰", "Financeiro", "BDI 22%"], ["📋", "Docs", "5/6 ok"]].map(([e, n, v]) => (
          <div key={n} className="flex items-center gap-2 text-[12px]">
            <span>{e}</span><span className="text-pleita-stone-2 flex-1">{n}</span><span className="pl-num text-pleita-ink">{v}</span>
          </div>
        ))}
      </div>

      <button className="mt-4 w-full py-2.5 rounded-full bg-pleita-lime text-pleita-ink text-[13px] font-semibold">Participar</button>
      <BottomNav active="home" />
    </div>
  );
}

function MPregaoLive() {
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full bg-pleita-ink text-pleita-paper">
      <div className="flex items-center gap-2 mt-2">
        <span className="size-2 rounded-full bg-verdict-stop animate-pulse" />
        <span className="pl-num text-[10px] uppercase tracking-wider text-verdict-stop">ao vivo</span>
      </div>
      <div className="font-display text-2xl mt-1">14:32:38</div>
      <div className="pl-num text-[10px] text-pleita-paper/60">Pregão 047/2026</div>

      <div className="mt-4 rounded-2xl bg-pleita-lime/20 border border-pleita-lime/40 p-3">
        <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-lime">1º lugar · você</div>
        <div className="pl-num text-2xl mt-1 text-pleita-lime">R$ 312.000</div>
        <div className="pl-num text-[10px] text-pleita-paper/60 mt-1">margem 18,2%</div>
      </div>

      <div className="mt-3 space-y-1.5">
        {[
          ["2º", "Souza Tech", "R$ 312.500"],
          ["3º", "Bytenet", "desistiu"],
          ["—", "InfraSys", "desistiu"],
        ].map(([r, n, v]) => (
          <div key={n} className="flex items-center gap-2 text-[11px]">
            <span className="pl-num text-pleita-paper/60 w-6">{r}</span><span className="flex-1 truncate">{n}</span><span className="pl-num">{v}</span>
          </div>
        ))}
      </div>

      <div className="mt-4 rounded-xl bg-pleita-paper/10 p-2.5">
        <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-paper/60">robô Pleita · Equilibrada</div>
        <div className="text-[11px] text-pleita-paper mt-1">cobre lances até R$ 312.000 (piso)</div>
      </div>

      <div className="grid grid-cols-2 gap-2 mt-4">
        <button className="py-2 rounded-full border border-pleita-paper/30 text-[11px] text-pleita-paper">Pausar robô</button>
        <button className="py-2 rounded-full bg-verdict-stop text-pleita-paper text-[11px] font-semibold">Desistir</button>
      </div>
    </div>
  );
}

function MCofre() {
  const docs = [
    ["Cartão CNPJ",         "ok",    "—"],
    ["Federal",             "ok",    "12 nov"],
    ["Estadual",            "ok",    "05 dez"],
    ["Municipal",           "warn",  "vence em 6 dias"],
    ["FGTS",                "ok",    "21 nov"],
    ["Trabalhista",         "warn",  "vence em 14d"],
    ["Balanço 2025",        "miss",  "ainda não anexado"],
  ];
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <h1 className="font-display text-2xl text-pleita-ink mt-2">Cofre<span className="text-pleita-lime">.</span></h1>
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mt-0.5">5 ok · 2 atenção · 1 falta</div>

      <div className="mt-3 rounded-2xl bg-pleita-ink text-pleita-paper p-3">
        <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-paper/60">saúde geral</div>
        <div className="font-display text-3xl mt-1">71%</div>
        <div className="h-1 mt-2 bg-pleita-paper/20 rounded-full overflow-hidden"><div className="h-full bg-pleita-lime" style={{ width: "71%" }} /></div>
      </div>

      <div className="mt-3 space-y-1.5">
        {docs.map(([n, st, v]) => (
          <div key={n} className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg bg-surface-card border border-pleita-line">
            <span className={`size-7 rounded-md grid place-items-center text-xs ${st === "ok" ? "bg-verdict-go/15 text-verdict-go" : st === "warn" ? "bg-verdict-caution/15 text-verdict-caution" : "bg-verdict-stop/15 text-verdict-stop"}`}>
              {st === "ok" ? "✓" : st === "warn" ? "!" : "+"}
            </span>
            <div className="flex-1 min-w-0">
              <div className="text-[12px] text-pleita-ink">{n}</div>
              <div className="pl-num text-[10px] text-pleita-stone-2">{v}</div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active="cofre" />
    </div>
  );
}

function MAvisos() {
  const av = [
    { ic: "🏆", t: "Você venceu Campinas", d: "R$ 312.000 · adjudicação em 14d", th: "agora", tone: "lime" },
    { ic: "⚠️", t: "CND Municipal vence em 6 dias", d: "Posso emitir automaticamente", th: "há 2h", tone: "warn" },
    { ic: "🎯", t: "Novo edital match 92%", d: "TRF 3ª · impressoras · R$ 385k", th: "há 4h", tone: "info" },
    { ic: "⚡", t: "Pregão TRF 3ª começa às 14h", d: "Robô configurado · estratégia eq.", th: "ontem", tone: "neutral" },
    { ic: "📋", t: "Habilitação aceita", d: "Pref. Campinas · próxima fase", th: "ontem", tone: "go" },
    { ic: "💡", t: "Dica do Coach", d: "Empresas no seu porte vencem 31% dos pregões parecidos", th: "ontem", tone: "neutral" },
  ];
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <h1 className="font-display text-2xl text-pleita-ink mt-2">Avisos<span className="text-pleita-lime">.</span></h1>
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mt-0.5">6 nas últimas 24h</div>

      <div className="mt-3 space-y-2">
        {av.map((a, i) => (
          <div key={i} className="rounded-2xl bg-surface-card border border-pleita-line p-3">
            <div className="flex items-start gap-2.5">
              <span className="text-lg shrink-0">{a.ic}</span>
              <div className="flex-1 min-w-0">
                <div className="text-[12px] text-pleita-ink font-medium leading-snug">{a.t}</div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5 leading-snug">{a.d}</div>
              </div>
              <span className="pl-num text-[9px] text-pleita-stone-2 shrink-0">{a.th}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MRobo() {
  const strategies = [
    { id: "balanced",   nm: "Equilibrado",  d: "Cobre lances até o piso", on: true  },
    { id: "aggressive", nm: "Agressivo",    d: "Lance mínimo automático", on: false },
    { id: "patient",    nm: "Paciente",     d: "Espera concorrentes desistirem", on: false },
  ];
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <h1 className="font-display text-2xl text-pleita-ink mt-2">Robô<span className="text-pleita-lime">.</span></h1>
      <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mt-0.5">Pregão 047 · começa em 2h</div>

      {/* Toggle on/off */}
      <div className="mt-3 rounded-2xl bg-pleita-ink text-pleita-paper p-3 flex items-center gap-3">
        <span className="size-9 rounded-md bg-pleita-lime/20 text-pleita-lime grid place-items-center text-base">⚡</span>
        <div className="flex-1">
          <div className="text-[12px] font-medium">Robô ativo</div>
          <div className="pl-num text-[10px] text-pleita-paper/60">vai lançar por você</div>
        </div>
        <span className="relative w-9 h-5 rounded-full bg-pleita-lime">
          <span className="absolute top-0.5 right-0.5 size-4 rounded-full bg-pleita-paper" />
        </span>
      </div>

      {/* Estratégia */}
      <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-stone-2 mt-4 mb-2">Estratégia</div>
      <div className="space-y-1.5">
        {strategies.map((s) => (
          <div key={s.id} className={`rounded-xl p-2.5 border ${s.on ? "border-pleita-lime bg-pleita-lime/10" : "border-pleita-line bg-surface-card"}`}>
            <div className="flex items-center justify-between gap-2">
              <div className="flex-1">
                <div className="text-[12px] text-pleita-ink font-medium">{s.nm}</div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">{s.d}</div>
              </div>
              <span className={`size-4 rounded-full grid place-items-center text-[9px] ${s.on ? "bg-pleita-lime text-pleita-ink" : "border border-pleita-line"}`}>{s.on ? "✓" : ""}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Limites */}
      <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-stone-2 mt-4 mb-2">Limites</div>
      <div className="rounded-xl bg-surface-card border border-pleita-line p-3 space-y-2.5">
        <div className="flex items-center justify-between gap-2">
          <span className="pl-num text-[10px] text-pleita-stone-2">Piso</span>
          <span className="pl-num text-[12px] text-pleita-ink font-semibold">R$ 312.000</span>
        </div>
        <div className="h-px bg-pleita-line" />
        <div className="flex items-center justify-between gap-2">
          <span className="pl-num text-[10px] text-pleita-stone-2">Passo</span>
          <span className="pl-num text-[12px] text-pleita-ink font-semibold">R$ 500</span>
        </div>
        <div className="h-px bg-pleita-line" />
        <div className="flex items-center justify-between gap-2">
          <span className="pl-num text-[10px] text-pleita-stone-2">Margem mínima</span>
          <span className="pl-num text-[12px] text-pleita-ink font-semibold">15%</span>
        </div>
      </div>

      <div className="mt-3 rounded-xl bg-pleita-lime/10 border border-pleita-lime/40 p-2.5">
        <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-lime">🛡 segurança</div>
        <div className="text-[11px] text-pleita-ink mt-1 leading-snug">Robô pausa automaticamente se preço fechar a 5% da margem mínima.</div>
      </div>

      <BottomNav active="lances" />
    </div>
  );
}

function MPerfil() {
  return (
    <div className="px-4 pt-2 pb-20 overflow-hidden h-full">
      <h1 className="font-display text-2xl text-pleita-ink mt-2">Perfil<span className="text-pleita-lime">.</span></h1>

      <div className="mt-4 flex items-center gap-3">
        <span className="size-14 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-base font-semibold">MS</span>
        <div>
          <div className="text-[14px] text-pleita-ink font-medium">Marcos Souza</div>
          <div className="pl-num text-[10px] text-pleita-stone-2">marcos@souzaeng.com.br</div>
        </div>
      </div>

      <div className="mt-4 rounded-2xl bg-pleita-paper-2 border border-pleita-line p-3">
        <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-stone-2">empresa atual</div>
        <div className="text-[13px] text-pleita-ink font-medium mt-1">Souza Engenharia</div>
        <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">CNPJ 32.948.117/0001-50 · papel admin</div>
        <button className="pl-num text-[10px] text-pleita-info mt-2 hover:underline">Trocar empresa →</button>
      </div>

      <div className="mt-3 rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        {[
          ["📋", "Cofre"],
          ["⚖️", "Peças jurídicas"],
          ["💳", "Faturamento"],
          ["🔔", "Notificações"],
          ["🎓", "Modo Iniciante"],
          ["❓", "Ajuda e suporte"],
        ].map(([e, n], i) => (
          <div key={n} className={`flex items-center gap-3 px-3 py-2.5 ${i > 0 ? "border-t border-pleita-line" : ""}`}>
            <span className="text-base">{e}</span>
            <span className="flex-1 text-[12px] text-pleita-ink">{n}</span>
            <span className="text-pleita-stone-2 text-xs">›</span>
          </div>
        ))}
      </div>

      <button className="mt-3 w-full py-2.5 pl-num text-[11px] uppercase tracking-wider text-verdict-stop">Sair</button>
      <BottomNav active="perfil" />
    </div>
  );
}

function BottomNav({ active }) {
  const tabs = [
    { id: "home",   e: "🏠", l: "Início"  },
    { id: "lances", e: "🎯", l: "Lances"  },
    { id: "cofre",  e: "📋", l: "Cofre"   },
    { id: "perfil", e: "👤", l: "Perfil"  },
  ];
  return (
    <nav className="absolute bottom-0 inset-x-0 bg-pleita-paper/95 backdrop-blur border-t border-pleita-line z-20 px-2 pb-5 pt-1.5">
      <ul className="grid grid-cols-4">
        {tabs.map((t) => {
          const on = t.id === active;
          return (
            <li key={t.id}>
              <div className={`w-full flex flex-col items-center gap-0.5 py-1 ${on ? "text-pleita-ink" : "text-pleita-stone-2"}`}>
                <span className="text-base leading-none">{t.e}</span>
                <span className="pl-num text-[8px] uppercase tracking-wider">{t.l}</span>
                {on && <span className="size-1 rounded-full bg-pleita-lime mt-0.5" />}
              </div>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

function ScreenMobileGaleria() {
  return (
    <div className="h-full overflow-y-auto scrollbar-pl bg-surface-1">
      <div className="max-w-7xl mx-auto px-4 md:px-8 py-10">
        <header className="mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.18em] text-pleita-stone-2">App mobile · PWA</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink mt-1 leading-tight">No bolso de quem decide<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-2xl">7 telas do app mobile — instala como PWA, funciona offline. Os mesmos 6 agentes, sem precisar abrir o notebook.</p>
        </header>

        <div className="overflow-x-auto scrollbar-pl pb-4">
          <div className="flex gap-6 px-2 pb-4">
            <PhoneFrame title="01 · Oportunidades"><MEditaisList /></PhoneFrame>
            <PhoneFrame title="02 · Detalhe edital"><MEditalDetail /></PhoneFrame>
            <PhoneFrame title="03 · Pregão ao vivo"><MPregaoLive /></PhoneFrame>
            <PhoneFrame title="04 · Robô de lances"><MRobo /></PhoneFrame>
            <PhoneFrame title="05 · Cofre"><MCofre /></PhoneFrame>
            <PhoneFrame title="06 · Avisos"><MAvisos /></PhoneFrame>
            <PhoneFrame title="07 · Perfil"><MPerfil /></PhoneFrame>
          </div>
        </div>

        <section className="mt-12 grid md:grid-cols-3 gap-4">
          {[
            { e: "📲", t: "Instala como app",  d: "PWA · iOS e Android · sem passar pela loja, sem custo de Apple/Google." },
            { e: "📵", t: "Funciona offline",   d: "Editais salvos, cofre, peças geradas — tudo em cache. Sincroniza ao voltar online." },
            { e: "🔔", t: "Push nativo",        d: "Notificação iOS/Android · entregue mesmo com o app fechado." },
          ].map((f) => (
            <div key={f.t} className="rounded-2xl bg-surface-card border border-pleita-line p-5">
              <div className="text-2xl">{f.e}</div>
              <div className="font-display text-base text-pleita-ink mt-2">{f.t}</div>
              <p className="text-xs text-pleita-stone mt-1 leading-relaxed">{f.d}</p>
            </div>
          ))}
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenMobileGaleria });