/* global React, ReactDOM, Icon, PageShell, PageHeader, FinalCta, SocPanel */

const MODULES = [
  {
    id: "endpoint",
    tag: "ENDPOINT",
    title: "EDR adaptativo",
    headline: "Cada endpoint é um sensor, não um problema.",
    body: "Detecção em tempo real com isolamento por contexto: o host suspeito é cortado do tráfego lateral em segundos, mas mantém a sessão de coleta para forense. Quando o evento é benigno, é liberado automaticamente — sem ticket, sem call.",
    bullets: [
      "Resposta em < 60 segundos por evento crítico",
      "Forense automatizada com cadeia de custódia",
      "Integração com Windows, macOS, Linux e mobile gerenciado",
    ],
    icon: <Icon.Cube />,
  },
  {
    id: "iam",
    tag: "IDENTIDADE",
    title: "IAM Sentinel",
    headline: "Identidade é o novo perímetro.",
    body: "Monitora drift de privilégios, sessões anômalas, MFA bypass e resets suspeitos. Conecta em Azure AD, Okta, Google Workspace e diretórios on‑prem — gerando uma única linha do tempo por usuário.",
    bullets: [
      "Drift contínuo contra baseline de privilégios",
      "Detecção de MFA fatigue e fadiga social",
      "Revisão de acessos com aprovação de 1 clique",
    ],
    icon: <Icon.User />,
  },
  {
    id: "cloud",
    tag: "NUVEM",
    title: "Cloud Posture",
    headline: "Configuração segura é mantida, não conquistada.",
    body: "Diff contínuo contra baselines de CIS e benchmarks proprietários para AWS, Azure e GCP. Detecta secrets vazados, buckets abertos e funções com permissão excessiva no exato momento em que aparecem.",
    bullets: [
      "AWS · Azure · GCP · Oracle Cloud",
      "Detecção de secrets em commits e imagens",
      "Compliance contínuo para LGPD, ISO 27001 e PCI",
    ],
    icon: <Icon.Cloud />,
  },
  {
    id: "email",
    tag: "EMAIL",
    title: "Anti‑phishing IA",
    headline: "Phishing é problema de modelo, não de filtro.",
    body: "Análise semântica do conteúdo, clusterização de campanhas similares e bloqueio coordenado em todo o tenant. Detecta BEC, spear phishing e fraudes de domínio similar antes do clique.",
    bullets: [
      "Análise semântica + reputação de remetente",
      "Bloqueio coordenado por campanha",
      "Treinamento contínuo com phishing simulado",
    ],
    icon: <Icon.Mail2 />,
  },
  {
    id: "deepweb",
    tag: "DEEP/DARK",
    title: "Leak Watch",
    headline: "Sua marca, monitorada onde dói.",
    body: "Crawler 24/7 em mercados, fóruns, canais de Telegram, paste sites e leaks. Cruza credenciais expostas com seu domínio e dispara rotação automática — antes que o atacante use.",
    bullets: [
      "Mercados, fóruns e Telegram em monitoramento contínuo",
      "Rotação automática de credenciais expostas",
      "Alertas de menção à marca e executivos",
    ],
    icon: <Icon.Search />,
  },
  {
    id: "soar",
    tag: "RESPOSTA",
    title: "SOAR + humano no loop",
    headline: "Automação onde dá. Decisão humana onde importa.",
    body: "Playbooks de contenção acionáveis em 1 clique, com modos automático, supervisionado e manual. Toda ação fica registrada com hash imutável — auditoria, defesa em juízo e revisão pós‑incidente prontas.",
    bullets: [
      "Playbooks por classe de ameaça",
      "Aprovação humana opcional por severidade",
      "Logs imutáveis com hash criptográfico",
    ],
    icon: <Icon.Bolt />,
  },
];

function PlataformaPage() {
  return (
    <PageShell active="plataforma">
      <PageHeader
        eyebrow="Plataforma · Crime Solution"
        title={<>Uma única superfície para <em>todos os vetores</em>.</>}
        lead="Cada módulo opera de forma independente — mas a inteligência só aparece quando todos compartilham contexto. É isso que separa o ruído do incidente real."
      >
        <a className="btn btn-primary" href="cyber-investigator.html">Ver Cyber Investigator <Icon.Arrow className="arr" /></a>
        <a className="btn btn-ghost" href="contato.html"><Icon.Calendar /> Agendar demonstração</a>
      </PageHeader>

      <section className="section-pad" style={{ paddingBlock: "clamp(40px, 5vw, 80px)" }}>
        <div className="container">
          <SocPanel />
        </div>
      </section>

      <section className="container" style={{ paddingTop: 8 }}>
        <header className="section-head">
          <span className="eyebrow">Módulos</span>
          <h2 className="h-section">Seis camadas — uma linha do tempo.</h2>
          <p className="lead">
            Use uma camada isolada se sua maturidade pede; ative todas se busca a maior cobertura.
            A inteligência cresce com o conjunto: mais sensores, mais contexto, menos falso‑positivo.
          </p>
        </header>

        <nav className="module-index">
          {MODULES.map((m, i) => (
            <a key={m.id} href={"#" + m.id}>
              <span className="mi-tag">M{String(i + 1).padStart(2, "0")} · {m.tag}</span>
              <span className="mi-name">{m.title} <Icon.Arrow /></span>
            </a>
          ))}
        </nav>
      </section>

      <section className="container" style={{ paddingTop: 32 }}>
        {MODULES.map((m, i) => (
          <article key={m.id} id={m.id} className="module-block">
            <div className="module-grid">
              <aside className="module-side">
                <span className="mod-num">M{String(i + 1).padStart(2, "0")}</span>
                <span className="mod-tag">{m.tag}</span>
                <span style={{ color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  {m.icon}
                </span>
              </aside>
              <div className="module-body">
                <h2>{m.headline}</h2>
                <p className="lead">{m.body}</p>
                <ul className="spec-list" style={{ marginTop: 22, maxWidth: 620 }}>
                  {m.bullets.map((b) => (
                    <li key={b}>
                      <span className="si-icon"><Icon.Check /></span>
                      <span className="si-body"><strong style={{ fontWeight: 500 }}>{b}</strong></span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </article>
        ))}
      </section>

      <section className="section-pad">
        <div className="container">
          <header className="section-head">
            <span className="eyebrow">Integrações</span>
            <h2 className="h-section">Se ele tem API, conversamos.</h2>
            <p className="lead">
              Conectores nativos para os 30 principais SIEMs, EDRs, IDPs e clouds —
              e SDK aberto para o resto.
            </p>
          </header>
          <div className="trust-strip">
            <div className="container trust-strip-inner">
              <span className="trust-label">CONECTORES PRINCIPAIS</span>
              <div className="trust-strip-logos">
                {["Microsoft 365","AWS","Azure","GCP","Okta","Splunk","Sentinel","CrowdStrike","Fortinet","Cisco","Cloudflare","Slack"].map((n) => (
                  <span key={n} className="trust-logo">{n}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <FinalCta
        title="Pronto para ver a plataforma em ação?"
        body="Agende uma demonstração de 30 minutos com nosso time técnico — focada no seu cenário, não em um pitch genérico."
        ctaText="Agendar demonstração"
      />
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PlataformaPage />);