// ===== Admin screens =====

const ADMIN_NAV = [
  { id: "dashboard", emoji: "📊", label: "Overview"        },
  { id: "usuarios",  emoji: "👥", label: "Usuários"        },
  { id: "empresas",  emoji: "🏢", label: "Empresas"        },
  { id: "agentes",   emoji: "🤖", label: "Agentes IA"      },
  { id: "portais",   emoji: "📡", label: "Status Portais"  },
  { id: "billing",   emoji: "💳", label: "Faturamento"     },
];

function AdminFrame({ children, active, onNav }) {
  return (
    <div className="flex h-full">
      <aside className="w-[240px] shrink-0 flex flex-col border-r" style={{ background: "rgb(15 30 58)", color: "rgb(250 250 247)", borderColor: "rgba(255,255,255,0.08)" }}>
        <div className="px-5 pt-6 pb-5 flex items-center justify-between">
          <Logo size={20} mono className="!text-pleita-paper" />
          <span className="pl-num text-[9px] uppercase tracking-[0.18em] text-pleita-lime border border-pleita-lime/40 rounded-full px-2 py-0.5">admin</span>
        </div>
        <nav className="px-2 flex-1 overflow-y-auto scrollbar-pl">
          <ul className="space-y-0.5">
            {ADMIN_NAV.map((it) => {
              const isActive = it.id === active;
              return (
                <li key={it.id}>
                  <button onClick={() => onNav?.(it.id)} className={`w-full flex items-center gap-3 px-3 py-2 rounded-xl text-sm transition-colors ${isActive ? "bg-white/10" : "hover:bg-white/5"}`} style={{ color: isActive ? "rgb(250 250 247)" : "rgba(250,250,247,0.7)" }}>
                    <span className="text-base">{it.emoji}</span>{it.label}
                    {isActive && <span className="ml-auto size-1.5 rounded-full bg-pleita-lime" />}
                  </button>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="p-3 border-t" style={{ borderColor: "rgba(255,255,255,0.08)" }}>
          <button className="text-xs px-3 py-2" style={{ color: "rgba(250,250,247,0.6)" }}>← Voltar ao app</button>
        </div>
      </aside>
      <main className="flex-1 overflow-y-auto scrollbar-pl bg-surface-1">
        <div className="max-w-[1400px] mx-auto px-6 md:px-10 py-8">{children}</div>
      </main>
    </div>
  );
}

function ScreenAdmin() {
  const [tab, setTab] = React.useState("dashboard");
  return (
    <AdminFrame active={tab} onNav={setTab}>
      {tab === "dashboard" && <AdminOverview />}
      {tab === "usuarios"  && <AdminUsuarios />}
      {tab === "empresas"  && <AdminEmpresas />}
      {tab === "agentes"   && <AdminAgentes />}
      {tab === "portais"   && <AdminPortais />}
      {tab === "billing"   && <AdminBilling />}
    </AdminFrame>
  );
}

function AdminOverview() {
  return (
    <>
      <header className="mb-8">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Painel admin</div>
        <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">Saúde da Pleita · maio/2026</h1>
        <p className="text-sm text-pleita-stone mt-2">North star: % de iniciantes que vencem a primeira licitação em 90 dias.</p>
      </header>

      <section className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3 mb-8">
        {KPIS.map((k) => (
          <div key={k.label} className="rounded-2xl bg-surface-card border border-pleita-line p-5">
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">{k.label}</div>
            <div className="pl-num font-semibold text-2xl text-pleita-ink mt-2 leading-none">{k.value}</div>
            <div className={`pl-num text-xs mt-3 ${k.tone === "go" ? "text-verdict-go" : "text-verdict-caution"}`}>↑ {k.delta}</div>
          </div>
        ))}
      </section>

      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <Chart title="Receita recorrente · 7 meses" subtitle="MRR (R$ mil)" tag="+87% YoY">
          <SparkLine series={MRR_SERIES} />
        </Chart>
        <Chart title="Sessões diárias por ICP" subtitle="Uso semanal" tag={
          <span className="flex items-center gap-3 text-xs text-pleita-stone-2">
            <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-full bg-pleita-lime" />iniciantes</span>
            <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-full bg-pleita-ink" />profissionais</span>
          </span>
        }>
          <BarStack series={USAGE_SERIES} />
        </Chart>
      </section>

      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <header className="px-6 py-4 border-b border-pleita-line flex items-center justify-between">
          <h2 className="font-display font-medium text-pleita-ink">Últimas decisões IA</h2>
          <span className="pl-num text-xs text-pleita-stone-2">ver tudo →</span>
        </header>
        <ul className="divide-y divide-pleita-line">
          {[
            ["14:22", "Souza Engenharia",  "🎓", "Veredito 🟢 PARTICIPE · EDT-A1B2",      "$0.087", "4.1s"],
            ["14:21", "Souza Engenharia",  "⚖️", "Análise jurídica · cláusula 12.4 ok",   "$0.124", "6.8s"],
            ["14:20", "Melo & Costa Adv.", "🔍", "12 editais novos no PNCP-SP",            "$0.011", "0.9s"],
            ["14:18", "KBM Distribuidora", "💰", "BDI 23,5% · margem +6% · risco médio",   "$0.018", "1.3s"],
            ["14:15", "Alves Materiais",   "📋", "CNDT vencida — alerta enviado",          "$0.004", "0.4s"],
          ].map((r, i) => (
            <li key={i} className="px-6 py-3 grid grid-cols-12 items-center gap-3 text-sm">
              <span className="col-span-2 pl-num text-xs text-pleita-stone-2">{r[0]}</span>
              <span className="col-span-3 text-pleita-ink truncate">{r[1]}</span>
              <span className="col-span-1 text-base">{r[2]}</span>
              <span className="col-span-4 text-pleita-stone truncate">{r[3]}</span>
              <span className="col-span-1 pl-num text-xs text-pleita-stone-2 text-right">{r[4]}</span>
              <span className="col-span-1 pl-num text-xs text-pleita-stone-2 text-right">{r[5]}</span>
            </li>
          ))}
        </ul>
      </section>
    </>
  );
}

// ===== Admin · Usuários =====
const ADMIN_USERS = [
  { ini: "AR", nome: "Anderson R.",       email: "anderson@souzaeng.com.br",  plano: "Em Marcha",  empresa: "Souza Engenharia",       ultimo: "agora",       proc: 12, beginner: true,  status: "ativo" },
  { ini: "MC", nome: "Maria C.",           email: "maria@melocosta.adv.br",    plano: "Veterano",   empresa: "Melo & Costa Adv.",      ultimo: "há 2h",       proc: 38, beginner: false, status: "ativo" },
  { ini: "RP", nome: "Roberto P.",         email: "roberto@kbm.com.br",        plano: "Em Marcha",  empresa: "KBM Distribuidora",      ultimo: "há 4h",       proc:  7, beginner: false, status: "ativo" },
  { ini: "AL", nome: "Ana L.",             email: "ana@alvesmateriais.com",    plano: "Primeira",   empresa: "Alves Materiais",        ultimo: "há 1d",       proc:  2, beginner: true,  status: "ativo" },
  { ini: "VM", nome: "Vladimir M.",        email: "vlad@padariastoantonio.br", plano: "Primeira",   empresa: "Padaria Sto. Antônio",   ultimo: "há 2d",       proc:  1, beginner: true,  status: "trial" },
  { ini: "CS", nome: "Carla S.",           email: "carla@comerciogo.com.br",   plano: "Em Marcha",  empresa: "Comércio GO",            ultimo: "há 3d",       proc:  6, beginner: false, status: "ativo" },
  { ini: "PF", nome: "Pedro F.",           email: "pedro@ti-sp.dev",           plano: "Em Marcha",  empresa: "TI SP",                  ultimo: "há 5d",       proc:  4, beginner: false, status: "ativo" },
  { ini: "MR", nome: "Marcos R.",          email: "marcos@distmt.com.br",      plano: "Veterano",   empresa: "Distribuidora MT",       ultimo: "há 8d",       proc: 15, beginner: false, status: "ativo" },
  { ini: "JS", nome: "Júlia Santos",       email: "julia@licite-assess.com",   plano: "Assessoria", empresa: "Licite Assess. (12 CNPJs)", ultimo: "há 11d",   proc: 47, beginner: false, status: "ativo" },
  { ini: "LB", nome: "Lucas Brito",        email: "lucas@brsuprimentos.com",   plano: "Em Marcha",  empresa: "BR Suprimentos",         ultimo: "há 22d",      proc:  3, beginner: false, status: "suspenso" },
];

const PLAN_COLOR = {
  "Primeira":   { fg: "#3E6F1A", bg: "rgb(159 232 112 / .18)" },
  "Em Marcha":  { fg: "#0F1E3A", bg: "rgb(15 30 58 / .08)"   },
  "Veterano":   { fg: "#7C3AED", bg: "rgb(124 58 237 / .12)" },
  "Assessoria": { fg: "#B45309", bg: "rgb(245 158 11 / .15)" },
};
const STATUS_COLOR = {
  "ativo":    { fg: "rgb(22 163 74)",  bg: "rgb(34 197 94 / .14)" },
  "trial":    { fg: "rgb(59 130 246)", bg: "rgb(59 130 246 / .14)" },
  "suspenso": { fg: "rgb(220 38 38)",  bg: "rgb(220 38 38 / .14)" },
};

function AdminUsuarios() {
  const [q, setQ]         = React.useState("");
  const [plano, setPlano] = React.useState("todos");
  const [status, setStatus] = React.useState("todos");
  const filtered = ADMIN_USERS.filter((u) =>
    (plano === "todos" || u.plano === plano) &&
    (status === "todos" || u.status === status) &&
    (!q || u.nome.toLowerCase().includes(q.toLowerCase()) || u.email.toLowerCase().includes(q.toLowerCase()) || u.empresa.toLowerCase().includes(q.toLowerCase()))
  );
  return (
    <>
      <header className="mb-6 flex items-end justify-between flex-wrap gap-4">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Usuários · 247 ativos</div>
          <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">Quem está usando a Pleita</h1>
        </div>
        <button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">+ Convidar usuário</button>
      </header>

      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="px-5 py-3 border-b border-pleita-line flex items-center gap-3 flex-wrap">
          <div className="flex items-center gap-2 rounded-md border border-pleita-line bg-surface-1 px-3 py-1.5 flex-1 min-w-[220px] max-w-md">
            <Icons.Search className="size-4 text-pleita-stone-2" />
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar nome, e-mail, empresa…" className="flex-1 bg-transparent outline-none text-sm placeholder:text-pleita-stone-2/70" />
          </div>
          <select value={plano} onChange={(e) => setPlano(e.target.value)} className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line bg-surface-card">
            <option value="todos">Todos os planos</option>
            <option>Primeira</option><option>Em Marcha</option><option>Veterano</option><option>Assessoria</option>
          </select>
          <select value={status} onChange={(e) => setStatus(e.target.value)} className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line bg-surface-card">
            <option value="todos">Todos os status</option>
            <option>ativo</option><option>trial</option><option>suspenso</option>
          </select>
          <span className="ml-auto pl-num text-xs text-pleita-stone-2">{filtered.length} de {ADMIN_USERS.length} usuários</span>
        </div>

        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 bg-surface-2/60">
                <th className="px-5 py-3">Usuário</th>
                <th className="px-3 py-3">Plano</th>
                <th className="px-3 py-3">Empresa</th>
                <th className="px-3 py-3 text-right">Processos</th>
                <th className="px-3 py-3">Último acesso</th>
                <th className="px-3 py-3">Modo</th>
                <th className="px-3 py-3">Status</th>
                <th className="px-5 py-3 text-right">Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((u) => (
                <tr key={u.email} className="border-t border-pleita-line/60 hover:bg-surface-2/40">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-3">
                      <span className="size-9 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-xs font-semibold shrink-0">{u.ini}</span>
                      <div className="min-w-0">
                        <div className="text-pleita-ink font-medium truncate">{u.nome}</div>
                        <div className="pl-num text-[11px] text-pleita-stone-2 truncate">{u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-3 py-3">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold" style={{ background: PLAN_COLOR[u.plano].bg, color: PLAN_COLOR[u.plano].fg }}>{u.plano}</span>
                  </td>
                  <td className="px-3 py-3 text-pleita-stone truncate max-w-[200px]">{u.empresa}</td>
                  <td className="px-3 py-3 text-right pl-num text-pleita-ink">{u.proc}</td>
                  <td className="px-3 py-3 pl-num text-xs text-pleita-stone-2">{u.ultimo}</td>
                  <td className="px-3 py-3">
                    {u.beginner ? <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded bg-pleita-lime/20 text-[#3E6F1A]">iniciante</span> : <span className="pl-num text-[10px] text-pleita-stone-2">—</span>}
                  </td>
                  <td className="px-3 py-3">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold inline-flex items-center gap-1" style={{ background: STATUS_COLOR[u.status].bg, color: STATUS_COLOR[u.status].fg }}>
                      <span className="size-1.5 rounded-full" style={{ background: STATUS_COLOR[u.status].fg }} />{u.status}
                    </span>
                  </td>
                  <td className="px-5 py-3 text-right whitespace-nowrap">
                    <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink px-2">Impersonar</button>
                    <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink px-2">Detalhes →</button>
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={8} className="px-5 py-16 text-center">
                    <div className="text-4xl mb-3 opacity-40">🔍</div>
                    <div className="text-sm text-pleita-stone">Nenhum usuário encontrado com esses filtros.</div>
                    <button onClick={() => { setQ(""); setPlano("todos"); setStatus("todos"); }} className="pl-num text-xs text-pleita-info mt-2 hover:underline">Limpar filtros</button>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

// ===== Admin · Empresas =====
function AdminEmpresas() {
  const empresas = [
    { n: "Souza Engenharia",          cnpj: "12.345.678/0001-90", uf: "SP", users: 4, mrr: 197, plano: "Em Marcha",  saude: 82, contratos: 3 },
    { n: "Melo & Costa Advogados",    cnpj: "08.221.114/0001-23", uf: "MG", users: 6, mrr: 497, plano: "Veterano",   saude: 91, contratos: 12 },
    { n: "Licite Assessoria",         cnpj: "20.118.443/0001-77", uf: "RS", users: 8, mrr: 1497,plano: "Assessoria", saude: 88, contratos: 47 },
    { n: "KBM Distribuidora",         cnpj: "15.667.221/0001-42", uf: "MT", users: 2, mrr: 197, plano: "Em Marcha",  saude: 74, contratos: 5 },
    { n: "Padaria Santo Antônio",     cnpj: "32.115.448/0001-12", uf: "GO", users: 1, mrr: 49,  plano: "Primeira",   saude: 58, contratos: 1 },
    { n: "Comércio GO",               cnpj: "44.998.227/0001-05", uf: "GO", users: 2, mrr: 197, plano: "Em Marcha",  saude: 86, contratos: 4 },
  ];
  const totalMrr = empresas.reduce((s, e) => s + e.mrr, 0);
  return (
    <>
      <header className="mb-6 flex items-end justify-between flex-wrap gap-4">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Empresas · 184 tenants ativos</div>
          <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">Tenants e isolamento multi-CNPJ</h1>
        </div>
        <div className="pl-num text-xs text-pleita-stone-2">MRR consolidado · <span className="text-pleita-ink font-semibold">R$ {totalMrr.toLocaleString("pt-BR")}</span></div>
      </header>

      <section className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {[
          ["Novas/mês", "23", "+18%"],
          ["Saúde média", "78/100", "+4 pts"],
          ["Multi-CNPJ", "8 contas", "Assessoria"],
          ["Contratos ganhos", "324", "últimos 6m"],
        ].map(([l, v, d]) => (
          <div key={l} className="rounded-2xl bg-surface-card border border-pleita-line p-4">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{l}</div>
            <div className="pl-num font-semibold text-2xl text-pleita-ink mt-1.5">{v}</div>
            <div className="pl-num text-[11px] text-verdict-go mt-1">{d}</div>
          </div>
        ))}
      </section>

      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 bg-surface-2/60">
                <th className="px-5 py-3">Empresa</th>
                <th className="px-3 py-3">CNPJ</th>
                <th className="px-3 py-3">UF</th>
                <th className="px-3 py-3 text-right">Users</th>
                <th className="px-3 py-3 text-right">Contratos</th>
                <th className="px-3 py-3">Saúde</th>
                <th className="px-3 py-3 text-right">MRR</th>
                <th className="px-5 py-3">Plano</th>
              </tr>
            </thead>
            <tbody>
              {empresas.map((e) => (
                <tr key={e.cnpj} className="border-t border-pleita-line/60 hover:bg-surface-2/40">
                  <td className="px-5 py-3 text-pleita-ink font-medium">{e.n}</td>
                  <td className="px-3 py-3 pl-num text-xs text-pleita-stone-2">{e.cnpj}</td>
                  <td className="px-3 py-3 pl-num text-xs text-pleita-stone">{e.uf}</td>
                  <td className="px-3 py-3 text-right pl-num text-pleita-ink">{e.users}</td>
                  <td className="px-3 py-3 text-right pl-num text-pleita-ink">{e.contratos}</td>
                  <td className="px-3 py-3">
                    <div className="flex items-center gap-2">
                      <div className="w-24 h-1.5 rounded-full bg-pleita-line overflow-hidden">
                        <div className="h-full rounded-full" style={{ width: `${e.saude}%`, background: e.saude > 80 ? "rgb(159 232 112)" : e.saude > 65 ? "rgb(245 158 11)" : "rgb(220 38 38)" }} />
                      </div>
                      <span className="pl-num text-xs text-pleita-stone">{e.saude}</span>
                    </div>
                  </td>
                  <td className="px-3 py-3 text-right pl-num text-pleita-ink font-medium">R$ {e.mrr}</td>
                  <td className="px-5 py-3">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold" style={{ background: PLAN_COLOR[e.plano].bg, color: PLAN_COLOR[e.plano].fg }}>{e.plano}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

// ===== Admin · Agentes =====
const AGENT_COLORS = {
  hunter:  "#2563EB", analyst: "#7C3AED", legal:   "#B45309",
  finance: "#0891B2", docs:    "#059669", coach:   "#DC2626",
};
const AGENT_LIST = [
  { k: "hunter",  emoji: "🔍", n: "Caça-Editais",   model: "haiku-4.5",  score: 94, jobs: 1284, tokens: 482, cost: 18.42, err: 0.4 },
  { k: "analyst", emoji: "🎯", n: "Analista",       model: "sonnet-4.5", score: 88, jobs:  642, tokens: 728, cost: 87.36, err: 1.2 },
  { k: "legal",   emoji: "⚖️", n: "Jurídico",       model: "sonnet-4.5", score: 91, jobs:  482, tokens: 1124, cost: 124.18, err: 0.8 },
  { k: "finance", emoji: "💰", n: "Financeiro",     model: "sonnet-4.5", score: 86, jobs:  624, tokens: 612, cost: 84.96, err: 1.5 },
  { k: "docs",    emoji: "📋", n: "Documentalista", model: "haiku-4.5",  score: 97, jobs: 2142, tokens: 184, cost: 11.84, err: 0.2 },
  { k: "coach",   emoji: "🎓", n: "Coach",          model: "sonnet-4.5", score: 92, jobs:  892, tokens: 542, cost: 71.20, err: 0.6 },
];

function AdminAgentes() {
  const totalJobs   = AGENT_LIST.reduce((s, a) => s + a.jobs, 0);
  const totalCost   = AGENT_LIST.reduce((s, a) => s + a.cost, 0);
  const totalTokens = AGENT_LIST.reduce((s, a) => s + a.tokens, 0);
  return (
    <>
      <header className="mb-6">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Agentes IA · últimas 24h</div>
        <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">6 especialistas em produção</h1>
      </header>

      {/* KPIs diários */}
      <section className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {[
          ["Jobs 24h",       totalJobs.toLocaleString("pt-BR"), "+12%"],
          ["Tokens (k)",     totalTokens.toLocaleString("pt-BR"), "+8%"],
          ["Custo USD",      `$${totalCost.toFixed(2)}`, "+5%"],
          ["Taxa de erro",   "0,9%", "−0,2pp"],
        ].map(([l, v, d]) => (
          <div key={l} className="rounded-2xl bg-surface-card border border-pleita-line p-4">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{l}</div>
            <div className="pl-num font-semibold text-2xl text-pleita-ink mt-1.5">{v}</div>
            <div className="pl-num text-[11px] text-verdict-go mt-1">{d}</div>
          </div>
        ))}
      </section>

      {/* Distribuição por agente — barras horizontais */}
      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">Distribuição de jobs</div>
          <h2 className="font-display font-medium text-pleita-ink mb-5">Por agente · 24h</h2>
          <ul className="space-y-3">
            {AGENT_LIST.map((a) => {
              const pct = (a.jobs / totalJobs) * 100;
              return (
                <li key={a.k}>
                  <div className="flex items-center justify-between text-xs mb-1">
                    <span className="inline-flex items-center gap-2 text-pleita-ink"><span>{a.emoji}</span>{a.n}</span>
                    <span className="pl-num text-pleita-stone-2">{a.jobs.toLocaleString("pt-BR")} · {pct.toFixed(0)}%</span>
                  </div>
                  <div className="h-2 rounded-full bg-pleita-line overflow-hidden">
                    <div className="h-full rounded-full" style={{ width: `${pct}%`, background: AGENT_COLORS[a.k] }} />
                  </div>
                </li>
              );
            })}
          </ul>
        </div>

        <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">Performance</div>
          <h2 className="font-display font-medium text-pleita-ink mb-5">Score & custo por agente</h2>
          <div className="grid grid-cols-2 gap-3">
            {AGENT_LIST.map((a) => (
              <div key={a.k} className="rounded-md border border-pleita-line/60 p-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-pleita-ink inline-flex items-center gap-1.5"><span>{a.emoji}</span>{a.n}</span>
                  <span className="pl-num text-base font-semibold" style={{ color: AGENT_COLORS[a.k] }}>{a.score}</span>
                </div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-1">{a.model} · ${a.cost.toFixed(2)}/dia</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Recent jobs */}
      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <header className="px-6 py-4 border-b border-pleita-line flex items-center justify-between">
          <h2 className="font-display font-medium text-pleita-ink">Jobs recentes</h2>
          <span className="pl-num text-xs text-pleita-stone-2">live · auto-refresh 30s</span>
        </header>
        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 bg-surface-2/60">
                <th className="px-5 py-3">Hora</th>
                <th className="px-3 py-3">Agente</th>
                <th className="px-3 py-3">Empresa</th>
                <th className="px-3 py-3">Mensagem</th>
                <th className="px-3 py-3 text-right">Tokens</th>
                <th className="px-3 py-3 text-right">Custo</th>
                <th className="px-3 py-3 text-right">Duração</th>
                <th className="px-5 py-3">Status</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["14:22", "coach",   "🎓", "Souza Eng.",     "Veredito 🟢 PARTICIPE · EDT-A1B2",           4824,  "$0.087", "4.1s", "ok"],
                ["14:21", "legal",   "⚖️", "Souza Eng.",     "Análise jurídica · cláusula 12.4 ok",       12842, "$0.124", "6.8s", "ok"],
                ["14:20", "hunter",  "🔍", "Melo & Costa",   "12 editais novos no PNCP-SP",                 884,   "$0.011", "0.9s", "ok"],
                ["14:18", "finance", "💰", "KBM Distrib.",   "BDI 23,5% · margem +6%",                     2184,  "$0.018", "1.3s", "ok"],
                ["14:15", "docs",    "📋", "Alves Materiais","CNDT vencida — alerta enviado",                412,  "$0.004", "0.4s", "ok"],
                ["14:12", "analyst", "🎯", "Souza Eng.",     "Falha: timeout PNCP swagger",                1840,  "$0.014", "10.2s","err"],
                ["14:10", "hunter",  "🔍", "Comércio GO",    "8 editais novos · match >85",                 612,   "$0.008", "0.6s", "ok"],
              ].map((r, i) => (
                <tr key={i} className="border-t border-pleita-line/60 hover:bg-surface-2/40">
                  <td className="px-5 py-3 pl-num text-xs text-pleita-stone-2">{r[0]}</td>
                  <td className="px-3 py-3 text-pleita-ink"><span className="inline-flex items-center gap-1.5"><span>{r[2]}</span>{r[1]}</span></td>
                  <td className="px-3 py-3 text-pleita-stone truncate max-w-[160px]">{r[3]}</td>
                  <td className="px-3 py-3 text-pleita-stone truncate max-w-[280px]">{r[4]}</td>
                  <td className="px-3 py-3 text-right pl-num text-xs text-pleita-stone">{r[5].toLocaleString("pt-BR")}</td>
                  <td className="px-3 py-3 text-right pl-num text-xs text-pleita-stone">{r[6]}</td>
                  <td className="px-3 py-3 text-right pl-num text-xs text-pleita-stone">{r[7]}</td>
                  <td className="px-5 py-3">
                    {r[8] === "ok"
                      ? <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: "rgb(34 197 94 / .14)", color: "rgb(22 163 74)" }}>ok</span>
                      : <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: "rgb(220 38 38 / .14)", color: "rgb(220 38 38)" }}>erro</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

// ===== Admin · Portais (F4.4) =====
const PORTAIS = [
  { n: "PNCP",           url: "pncp.gov.br/api",           status: "up",        latency: 184, uptime: 99.8 },
  { n: "PNCP Swagger",   url: "pncp.gov.br/openapi",       status: "degraded",  latency: 1842, uptime: 96.4 },
  { n: "Compras.gov",    url: "compras.gov.br",            status: "up",        latency: 312, uptime: 99.5 },
  { n: "DOU",            url: "in.gov.br/leiturajornal",   status: "up",        latency: 224, uptime: 99.9 },
];
const STATUS_PORTAL = {
  up:        { fg: "rgb(22 163 74)",  bg: "rgb(34 197 94 / .15)",  label: "no ar" },
  degraded:  { fg: "rgb(245 158 11)", bg: "rgb(245 158 11 / .15)", label: "lento" },
  down:      { fg: "rgb(220 38 38)",  bg: "rgb(220 38 38 / .15)",  label: "fora" },
};

function PortalSparkline({ status }) {
  // 24 buckets, mostly up with occasional dips for "degraded"
  const buckets = Array.from({ length: 24 }, (_, i) => {
    if (status === "down" && i > 18) return "down";
    if (status === "degraded" && (i === 8 || i === 14 || i === 15 || i === 21)) return "degraded";
    return "up";
  });
  return (
    <div className="flex items-end gap-0.5 h-10">
      {buckets.map((b, i) => {
        const color = b === "up" ? "rgb(159 232 112)" : b === "degraded" ? "rgb(245 158 11)" : "rgb(220 38 38)";
        const h = b === "up" ? 100 : b === "degraded" ? 50 : 25;
        return <span key={i} className="flex-1 rounded-sm transition-all" style={{ background: color, height: `${h}%`, opacity: 0.8 }} />;
      })}
    </div>
  );
}

function AdminPortais() {
  return (
    <>
      <header className="mb-6 flex items-end justify-between flex-wrap gap-4">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Status portais externos · F4.4</div>
          <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">Saúde das fontes públicas</h1>
        </div>
        <div className="pl-num text-xs text-pleita-stone-2 flex items-center gap-2">
          <span className="size-2 rounded-full bg-verdict-go animate-pulse" />ping a cada 60s · última varredura há 12s
        </div>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {PORTAIS.map((p) => {
          const m = STATUS_PORTAL[p.status];
          return (
            <article key={p.n} className="rounded-2xl bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
              <header className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="font-display font-medium text-lg text-pleita-ink">{p.n}</h3>
                  <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{p.url}</div>
                </div>
                <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold inline-flex items-center gap-1.5" style={{ background: m.bg, color: m.fg }}>
                  <span className="size-1.5 rounded-full" style={{ background: m.fg }} />{m.label}
                </span>
              </header>
              <PortalSparkline status={p.status} />
              <footer className="grid grid-cols-3 gap-3 mt-4 pt-4 border-t border-pleita-line/60 text-center">
                <div>
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Latência</div>
                  <div className="pl-num text-base font-semibold mt-1" style={{ color: p.latency > 1000 ? "rgb(245 158 11)" : "rgb(15 30 58)" }}>{p.latency}ms</div>
                </div>
                <div>
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Uptime 24h</div>
                  <div className="pl-num text-base font-semibold text-pleita-ink mt-1">{p.uptime}%</div>
                </div>
                <div>
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Incidentes 7d</div>
                  <div className="pl-num text-base font-semibold text-pleita-ink mt-1">{p.status === "degraded" ? 2 : 0}</div>
                </div>
              </footer>
            </article>
          );
        })}
      </section>

      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <header className="px-6 py-4 border-b border-pleita-line">
          <h2 className="font-display font-medium text-pleita-ink">Histórico de incidentes</h2>
        </header>
        <ul className="divide-y divide-pleita-line/60">
          {[
            ["14:22 hoje",   "PNCP Swagger", "degraded", "Latência média acima de 1.5s · 8 das últimas 10 chamadas"],
            ["09:14 hoje",   "PNCP Swagger", "degraded", "Spike de 3s detectado · reverteu em 4min"],
            ["18:42 ontem",  "Compras.gov",  "up",       "Recuperado após manutenção programada"],
            ["18:00 ontem",  "Compras.gov",  "degraded", "Indisponibilidade declarada pelo Serpro · 42min"],
            ["02:14 segunda","PNCP",         "up",       "Recuperado · sem impacto em jobs"],
          ].map((r, i) => (
            <li key={i} className="px-6 py-3 grid grid-cols-12 items-center gap-3 text-sm">
              <span className="col-span-3 pl-num text-xs text-pleita-stone-2">{r[0]}</span>
              <span className="col-span-3 text-pleita-ink truncate">{r[1]}</span>
              <span className="col-span-2">
                <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: STATUS_PORTAL[r[2]].bg, color: STATUS_PORTAL[r[2]].fg }}>{STATUS_PORTAL[r[2]].label}</span>
              </span>
              <span className="col-span-4 text-pleita-stone truncate">{r[3]}</span>
            </li>
          ))}
        </ul>
      </section>
    </>
  );
}

// ===== Admin · Billing =====
function AdminBilling() {
  const breakdown = [
    { plano: "Primeira",   c: 84,  pct: 34 },
    { plano: "Em Marcha",  c: 112, pct: 45 },
    { plano: "Veterano",   c: 38,  pct: 15 },
    { plano: "Assessoria", c: 13,  pct:  6 },
  ];
  return (
    <>
      <header className="mb-6">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Faturamento · maio/2026</div>
        <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">Receita e cobrança</h1>
      </header>

      <section className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {[
          ["MRR",          "R$ 184.720", "+12,4%"],
          ["ARR",          "R$ 2,21M",   "+9,8%"],
          ["LTV/CAC",      "4,2x",       "+0,3"],
          ["Cobrança falha","R$ 3.420",  "−18%"],
        ].map(([l, v, d]) => (
          <div key={l} className="rounded-2xl bg-surface-card border border-pleita-line p-4">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{l}</div>
            <div className="pl-num font-semibold text-2xl text-pleita-ink mt-1.5">{v}</div>
            <div className="pl-num text-[11px] text-verdict-go mt-1">{d}</div>
          </div>
        ))}
      </section>

      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <Chart title="Receita recorrente" subtitle="MRR (R$ mil)" tag="+87% YoY">
          <SparkLine series={MRR_SERIES} />
        </Chart>

        <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">Distribuição</div>
          <h2 className="font-display font-medium text-pleita-ink mb-5">Tenants por plano · {breakdown.reduce((s, b) => s + b.c, 0)} contas</h2>
          <ul className="space-y-3">
            {breakdown.map((b) => (
              <li key={b.plano}>
                <div className="flex items-center justify-between text-xs mb-1">
                  <span className="inline-flex items-center gap-2 text-pleita-ink">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: PLAN_COLOR[b.plano].bg, color: PLAN_COLOR[b.plano].fg }}>{b.plano}</span>
                  </span>
                  <span className="pl-num text-pleita-stone-2">{b.c} · {b.pct}%</span>
                </div>
                <div className="h-2 rounded-full bg-pleita-line overflow-hidden">
                  <div className="h-full rounded-full" style={{ width: `${b.pct}%`, background: PLAN_COLOR[b.plano].fg }} />
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <header className="px-6 py-4 border-b border-pleita-line flex items-center justify-between">
          <h2 className="font-display font-medium text-pleita-ink">Cobranças recentes</h2>
          <span className="pl-num text-xs text-pleita-stone-2">Stripe webhook · live</span>
        </header>
        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 bg-surface-2/60">
                <th className="px-5 py-3">Data</th>
                <th className="px-3 py-3">Cliente</th>
                <th className="px-3 py-3">Plano</th>
                <th className="px-3 py-3 text-right">Valor</th>
                <th className="px-3 py-3">Método</th>
                <th className="px-5 py-3">Status</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["14 mai",  "Souza Engenharia",  "Em Marcha",  197,   "Cartão · final 4242", "paga"],
                ["13 mai",  "Melo & Costa",      "Veterano",   497,   "Cartão · final 1881", "paga"],
                ["12 mai",  "Licite Assess.",    "Assessoria", 1497,  "Boleto",              "paga"],
                ["11 mai",  "KBM Distrib.",      "Em Marcha",  197,   "Pix",                 "paga"],
                ["10 mai",  "Padaria Sto. A.",   "Primeira",   49,    "Cartão · final 0008", "falha"],
                ["09 mai",  "BR Suprimentos",    "Em Marcha",  197,   "Cartão · final 5555", "estorno"],
              ].map((r, i) => (
                <tr key={i} className="border-t border-pleita-line/60 hover:bg-surface-2/40">
                  <td className="px-5 py-3 pl-num text-xs text-pleita-stone-2">{r[0]}</td>
                  <td className="px-3 py-3 text-pleita-ink">{r[1]}</td>
                  <td className="px-3 py-3">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: PLAN_COLOR[r[2]].bg, color: PLAN_COLOR[r[2]].fg }}>{r[2]}</span>
                  </td>
                  <td className="px-3 py-3 text-right pl-num text-pleita-ink font-medium">R$ {r[3]}</td>
                  <td className="px-3 py-3 pl-num text-xs text-pleita-stone">{r[4]}</td>
                  <td className="px-5 py-3">
                    {r[5] === "paga"   && <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: "rgb(34 197 94 / .14)",  color: "rgb(22 163 74)" }}>paga</span>}
                    {r[5] === "falha"  && <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: "rgb(220 38 38 / .14)",  color: "rgb(220 38 38)" }}>falha · retry</span>}
                    {r[5] === "estorno"&& <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: "rgb(245 158 11 / .14)", color: "rgb(245 158 11)" }}>estorno</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

function Chart({ title, subtitle, tag, children }) {
  return (
    <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
      <header className="flex items-baseline justify-between mb-5">
        <div>
          <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">{subtitle}</div>
          <h2 className="font-display font-medium text-pleita-ink mt-1">{title}</h2>
        </div>
        <span className="pl-num text-xs text-verdict-go">{tag}</span>
      </header>
      <div className="h-56">{children}</div>
    </div>
  );
}

function SparkLine({ series }) {
  const W = 480, H = 200, P = 24;
  const max = Math.max(...series.map((p) => p.v));
  const min = Math.min(...series.map((p) => p.v));
  const dx = (W - P * 2) / (series.length - 1);
  const sy = (v) => H - P - ((v - min) / (max - min)) * (H - P * 2);
  const path = series.map((p, i) => `${i === 0 ? "M" : "L"} ${P + i * dx} ${sy(p.v)}`).join(" ");
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
      {[0, 1, 2, 3].map((g) => (
        <line key={g} x1={P} x2={W - P} y1={P + g * (H - P * 2) / 3} y2={P + g * (H - P * 2) / 3} stroke="rgb(229 227 218)" />
      ))}
      <path d={path} fill="none" stroke="rgb(15 30 58)" strokeWidth="2" />
      {series.map((p, i) => (
        <g key={i}>
          <circle cx={P + i * dx} cy={sy(p.v)} r="3.5" fill="rgb(159 232 112)" stroke="rgb(15 30 58)" strokeWidth="2" />
          <text x={P + i * dx} y={H - 4} textAnchor="middle" fontSize="10" fill="rgb(107 107 107)" fontFamily="JetBrains Mono">{p.m}</text>
        </g>
      ))}
    </svg>
  );
}

function BarStack({ series }) {
  const W = 480, H = 200, P = 24, gap = 6;
  const max = Math.max(...series.flatMap((d) => [d.iniciantes, d.profissionais]));
  const bw = (W - P * 2) / series.length - gap;
  const sy = (v) => ((v / max) * (H - P * 2));
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
      {[0, 1, 2, 3].map((g) => (
        <line key={g} x1={P} x2={W - P} y1={P + g * (H - P * 2) / 3} y2={P + g * (H - P * 2) / 3} stroke="rgb(229 227 218)" />
      ))}
      {series.map((d, i) => {
        const x = P + i * (bw + gap);
        return (
          <g key={i}>
            <rect x={x} y={H - P - sy(d.iniciantes)} width={bw / 2 - 2} height={sy(d.iniciantes)} fill="rgb(159 232 112)" rx="2" />
            <rect x={x + bw / 2 + 2} y={H - P - sy(d.profissionais)} width={bw / 2 - 2} height={sy(d.profissionais)} fill="rgb(15 30 58)" rx="2" />
            <text x={x + bw / 2} y={H - 4} textAnchor="middle" fontSize="10" fill="rgb(107 107 107)" fontFamily="JetBrains Mono">{d.d}</text>
          </g>
        );
      })}
    </svg>
  );
}

// ===== Tokens specimen =====

function ScreenTokens() {
  const swatches = [
    ["pleita.ink",    "#0F1E3A", "headings, sidebar admin"],
    ["pleita.ink-2",  "#1B2D4F", "cards em dark"],
    ["pleita.lime",   "#9FE870", "CTAs, vitória"],
    ["pleita.lime-2", "#B8F299", "hover/focus"],
    ["pleita.paper",  "#FAFAF7", "background light"],
    ["pleita.paper-2","#F0EFE8", "cards light"],
    ["pleita.stone",  "#2C2C2C", "texto principal"],
    ["pleita.stone-2","#6B6B6B", "texto secundário"],
    ["pleita.line",   "#E5E3DA", "bordas"],
    ["verdict.go",    "#16A34A", "🟢 PARTICIPE"],
    ["verdict.caution","#F59E0B","🟡 CUIDADO"],
    ["verdict.stop",  "#DC2626", "🔴 NÃO PARTICIPE"],
  ];
  return (
    <div className="bg-surface-1 min-h-full">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Design system · v1.0</div>
        <h1 className="font-display font-medium text-4xl text-pleita-ink tracking-tight">Tokens travados</h1>
        <p className="text-sm text-pleita-stone mt-2 max-w-2xl">Cores, tipografia e componentes-base da Pleita. Tudo em CSS vars — flipa automaticamente entre claro e escuro.</p>

        {/* Cores */}
        <h2 className="font-display font-medium text-xl text-pleita-ink mt-12 mb-4">Paleta</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {swatches.map(([n, hex, use]) => (
            <div key={n} className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
              <div className="h-20" style={{ background: hex }} />
              <div className="p-3">
                <div className="font-display font-medium text-sm text-pleita-ink">{n}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{hex}</div>
                <div className="text-xs text-pleita-stone mt-1">{use}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Tipografia */}
        <h2 className="font-display font-medium text-xl text-pleita-ink mt-12 mb-4">Tipografia</h2>
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-8 space-y-6">
          <div>
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">Display · General Sans Medium · h1</div>
            <div className="font-display font-medium text-5xl text-pleita-ink tracking-tight mt-2">A Pleita pleiteia por você<span className="text-pleita-lime">.</span></div>
          </div>
          <div>
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">Display · h2</div>
            <div className="font-display font-medium text-3xl text-pleita-ink mt-2">Time de 6 agentes IA decidindo por você</div>
          </div>
          <div>
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">UI · Inter · body</div>
            <p className="text-base text-pleita-stone leading-relaxed mt-2 max-w-2xl">Você foca no negócio. A Pleita pleiteia. Time de IAs especialistas que monitora editais, decide o que vale a pena e prepara sua participação.</p>
          </div>
          <div>
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">Mono · JetBrains · números</div>
            <div className="pl-num text-2xl text-pleita-ink mt-2">R$ 1.247.380 · EDT-2026-04-A1B2 · 89/100</div>
          </div>
        </div>

        {/* Componentes */}
        <h2 className="font-display font-medium text-xl text-pleita-ink mt-12 mb-4">Componentes</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="rounded-2xl bg-surface-card border border-pleita-line p-7">
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2 mb-4">Verdict</div>
            <div className="flex flex-wrap gap-3 items-center">
              <VerdictBadge verdict="go"      size="lg" />
              <VerdictBadge verdict="caution" size="lg" />
              <VerdictBadge verdict="stop"    size="lg" />
            </div>
            <div className="flex gap-6 mt-7 items-center justify-center">
              <VerdictHero verdict="go" diameter={90} />
              <VerdictHero verdict="caution" diameter={90} />
              <VerdictHero verdict="stop" diameter={90} />
            </div>
          </div>
          <div className="rounded-2xl bg-surface-card border border-pleita-line p-7">
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2 mb-4">Buttons</div>
            <div className="flex flex-wrap gap-3 items-center">
              <PleitaButton>Começar grátis</PleitaButton>
              <PleitaButton variant="ink">Decidir agora</PleitaButton>
              <PleitaButton variant="ghost">Ver demo ↗</PleitaButton>
            </div>
            <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2 mt-7 mb-4">Wordmark</div>
            <div className="flex items-center gap-8">
              <Logo size={28} />
              <div className="bg-pleita-ink text-pleita-paper rounded-2xl px-4 py-3"><Logo size={22} /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenAdmin, ScreenTokens });