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

function CyberPage() {
  return (
    <PageShell active="servicos">
      <PageHeader
        eyebrow="Produto principal · SVC‑01"
        title={<>Cyber<br /><em>Investigator</em>.</>}
        lead="Plataforma proprietária que combina IA, análise comportamental e resposta a incidentes para identificar e neutralizar ameaças em tempo real — antes que se transformem em manchete."
      >
        <a
          className="btn btn-primary"
          href="https://api.whatsapp.com/send/?phone=5561999949060&text=Quero+contratar+o+servi%C3%A7o+de+Cyber+Investigator"
          target="_blank" rel="noopener noreferrer"
        >
          <Icon.Wa /> Contratar agora
        </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">
          <DashMock />
          <p className="mono muted" style={{ marginTop: 16, fontSize: 11, letterSpacing: ".12em", textAlign: "right" }}>
            ↳ console ilustrativo · timeline alimentada por dados reais do CISA Known Exploited Vulnerabilities Catalog
          </p>
        </div>
      </section>

      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="container two-col">
          <div>
            <span className="eyebrow">Como funciona</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              IA + comportamento<br />
              <span className="muted-em">+ humano no loop.</span>
            </h2>
            <p className="lead" style={{ marginTop: 18 }}>
              O Cyber Investigator opera em três camadas que se reforçam:
              um motor de modelos comportamentais que aprende com o tráfego real;
              um pipeline de threat intelligence que cruza IOCs globais com seu contexto;
              e um time humano que valida decisões críticas em tempo real.
            </p>
            <p className="lead">
              Não vendemos uma caixa preta. Cada alerta tem rastreabilidade total: você vê
              o que o modelo viu, o por quê do veredito e a ação tomada — auditável, exportável
              e defensável em juízo.
            </p>
          </div>

          <ul className="spec-list">
            <li><span className="si-icon"><Icon.Pulse /></span><span className="si-body"><strong>Detecção em segundos</strong><span>Modelos comportamentais com janela móvel — anomalias sinalizadas em &lt; 60s.</span></span></li>
            <li><span className="si-icon"><Icon.Bolt /></span><span className="si-body"><strong>Resposta automatizada</strong><span>Playbooks acionáveis com aprovação de 1 clique, ou modo totalmente automático.</span></span></li>
            <li><span className="si-icon"><Icon.Shield /></span><span className="si-body"><strong>Cobertura ampla</strong><span>Malware, phishing, BEC, fraude interna, leak de credenciais — tudo em uma timeline.</span></span></li>
            <li><span className="si-icon"><Icon.Cube /></span><span className="si-body"><strong>Integração rápida</strong><span>Stack atual integrada em &lt; 1 semana. Não pedimos para você trocar nada.</span></span></li>
            <li><span className="si-icon"><Icon.Doc /></span><span className="si-body"><strong>Pronto para auditoria</strong><span>Relatórios para diretoria, auditoria interna, LGPD e investigação criminal.</span></span></li>
          </ul>
        </div>
      </section>

      <section className="section-pad" style={{ background: "var(--bg-1)", borderBlock: "1px solid var(--line)" }}>
        <div className="container">
          <header className="section-head">
            <span className="eyebrow">Casos de uso</span>
            <h2 className="h-section">O que o Cyber Investigator faz no dia a dia.</h2>
          </header>

          <div className="usecase-grid">
            <div className="usecase">
              <span className="uc-tag">RANSOMWARE</span>
              <strong>Bloqueio antes da criptografia</strong>
              <p>Padrões de movimentação lateral e tentativas de criptografia em massa são detectados nos primeiros segundos — o endpoint é isolado e o atacante perde o vetor.</p>
            </div>
            <div className="usecase">
              <span className="uc-tag">BEC / FRAUDE</span>
              <strong>Detecção de domínios similares</strong>
              <p>Análise semântica de e‑mails identifica tentativa de fraude do CEO, faturas falsas e domínios "homógrafos" — bloqueando antes de chegar ao financeiro.</p>
            </div>
            <div className="usecase">
              <span className="uc-tag">LEAK</span>
              <strong>Credenciais expostas rotacionadas</strong>
              <p>Crawler em paste sites, fóruns e Telegram detecta vazamentos e dispara rotação automática — antes do atacante usar a senha exposta.</p>
            </div>
            <div className="usecase">
              <span className="uc-tag">INSIDER</span>
              <strong>Atividade fora de padrão</strong>
              <p>Acessos em horários atípicos, downloads anômalos e escalada de privilégios disparam alertas com contexto comportamental — não regras estáticas.</p>
            </div>
            <div className="usecase">
              <span className="uc-tag">SUPPLY CHAIN</span>
              <strong>Drift em fornecedores</strong>
              <p>Monitoramento contínuo do perímetro de fornecedores críticos — você descobre a brecha antes do incidente migrar para sua infraestrutura.</p>
            </div>
            <div className="usecase">
              <span className="uc-tag">COMPLIANCE</span>
              <strong>Evidências prontas</strong>
              <p>Trilhas para LGPD, ISO 27001 e PCI geradas como subproduto da operação — sem trabalho extra do seu time.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="container">
          <header className="section-head">
            <span className="eyebrow">Onboarding</span>
            <h2 className="h-section">Do contrato à operação<br />em uma semana.</h2>
          </header>

          <ul className="steps-list">
            <li><span className="step-k">D+0</span><h3>Descoberta</h3><p>Workshop técnico de 2h para mapear stack, vetores e prioridades.</p></li>
            <li><span className="step-k">D+2</span><h3>Conectores</h3><p>Integração nativa com EDR, IDP, e‑mail, cloud e SIEM existentes.</p></li>
            <li><span className="step-k">D+5</span><h3>Baseline</h3><p>Modelos comportamentais treinados no seu tráfego real, não em médias.</p></li>
            <li><span className="step-k">D+7</span><h3>Go‑live</h3><p>SOC 24/7 começa a operar com playbooks customizados ao seu cenário.</p></li>
          </ul>
        </div>
      </section>

      <FinalCta
        title="Quer ver o Cyber Investigator no seu cenário?"
        body="Demonstração técnica de 30 minutos, focada nos seus vetores reais."
        ctaText="Agendar demonstração"
      />
    </PageShell>
  );
}

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