// ===== App · Configurações (Perfil, Empresa, Equipe, Faturamento, Integrações, Notificações) =====

const CONFIG_TABS = [
  { id: "perfil",       label: "Perfil",        ico: "👤" },
  { id: "empresa",      label: "Empresa",       ico: "🏢" },
  { id: "equipe",       label: "Equipe",        ico: "👥" },
  { id: "billing",      label: "Faturamento",   ico: "💳" },
  { id: "integracoes",  label: "Integrações",   ico: "🔌" },
  { id: "notificacoes", label: "Notificações",  ico: "🔔" },
  { id: "seguranca",    label: "Segurança",     ico: "🔐" },
];

function ConfigField({ label, hint, children }) {
  return (
    <div className="grid md:grid-cols-3 gap-3 md:gap-6 py-5 border-b border-pleita-line/60 last:border-0">
      <div className="md:col-span-1">
        <div className="text-sm font-medium text-pleita-ink">{label}</div>
        {hint && <p className="text-xs text-pleita-stone-2 mt-1 leading-relaxed">{hint}</p>}
      </div>
      <div className="md:col-span-2">{children}</div>
    </div>
  );
}

function ConfigCard({ title, sub, children, footer }) {
  return (
    <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
      <header className="px-6 py-5 border-b border-pleita-line">
        <h2 className="font-display text-lg text-pleita-ink">{title}</h2>
        {sub && <p className="text-xs text-pleita-stone-2 mt-0.5">{sub}</p>}
      </header>
      <div className="px-6">{children}</div>
      {footer && <footer className="px-6 py-4 bg-surface-2/40 border-t border-pleita-line flex items-center justify-end gap-2">{footer}</footer>}
    </section>
  );
}

function Switch({ on, onChange, label, sub }) {
  return (
    <label className="flex items-start justify-between gap-4 py-3 cursor-pointer">
      <div className="min-w-0">
        <div className="text-sm text-pleita-ink">{label}</div>
        {sub && <div className="text-xs text-pleita-stone-2 mt-0.5">{sub}</div>}
      </div>
      <button
        type="button"
        onClick={() => onChange(!on)}
        aria-pressed={on}
        className={`relative shrink-0 w-10 h-6 rounded-full transition-colors ${on ? "bg-pleita-ink" : "bg-pleita-line"}`}
      >
        <span className={`absolute top-0.5 size-5 rounded-full bg-white shadow-pl-sm transition-transform ${on ? "translate-x-[18px]" : "translate-x-0.5"}`} />
      </button>
    </label>
  );
}

// ----- Tab content -----

function ConfigPerfil() {
  return (
    <div className="space-y-5">
      <ConfigCard
        title="Informações pessoais"
        sub="Como você aparece na Pleita."
        footer={<><button className="pl-num text-xs px-4 py-2 rounded-md border border-pleita-line text-pleita-stone">Cancelar</button><button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">Salvar alterações</button></>}
      >
        <ConfigField label="Foto" hint="JPG ou PNG até 2MB.">
          <div className="flex items-center gap-4">
            <span className="size-16 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-xl font-semibold">MS</span>
            <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Trocar foto</button>
            <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink">Remover</button>
          </div>
        </ConfigField>
        <ConfigField label="Nome completo">
          <input defaultValue="Marcos Souza" className="form-pl" />
        </ConfigField>
        <ConfigField label="E-mail" hint="Usado para login e notificações.">
          <input defaultValue="marcos@souzaeng.com.br" type="email" className="form-pl" />
        </ConfigField>
        <ConfigField label="Telefone (WhatsApp)" hint="Para alertas urgentes de prazo.">
          <input defaultValue="(11) 98765-4321" className="form-pl pl-num" />
        </ConfigField>
        <ConfigField label="Cargo">
          <input defaultValue="Sócio-diretor" className="form-pl" />
        </ConfigField>
        <ConfigField label="Idioma" hint="Interface e relatórios.">
          <select className="form-pl">
            <option>Português (Brasil)</option>
            <option>English (US)</option>
            <option>Español</option>
          </select>
        </ConfigField>
      </ConfigCard>

      <ConfigCard title="Modo Iniciante" sub="Linguagem simples, Coach em destaque, tooltips em todo lugar.">
        <Switch on={true} onChange={() => {}} label="Modo Iniciante ligado" sub="Termos técnicos são traduzidos. Você pode desligar quando quiser." />
      </ConfigCard>
    </div>
  );
}

function ConfigEmpresa() {
  return (
    <div className="space-y-5">
      <ConfigCard
        title="Dados da empresa"
        sub="Tudo é puxado automaticamente do seu CNPJ na Receita."
        footer={<><button className="pl-num text-xs px-4 py-2 rounded-md border border-pleita-line text-pleita-stone">Re-sincronizar</button><button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">Salvar</button></>}
      >
        <ConfigField label="CNPJ"><input defaultValue="12.345.678/0001-90" className="form-pl pl-num" /></ConfigField>
        <ConfigField label="Razão social"><input defaultValue="SOUZA ENGENHARIA E COMÉRCIO LTDA" className="form-pl" /></ConfigField>
        <ConfigField label="Nome fantasia"><input defaultValue="Souza Engenharia" className="form-pl" /></ConfigField>
        <ConfigField label="Porte" hint="Define benefícios em editais.">
          <select className="form-pl"><option>ME — Microempresa</option><option>EPP — Pequeno porte</option><option>Demais</option></select>
        </ConfigField>
        <ConfigField label="Endereço">
          <input defaultValue="Av. Paulista, 1842, sl. 504 — Bela Vista — São Paulo/SP — 01310-100" className="form-pl" />
        </ConfigField>
      </ConfigCard>

      <ConfigCard title="Radar de oportunidades" sub="O Caça-Editais usa essas regras pra encontrar editais que dão match.">
        <ConfigField label="Palavras-chave do objeto" hint="Separe por vírgula.">
          <input defaultValue="engenharia civil, manutenção predial, reforma, obras de pequeno porte" className="form-pl" />
        </ConfigField>
        <ConfigField label="Segmentos CNAE">
          <div className="flex flex-wrap gap-2">
            {["4120-4/00 Construção de edifícios", "4399-1/03 Obras de alvenaria", "4399-1/99 Serviços especializados"].map((s) => (
              <span key={s} className="pl-num text-[11px] px-2.5 py-1 rounded-full border border-pleita-line bg-surface-2/60 text-pleita-stone">{s} ×</span>
            ))}
            <button className="pl-num text-[11px] px-2.5 py-1 rounded-full border border-dashed border-pleita-line text-pleita-stone-2 hover:bg-surface-2">+ adicionar</button>
          </div>
        </ConfigField>
        <ConfigField label="UFs prioritárias">
          <div className="flex flex-wrap gap-2">
            {["SP", "MG", "RJ", "PR"].map((uf) => (
              <span key={uf} className="pl-num text-xs px-3 py-1 rounded-md bg-pleita-ink text-pleita-paper font-semibold">{uf}</span>
            ))}
            <button className="pl-num text-xs px-3 py-1 rounded-md border border-dashed border-pleita-line text-pleita-stone-2 hover:bg-surface-2">+ UF</button>
          </div>
        </ConfigField>
        <ConfigField label="Faixa de valor" hint="Editais fora dessa faixa não entram no radar.">
          <div className="flex items-center gap-3">
            <input defaultValue="100.000" className="form-pl pl-num flex-1" />
            <span className="pl-num text-sm text-pleita-stone-2">até</span>
            <input defaultValue="5.000.000" className="form-pl pl-num flex-1" />
          </div>
        </ConfigField>
        <ConfigField label="BDI padrão" hint="Usado pelo Agente Financeiro como ponto de partida.">
          <div className="flex items-center gap-2"><input defaultValue="23.5" className="form-pl pl-num w-24" /><span className="text-sm text-pleita-stone">%</span></div>
        </ConfigField>
      </ConfigCard>
    </div>
  );
}

function ConfigEquipe() {
  const members = [
    { ini: "MS", nome: "Marcos Souza", email: "marcos@souzaeng.com.br", role: "Owner",  ultimo: "agora" },
    { ini: "AC", nome: "Ana Costa",    email: "ana@souzaeng.com.br",    role: "Admin",  ultimo: "há 2h" },
    { ini: "RF", nome: "Roberto F.",   email: "roberto@souzaeng.com.br", role: "Editor", ultimo: "há 1d" },
    { ini: "JL", nome: "Júlia L.",     email: "julia@souzaeng.com.br",  role: "Leitor", ultimo: "há 4d" },
  ];
  const roleColor = {
    Owner:  { fg: "#7C3AED", bg: "rgb(124 58 237 / .12)" },
    Admin:  { fg: "#0F1E3A", bg: "rgb(15 30 58 / .10)" },
    Editor: { fg: "#0891B2", bg: "rgb(8 145 178 / .12)" },
    Leitor: { fg: "#6B7280", bg: "rgb(107 114 128 / .14)" },
  };
  return (
    <ConfigCard
      title="Equipe"
      sub="4 de 6 usuários incluídos no plano Em Marcha. Adicione até 2 sem custo extra."
      footer={<button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">+ Convidar pessoa</button>}
    >
      <div className="overflow-x-auto scrollbar-pl -mx-6">
        <table className="w-full text-sm">
          <thead>
            <tr className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 text-left">
              <th className="px-6 py-3">Pessoa</th>
              <th className="px-3 py-3">Permissão</th>
              <th className="px-3 py-3">Último acesso</th>
              <th className="px-6 py-3 text-right">Ações</th>
            </tr>
          </thead>
          <tbody>
            {members.map((m) => (
              <tr key={m.email} className="border-t border-pleita-line/60">
                <td className="px-6 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">{m.ini}</span>
                    <div className="min-w-0">
                      <div className="text-pleita-ink font-medium truncate">{m.nome}</div>
                      <div className="pl-num text-[11px] text-pleita-stone-2 truncate">{m.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 font-semibold" style={{ background: roleColor[m.role].bg, color: roleColor[m.role].fg }}>{m.role}</span>
                </td>
                <td className="px-3 py-3 pl-num text-xs text-pleita-stone-2">{m.ultimo}</td>
                <td className="px-6 py-3 text-right">
                  <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink px-2">Editar</button>
                  {m.role !== "Owner" && <button className="pl-num text-xs text-verdict-stop hover:underline px-2">Remover</button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </ConfigCard>
  );
}

function ConfigBillingCli() {
  return (
    <div className="space-y-5">
      <ConfigCard title="Plano atual" sub="Faturado mensalmente · próxima cobrança 14/jun/2026">
        <div className="py-5 flex items-start justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-3">
              <span className="text-3xl">🚀</span>
              <div>
                <div className="font-display text-2xl text-pleita-ink">Em Marcha</div>
                <div className="pl-num text-xs text-pleita-stone-2">Editais ilimitados · 6 agentes · até 6 usuários</div>
              </div>
            </div>
            <div className="mt-3 inline-flex items-center gap-2 pl-num text-xs text-verdict-go px-2 py-1 rounded bg-verdict-go/10">
              <span className="size-1.5 rounded-full bg-verdict-go" />ativo · renovação automática
            </div>
          </div>
          <div className="text-right">
            <div className="pl-num font-semibold text-3xl text-pleita-ink">R$ 197</div>
            <div className="pl-num text-xs text-pleita-stone-2">/mês</div>
            <button className="pl-num text-xs text-pleita-info hover:underline mt-3">Comparar planos →</button>
          </div>
        </div>
      </ConfigCard>

      <ConfigCard title="Forma de pagamento">
        <div className="py-5 flex items-center justify-between flex-wrap gap-3">
          <div className="flex items-center gap-4">
            <div className="w-14 h-9 rounded-md bg-pleita-ink grid place-items-center text-pleita-paper text-xs font-bold">VISA</div>
            <div>
              <div className="text-sm text-pleita-ink pl-num">•••• •••• •••• 4242</div>
              <div className="pl-num text-xs text-pleita-stone-2">expira 09/2028 · Marcos Souza</div>
            </div>
          </div>
          <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Trocar cartão</button>
        </div>
        <div className="py-3 border-t border-pleita-line/60 flex items-center gap-2 pl-num text-[11px] text-pleita-stone-2">
          <span>Também aceitamos:</span>
          <span className="px-2 py-0.5 rounded bg-surface-2 text-pleita-stone">Pix</span>
          <span className="px-2 py-0.5 rounded bg-surface-2 text-pleita-stone">Boleto</span>
          <span className="px-2 py-0.5 rounded bg-surface-2 text-pleita-stone">Mastercard</span>
        </div>
      </ConfigCard>

      <ConfigCard title="Histórico de cobranças" sub="Notas fiscais ficam disponíveis por 5 anos.">
        <div className="overflow-x-auto scrollbar-pl -mx-6">
          <table className="w-full text-sm">
            <thead>
              <tr className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 text-left">
                <th className="px-6 py-3">Data</th>
                <th className="px-3 py-3">Descrição</th>
                <th className="px-3 py-3 text-right">Valor</th>
                <th className="px-3 py-3">Status</th>
                <th className="px-6 py-3 text-right">NF-e</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["14 mai 2026", "Em Marcha · mai/2026", "R$ 197,00", "paga"],
                ["14 abr 2026", "Em Marcha · abr/2026", "R$ 197,00", "paga"],
                ["14 mar 2026", "Em Marcha · mar/2026", "R$ 197,00", "paga"],
                ["14 fev 2026", "Em Marcha · fev/2026", "R$ 197,00", "paga"],
                ["07 fev 2026", "Trial → upgrade Em Marcha", "R$ 0,00", "trial"],
              ].map((r, i) => (
                <tr key={i} className="border-t border-pleita-line/60">
                  <td className="px-6 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 text-right pl-num text-pleita-ink">{r[2]}</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: r[3]==="paga" ? "rgb(34 197 94 / .14)" : "rgb(59 130 246 / .14)", color: r[3]==="paga" ? "rgb(22 163 74)" : "rgb(59 130 246)" }}>{r[3]}</span>
                  </td>
                  <td className="px-6 py-3 text-right">
                    <button className="pl-num text-xs text-pleita-info hover:underline">↓ baixar</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </ConfigCard>

      <ConfigCard title="Cancelamento" sub="Você pode cancelar a qualquer momento. Sem multa, sem letra miúda.">
        <div className="py-5">
          <p className="text-sm text-pleita-stone leading-relaxed">Se cancelar, você mantém acesso até o fim do ciclo atual (14/jun/2026) e seus dados ficam guardados por 60 dias caso queira voltar.</p>
          <button className="mt-4 pl-num text-xs px-3 py-1.5 rounded-md border border-verdict-stop/40 text-verdict-stop hover:bg-verdict-stop/10">Cancelar assinatura</button>
        </div>
      </ConfigCard>
    </div>
  );
}

function ConfigIntegracoes() {
  const integrations = [
    { ico: "🇧🇷", n: "gov.br",            desc: "Login único e assinatura digital",       status: "conectado",     stat: "ok"   },
    { ico: "📊", n: "SICAF",              desc: "Sincroniza certidões automaticamente",   status: "conectado",     stat: "ok"   },
    { ico: "📦", n: "PNCP API",           desc: "Acesso direto ao Portal Nacional",       status: "conectado",     stat: "ok"   },
    { ico: "💚", n: "WhatsApp Business",  desc: "Avisos urgentes pelo seu Zap",           status: "conectado",     stat: "ok"   },
    { ico: "💳", n: "Stripe",             desc: "Pagamentos e recebíveis",                status: "conectado",     stat: "ok"   },
    { ico: "🟢", n: "Conta Azul",         desc: "Sincroniza NF-e emitidas",               status: "conectar",      stat: "off"  },
    { ico: "🟦", n: "Omie",               desc: "ERP financeiro completo",                status: "conectar",      stat: "off"  },
    { ico: "✉️", n: "Slack",              desc: "Notificações no canal da equipe",        status: "conectar",      stat: "off"  },
    { ico: "📅", n: "Google Calendar",    desc: "Datas de abertura no seu calendário",    status: "conectado",     stat: "ok"   },
    { ico: "🔗", n: "Webhook customizado",desc: "POST nos seus endpoints",                status: "conectar",      stat: "off"  },
  ];
  return (
    <ConfigCard title="Integrações" sub="Conecte a Pleita às ferramentas que você já usa.">
      <div className="py-5 grid grid-cols-1 md:grid-cols-2 gap-3">
        {integrations.map((i) => (
          <article key={i.n} className="rounded-[10px] border border-pleita-line p-4 flex items-start gap-3 hover:shadow-pl-sm transition-shadow">
            <span className="size-10 rounded-md bg-surface-2 grid place-items-center text-xl shrink-0">{i.ico}</span>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between gap-2">
                <div className="font-medium text-pleita-ink">{i.n}</div>
                {i.stat === "ok"
                  ? <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold inline-flex items-center gap-1" style={{ background: "rgb(34 197 94 / .14)", color: "rgb(22 163 74)" }}><span className="size-1.5 rounded-full bg-verdict-go" />conectado</span>
                  : <button className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded font-semibold bg-pleita-ink text-pleita-paper">Conectar</button>}
              </div>
              <p className="text-xs text-pleita-stone-2 mt-1 leading-snug">{i.desc}</p>
            </div>
          </article>
        ))}
      </div>

      <div className="py-5 border-t border-pleita-line/60 rounded-md mb-5 bg-surface-2/40 px-5 -mx-1 mt-3">
        <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Chave de API</div>
        <div className="flex items-center gap-2">
          <code className="flex-1 pl-num text-xs bg-pleita-ink/95 text-pleita-paper px-3 py-2 rounded-md font-mono overflow-x-auto whitespace-nowrap">sk_live_••••••••••••••••pleita_a1b2c3d4e5f6</code>
          <button className="pl-num text-xs px-3 py-2 rounded-md border border-pleita-line bg-surface-card text-pleita-ink">Copiar</button>
          <button className="pl-num text-xs px-3 py-2 rounded-md border border-pleita-line bg-surface-card text-pleita-ink">Regenerar</button>
        </div>
        <p className="text-[11px] text-pleita-stone-2 mt-2">Use para chamar endpoints REST documentados em <a className="underline">docs.pleita.pro/api</a>.</p>
      </div>
    </ConfigCard>
  );
}

function ConfigNotifPrefs() {
  const [prefs, setPrefs] = React.useState({
    email_match: true, email_vence: true, email_resultado: true, email_news: false,
    push_match: false, push_vence: true, push_pregao: true,
    wa_urgent: true, wa_resultado: true,
    digest: "daily",
  });
  const set = (k, v) => setPrefs((p) => ({ ...p, [k]: v }));
  return (
    <div className="space-y-5">
      <ConfigCard title="Por canal" sub="Escolha onde quer receber cada tipo de aviso.">
        <div className="py-3 divide-y divide-pleita-line/60">
          <div className="py-3">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">📧 E-mail</div>
            <Switch on={prefs.email_match}     onChange={(v) => set("email_match", v)}     label="Novo edital com match alto"          sub="≥ 80/100 · imediato" />
            <Switch on={prefs.email_vence}     onChange={(v) => set("email_vence", v)}     label="Certidão prestes a vencer"           sub="30, 15, 7 e 1 dia antes" />
            <Switch on={prefs.email_resultado} onChange={(v) => set("email_resultado", v)} label="Resultado de pregão participado"     sub="Imediato após homologação" />
            <Switch on={prefs.email_news}      onChange={(v) => set("email_news", v)}      label="Newsletter semanal"                  sub="Terça às 8h · pode pular" />
          </div>
          <div className="py-3">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">📱 Push (navegador / app)</div>
            <Switch on={prefs.push_match}  onChange={(v) => set("push_match", v)}  label="Novo edital com match alto" />
            <Switch on={prefs.push_vence}  onChange={(v) => set("push_vence", v)}  label="Certidão vencendo" />
            <Switch on={prefs.push_pregao} onChange={(v) => set("push_pregao", v)} label="Pregão começando em 30min" sub="Crítico — não recomendo desligar." />
          </div>
          <div className="py-3">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">💚 WhatsApp</div>
            <Switch on={prefs.wa_urgent}    onChange={(v) => set("wa_urgent", v)}    label="Só urgências"                sub="Vencimentos críticos, lances de pregão" />
            <Switch on={prefs.wa_resultado} onChange={(v) => set("wa_resultado", v)} label="Resultado de processos"      sub="Vitória, perda, recurso julgado" />
          </div>
        </div>
      </ConfigCard>

      <ConfigCard title="Resumo diário">
        <ConfigField label="Frequência do digest" hint="Resumo do que aconteceu na sua conta.">
          <div className="flex flex-wrap gap-2">
            {["off", "daily", "weekly"].map((f) => (
              <button key={f} onClick={() => set("digest", f)} className={`pl-num text-xs px-3 py-1.5 rounded-md transition-colors ${prefs.digest === f ? "bg-pleita-ink text-pleita-paper" : "border border-pleita-line text-pleita-stone hover:bg-surface-2"}`}>
                {f === "off" ? "Não enviar" : f === "daily" ? "Diário · 8h" : "Semanal · seg 8h"}
              </button>
            ))}
          </div>
        </ConfigField>
      </ConfigCard>
    </div>
  );
}

function ConfigSeguranca() {
  return (
    <div className="space-y-5">
      <ConfigCard title="Senha" sub="Última alteração há 47 dias.">
        <ConfigField label="Senha atual"><input type="password" placeholder="••••••••" className="form-pl" /></ConfigField>
        <ConfigField label="Nova senha" hint="Mínimo 12 caracteres, 1 maiúscula, 1 número.">
          <input type="password" placeholder="••••••••••••" className="form-pl" />
          <div className="mt-2 flex items-center gap-2">
            <div className="flex-1 h-1.5 rounded-full bg-pleita-line overflow-hidden"><div className="h-full rounded-full bg-verdict-go" style={{ width: "78%" }} /></div>
            <span className="pl-num text-[11px] text-verdict-go">forte</span>
          </div>
        </ConfigField>
        <ConfigField label="Confirmar"><input type="password" placeholder="••••••••••••" className="form-pl" /></ConfigField>
      </ConfigCard>

      <ConfigCard title="Autenticação em dois fatores (2FA)" sub="Recomendado para contas com pagamentos automáticos.">
        <div className="py-5 flex items-center justify-between gap-4 flex-wrap">
          <div className="flex items-center gap-3">
            <span className="size-10 rounded-md bg-verdict-go/15 grid place-items-center text-verdict-go">🔐</span>
            <div>
              <div className="text-sm text-pleita-ink font-medium">2FA ativo · App autenticador</div>
              <div className="pl-num text-[11px] text-pleita-stone-2">Configurado em 12/mar/2026 · Google Authenticator</div>
            </div>
          </div>
          <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Reconfigurar</button>
        </div>
      </ConfigCard>

      <ConfigCard title="Sessões ativas" sub="Dispositivos conectados nesta conta.">
        <ul className="divide-y divide-pleita-line/60">
          {[
            { dev: "MacBook Pro · Chrome",  loc: "São Paulo, SP · 187.12.•••",  when: "atual",  cur: true },
            { dev: "iPhone 15 · Safari",    loc: "São Paulo, SP · 187.12.•••",  when: "há 2h",  cur: false },
            { dev: "Windows · Edge",         loc: "Campinas, SP · 191.41.•••",  when: "há 4d",  cur: false },
          ].map((s) => (
            <li key={s.dev} className="py-4 flex items-center justify-between gap-3">
              <div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-pleita-ink font-medium">{s.dev}</span>
                  {s.cur && <span className="pl-num text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded font-semibold bg-pleita-lime text-pleita-ink">atual</span>}
                </div>
                <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{s.loc} · {s.when}</div>
              </div>
              {!s.cur && <button className="pl-num text-xs text-verdict-stop hover:underline">Encerrar →</button>}
            </li>
          ))}
        </ul>
      </ConfigCard>

      <ConfigCard title="Zona perigosa" sub="Ações irreversíveis.">
        <div className="py-5 grid md:grid-cols-2 gap-3">
          <div className="rounded-md border border-pleita-line p-4">
            <div className="text-sm font-medium text-pleita-ink">Exportar todos os dados</div>
            <p className="text-xs text-pleita-stone-2 mt-1">Download em JSON+ZIP de tudo que você tem aqui (LGPD art. 18).</p>
            <button className="mt-3 pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Solicitar exportação</button>
          </div>
          <div className="rounded-md border border-verdict-stop/30 p-4 bg-verdict-stop/5">
            <div className="text-sm font-medium text-verdict-stop">Excluir conta</div>
            <p className="text-xs text-pleita-stone mt-1">Apaga sua conta, dados e histórico. Não tem volta.</p>
            <button className="mt-3 pl-num text-xs px-3 py-1.5 rounded-md bg-verdict-stop text-white">Excluir minha conta</button>
          </div>
        </div>
      </ConfigCard>
    </div>
  );
}

// ----- Screen wrapper -----

function ScreenConfig({ beginnerMode, setBeginnerMode }) {
  const [tab, setTab] = React.useState("perfil");
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="config" crumb={["Pleita", "Configurações", CONFIG_TABS.find((t) => t.id === tab)?.label]}>
      <header className="mb-6">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">⚙️ Configurações</div>
        <h1 className="font-display text-3xl text-pleita-ink leading-tight">Sua conta, do jeito que você quer<span className="text-pleita-lime">.</span></h1>
      </header>

      <div className="grid grid-cols-12 gap-6">
        <nav className="col-span-12 md:col-span-3">
          <div className="md:sticky md:top-20 rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm p-1.5 flex md:flex-col gap-0.5 overflow-x-auto md:overflow-visible scrollbar-pl">
            {CONFIG_TABS.map((t) => (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-sm whitespace-nowrap transition-colors text-left ${tab === t.id ? "bg-pleita-paper-2 text-pleita-ink font-medium" : "text-pleita-stone hover:bg-surface-2"}`}
              >
                <span className="text-base">{t.ico}</span>{t.label}
              </button>
            ))}
          </div>
        </nav>
        <div className="col-span-12 md:col-span-9 min-w-0">
          {tab === "perfil"       && <ConfigPerfil />}
          {tab === "empresa"      && <ConfigEmpresa />}
          {tab === "equipe"       && <ConfigEquipe />}
          {tab === "billing"      && <ConfigBillingCli />}
          {tab === "integracoes"  && <ConfigIntegracoes />}
          {tab === "notificacoes" && <ConfigNotifPrefs />}
          {tab === "seguranca"    && <ConfigSeguranca />}
        </div>
      </div>
    </AppFrame>
  );
}

window.ScreenConfig = ScreenConfig;