/* screens-config.jsx — Planos & Configurações (integração com ERP) */

// ============================================================
// PLANOS — 2 ofertas: One (preço aberto · R$600 mensal / R$480 anual) e Studio (sob consulta)
// ============================================================
function PlanosScreen() {
  return <PlanosCatalogoFixo />;
}

function PlanosCatalogoFixo() {
  const [billing, setBilling] = useState("anual"); // mensal | anual
  const [contactOpen, setContactOpen] = useState(false);
  const [contactContext, setContactContext] = useState("one"); // "one" | "studio"
  const openContact = (ctx) => { setContactContext(ctx); setContactOpen(true); };
  const ONE_PRICES = { mensal: 600, anual: 480 };
  const ONE_INCLUDES = [
    { f: "Visão Geral D-1 · vendas, ticket, PA, YoY", on: true, hi: true },
    { f: "Fechamento do dia automático", on: true },
    { f: "Análise de Produtos · top, ruptura, markup", on: true },
    { f: "Ranking de vendedores por loja", on: true },
    { f: "Alertas básicos por e-mail", on: true },
    { f: "Versão mobile pro gerente de loja", on: true, hi: true },
    { f: "White-label com sua marca", on: true },
    { f: "Setup, integração e treinamento inclusos", on: true, hi: true },
    { f: "Suporte por e-mail", on: true },
  ];
  const STUDIO_INCLUDES = [
    { f: "Tudo do One, sem teto de uso", on: true },
    { f: "Tempo real · o dado entra assim que a sua fonte libera (vs. D-1 do One)", on: true, hi: true },
    { f: "Previsão de vendas com IA · até 16 semanas à frente", on: true, hi: true },
    { f: "Alertas inteligentes de reposição por categoria", on: true, hi: true },
    { f: "Carteira de pedidos integrada · cruza compra futura × venda esperada", on: true },
    { f: "Open to Buy (OTB) · planejamento de compras baseado em modelo", on: true, hi: true },
    { f: "Dashboards customizados pra métricas só do seu negócio", on: true, hi: true },
    { f: "Modelo ML treinado nos seus dados · calibrado por estação", on: true, hi: true },
    { f: "Sessão mensal de leitura dos seus dados com o time DashM", on: true, hi: true },
    { f: "Implantação de KPI customizado em até 7 dias úteis", on: true },
    { f: "Integração com qualquer ERP (TOTVS, Bling, Linx, custom)", on: true },
    { f: "Suporte por WhatsApp direto com o time", on: true, hi: true },
    { f: "Atendimento e evolução contínua dedicados", on: true },
  ];

  return (
    <div className="space-y-8">
      <div className="text-center max-w-3xl mx-auto">
        <div className="flex items-center justify-center gap-2 mb-2">
          <span className="neon-dot" />
          <span className="text-[11px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Investimento · cobrado por loja</span>
        </div>
        <h2 className="text-[28px] font-semibold tracking-tight">Inteligência de varejo que paga sozinha</h2>
        <p className="text-[13px] text-[var(--fg-muted)] mt-2">
          Duas formas de começar. <span className="text-[var(--fg)] font-medium">One</span> pra operações que precisam de visibilidade rápida,
          <span className="text-[var(--fg)] font-medium"> Studio</span> pra quem quer BI desenhado nos detalhes da operação.
          Setup, integração e treinamento sempre inclusos.
        </p>

        {/* Mensal/Anual toggle */}
        <div className="inline-flex mt-5 p-1.5 rounded-2xl border border-[var(--border)] bg-[var(--panel)] shadow-[var(--shadow-sm)] relative">
          {/* Badge "ECONOMIZE -20%" flutuante sobre o Anual */}
          {billing === "mensal" && (
            <div className="absolute -top-3 right-3 flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-gradient-to-r from-[var(--accent)] to-[var(--accent-2)] text-white shadow-[var(--shadow-sm)] pulse-glow">
              <Icon name="sparkles" className="w-2.5 h-2.5" />
              Economize -20%
            </div>
          )}
          <button
            onClick={() => setBilling("mensal")}
            className={`px-5 py-2.5 text-[12.5px] font-medium rounded-xl transition-all ${billing === "mensal" ? "bg-[var(--panel-2)] text-[var(--fg)] shadow-[var(--shadow-sm)]" : "text-[var(--fg-muted)] hover:text-[var(--fg)]"}`}
          >
            Mensal
          </button>
          <button
            onClick={() => setBilling("anual")}
            className={`px-5 py-2.5 text-[12.5px] font-semibold rounded-xl transition-all flex items-center gap-2 ${
              billing === "anual"
                ? "bg-gradient-to-r from-[var(--accent)] to-[var(--accent-2)] text-white shadow-[var(--shadow-lg)]"
                : "text-[var(--fg-muted)] hover:text-[var(--fg)]"
            }`}
            style={billing === "anual" ? { boxShadow: "0 4px 16px -4px var(--accent-glow)" } : {}}
          >
            <Icon name="sparkles" className="w-3.5 h-3.5" fill={billing === "anual" ? "currentColor" : "none"} />
            Anual
            <span
              className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-all ${
                billing === "anual"
                  ? "bg-white/20 text-white"
                  : "bg-[var(--accent-soft)] text-[var(--accent)]"
              }`}
            >
              -20%
            </span>
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch max-w-5xl mx-auto">
        {/* ─── DASHM ONE — preço aberto ────────────────────────── */}
        <div className="relative flex flex-col panel p-6 transition-all">
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: "color-mix(in oklch, var(--accent) 14%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 35%, transparent)", color: "var(--accent)" }}>
              <Icon name="rocket" className="w-5 h-5" />
            </div>
            <div>
              <div className="text-[17px] font-semibold">DashM One</div>
              <div className="text-[10.5px] text-[var(--fg-faint)] uppercase tracking-wider">Pacote pronto · entrega rápida</div>
            </div>
          </div>

          <div className="mt-5">
            <div className="text-[11px] text-[var(--fg-muted)] uppercase tracking-wider font-medium mb-1">a partir de</div>
            <div className="flex items-baseline gap-1.5">
              <span className="text-[14px] text-[var(--fg-muted)]">R$</span>
              <span className="num text-[42px] font-semibold tracking-tight leading-none">{new Intl.NumberFormat("pt-BR").format(ONE_PRICES[billing])}</span>
              <span className="text-[12px] text-[var(--fg-muted)]">/ loja / mês</span>
            </div>
            <div className="text-[10.5px] text-[var(--fg-faint)] mt-1.5">
              {billing === "anual"
                ? <>cobrado anualmente · economia de <span className="text-[var(--accent)] font-semibold">R$ {new Intl.NumberFormat("pt-BR").format((ONE_PRICES.mensal - ONE_PRICES.anual) * 12)}/loja/ano</span></>
                : "cobrado mensalmente · sem fidelidade"}
            </div>
          </div>

          <p className="text-[12.5px] text-[var(--fg-muted)] mt-4 leading-snug">
            Pacote essencial pronto, validado em redes reais. Implantamos rápido com seu ERP e a operação ganha visibilidade já na primeira semana.
          </p>

          <button onClick={() => openContact("one")} className="btn w-full justify-center mt-5">
            Quero conhecer o pacote
            <Icon name="arrow-right" className="w-4 h-4" />
          </button>

          <div className="mt-5 pt-5 border-t border-[var(--border)] space-y-2 flex-1">
            {ONE_INCLUDES.map((f, i) => (
              <div key={i} className="flex items-start gap-2.5">
                <Icon name={f.hi ? "sparkles" : "check"} className={`w-3.5 h-3.5 shrink-0 mt-0.5 ${f.hi ? "text-[var(--accent)]" : "text-[var(--pos)]"}`} />
                <span className={`text-[12px] ${f.hi ? "font-medium" : ""}`}>{f.f}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ─── DASHM STUDIO — sob consulta ─────────────────────── */}
        <div className="relative flex flex-col panel-hi gradient-border p-6 lg:-translate-y-1 lg:scale-[1.01] transition-all">
          <div className="absolute -top-2.5 left-1/2 -translate-x-1/2">
            <span className="badge badge-accent">Sob medida</span>
          </div>
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: "color-mix(in oklch, var(--accent-2) 14%, transparent)", border: "1px solid color-mix(in oklch, var(--accent-2) 35%, transparent)", color: "var(--accent-2)" }}>
              <Icon name="crown" className="w-5 h-5" />
            </div>
            <div>
              <div className="text-[17px] font-semibold">DashM Studio</div>
              <div className="text-[10.5px] text-[var(--fg-faint)] uppercase tracking-wider">BI sob medida · escopo dedicado</div>
            </div>
          </div>

          <div className="mt-5">
            <div className="text-[11px] text-[var(--fg-muted)] uppercase tracking-wider font-medium mb-1">Investimento</div>
            <div className="num text-[28px] font-semibold tracking-tight">Sob consulta</div>
            <div className="text-[10.5px] text-[var(--fg-faint)] mt-1.5 leading-snug">
              Cada Studio é único — preço calculado pelo escopo, integrações específicas, número de lojas e nível de personalização.
            </div>
          </div>

          <p className="text-[12.5px] text-[var(--fg-muted)] mt-4 leading-snug">
            BI desenhado em cima da SUA operação. Dashboards específicos, integrações com seu ERP, modelos de previsão calibrados pra sua realidade.
            Operações similares observam<sup className="text-[var(--accent)]">*</sup> reduções relevantes de ruptura e sobra de estoque após implantação.
          </p>

          <button onClick={() => openContact("studio")} className="btn btn-primary w-full justify-center mt-5">
            Falar com um especialista
            <Icon name="arrow-right" className="w-4 h-4" />
          </button>

          <div className="mt-5 pt-5 border-t border-[var(--border)] space-y-2 flex-1">
            {STUDIO_INCLUDES.map((f, i) => (
              <div key={i} className="flex items-start gap-2.5">
                <Icon name={f.hi ? "sparkles" : "check"} className={`w-3.5 h-3.5 shrink-0 mt-0.5 ${f.hi ? "text-[var(--accent)]" : "text-[var(--pos)]"}`} />
                <span className={`text-[12px] ${f.hi ? "font-medium" : ""}`}>{f.f}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* "Por que uma mensalidade só?" anchoring block */}
      <div className="panel p-6 relative overflow-hidden">
        <div className="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative">
          <div className="flex items-center gap-2 mb-2">
            <span className="neon-dot" />
            <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Por que cobramos só uma mensalidade?</span>
          </div>
          <h3 className="text-[18px] font-semibold tracking-tight">Tudo embutido. Sem surpresa no boleto.</h3>
          <p className="text-[12px] text-[var(--fg-muted)] mt-1.5 max-w-3xl">
            Outras plataformas cobram setup, treinamento e suporte como extras. A gente prefere construir uma relação previsível —
            você sabe quanto vai pagar todo mês e o time DashM evolui o produto continuamente, sem cobrança por feature.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-5">
            {[
              { icon: "wrench", t: "Setup incluso", d: "Implantação + integração do seu ERP sem cobrança extra." },
              { icon: "graduation-cap", t: "Treinamento incluso", d: "Onboarding da equipe e materiais de apoio." },
              { icon: "rocket", t: "Evolução contínua", d: "Novos módulos liberados sem upgrade obrigatório." },
              { icon: "calendar-x", t: "Sem fidelidade", d: "Saída a qualquer momento. Você paga só o mês corrente." },
              { icon: "headset", t: "Atendimento direto", d: "Suporte humano sem ticket robô. Você fala com quem constrói." },
              { icon: "shield-check", t: "Dados criptografados", d: "TLS, MFA, RLS por loja e backups diários." },
            ].map((m) => (
              <div key={m.t} className="p-3 rounded-xl bg-[var(--panel-2)] border border-[var(--border)]">
                <Icon name={m.icon} className="w-4 h-4 text-[var(--accent)] mb-2" />
                <div className="text-[12px] font-medium">{m.t}</div>
                <div className="text-[10.5px] text-[var(--fg-muted)] mt-1 leading-snug">{m.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Simulador simples — n lojas × R$/loja */}
      <SimuladorLojas />

      {/* Comparativo One vs Studio */}
      <div className="panel overflow-hidden max-w-4xl mx-auto w-full">
        <div className="px-5 py-4 border-b border-[var(--border)]">
          <SectionHead title="One vs Studio" subtitle="O que muda na prática" icon="list-checks" />
        </div>
        <div className="overflow-x-auto">
          <table className="dm-table">
            <thead>
              <tr>
                <th className="w-[44%]">Recurso</th>
                <th className="text-center">One</th>
                <th className="text-center" style={{ color: "var(--accent)" }}>Studio</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Investimento por loja/mês", "R$ 480 anual · R$ 600 mensal", "Sob consulta"],
                ["Atualização dos dados", "D-1 (diária)", "Tempo real ⚡"],
                ["Setup, integração e treinamento", true, true],
                ["Visão Geral D-1, Fechamento do dia, Produtos", true, true],
                ["Ranking de vendedores", true, true],
                ["Versão mobile pro gerente de loja", true, true],
                ["White-label com sua marca", true, true],
                ["Canal de suporte", "E-mail", "WhatsApp direto"],
                ["Previsão de vendas com IA", false, true],
                ["Alertas inteligentes de reposição", false, true],
                ["Carteira de pedidos integrada", false, true],
                ["Open to Buy (OTB)", false, true],
                ["Dashboards customizados", false, true],
                ["Modelo ML treinado com seus dados", false, true],
                ["Sessão mensal de leitura de dados", false, true],
                ["SLA pra KPI customizado", false, "7 dias úteis"],
                ["Integração com qualquer ERP", "TOTVS, Bling, Linx", "qualquer ERP, inclusive custom"],
                ["Tempo de implantação típico", "1–3 semanas", "1–3 semanas · conforme escopo"],
              ].map((row, i) => (
                <tr key={i}>
                  <td className="font-medium">{row[0]}</td>
                  {row.slice(1).map((cell, j) => (
                    <td key={j} className="text-center">
                      {typeof cell === "boolean" ? (
                        <Icon name={cell ? "check-circle-2" : "x"} className={`w-4 h-4 inline ${cell ? "text-[var(--pos)]" : "text-[var(--fg-faint)]"}`} />
                      ) : (
                        <span className="num text-[12px]">{cell}</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Disclaimer discreto — proteção legal */}
      <div className="text-center pt-4">
        <p className="text-[10px] text-[var(--fg-faint)] leading-relaxed max-w-3xl mx-auto">
          <span className="text-[var(--accent)]">*</span> Resultados observados em operações similares variam conforme a realidade do negócio.
          Performance passada não constitui garantia de resultado futuro. Valores indicados servem como referência e podem variar
          conforme escopo, integrações específicas, número de lojas e prazo de implantação acordados em proposta.
        </p>
      </div>

      <ContactDialog
        open={contactOpen}
        onClose={() => setContactOpen(false)}
        context={contactContext}
        title={contactContext === "studio" ? "Falar com um especialista — DashM Studio" : "Quero conhecer o DashM One"}
        whatsappMessage={contactContext === "studio"
          ? "Olá! Vim do DashM e quero conversar com um especialista sobre o DashM Studio (BI sob medida)."
          : "Olá! Vim do DashM e quero conhecer o pacote DashM One."}
      />
    </div>
  );
}

// ============================================================
// Simulador One — total de lojas × R$/loja com toggle Mensal/Anual
// ============================================================
function SimuladorLojas() {
  const [lojas, setLojas] = useState(5);
  const [billing, setBilling] = useState("anual");
  const RATES = { mensal: 600, anual: 480 };
  const rate = RATES[billing];
  const total = lojas * rate;
  const totalMensalAnualizado = lojas * RATES.mensal * 12;
  const totalAnual = lojas * RATES.anual * 12;
  const economiaAnual = totalMensalAnualizado - totalAnual;
  const fmtBRL = (v) => new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(v);

  return (
    <div className="panel-hi p-6 max-w-4xl mx-auto w-full relative overflow-hidden">
      <div className="absolute -top-12 -right-12 w-64 h-64 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
      <div className="relative">
        <div className="flex items-center gap-2 mb-2">
          <Icon name="calculator" className="w-4 h-4 text-[var(--accent)]" />
          <span className="text-[11px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Simulador DashM One</span>
        </div>
        <h3 className="text-[20px] font-semibold tracking-tight">Quanto fica pra sua operação?</h3>
        <p className="text-[12px] text-[var(--fg-muted)] mt-1.5">
          Simulação do <span className="text-[var(--fg)] font-medium">DashM One</span> — cobrado por loja, sem taxa de setup, sem fidelidade.
          Pro <span className="text-[var(--fg)] font-medium">Studio</span> o investimento é calculado caso a caso conforme escopo.
        </p>

        <div className="mt-6 grid grid-cols-1 md:grid-cols-[1.2fr_1fr] gap-6 items-center">
          {/* Controls */}
          <div className="space-y-5">
            <div>
              <div className="flex items-center justify-between mb-2">
                <label className="text-[12px] font-medium text-[var(--fg-muted)] uppercase tracking-wider">Quantas lojas você tem?</label>
                <span className="num text-[24px] font-semibold">{lojas}</span>
              </div>
              <input
                type="range"
                min="1"
                max="30"
                value={lojas}
                onChange={(e) => setLojas(parseInt(e.target.value, 10))}
                className="w-full accent-[var(--accent)] cursor-pointer"
              />
              <div className="flex justify-between text-[10px] text-[var(--fg-faint)] mt-1 font-mono">
                <span>1</span><span>10</span><span>20</span><span>30+</span>
              </div>
            </div>

            <div>
              <label className="text-[12px] font-medium text-[var(--fg-muted)] uppercase tracking-wider mb-2 block">Modalidade</label>
              <div className="inline-flex p-1.5 rounded-2xl border border-[var(--border)] bg-[var(--panel)] w-full shadow-[var(--shadow-sm)] relative">
                {/* Badge "ECONOMIZE -20%" flutuante quando Mensal está ativo */}
                {billing === "mensal" && (
                  <div className="absolute -top-3 right-3 flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-gradient-to-r from-[var(--accent)] to-[var(--accent-2)] text-white shadow-[var(--shadow-sm)] pulse-glow z-10">
                    <Icon name="sparkles" className="w-2.5 h-2.5" />
                    Economize -20%
                  </div>
                )}
                <button
                  onClick={() => setBilling("mensal")}
                  className={`flex-1 px-4 py-2.5 text-[12.5px] font-medium rounded-xl transition-all ${
                    billing === "mensal"
                      ? "bg-[var(--panel-2)] text-[var(--fg)] shadow-[var(--shadow-sm)]"
                      : "text-[var(--fg-muted)] hover:text-[var(--fg)]"
                  }`}
                >
                  Mensal
                </button>
                <button
                  onClick={() => setBilling("anual")}
                  className={`flex-1 px-4 py-2.5 text-[12.5px] font-semibold rounded-xl transition-all flex items-center justify-center gap-2 ${
                    billing === "anual"
                      ? "bg-gradient-to-r from-[var(--accent)] to-[var(--accent-2)] text-white"
                      : "text-[var(--fg-muted)] hover:text-[var(--fg)]"
                  }`}
                  style={billing === "anual" ? { boxShadow: "0 4px 16px -4px var(--accent-glow)" } : {}}
                >
                  <Icon name="sparkles" className="w-3.5 h-3.5" fill={billing === "anual" ? "currentColor" : "none"} />
                  Anual
                  <span
                    className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-all ${
                      billing === "anual"
                        ? "bg-white/20 text-white"
                        : "bg-[var(--accent-soft)] text-[var(--accent)]"
                    }`}
                  >
                    -20%
                  </span>
                </button>
              </div>
            </div>
          </div>

          {/* Result */}
          <div className="p-5 rounded-xl bg-[var(--panel-2)] border border-[var(--border)] text-center">
            <div className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-medium">Investimento estimado</div>
            <div className="mt-2 flex items-baseline justify-center gap-1.5">
              <span className="text-[13px] text-[var(--fg-muted)]">R$</span>
              <span className="num text-[40px] font-semibold tracking-tight leading-none text-[var(--accent)]">
                {new Intl.NumberFormat("pt-BR").format(total)}
              </span>
              <span className="text-[12px] text-[var(--fg-muted)]">/ mês</span>
            </div>
            <div className="text-[10.5px] text-[var(--fg-faint)] mt-1.5 font-mono">
              {lojas} {lojas === 1 ? "loja" : "lojas"} × {fmtBRL(rate)}/loja
            </div>
            {billing === "anual" && (
              <div className="text-[10.5px] mt-3 leading-snug">
                <span className="text-[var(--fg-muted)]">No anual, você economiza </span>
                <span className="text-[var(--accent)] font-semibold">{fmtBRL(economiaAnual)}/ano</span>
                <span className="text-[var(--fg-muted)]"> vs mensal</span>
              </div>
            )}
            {billing === "mensal" && (
              <div className="text-[10.5px] text-[var(--fg-muted)] mt-3 leading-snug">
                Migrando pro anual você economizaria <span className="text-[var(--accent)] font-semibold">{fmtBRL(economiaAnual)}/ano</span>.
              </div>
            )}
            <button className="btn btn-primary w-full justify-center mt-4">
              Pedir proposta personalizada
              <Icon name="arrow-right" className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CONFIGURAÇÕES (com aba de integracao do ERP)
// ============================================================
function ConfigScreen() {
  const [tab, setTab] = useState("integracoes");
  const tabs = [
    { id: "integracoes", label: "Integrações", icon: "plug" },
    { id: "branding",    label: "Branding & White-label", icon: "palette" },
    { id: "usuarios",    label: "Usuários & Permissões", icon: "users" },
    { id: "seguranca",   label: "Segurança",       icon: "shield-check" },
    { id: "billing",     label: "Cobrança",        icon: "credit-card" },
  ];

  return (
    <div className="space-y-6">
      <div className="panel p-1.5 flex gap-1 overflow-x-auto">
        {tabs.map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg text-[12.5px] font-medium whitespace-nowrap transition-all ${tab === t.id ? "bg-[var(--panel-2)] text-[var(--fg)]" : "text-[var(--fg-muted)] hover:text-[var(--fg)]"}`}
          >
            <Icon name={t.icon} className="w-3.5 h-3.5" />
            {t.label}
          </button>
        ))}
      </div>

      {tab === "integracoes" && <IntegracoesTab />}
      {tab === "branding" && <BrandingTab />}
      {tab === "usuarios" && <UsuariosTab />}
      {tab === "seguranca" && <SegurancaTab />}
      {tab === "billing" && <BillingTab />}
    </div>
  );
}

function IntegracoesTab() {
  return (
    <div className="space-y-5">
      {/* integracao com o ERP do cliente */}
      <div className="panel-hi p-6 relative overflow-hidden">
        <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative grid grid-cols-1 lg:grid-cols-[1.4fr_1fr] gap-6">
          <div>
            <div className="flex items-center gap-3 mb-3">
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-[#ffffff] font-bold text-[16px]">
                M
              </div>
              <div>
                <div className="text-[16px] font-semibold">Seu ERP · conectado</div>
                <div className="text-[11px] text-[var(--fg-muted)] flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-[var(--pos)] pulse-glow" /> Conectado · sincronizando há 2 min</div>
              </div>
              <span className="ml-auto badge badge-pos">Core · ativo</span>
            </div>
            <p className="text-[12.5px] text-[var(--fg-muted)] leading-relaxed">
              Conector nativo da plataforma. Sincroniza catálogo, estoque, vendas, NFs, recebimentos e clientes.
              Toda a inteligência (previsão, ruptura, cobertura) depende deste canal estar saudável.
            </p>

            <div className="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3">
              {[
                { label: "Entidades sincronizadas", value: "12/12" },
                { label: "Registros últimas 24h", value: "1,2M" },
                { label: "Latência média", value: "1,8s" },
                { label: "Health check", value: "100%" },
              ].map((m) => (
                <div key={m.label} className="p-3 rounded-lg bg-[var(--panel-2)] border border-[var(--border)]">
                  <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">{m.label}</div>
                  <div className="num text-[18px] font-semibold mt-0.5">{m.value}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="space-y-3">
            <div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--panel)]">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] mb-2">Endpoint</div>
              <div className="font-mono text-[11px] text-[var(--fg)] break-all">https://api.seuerp.com.br/v3/tenant/demo</div>
              <div className="mt-3 flex items-center gap-2">
                <Btn variant="ghost" icon="copy">Copiar</Btn>
                <Btn variant="ghost" icon="external-link">Console</Btn>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <Btn icon="refresh-cw">Resync agora</Btn>
              <Btn variant="primary" icon="settings-2">Configurar</Btn>
            </div>
          </div>
        </div>

        {/* Entity sync rows */}
        <div className="mt-6 pt-5 border-t border-[var(--border)] grid grid-cols-2 lg:grid-cols-4 gap-2">
          {[
            { e: "Produtos", n: "8.420", t: "2 min", ok: true },
            { e: "Estoque", n: "1.240 filiais", t: "1 min", ok: true },
            { e: "Vendas (NFC-e)", n: "stream live", t: "12s", ok: true },
            { e: "Clientes", n: "284 mil", t: "15 min", ok: true },
            { e: "Pedidos compra", n: "183 ativos", t: "5 min", ok: true },
            { e: "Recebimentos", n: "stream live", t: "8s", ok: true },
            { e: "Fotos catálogo", n: "12.418", t: "1h", ok: true },
            { e: "Calendário comercial", n: "—", t: "24h", ok: true },
          ].map((s) => (
            <div key={s.e} className="flex items-center gap-2 p-2.5 rounded-lg bg-[var(--panel-2)] border border-[var(--border)]">
              <div className={`w-1.5 h-1.5 rounded-full ${s.ok ? "bg-[var(--pos)] pulse-glow" : "bg-[var(--neg)]"}`} />
              <div className="flex-1 min-w-0">
                <div className="text-[11.5px] font-medium truncate">{s.e}</div>
                <div className="text-[10px] text-[var(--fg-faint)]">{s.n}</div>
              </div>
              <div className="text-[10px] font-mono text-[var(--fg-faint)]">{s.t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Available integrations */}
      <div className="panel p-5">
        <SectionHead title="Conectores disponíveis" subtitle="Conecte canais adicionais — marketplaces, e-commerce, BI" icon="puzzle" />
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
          {[
            { name: "BigQuery", desc: "Data warehouse Google", icon: "database", status: "ativo", color: "var(--info)" },
            { name: "Supabase", desc: "Auth + Storage", icon: "shield-check", status: "ativo", color: "var(--pos)" },
            { name: "WhatsApp Business", desc: "Alertas via WA", icon: "message-circle", status: "ativo", color: "var(--pos)" },
            { name: "Power BI", desc: "Export dashboards", icon: "bar-chart-3", status: "disponível", color: "var(--fg-muted)" },
            { name: "Marketplace · Genérico", desc: "API REST", icon: "shopping-bag", status: "disponível", color: "var(--fg-muted)" },
            { name: "E-commerce · API", desc: "Sync pedidos online", icon: "globe", status: "disponível", color: "var(--fg-muted)" },
            { name: "ClickUp", desc: "Tarefas operacionais", icon: "list-checks", status: "disponível", color: "var(--fg-muted)" },
            { name: "Webhook genérico", desc: "Push eventos custom", icon: "webhook", status: "disponível", color: "var(--fg-muted)" },
          ].map((c) => (
            <div key={c.name} className="p-4 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)] transition-colors">
              <div className="flex items-center justify-between mb-3">
                <div className="w-9 h-9 rounded-lg flex items-center justify-center" style={{ background: `color-mix(in oklch, ${c.color} 14%, transparent)`, color: c.color, border: `1px solid color-mix(in oklch, ${c.color} 40%, transparent)` }}>
                  <Icon name={c.icon} className="w-4 h-4" />
                </div>
                {c.status === "ativo" ? (
                  <span className="badge badge-pos">conectado</span>
                ) : (
                  <span className="badge">disponível</span>
                )}
              </div>
              <div className="text-[13px] font-medium">{c.name}</div>
              <div className="text-[11px] text-[var(--fg-muted)] mt-0.5">{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function BrandingTab() {
  const [palette, setPalette] = useState("aurora");
  const palettes = {
    aurora:  { name: "Aurora (default)", colors: ["#4cf3d2", "#a78bfa", "#ff5c8d"] },
    sunset:  { name: "Sunset",            colors: ["#ff8a4c", "#ff5c7a", "#a78bfa"] },
    forest:  { name: "Forest",            colors: ["#34d399", "#6ee7b7", "#fbbf24"] },
    ocean:   { name: "Ocean",             colors: ["#60a5fa", "#22d3ee", "#a78bfa"] },
    mono:    { name: "Monochrome",        colors: ["#e8ecf2", "#8a93a3", "#5b6373"] },
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_1fr] gap-5">
      <div className="space-y-5">
        <div className="panel p-5">
          <SectionHead title="Identidade visual" subtitle="Configurações aplicadas a todos os usuários do seu tenant" icon="palette" />
          <div className="space-y-5">
            <FormField label="Nome da plataforma" icon="type">
              <input className="input" defaultValue="DashM · OS" />
            </FormField>
            <div className="grid grid-cols-2 gap-4">
              <FormField label="Logo (claro)" icon="image">
                <div className="placeholder-stripes rounded-lg h-20 flex items-center justify-center text-[10px] font-mono text-[var(--fg-faint)] cursor-pointer hover:border-[var(--accent)]">
                  <Icon name="upload" className="w-4 h-4 mr-1.5" /> arraste o SVG aqui
                </div>
              </FormField>
              <FormField label="Logo (escuro)" icon="image">
                <div className="placeholder-stripes rounded-lg h-20 flex items-center justify-center text-[10px] font-mono text-[var(--fg-faint)] cursor-pointer hover:border-[var(--accent)]">
                  <Icon name="upload" className="w-4 h-4 mr-1.5" /> arraste o SVG aqui
                </div>
              </FormField>
            </div>
            <div>
              <label className="text-[10px] uppercase tracking-wider font-semibold text-[var(--fg-muted)] mb-2 block">Paleta neon</label>
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
                {Object.entries(palettes).map(([k, p]) => (
                  <button
                    key={k}
                    onClick={() => setPalette(k)}
                    className={`p-3 rounded-xl border text-left transition-all ${palette === k ? "border-[var(--accent)] bg-[var(--accent-soft)]" : "border-[var(--border)] hover:border-[var(--fg-muted)] bg-[var(--panel-2)]"}`}
                  >
                    <div className="flex gap-1 mb-2">
                      {p.colors.map((c, i) => (
                        <div key={i} className="w-5 h-5 rounded" style={{ background: c, boxShadow: `0 0 8px ${c}` }} />
                      ))}
                    </div>
                    <div className="text-[11px] font-medium">{p.name}</div>
                  </button>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <FormField label="Tipografia">
                <SelectInput value="Geist" options={["Geist", "Inter", "Manrope", "Söhne", "Custom"]} onChange={() => {}} />
              </FormField>
              <FormField label="Domínio personalizado">
                <input className="input font-mono text-[12px]" defaultValue="dashboard.suaempresa.com.br" />
              </FormField>
            </div>
          </div>
        </div>

        <div className="panel p-5">
          <SectionHead title="Mensagens & textos" subtitle="Customize copy de partes-chave da plataforma" icon="message-square" />
          <div className="space-y-3">
            <FormField label="Saudação da Home">
              <input className="input" defaultValue="Bem-vindo de volta · sua operação em tempo real." />
            </FormField>
            <FormField label="E-mail de remetente">
              <input className="input font-mono text-[12px]" defaultValue="alertas@suaempresa.com.br" />
            </FormField>
            <FormField label="Texto de rodapé">
              <input className="input" defaultValue="© Sua Empresa · 2026 · Powered by DashM" />
            </FormField>
          </div>
        </div>
      </div>

      <div className="space-y-5">
        <div className="panel p-5">
          <SectionHead title="Preview" icon="eye" />
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)] p-4 space-y-3">
            <BrandMark />
            <div className="flex gap-2 mt-3">
              {palettes[palette].colors.map((c, i) => (
                <div key={i} className="flex-1 h-12 rounded-lg" style={{ background: c, boxShadow: `0 0 16px ${c}` }} />
              ))}
            </div>
            <div className="p-3 rounded-lg bg-[var(--panel)] border border-[var(--border)]">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Faturamento</div>
              <div className="num text-[20px] font-semibold mt-0.5">R$ 1,4M</div>
              <Delta value={12.4} />
            </div>
            <button className="w-full px-3 py-2 rounded-lg font-medium text-[12px]" style={{ background: palettes[palette].colors[0], color: "#ffffff", boxShadow: `0 0 16px ${palettes[palette].colors[0]}` }}>
              Botão primário
            </button>
          </div>
        </div>

        <div className="panel p-5">
          <div className="flex items-center gap-2 mb-3">
            <Icon name="rocket" className="w-4 h-4 text-[var(--accent)]" />
            <h3 className="font-semibold text-[14px]">Publicar mudanças</h3>
          </div>
          <p className="text-[12px] text-[var(--fg-muted)]">As mudanças são propagadas em até 2 minutos para todos os usuários do seu tenant. Você pode reverter a qualquer momento.</p>
          <div className="grid grid-cols-2 gap-2 mt-4">
            <Btn variant="ghost">Reverter</Btn>
            <Btn variant="primary" icon="check">Publicar</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

function UsuariosTab() {
  const [inviteOpen, setInviteOpen] = useState(false);
  const [inviteForm, setInviteForm] = useState({ email: "", role: "Operador", filiais: ["Todas"] });
  const toast = useToast();
  const ROLES = ["Owner", "Admin", "Gerente", "Operador", "Analista"];
  const FILIAIS = ["Todas", "Filial 01", "Filial 02", "Filial 03", "Filial 04", "Filial 05", "Filial 06"];

  const toggleFilial = (f) => {
    setInviteForm(s => {
      // "Todas" é exclusivo das filiais específicas
      if (f === "Todas") return { ...s, filiais: ["Todas"] };
      const next = s.filiais.includes(f)
        ? s.filiais.filter(x => x !== f)
        : [...s.filiais.filter(x => x !== "Todas"), f];
      return { ...s, filiais: next.length ? next : ["Todas"] };
    });
  };

  const handleInvite = (e) => {
    e.preventDefault();
    if (!inviteForm.email.trim() || !inviteForm.email.includes("@")) {
      toast({ tone: "error", title: "E-mail inválido", desc: "Informe um e-mail válido pra enviar o convite." });
      return;
    }
    toast({ tone: "success", title: "Convite enviado", desc: `${inviteForm.email} · ${inviteForm.role} · ${inviteForm.filiais.join(", ")}` });
    setInviteOpen(false);
    setInviteForm({ email: "", role: "Operador", filiais: ["Todas"] });
  };

  const users = Array.from({ length: 10 }, (_, i) => ({
    nome: `Operador ${String.fromCharCode(65 + i)}`,
    email: `operador.${String.fromCharCode(97 + i)}@demo.com`,
    role: ["Owner", "Admin", "Gerente", "Operador", "Analista", "Operador", "Gerente", "Analista", "Operador", "Operador"][i],
    filial: i === 0 || i === 1 ? "Todas" : PH.stores[i % PH.stores.length],
    status: ["ativo", "ativo", "ativo", "ativo", "convite", "ativo", "ativo", "suspenso", "ativo", "ativo"][i],
    last: ["1 min", "5 min", "1h", "2h", "—", "30 min", "4h", "12d", "20 min", "15 min"][i],
  }));

  return (
    <div className="space-y-5">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <KPI label="Total de usuários" value={42} icon="users" compact format="int" />
        <KPI label="Ativos (30d)" value={38} icon="user-check" delta={4.6} compact format="int" />
        <KPI label="Convites pendentes" value={3} icon="mail" compact format="int" />
        <KPI label="MFA habilitado" value="86%" icon="shield-check" delta={11.2} compact />
      </div>

      <div className="panel overflow-hidden">
        <div className="px-5 py-3.5 flex items-center justify-between border-b border-[var(--border)]">
          <div className="flex items-center gap-2 flex-1 max-w-[320px]">
            <Icon name="search" className="w-3.5 h-3.5 text-[var(--fg-faint)]" />
            <input placeholder="Buscar usuário…" className="bg-transparent text-[12.5px] flex-1 focus:outline-none placeholder:text-[var(--fg-faint)]" />
          </div>
          <Btn variant="primary" icon="user-plus" onClick={() => setInviteOpen(true)}>Convidar usuário</Btn>
        </div>
        <table className="dm-table">
          <thead>
            <tr><th>Usuário</th><th>Papel</th><th>Escopo</th><th>Última sessão</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {users.map((u, i) => (
              <tr key={i}>
                <td>
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-[11px] font-semibold text-[#ffffff]">{u.nome.split(" ")[1][0]}</div>
                    <div>
                      <div className="text-[12.5px] font-medium">{u.nome}</div>
                      <div className="text-[10px] text-[var(--fg-faint)] font-mono">{u.email}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <span className={`badge ${u.role === "Owner" ? "badge-accent" : u.role === "Admin" ? "badge-violet" : ""}`}>{u.role}</span>
                </td>
                <td><span className="badge">{u.filial}</span></td>
                <td className="text-[11px] text-[var(--fg-muted)] num font-mono">{u.last}</td>
                <td>
                  <span className={`badge ${u.status === "ativo" ? "badge-pos" : u.status === "convite" ? "badge-warn" : "badge-neg"}`}>
                    {u.status}
                  </span>
                </td>
                <td><Icon name="more-horizontal" className="w-4 h-4 text-[var(--fg-faint)]" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Modal
        open={inviteOpen}
        onClose={() => setInviteOpen(false)}
        title="Convidar usuário"
        maxWidth="max-w-xl"
        footer={
          <>
            <Btn variant="ghost" onClick={() => setInviteOpen(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="send" onClick={handleInvite}>Enviar convite</Btn>
          </>
        }
      >
        <form onSubmit={handleInvite} className="space-y-4">
          <div>
            <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">E-mail *</label>
            <input
              type="email"
              value={inviteForm.email}
              onChange={(e) => setInviteForm(f => ({ ...f, email: e.target.value }))}
              className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
              placeholder="usuario@empresa.com"
              autoFocus
            />
            <p className="text-[10.5px] text-[var(--fg-faint)] mt-1">O usuário recebe um e-mail com link de ativação. MFA é solicitado no primeiro acesso.</p>
          </div>

          <div>
            <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Papel</label>
            <div className="grid grid-cols-3 gap-2 mt-1.5">
              {ROLES.map((r) => (
                <button
                  key={r}
                  type="button"
                  onClick={() => setInviteForm(f => ({ ...f, role: r }))}
                  className={`px-3 py-2 rounded-lg text-[12px] font-medium border transition-colors ${
                    inviteForm.role === r
                      ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]"
                      : "border-[var(--border)] hover:border-[var(--fg-faint)] text-[var(--fg-muted)]"
                  }`}
                >
                  {r}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Escopo · filiais</label>
            <div className="flex flex-wrap gap-1.5 mt-1.5">
              {FILIAIS.map((f) => {
                const checked = inviteForm.filiais.includes(f);
                return (
                  <button
                    key={f}
                    type="button"
                    onClick={() => toggleFilial(f)}
                    className={`px-2.5 py-1.5 rounded-md text-[11.5px] font-medium border transition-colors ${
                      checked
                        ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]"
                        : "border-[var(--border)] hover:border-[var(--fg-faint)] text-[var(--fg-muted)]"
                    }`}
                  >
                    {checked && <Icon name="check" className="w-3 h-3 inline mr-1" strokeWidth={3} />}
                    {f}
                  </button>
                );
              })}
            </div>
            <p className="text-[10.5px] text-[var(--fg-faint)] mt-2">Owner e Admin sempre têm acesso a todas as filiais. Demais papéis respeitam este escopo.</p>
          </div>
        </form>
      </Modal>
    </div>
  );
}

function SegurancaTab() {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
      <div className="panel p-5">
        <SectionHead title="Autenticação" subtitle="Políticas de acesso e MFA" icon="shield-check" />
        <div className="space-y-3">
          {[
            { t: "Multi-Factor Authentication (MFA)", d: "Exigir TOTP para todos os papéis privilegiados.", on: true },
            { t: "SSO · SAML/OIDC", d: "Login via provedor corporativo.", on: false, badge: "Enterprise" },
            { t: "Brute-force throttle", d: "Bloqueia após 10 tentativas em 15 min.", on: true },
            { t: "Sessão inativa", d: "Logout automático após 30 min.", on: true },
            { t: "IP allowlist", d: "Restringir acesso a IPs corporativos.", on: false },
            { t: "Auditoria completa", d: "Log de todos os eventos sensíveis.", on: true },
          ].map((s) => (
            <div key={s.t} className="flex items-center gap-3 p-3 rounded-lg bg-[var(--panel-2)] border border-[var(--border-soft)]">
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="text-[12.5px] font-medium">{s.t}</span>
                  {s.badge && <span className="badge badge-violet">{s.badge}</span>}
                </div>
                <div className="text-[11px] text-[var(--fg-muted)] mt-0.5">{s.d}</div>
              </div>
              <Toggle on={s.on} />
            </div>
          ))}
        </div>
      </div>

      <div className="panel p-5">
        <SectionHead title="Atividade recente" subtitle="Eventos de segurança · últimas 24h" icon="activity" />
        <div className="space-y-2">
          {[
            { ev: "Login bem-sucedido", who: "operador.a", when: "2 min", ip: "187.32.x.x" },
            { ev: "MFA ativado", who: "operador.b", when: "1h", ip: "189.4.x.x" },
            { ev: "Falha de login (3×)", who: "—", when: "2h", ip: "45.32.x.x", neg: true },
            { ev: "API key rotacionada", who: "admin", when: "4h", ip: "—" },
            { ev: "Permissão alterada", who: "owner", when: "6h", ip: "—" },
            { ev: "Login bem-sucedido", who: "operador.c", when: "8h", ip: "189.4.x.x" },
          ].map((e, i) => (
            <div key={i} className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--panel-2)]">
              <div className={`w-1.5 h-1.5 rounded-full ${e.neg ? "bg-[var(--neg)]" : "bg-[var(--pos)]"}`} />
              <div className="flex-1 text-[12px]">{e.ev} <span className="text-[var(--fg-muted)]">· {e.who}</span></div>
              <div className="text-[10px] font-mono text-[var(--fg-faint)]">{e.ip}</div>
              <div className="text-[10px] text-[var(--fg-faint)] w-12 text-right">{e.when}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function BillingTab({ onChangePlan }) {
  const [histOpen, setHistOpen] = useState(false);
  // Timeline simulada de mudanças de plano
  const timeline = [
    { date: "12/05/2026", type: "upgrade", title: "Upgrade pra DashM Studio", desc: "Saiu do One (R$ 480/loja) pra Studio sob medida (R$ 12.000/mês · 10 lojas) — incluiu tempo real, previsão com IA e implantação dedicada." },
    { date: "10/03/2026", type: "addon", title: "Add-on contratado: Suporte VIP WhatsApp", desc: "Resposta < 1h em horário comercial. Inclui responsável dedicado." },
    { date: "20/01/2026", type: "expansao", title: "Expansão de 6 pra 10 lojas", desc: "Novas filiais adicionadas: Filial 07, 08, 09 e 10. Cobrança proporcional aplicada na próxima fatura." },
    { date: "01/11/2025", type: "upgrade", title: "Upgrade pra DashM One Anual", desc: "Saiu do plano Mensal (R$ 600/loja) pro Anual (R$ 480/loja). Economia de 20%." },
    { date: "15/08/2025", type: "inicio", title: "Início do contrato DashM One", desc: "Onboarding realizado com 4 filiais. Plano Mensal R$ 600/loja." },
  ];
  const typeIcon = { upgrade: "arrow-up-right", addon: "plus-circle", expansao: "store", inicio: "rocket" };
  const typeColor = { upgrade: "var(--accent)", addon: "var(--accent-2)", expansao: "var(--warn)", inicio: "var(--pos)" };

  return (
    <div className="space-y-5">
      <div className="panel-hi p-6 relative overflow-hidden">
        <div className="absolute -top-12 -right-12 w-72 h-72 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative flex flex-wrap items-end justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" />
              <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Plano atual</span>
            </div>
            <h2 className="text-[28px] font-semibold tracking-tight flex items-center gap-3">
              DashM Studio
              <span className="badge badge-accent">sob medida</span>
            </h2>
            <p className="text-[12.5px] text-[var(--fg-muted)] mt-1">Próxima cobrança em 12/07 · R$ 12.000,00 (10 lojas)</p>
          </div>
          <div className="flex items-center gap-3">
            <Btn icon="history" onClick={() => setHistOpen(true)}>Histórico</Btn>
            <Btn
              variant="primary"
              icon="arrow-up-right"
              onClick={() => onChangePlan && onChangePlan()}
            >
              Mudar plano
            </Btn>
          </div>
        </div>
        <div className="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3 relative">
          <div className="p-3 rounded-lg bg-[var(--panel)] border border-[var(--border)]">
            <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Lojas</div>
            <div className="num text-[18px] font-semibold mt-0.5">10 lojas</div>
          </div>
          <div className="p-3 rounded-lg bg-[var(--panel)] border border-[var(--border)]">
            <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Usuários</div>
            <div className="num text-[18px] font-semibold mt-0.5">42 ativos</div>
          </div>
          <div className="p-3 rounded-lg bg-[var(--panel)] border border-[var(--border)]">
            <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Atualização</div>
            <div className="num text-[15px] font-semibold mt-0.5 text-[var(--accent)]">Tempo real</div>
          </div>
          <div className="p-3 rounded-lg bg-[var(--panel)] border border-[var(--border)]">
            <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Customizações ativas</div>
            <div className="num text-[18px] font-semibold mt-0.5">7</div>
          </div>
        </div>
      </div>

      <div className="panel overflow-hidden">
        <div className="px-5 py-4 border-b border-[var(--border)] flex items-center justify-between">
          <h3 className="font-semibold text-[14px]">Faturas recentes</h3>
          <Btn variant="ghost" icon="download">Exportar</Btn>
        </div>
        <table className="dm-table">
          <thead>
            <tr><th>Fatura</th><th>Data</th><th>Plano</th><th className="text-right">Valor</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {[
              { n: "INV-2026-0612", d: "12/06/2026", p: "Studio · 10 lojas", v: 12000, s: "rascunho", c: "warn" },
              { n: "INV-2026-0512", d: "12/05/2026", p: "Studio · 10 lojas", v: 12000, s: "pago", c: "pos" },
              { n: "INV-2026-0412", d: "12/04/2026", p: "Studio · 10 lojas", v: 12000, s: "pago", c: "pos" },
              { n: "INV-2026-0312", d: "12/03/2026", p: "Studio · 10 lojas", v: 12000, s: "pago", c: "pos" },
              { n: "INV-2026-0212", d: "12/02/2026", p: "Studio · 10 lojas", v: 12000, s: "pago", c: "pos" },
            ].map((i, k) => (
              <tr key={k}>
                <td className="font-mono text-[11px]">{i.n}</td>
                <td className="text-[12px] num font-mono">{i.d}</td>
                <td className="text-[12px]">{i.p}</td>
                <td className="text-right num font-mono font-semibold">{fmt.money(i.v)}</td>
                <td><span className={`badge badge-${i.c}`}>{i.s}</span></td>
                <td><Icon name="download" className="w-4 h-4 text-[var(--fg-faint)] hover:text-[var(--fg)] cursor-pointer" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Modal Histórico — timeline de mudanças de plano */}
      <Modal
        open={histOpen}
        onClose={() => setHistOpen(false)}
        title="Histórico do plano"
        maxWidth="max-w-2xl"
      >
        <div className="space-y-1">
          <p className="text-[12.5px] text-[var(--fg-muted)] mb-4">
            Linha do tempo de mudanças contratuais, upgrades, add-ons e expansões da sua conta.
          </p>
          <div className="relative pl-6 space-y-5">
            {/* Linha vertical da timeline */}
            <div className="absolute left-2 top-1.5 bottom-1.5 w-px bg-[var(--border)]" />
            {timeline.map((evt, i) => (
              <div key={i} className="relative">
                {/* Bola colorida do evento */}
                <div
                  className="absolute -left-[18px] top-0.5 w-4 h-4 rounded-full flex items-center justify-center text-white shadow-[0_2px_8px_-2px_rgba(0,0,0,0.3)]"
                  style={{ background: typeColor[evt.type], border: "2px solid var(--panel-hi)" }}
                >
                  <Icon name={typeIcon[evt.type]} className="w-2 h-2" strokeWidth={3} />
                </div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-[10.5px] uppercase tracking-wider font-semibold text-[var(--fg-faint)]">{evt.date}</span>
                  <span
                    className="badge text-[9px] uppercase"
                    style={{ color: typeColor[evt.type], borderColor: `color-mix(in oklch, ${typeColor[evt.type]} 40%, transparent)` }}
                  >
                    {evt.type}
                  </span>
                </div>
                <div className="text-[13px] font-semibold mb-0.5">{evt.title}</div>
                <div className="text-[11.5px] text-[var(--fg-muted)] leading-relaxed">{evt.desc}</div>
              </div>
            ))}
          </div>
          <div className="mt-5 pt-3 border-t border-[var(--border)] text-[10.5px] text-[var(--fg-faint)] text-center">
            Histórico desde 15/08/2025 · {timeline.length} eventos registrados
          </div>
        </div>
      </Modal>
    </div>
  );
}

function Toggle({ on, onChange }) {
  const [v, setV] = useState(on);
  return (
    <button
      onClick={() => { setV(!v); onChange && onChange(!v); }}
      className={`relative w-10 h-6 rounded-full transition-colors ${v ? "bg-[var(--accent)]" : "bg-[var(--border)]"}`}
      style={v ? { boxShadow: "0 0 12px var(--accent-glow)" } : {}}
    >
      <span className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all ${v ? "left-[18px]" : "left-0.5"}`} />
    </button>
  );
}

// ============================================================
// ADMIN — driven by parent (sidebar controls active tab)
// ============================================================
function AdminScreen({ adminTab = "plano", onAdminTab }) {
  const tab = adminTab;
  const setTab = onAdminTab || (() => {});
  const [contactOpen, setContactOpen] = useState(false);
  const [docOpen, setDocOpen] = useState(false);
  const toast = useToast();
  const titleMap = {
    plano: "Plano & Cobrança", integracoes: "Integrações", branding: "Branding",
    usuarios: "Usuários & permissões", seguranca: "Segurança", planosCatalog: "Catálogo de planos",
    acessos: "Dashboard de acessos",
  };
  const descMap = {
    plano: "Plano atual, faturas, uso e cobrança.",
    integracoes: "Conector do seu ERP, marketplaces, BI e webhooks.",
    branding: "Identidade visual, logo, paleta e domínio próprio.",
    usuarios: "Gerencie quem acessa, com qual papel e em qual escopo.",
    seguranca: "MFA, SSO, throttle, IP allowlist e auditoria.",
    planosCatalog: "Planos fixos, simulador personalizado e add-ons.",
    acessos: "Mapa de calor de uso, total de acessos e usuários ativos.",
  };

  return (
    <div className="space-y-6">
      {/* Tab header (no inline tab bar anymore — sidebar drives it) */}
      <div className="panel p-5 relative overflow-hidden">
        <div className="absolute -top-12 right-10 w-64 h-64 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none opacity-50" />
        <div className="relative flex items-end justify-between flex-wrap gap-3">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" />
              <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Painel administrativo</span>
              <span className="badge">Tenant Demo · Owner</span>
            </div>
            <h2 className="text-[22px] font-semibold tracking-tight">{titleMap[tab]}</h2>
            <p className="text-[12.5px] text-[var(--fg-muted)] mt-1 max-w-2xl">{descMap[tab]}</p>
          </div>
          <div className="flex items-center gap-2">
            <Btn icon="book-open" onClick={() => setDocOpen(true)}>Documentação</Btn>
            <Btn icon="life-buoy" onClick={() => setContactOpen(true)}>Suporte</Btn>
          </div>
        </div>
      </div>

      {/* Modal Documentação — drawer leve com tópicos linkáveis */}
      <Modal
        open={docOpen}
        onClose={() => setDocOpen(false)}
        title="Documentação DashM"
        maxWidth="max-w-2xl"
      >
        <div className="space-y-1">
          <p className="text-[12.5px] text-[var(--fg-muted)] mb-3">
            Guias rápidos pra cada área do produto. Clique em um tópico pra abrir o artigo completo.
          </p>
          {[
            { icon: "rocket", title: "Primeiros passos", desc: "Setup inicial, convidar time, configurar branding", count: 8 },
            { icon: "store", title: "Configurar filiais e usuários", desc: "Criar lojas, definir papéis e escopo de acesso", count: 12 },
            { icon: "plug", title: "Conectar o seu ERP", desc: "Token, webhook, sincronização de catálogo e vendas", count: 6 },
            { icon: "bar-chart-3", title: "Entender Visão Geral e KPIs", desc: "Vendas, TKM, PA, MKP — o que cada métrica significa", count: 14 },
            { icon: "line-chart", title: "Previsão de vendas com IA", desc: "Modelos Ensemble/Prophet/XGBoost, drivers, recalcular", count: 7 },
            { icon: "shield-alert", title: "Ruptura e cobertura", desc: "Alertas, regras automáticas, geração de pedidos", count: 9 },
            { icon: "shopping-cart", title: "OTB e Carteira de pedidos", desc: "Planejamento de compras integrado à previsão", count: 11 },
            { icon: "palette", title: "Branding e white-label", desc: "Logo, paleta, domínio próprio, e-mails customizados", count: 5 },
          ].map((topic) => (
            <button
              key={topic.title}
              onClick={() => toast({ tone: "info", title: topic.title, desc: "Abrindo artigo no portal de documentação." })}
              className="w-full flex items-center gap-3 p-3 rounded-lg border border-[var(--border)] hover:border-[var(--accent)] hover:bg-[var(--accent-soft)] transition-colors text-left"
            >
              <div className="w-9 h-9 rounded-lg bg-[var(--accent-soft)] text-[var(--accent)] flex items-center justify-center shrink-0">
                <Icon name={topic.icon} className="w-4 h-4" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[13px] font-semibold">{topic.title}</div>
                <div className="text-[11px] text-[var(--fg-muted)] truncate">{topic.desc}</div>
              </div>
              <span className="text-[10.5px] text-[var(--fg-faint)] whitespace-nowrap">{topic.count} artigos</span>
              <Icon name="arrow-right" className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
            </button>
          ))}
          <div className="mt-4 pt-3 border-t border-[var(--border)] flex items-center justify-between">
            <span className="text-[11px] text-[var(--fg-muted)]">Não achou o que precisa?</span>
            <Btn icon="life-buoy" onClick={() => { setDocOpen(false); setContactOpen(true); }}>Falar com suporte</Btn>
          </div>
        </div>
      </Modal>

      {/* ContactDialog universal (mesmo do PlanosPage) — Suporte usa pra abrir Whats ou form */}
      <ContactDialog
        open={contactOpen}
        onClose={() => setContactOpen(false)}
        context="suporte"
        title="Suporte DashM"
        whatsappMessage="Olá! Sou cliente DashM (Tenant Demo) e preciso de suporte com..."
      />

      {tab === "plano"         && <BillingTab onChangePlan={() => setTab("planosCatalog")} />}
      {tab === "acessos"       && <AcessosTab />}
      {tab === "integracoes"   && <IntegracoesTab />}
      {tab === "branding"      && <BrandingTab />}
      {tab === "usuarios"      && <UsuariosTab />}
      {tab === "seguranca"     && <SegurancaTab />}
      {tab === "planosCatalog" && <PlanosScreen />}
    </div>
  );
}

Object.assign(window, { PlanosScreen, ConfigScreen, AdminScreen, Toggle, SimuladorLojas, AcessosTab });

// ============================================================
// ACESSOS — usage dashboard with heatmap (hour × weekday)
// ============================================================
function AcessosTab() {
  const [range, setRange] = useState("30d");
  const RANGES = [
    { id: "7d",  label: "7 dias" },
    { id: "30d", label: "30 dias" },
    { id: "90d", label: "90 dias" },
    { id: "ytd", label: "YTD" },
    { id: "custom", label: "Personalizado" },
  ];

  // Mock data
  const weekdays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
  // Heatmap: 7 weekdays × 24 hours, value = accesses count
  const heatmap = Array.from({ length: 7 }, (_, d) =>
    Array.from({ length: 24 }, (_, h) => {
      const isWeekend = d === 0 || d === 6;
      const isBusinessHour = h >= 8 && h <= 20;
      const isPeak = h >= 10 && h <= 12 || h >= 14 && h <= 17;
      let base = 0;
      if (isBusinessHour) base = isPeak ? 75 : 35;
      if (isWeekend) base = isBusinessHour ? base * 0.35 : 4;
      if (h < 6 || h > 22) base = Math.max(0, base * 0.1);
      // Add deterministic variance
      const noise = (Math.sin(d * 1.3 + h * 0.7) * 12 + Math.cos(h * 0.4) * 8);
      return Math.max(0, Math.round(base + noise));
    })
  );
  const maxVal = Math.max(...heatmap.flat());

  // Daily access trend (30d)
  const dailyTrend = Array.from({ length: 30 }, (_, i) => {
    const dow = (new Date().getDay() - 30 + i + 7 * 5) % 7;
    const weekend = dow === 0 || dow === 6;
    return weekend ? 80 + Math.sin(i) * 18 : 240 + Math.sin(i * 0.8) * 60 + Math.cos(i * 0.3) * 30;
  }).map((v) => Math.max(0, Math.round(v)));

  // Top users by accesses
  const topUsers = [
    { nome: "Operador A", role: "Owner",   acessos: 412, sessoes: 184, last: "2 min" },
    { nome: "Operador C", role: "Admin",   acessos: 326, sessoes: 142, last: "8 min" },
    { nome: "Operador B", role: "Admin",   acessos: 298, sessoes: 128, last: "1h" },
    { nome: "Operador D", role: "Gerente", acessos: 218, sessoes: 96,  last: "3h" },
    { nome: "Operador F", role: "Gerente", acessos: 192, sessoes: 88,  last: "15 min" },
    { nome: "Operador G", role: "Analista",acessos: 168, sessoes: 72,  last: "2h" },
    { nome: "Operador E", role: "Operador",acessos: 142, sessoes: 58,  last: "30 min" },
  ];

  // Top accessed screens
  const topScreens = [
    { tela: "Home",                acessos: 1842, pct: 22 },
    { tela: "Visão Geral",         acessos: 1245, pct: 15 },
    { tela: "Análise de Produtos", acessos: 982,  pct: 12 },
    { tela: "Fechamento do Dia",   acessos: 867,  pct: 10 },
    { tela: "Carteira de Pedidos", acessos: 642,  pct: 8 },
    { tela: "Campanhas",           acessos: 481,  pct: 6 },
    { tela: "Alertas Reposição",   acessos: 412,  pct: 5 },
    { tela: "Ruptura & Cobertura", acessos: 386,  pct: 5 },
  ];

  // Devices breakdown
  const devices = [
    { tipo: "Desktop", pct: 64, count: 5421, icon: "monitor", color: "var(--accent)" },
    { tipo: "Mobile",  pct: 28, count: 2374, icon: "smartphone", color: "var(--accent-2)" },
    { tipo: "Tablet",  pct: 8,  count: 678, icon: "tablet", color: "var(--pink)" },
  ];

  const totalAcessos = 8473;
  const usuariosAtivos = 38;
  const sessionMedia = 14.2;
  const adoption = 90;

  const heatColor = (v) => {
    const intensity = v / maxVal;
    if (intensity < 0.1) return "var(--panel-2)";
    if (intensity < 0.25) return "color-mix(in oklch, var(--accent) 12%, var(--panel-2))";
    if (intensity < 0.50) return "color-mix(in oklch, var(--accent) 28%, var(--panel-2))";
    if (intensity < 0.75) return "color-mix(in oklch, var(--accent) 50%, var(--panel-2))";
    return "color-mix(in oklch, var(--accent) 75%, var(--panel-2))";
  };

  return (
    <div className="space-y-5">
      {/* Period selector */}
      <div className="panel p-3 flex items-center gap-2 flex-wrap">
        <Icon name="calendar-range" className="w-4 h-4 text-[var(--fg-muted)] ml-1" />
        <div className="inline-flex p-0.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] gap-0.5">
          {RANGES.map((r) => (
            <button
              key={r.id}
              onClick={() => setRange(r.id)}
              className={`px-3 py-1 text-[11.5px] font-medium rounded-md transition-all ${range === r.id ? "bg-[var(--panel-hi)] text-[var(--fg)] shadow-[var(--shadow-sm)]" : "text-[var(--fg-muted)] hover:text-[var(--fg)]"}`}
            >
              {r.label}
            </button>
          ))}
        </div>
        {range === "custom" && (
          <div className="flex items-center gap-2 ml-2">
            <input type="date" defaultValue="2026-05-01" className="input py-1.5 text-[11.5px] w-[140px]" />
            <span className="text-[var(--fg-faint)]">→</span>
            <input type="date" defaultValue="2026-05-26" className="input py-1.5 text-[11.5px] w-[140px]" />
          </div>
        )}
        <div className="flex-1" />
        <Btn icon="download">Exportar</Btn>
      </div>

      {/* KPI strip */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <KPI label="Total de acessos"    icon="activity"   value={totalAcessos} delta={18.4} compact format="int" accent />
        <KPI label="Usuários ativos"     icon="user-check" value={usuariosAtivos} delta={6.2} compact format="int" />
        <KPI label="Sessão média"        icon="clock"      value="14m 12s" delta={4.8} compact />
        <KPI label="Adoção do plano"     icon="trending-up" value="90%" delta={11.4} compact info={{ title: "Adoção", desc: "Usuários ativos ÷ total de licenças do tenant." }} />
      </div>

      {/* Heatmap — hour × weekday */}
      <div className="panel p-5">
        <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
          <div>
            <h3 className="font-semibold text-[15px] flex items-center gap-2"><Icon name="layout-grid" className="w-4 h-4 text-[var(--accent)]" /> Mapa de calor · hora × dia da semana</h3>
            <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Distribuição dos acessos · pico de uso em dias úteis 10–17h</p>
          </div>
          <div className="flex items-center gap-2 text-[10.5px] text-[var(--fg-muted)]">
            <span>menos</span>
            <div className="flex gap-0.5">
              {[0, 0.2, 0.4, 0.6, 0.8].map((i, idx) => (
                <div key={idx} className="w-4 h-4 rounded-sm border border-[var(--border-soft)]" style={{ background: heatColor(i * maxVal) }} />
              ))}
            </div>
            <span>mais</span>
          </div>
        </div>

        <div className="overflow-x-auto">
          <div className="inline-block min-w-full">
            {/* Hour labels */}
            <div className="flex gap-0.5 pl-12 mb-1">
              {Array.from({ length: 24 }, (_, h) => (
                <div key={h} className="w-7 text-[8.5px] font-mono text-[var(--fg-faint)] text-center">{h % 3 === 0 ? `${h}h` : ""}</div>
              ))}
            </div>
            {/* Rows */}
            {heatmap.map((row, d) => (
              <div key={d} className="flex gap-0.5 items-center mb-0.5">
                <div className="w-10 shrink-0 text-[10px] font-semibold text-[var(--fg-muted)] uppercase">{weekdays[d]}</div>
                <div className="flex gap-0.5">
                  {row.map((v, h) => (
                    <Tooltip
                      key={h}
                      width={200}
                      content={
                        <div>
                          <div className="font-semibold text-[12px] mb-1">{weekdays[d]} · {h.toString().padStart(2, "0")}h</div>
                          <div className="text-[var(--fg-muted)]">
                            <div className="num font-mono text-[14px] font-semibold text-[var(--fg)]">{v}</div>
                            acessos neste horário
                          </div>
                        </div>
                      }
                    >
                      <div
                        className="w-7 h-7 rounded-sm border border-[var(--border-soft)] cursor-help transition-transform hover:scale-110"
                        style={{ background: heatColor(v) }}
                      />
                    </Tooltip>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-4 pt-4 border-t border-[var(--border)] grid grid-cols-1 md:grid-cols-3 gap-3 text-[11.5px]">
          <div className="flex items-center gap-2">
            <Icon name="trending-up" className="w-3.5 h-3.5 text-[var(--pos)]" />
            <span><span className="font-semibold">Quarta-feira</span> é o dia mais ativo · <span className="num font-mono">1.142</span> acessos</span>
          </div>
          <div className="flex items-center gap-2">
            <Icon name="clock" className="w-3.5 h-3.5 text-[var(--accent)]" />
            <span>Pico entre <span className="font-semibold">14h–17h</span> · 38% dos acessos</span>
          </div>
          <div className="flex items-center gap-2">
            <Icon name="moon" className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
            <span>Apenas <span className="num font-mono">4%</span> de uso fora do horário comercial</span>
          </div>
        </div>
      </div>

      {/* Daily trend + Devices side by side */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.6fr_1fr] gap-5">
        <div className="panel p-5 chart-bg">
          <div className="flex items-center justify-between mb-3">
            <div>
              <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="line-chart" className="w-4 h-4 text-[var(--accent)]" /> Tendência diária</h3>
              <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Acessos por dia · últimos 30 dias</p>
            </div>
            <div className="flex items-center gap-3 text-[11px]">
              <Delta value={18.4} />
              <span className="text-[var(--fg-muted)]">vs. período anterior</span>
            </div>
          </div>
          <LineChart
            labels={dailyTrend.map((_, i) => i % 5 === 0 ? `D-${30 - i}` : "")}
            series={[{ name: "Acessos", data: dailyTrend, color: "var(--accent)" }]}
            height={200}
            formatY={(v) => fmt.int(v)}
          />
        </div>

        <div className="panel p-5">
          <h3 className="font-semibold text-[14px] flex items-center gap-2 mb-3"><Icon name="laptop" className="w-4 h-4 text-[var(--fg-muted)]" /> Dispositivos</h3>
          <div className="flex h-3 rounded-full overflow-hidden border border-[var(--border)] mb-4">
            {devices.map((d) => (
              <div key={d.tipo} style={{ width: `${d.pct}%`, background: d.color }} title={d.tipo} />
            ))}
          </div>
          <div className="space-y-2">
            {devices.map((d) => (
              <div key={d.tipo} className="flex items-center gap-3">
                <Icon name={d.icon} className="w-4 h-4 text-[var(--fg-muted)]" />
                <div className="flex-1 text-[12.5px] font-medium">{d.tipo}</div>
                <div className="num font-mono text-[11.5px] text-[var(--fg-muted)]">{fmt.int(d.count)}</div>
                <div className="num font-mono text-[12.5px] font-semibold w-10 text-right" style={{ color: d.color }}>{d.pct}%</div>
              </div>
            ))}
          </div>
          <div className="mt-4 pt-3 border-t border-[var(--border-soft)] text-[11px] text-[var(--fg-muted)]">
            <span className="text-[var(--accent)] font-semibold">+12% mobile</span> em relação ao mês anterior — adoção da versão mobile crescendo.
          </div>
        </div>
      </div>

      {/* Top users + Top screens */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        <div className="panel overflow-hidden">
          <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center justify-between">
            <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="users" className="w-4 h-4 text-[var(--fg-muted)]" /> Usuários mais ativos</h3>
            <Btn variant="ghost" icon="external-link">Ver todos</Btn>
          </div>
          <table className="dm-table">
            <thead>
              <tr>
                <th>Usuário</th>
                <th>Papel</th>
                <th className="text-right">Acessos</th>
                <th className="text-right">Sessões</th>
                <th className="text-right">Última</th>
              </tr>
            </thead>
            <tbody>
              {topUsers.map((u, i) => (
                <tr key={i}>
                  <td>
                    <div className="flex items-center gap-2">
                      <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-[10px] font-semibold text-white">{u.nome.split(" ")[1][0]}</div>
                      <span className="text-[12.5px] font-medium">{u.nome}</span>
                    </div>
                  </td>
                  <td><span className={`badge ${u.role === "Owner" ? "badge-accent" : u.role === "Admin" ? "badge-violet" : ""}`}>{u.role}</span></td>
                  <td className="text-right num font-mono font-semibold">{u.acessos}</td>
                  <td className="text-right num font-mono">{u.sessoes}</td>
                  <td className="text-right num font-mono text-[11px] text-[var(--fg-muted)]">{u.last}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel overflow-hidden">
          <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center justify-between">
            <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="layout-dashboard" className="w-4 h-4 text-[var(--fg-muted)]" /> Telas mais acessadas</h3>
            <span className="text-[10px] text-[var(--fg-faint)] uppercase tracking-wider">total {fmt.int(totalAcessos)}</span>
          </div>
          <div className="p-2">
            {topScreens.map((s, i) => (
              <div key={s.tela} className="flex items-center gap-3 px-3 py-2.5">
                <span className="text-[10px] font-mono w-5 text-[var(--fg-faint)]">{(i + 1).toString().padStart(2, "0")}</span>
                <div className="flex-1 min-w-0">
                  <div className="text-[12.5px] font-medium">{s.tela}</div>
                  <div className="mt-1"><Progress value={s.pct} max={25} height={4} color="var(--accent)" /></div>
                </div>
                <div className="text-right shrink-0">
                  <div className="num font-mono text-[12px] font-semibold">{fmt.int(s.acessos)}</div>
                  <div className="num font-mono text-[10px] text-[var(--fg-faint)]">{s.pct}%</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SIMULADOR DE PLANO — interactive calculator
// ============================================================
function SimuladorPlano() {
  const [lojas, setLojas] = useState(5);
  const [users, setUsers] = useState(15);
  const [freq, setFreq] = useState("hora");          // diaria | hora | 15min | streaming
  const [billing, setBilling] = useState("anual");   // mensal | anual
  const [addons, setAddons] = useState({ consultoria: true, ecommerce: false, ssoSaml: false, treinamento: false });
  const [modules, setModules] = useState({ forecast: true, ruptura: true, otb: true, mobile: true, abc: true, calendar: true, campanhas: false });
  const toast = useToast();

  // Pricing rules
  const BASE = 390;              // platform base
  const PER_LOJA = 290;          // each loja
  const PER_5_USERS = 75;        // each 5 users above 5 included
  const FREQ_MULT = { diaria: 0, hora: 80, "15min": 220, streaming: 480 };
  const MODULE_PRICE = {
    forecast: 320, ruptura: 280, otb: 240, mobile: 180,
    abc: 120, calendar: 90, campanhas: 220,
  };
  const ADDONS = [
    { id: "consultoria", nome: "Consultoria estratégica",    desc: "Análise mensal com recomendações de negócio", price: 1200, kind: "mensal", icon: "compass" },
    { id: "ecommerce",   nome: "Integração com e-commerce",  desc: "Sync de pedidos online (Shopify, VTEX, Tiny…)", price: 200, setup: 1500, kind: "mensal", icon: "globe" },
    { id: "ssoSaml",     nome: "SSO Enterprise (SAML/OIDC)", desc: "Login corporativo unificado",                  price: 390, kind: "mensal", icon: "shield-check" },
    { id: "treinamento", nome: "Treinamento presencial",     desc: "Sessão de 4h em Ponta Grossa",                 price: 800, kind: "one-time", icon: "graduation-cap" },
  ];

  // Calculation
  const lojaCost  = lojas * PER_LOJA;
  const userBaseIncluded = 5;
  const extraUsers = Math.max(0, users - userBaseIncluded);
  const userCost  = Math.ceil(extraUsers / 5) * PER_5_USERS;
  const freqCost  = FREQ_MULT[freq];
  const moduleIds = Object.keys(modules).filter((k) => modules[k]);
  const moduleCost = moduleIds.reduce((acc, k) => acc + MODULE_PRICE[k], 0);
  const subtotal = BASE + lojaCost + userCost + freqCost + moduleCost;
  const addonsMensal = ADDONS.filter((a) => addons[a.id] && a.kind === "mensal").reduce((acc, a) => acc + a.price, 0);
  const addonsOneTime = ADDONS.filter((a) => addons[a.id] && a.kind === "one-time").reduce((acc, a) => acc + a.price, 0);
  const addonsSetup = ADDONS.filter((a) => addons[a.id] && a.setup).reduce((acc, a) => acc + a.setup, 0);

  const totalMensal = subtotal + addonsMensal;
  const totalAnual = totalMensal * 0.80; // 20% off

  const finalMonth = billing === "anual" ? totalAnual : totalMensal;

  // Suggested plan match
  const suggested = lojas <= 1 && users <= 5 ? "Essencial"
                  : lojas <= 3 && users <= 15 ? "Profissional"
                  : lojas <= 6 && users <= 30 ? "Avançado"
                  : "Enterprise";

  const toggleAddon = (id) => setAddons((a) => ({ ...a, [id]: !a[id] }));
  const toggleModule = (id) => setModules((m) => ({ ...m, [id]: !m[id] }));

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-5">
        {/* LEFT — controls */}
        <div className="space-y-5">
          {/* Lojas + Usuários */}
          <div className="panel p-5">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              <CounterControl
                label="Quantas lojas?"
                value={lojas}
                onChange={setLojas}
                min={1} max={20}
                hint={`R$ ${PER_LOJA}/mês cada loja`}
                icon="store"
              />
              <CounterControl
                label="Quantos usuários?"
                value={users}
                onChange={setUsers}
                min={1} max={100}
                hint={`Primeiros 5 inclusos · R$ ${PER_5_USERS}/mês a cada 5 adicionais`}
                icon="users"
                markers={[1, 5, 15, 30, 100]}
              />
            </div>
          </div>

          {/* Frequência de atualização */}
          <div className="panel p-5">
            <div className="flex items-center justify-between mb-3">
              <div>
                <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="zap" className="w-4 h-4 text-[var(--accent)]" /> Frequência de atualização</h3>
                <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Quanto mais rápido, mais perto do tempo real — também impacta o preço</p>
              </div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
              {[
                { id: "diaria",    label: "Diária",     desc: "uma vez por dia",       extra: 0 },
                { id: "hora",      label: "Horária",    desc: "60× por dia",            extra: FREQ_MULT.hora },
                { id: "15min",     label: "15 min",     desc: "operação ao vivo",       extra: FREQ_MULT["15min"] },
                { id: "streaming", label: "Sub-minuto", desc: "stream direto do ERP",  extra: FREQ_MULT.streaming },
              ].map((f) => (
                <button
                  key={f.id}
                  onClick={() => setFreq(f.id)}
                  className={`p-3 rounded-xl border text-left transition-colors ${freq === f.id ? "border-[var(--accent)] bg-[var(--accent-soft)]" : "border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--fg-faint)]"}`}
                >
                  <div className="text-[12.5px] font-medium">{f.label}</div>
                  <div className="text-[10px] text-[var(--fg-muted)] mt-0.5">{f.desc}</div>
                  <div className="text-[10px] text-[var(--accent)] font-mono mt-1.5">{f.extra === 0 ? "incluso" : `+ R$ ${f.extra}/mês`}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Módulos */}
          <div className="panel p-5">
            <div className="flex items-center justify-between mb-3">
              <div>
                <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="layers" className="w-4 h-4 text-[var(--accent)]" /> Módulos · {moduleIds.length} ativos</h3>
                <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Marque o que sua operação precisa hoje · pode ativar/desativar depois</p>
              </div>
              <span className="num font-mono text-[12px] text-[var(--accent)] font-semibold">+ R$ {moduleCost}/mês</span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2.5">
              {[
                { id: "forecast",  nome: "Previsão de Vendas",  desc: "Forecast 4–12 semanas",        icon: "line-chart" },
                { id: "ruptura",   nome: "Ruptura & Cobertura", desc: "Heatmap por filial",            icon: "shield-alert" },
                { id: "otb",       nome: "Open to Buy (OTB)",   desc: "Planejamento de compras",       icon: "shopping-cart" },
                { id: "mobile",    nome: "Versão mobile",       desc: "App responsivo + push",         icon: "smartphone" },
                { id: "abc",       nome: "Curva ABC",            desc: "Pareto de receita",             icon: "layers" },
                { id: "calendar",  nome: "Calendário de meta",  desc: "Heatmap diário de aderência",   icon: "calendar-days" },
                { id: "campanhas", nome: "Campanhas",            desc: "Tracking de execução",          icon: "megaphone" },
              ].map((m) => {
                const on = modules[m.id];
                return (
                  <button
                    key={m.id}
                    onClick={() => toggleModule(m.id)}
                    className={`p-3 rounded-xl border text-left transition-colors flex items-start gap-2.5 ${on ? "border-[var(--accent)] bg-[var(--accent-soft)]" : "border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--fg-faint)]"}`}
                  >
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${on ? "bg-[var(--accent)] text-[#00282d]" : "bg-[var(--panel)] text-[var(--fg-muted)] border border-[var(--border)]"}`}>
                      <Icon name={on ? "check" : m.icon} className="w-4 h-4" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-[12.5px] font-medium">{m.nome}</div>
                      <div className="text-[10px] text-[var(--fg-muted)]">{m.desc}</div>
                      <div className="text-[10px] font-mono mt-1" style={{ color: on ? "var(--accent)" : "var(--fg-faint)" }}>R$ {MODULE_PRICE[m.id]}/mês</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Add-ons */}
          <div className="panel p-5">
            <div className="flex items-center justify-between mb-3">
              <div>
                <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="puzzle" className="w-4 h-4 text-[var(--accent)]" /> Complementos opcionais</h3>
                <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">{ADDONS.filter(a => addons[a.id]).length} ativos</p>
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
              {ADDONS.map((a) => {
                const on = addons[a.id];
                return (
                  <button
                    key={a.id}
                    onClick={() => toggleAddon(a.id)}
                    className={`p-3 rounded-xl border text-left transition-colors ${on ? "border-[var(--accent)] bg-[var(--accent-soft)]" : "border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--fg-faint)]"}`}
                  >
                    <div className="flex items-center justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <Icon name={a.icon} className={`w-3.5 h-3.5 ${on ? "text-[var(--accent)]" : "text-[var(--fg-muted)]"}`} />
                        <span className="text-[12.5px] font-medium">{a.nome}</span>
                      </div>
                      <div className={`w-5 h-5 rounded border flex items-center justify-center shrink-0 ${on ? "bg-[var(--accent)] border-[var(--accent)]" : "border-[var(--border)] bg-[var(--panel)]"}`}>
                        {on && <Icon name="check" className="w-3 h-3 text-[#00282d]" />}
                      </div>
                    </div>
                    <div className="text-[10.5px] text-[var(--fg-muted)] mb-1.5 leading-snug">{a.desc}</div>
                    <div className="text-[10.5px] font-mono text-[var(--accent)] font-semibold">
                      R$ {a.price}{a.kind === "mensal" ? "/mês" : " (one-time)"}
                      {a.setup && <span className="text-[var(--fg-faint)] font-normal ml-1">+ setup R$ {a.setup}</span>}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* RIGHT — sticky summary */}
        <div className="space-y-4">
          <div className="sticky top-4 space-y-3">
            <div className="panel-hi p-5 relative overflow-hidden">
              <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
              <div className="relative">
                <div className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold mb-1">Plano recomendado</div>
                <div className="text-[20px] font-semibold tracking-tight">{suggested}</div>

                {/* Billing toggle */}
                <div className="mt-3 inline-flex p-0.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] gap-0.5">
                  <button onClick={() => setBilling("mensal")} className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${billing === "mensal" ? "bg-[var(--panel-hi)] text-[var(--fg)] shadow-[var(--shadow-sm)]" : "text-[var(--fg-muted)]"}`}>Mensal</button>
                  <button onClick={() => setBilling("anual")} className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all flex items-center gap-1 ${billing === "anual" ? "bg-[var(--panel-hi)] text-[var(--fg)] shadow-[var(--shadow-sm)]" : "text-[var(--fg-muted)]"}`}>
                    Anual <span className="text-[var(--accent)] font-mono">-20%</span>
                  </button>
                </div>

                <div className="mt-4 flex items-baseline gap-1.5">
                  <span className="text-[14px] text-[var(--fg-muted)]">R$</span>
                  <span className="num text-[36px] font-semibold tracking-tight leading-none">{new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 0 }).format(Math.round(finalMonth))}</span>
                  <span className="text-[12px] text-[var(--fg-muted)]">/ mês</span>
                </div>
                {billing === "anual" && (
                  <div className="text-[10.5px] text-[var(--fg-faint)] mt-1">
                    cobrado anualmente · economiza <span className="text-[var(--accent)] font-semibold num">R$ {new Intl.NumberFormat("pt-BR").format(Math.round((totalMensal - totalAnual) * 12))}/ano</span>
                  </div>
                )}
                {addonsOneTime > 0 && (
                  <div className="text-[10.5px] text-[var(--fg-faint)] mt-1">
                    + R$ {new Intl.NumberFormat("pt-BR").format(addonsOneTime + addonsSetup)} one-time
                  </div>
                )}

                <button
                  onClick={() => toast.push({ kind: "success", title: "Proposta enviada", desc: "Nosso time vai entrar em contato em até 1 dia útil." })}
                  className="btn btn-primary w-full justify-center mt-4"
                >
                  <Icon name="send" className="w-4 h-4" />
                  Enviar proposta personalizada
                </button>
                <button className="btn btn-ghost w-full justify-center mt-2 text-[11.5px]">
                  <Icon name="file-text" className="w-3.5 h-3.5" />
                  Baixar PDF do orçamento
                </button>
              </div>
            </div>

            {/* Breakdown */}
            <div className="panel p-4">
              <div className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold mb-2.5">Composição</div>
              <div className="space-y-1.5 text-[11.5px]">
                <BkRow label="Base da plataforma" value={BASE} />
                <BkRow label={`${lojas} loja${lojas > 1 ? "s" : ""} × R$ ${PER_LOJA}`} value={lojaCost} />
                {userCost > 0 && <BkRow label={`+ ${extraUsers} usuários adicionais`} value={userCost} />}
                {freqCost > 0 && <BkRow label={`Frequência ${freq}`} value={freqCost} />}
                {moduleIds.length > 0 && <BkRow label={`${moduleIds.length} módulos ativos`} value={moduleCost} />}
                {addonsMensal > 0 && <BkRow label="Add-ons (mensal)" value={addonsMensal} />}
                <div className="border-t border-[var(--border)] pt-2 mt-2">
                  <BkRow label="Subtotal mensal" value={totalMensal} strong />
                  {billing === "anual" && <BkRow label="Desconto anual (-20%)" value={totalMensal - totalAnual} neg />}
                  <BkRow label="Total cobrado/mês" value={finalMonth} highlight />
                </div>
              </div>
            </div>

            <div className="panel p-4">
              <div className="flex items-center gap-2 mb-1.5">
                <Icon name="check-circle-2" className="w-3.5 h-3.5 text-[var(--pos)]" />
                <span className="text-[11.5px] font-semibold">Setup, treinamento e onboarding inclusos</span>
              </div>
              <div className="text-[10.5px] text-[var(--fg-muted)] leading-snug">
                Tudo o que você precisa pra começar já está no preço — sem boleto extra de implantação.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CounterControl({ label, value, onChange, min, max, hint, icon, markers }) {
  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <div className="text-[10.5px] uppercase tracking-wider font-semibold text-[var(--fg-muted)] flex items-center gap-1.5">
          {icon && <Icon name={icon} className="w-3 h-3" />} {label}
        </div>
      </div>
      <div className="flex items-center gap-3">
        <button onClick={() => onChange(Math.max(min, value - 1))} className="w-10 h-10 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] hover:bg-[var(--panel-hi)] flex items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)]">
          <Icon name="minus" className="w-4 h-4" />
        </button>
        <input
          type="number"
          min={min} max={max}
          value={value}
          onChange={(e) => onChange(Math.max(min, Math.min(max, +e.target.value || min)))}
          className="flex-1 text-center text-[28px] font-semibold tracking-tight num bg-transparent border-0 focus:outline-none"
        />
        <button onClick={() => onChange(Math.min(max, value + 1))} className="w-10 h-10 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] hover:bg-[var(--panel-hi)] flex items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)]">
          <Icon name="plus" className="w-4 h-4" />
        </button>
      </div>
      <input
        type="range"
        min={min} max={max}
        value={value}
        onChange={(e) => onChange(+e.target.value)}
        className="neon w-full mt-3"
      />
      {markers && (
        <div className="flex justify-between text-[9px] text-[var(--fg-faint)] font-mono mt-1.5 px-1">
          {markers.map((m) => <span key={m}>{m}</span>)}
        </div>
      )}
      {hint && <div className="text-[10px] text-[var(--fg-faint)] mt-1.5">{hint}</div>}
    </div>
  );
}

function BkRow({ label, value, strong, highlight, neg }) {
  return (
    <div className={`flex justify-between gap-3 ${strong ? "font-semibold" : ""} ${highlight ? "text-[14px] mt-1" : ""}`}>
      <span className={highlight ? "" : "text-[var(--fg-muted)]"}>{label}</span>
      <span className={`num font-mono ${highlight ? "text-[var(--accent)] font-semibold" : neg ? "text-[var(--pos)]" : ""}`}>
        {neg ? "−" : ""}R$ {new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 0 }).format(Math.round(value))}
      </span>
    </div>
  );
}