// ===== Comparativo de planos detalhado =====

const COMP_PLANS  = ["Primeira", "Em Marcha", "Veterano", "Assessoria"];
const COMP_PRICES = ["R$ 49",     "R$ 197",    "R$ 497",    "R$ 1.497"];

const COMP_SECTIONS = [
  {
    title: "Análise de editais",
    items: [
      ["Editais analisados por mês",       "3",          "Ilimitado",  "Ilimitado", "Ilimitado"],
      ["Diagnóstico de prontidão",         true,         true,         true,        true],
      ["Score de match (0-100)",           true,         true,         true,        true],
      ["Score de vitória com ML",          false,        false,        true,        true],
      ["Comparativo histórico PNCP",       false,        "Básico",     "Completo",  "Completo"],
    ],
  },
  {
    title: "Agentes IA",
    items: [
      ["Coach (Sonnet 4.5)",               true,         true,         true,        true],
      ["Documentalista (Haiku 4.5)",       true,         true,         true,        true],
      ["Caça-Editais (Haiku 4.5)",         "1 termo",    "Ilimitado",  "Ilimitado", "Ilimitado"],
      ["Analista (Sonnet 4.5)",            false,        true,         true,        true],
      ["Jurídico (Sonnet 4.5)",            false,        "Básico",     "RAG TCU",   "RAG TCU"],
      ["Financeiro (Sonnet 4.5)",          false,        "BDI fixo",   "BDI dinâm.","BDI dinâm."],
    ],
  },
  {
    title: "Cofre & documentos",
    items: [
      ["Cofre de certidões",               true,         true,         true,        true],
      ["Alertas 30/15/7/1 dias",           true,         true,         true,        true],
      ["Emissão automática (gov.br)",      false,        true,         true,        true],
      ["Armazenamento",                    "1 GB",       "10 GB",      "50 GB",     "200 GB"],
    ],
  },
  {
    title: "Peças jurídicas",
    items: [
      ["Impugnações/recursos",             false,        "Básico",     "Avançado",  "Avançado"],
      ["Esclarecimentos",                  false,        true,         true,        true],
      ["Revisão jurídica humana",          false,        false,        "Opcional",  "Inclusa"],
      ["Modelos personalizados",           false,        false,        true,        true],
    ],
  },
  {
    title: "Pós-vitória (F13)",
    items: [
      ["Cockpit pós-vitória",              false,        false,        true,        true],
      ["Inteligência financeira do órgão", false,        false,        true,        true],
      ["Antecipação de recebíveis",        false,        false,        true,        true],
      ["Auditoria de pagamento (SIAFI)",   false,        false,        true,        true],
    ],
  },
  {
    title: "Multi-CNPJ & gestão",
    items: [
      ["CNPJs por conta",                  "1",          "Até 3",      "Até 10",    "Até 15"],
      ["Usuários por conta",               "1",          "Até 3",      "Até 10",    "Ilimitado"],
      ["Dashboard multi-cliente",          false,        false,        false,       true],
      ["White-label",                      false,        false,        false,       "Opcional"],
    ],
  },
  {
    title: "Integrações",
    items: [
      ["gov.br SSO",                       true,         true,         true,        true],
      ["API REST",                         false,        false,        true,        true],
      ["Webhooks",                         false,        false,        true,        true],
      ["Slack / Teams",                    false,        true,         true,        true],
      ["Zapier / Make",                    false,        false,        true,        true],
    ],
  },
  {
    title: "Suporte",
    items: [
      ["Central de ajuda",                 true,         true,         true,        true],
      ["E-mail",                           "48h",        "24h",        "8h",        "2h"],
      ["WhatsApp prioritário",             false,        false,        true,        true],
      ["Customer Success dedicado",        false,        false,        false,       true],
      ["SLA contratual",                   false,        false,        "99,5%",     "99,9%"],
    ],
  },
  {
    title: "Segurança & compliance",
    items: [
      ["LGPD nativa",                      true,         true,         true,        true],
      ["Dados no Brasil (AWS sa-east-1)",  true,         true,         true,        true],
      ["Audit log",                        false,        "30 dias",    "1 ano",     "5 anos"],
      ["SSO SAML / SCIM",                  false,        false,        false,       true],
      ["DPA assinado",                     false,        false,        true,        true],
    ],
  },
];

function CompCell({ v, highlight }) {
  const cls = `px-4 py-3 text-center text-sm ${highlight ? "bg-pleita-lime/8" : ""}`;
  if (v === true)  return <td className={cls}><span className="inline-grid place-items-center size-6 rounded-full bg-verdict-go/15 text-verdict-go">✓</span></td>;
  if (v === false) return <td className={cls}><span className="text-pleita-stone-2/40">—</span></td>;
  return <td className={`${cls} pl-num text-pleita-ink`}>{v}</td>;
}

function ScreenComparativo() {
  const [annual, setAnnual] = React.useState(false);
  const popularIdx = 1; // Em Marcha
  return (
    <div className="min-h-full bg-surface-1">
      <nav className="sticky top-0 z-10 border-b border-pleita-line/60 bg-pleita-paper/85 backdrop-blur">
        <div className="max-w-7xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
          <Logo size={22} />
          <div className="hidden md:flex items-center gap-7 text-sm text-pleita-stone">
            <a className="hover:text-pleita-ink">Como funciona</a>
            <a className="text-pleita-ink font-medium">Preços</a>
            <a className="hover:text-pleita-ink">Blog</a>
          </div>
          <div className="flex items-center gap-2">
            <PleitaButton variant="ghost" size="sm">Entrar</PleitaButton>
            <PleitaButton size="sm">Começar grátis</PleitaButton>
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto px-4 md:px-10 py-12 md:py-16">
        <header className="text-center mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Comparativo</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink leading-tight">Todas as features lado a lado<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-3 max-w-2xl mx-auto">Veja exatamente o que cada plano inclui. Sem letra miúda, sem asterisco escondido.</p>

          <div className="inline-flex items-center gap-1 mt-6 rounded-full border border-pleita-line bg-surface-card p-1">
            <button onClick={() => setAnnual(false)} className={`pl-num text-xs uppercase tracking-wider px-4 py-2 rounded-full ${!annual ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Mensal</button>
            <button onClick={() => setAnnual(true)}  className={`pl-num text-xs uppercase tracking-wider px-4 py-2 rounded-full ${annual ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Anual <span className="text-pleita-lime ml-1">−10%</span></button>
          </div>
        </header>

        {/* Comparativo */}
        <div className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
          <div className="overflow-x-auto scrollbar-pl">
            <table className="w-full text-sm min-w-[760px]">
              <thead className="sticky top-0 bg-surface-card z-10 border-b border-pleita-line">
                <tr>
                  <th className="px-5 py-5 text-left pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 align-bottom"></th>
                  {COMP_PLANS.map((p, i) => {
                    const price = annual ? Math.round(parseInt(COMP_PRICES[i].replace(/\D/g, ""), 10) * 0.9) : parseInt(COMP_PRICES[i].replace(/\D/g, ""), 10);
                    return (
                      <th key={p} className={`px-4 py-5 align-bottom ${i === popularIdx ? "bg-pleita-lime/8" : ""}`}>
                        <div className="text-center">
                          {i === popularIdx && <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full font-semibold bg-pleita-lime text-pleita-ink mb-2 inline-block">popular</span>}
                          <div className="font-display text-base text-pleita-ink">{p}</div>
                          <div className="pl-num font-semibold text-xl text-pleita-ink mt-1">R$ {price.toLocaleString("pt-BR")}<span className="text-xs text-pleita-stone-2">/mês</span></div>
                          <button className={`mt-3 inline-block text-xs px-3 py-1.5 rounded-full font-semibold whitespace-nowrap ${i === popularIdx ? "bg-pleita-lime text-pleita-ink" : "border border-pleita-line text-pleita-ink hover:bg-surface-2"}`}>
                            {i === 3 ? "Vendas →" : "Começar"}
                          </button>
                        </div>
                      </th>
                    );
                  })}
                </tr>
              </thead>
              <tbody>
                {COMP_SECTIONS.map((sec) => (
                  <React.Fragment key={sec.title}>
                    <tr className="bg-surface-2/60">
                      <td colSpan={5} className="px-5 py-2.5 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 font-semibold">{sec.title}</td>
                    </tr>
                    {sec.items.map((row, i) => (
                      <tr key={i} className="border-t border-pleita-line/60">
                        <td className="px-5 py-3 text-pleita-stone">{row[0]}</td>
                        {[1, 2, 3, 4].map((j) => <CompCell key={j} v={row[j]} highlight={j - 1 === popularIdx} />)}
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <p className="text-center pl-num text-[11px] text-pleita-stone-2 mt-6">Todos os planos incluem · 7 dias grátis · sem cartão · LGPD nativa · cancelamento em 1 clique</p>
      </div>
    </div>
  );
}

window.ScreenComparativo = ScreenComparativo;