/* Value Prop + Pain + Mechanism (BISO) sections */

const ValueProp = () => (
  <section id="abordagem" data-screen-label="02 Proposta de Valor">
    <div className="container">
      <div className="value-prop-grid">
        <div>
          <div className="eyebrow" style={{marginBottom: 18}}><span className="dot"></span>Proposta de Valor</div>
          <h2>Segurança da informação<br/>para empresas que já vivem<br/>na <span style={{
            background: 'linear-gradient(90deg, var(--accent), var(--accent-2))',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent'
          }}>era da IA</span>.</h2>
        </div>
        <div className="value-prop-body">
          <p>Firewall, antivírus, SIEM... e agora? A <strong style={{color: 'var(--text)'}}>Inteligência Artificial já entrou na sua empresa</strong> — por canais que ninguém controla. É justamente onde dados, decisões e exposições mais críticas estão acontecendo agora.</p>
          <div className="punch">O problema não é falta de ferramenta. É falta de inteligência sobre o que realmente importa.</div>
          <p>A InfocuestaSec une profundidade técnica em <strong style={{color: 'var(--text)'}}>segurança da informação</strong> com <strong style={{color: 'var(--text)'}}>governança de IA</strong> — para que você saiba exatamente onde agir, por quê agir e em qual ordem. Antes que decisões automatizadas virem o próximo incidente.</p>
        </div>
      </div>

      <div className="ai-spotlight">
        <div className="ai-spot-head">
          <div className="ai-spot-eyebrow">
            <Icon.Sparkle style={{width: 14, height: 14}}/>
            <span>IA &amp; Segurança da Informação · destaque</span>
          </div>
          <h3>O novo perímetro da sua empresa não tem firewall.</h3>
          <p>Sua equipe já está usando ChatGPT, Copilot, Gemini, agentes automatizados, integrações via API. Cada um desses canais é uma <strong style={{color:'var(--text)'}}>nova superfície de ataque</strong> — e quase nenhuma ferramenta tradicional consegue enxergar.</p>
        </div>
        <div className="ai-spot-grid">
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Sparkle/></div>
            <h4>Shadow AI Discovery</h4>
            <p>Mapeamos todas as ferramentas de IA em uso na sua empresa — incluindo as que ninguém aprovou.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Document/></div>
            <h4>Prevenção de vazamento</h4>
            <p>Identificamos onde dados corporativos, código e informação sensível estão saindo via ferramentas generativas.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Compliance/></div>
            <h4>Governança de IA</h4>
            <p>Políticas práticas, controles de uso e alinhamento com ISO 27001, NIST AI RMF e LGPD.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Target/></div>
            <h4>Risco de agentes &amp; APIs</h4>
            <p>Analisamos automações e integrações que criam exposição invisível ao stack tradicional de segurança.</p>
          </div>
        </div>

        <div className="ai-spot-cta">
          <div>
            <div className="ai-spot-cta-label">Teste grátis</div>
            <h4>Quer ver isso na prática, agora, sem custo?</h4>
            <p>Criamos o <strong style={{color: 'var(--text)'}}>AI Security Check</strong>: uma ferramenta educativa que avalia riscos de ferramentas, prompts, RAGs, agentes e servidores MCP em poucos minutos — teste grátis, sem cadastro; conta grátis libera o relatório completo, com direito a 3 relatórios completos por conta.</p>
          </div>
          <a href="https://ia.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            Abrir AI Security Check
            <Icon.Arrow className="btn-arrow" style={{width: 16, height: 16}}/>
          </a>
        </div>
      </div>

      <div className="ai-spotlight" style={{marginTop: 32}}>
        <div className="ai-spot-head">
          <div className="ai-spot-eyebrow">
            <Icon.Compliance style={{width: 14, height: 14}}/>
            <span>Governança, Risco e Compliance · destaque</span>
          </div>
          <h3>ISO 27001, NIST, LGPD — sem depender de planilha pra começar.</h3>
          <p>Lançamos a <strong style={{color: 'var(--text)'}}>InfoCuestaSec GRC Platform</strong>: 21 frameworks de segurança e compliance em português. A avaliação de maturidade e a matriz de risco são gratuitas, sem cadastro; conta grátis libera o relatório completo (recomendações, exportação), com direito a 3 por conta — a gestão contínua de controles fica no plano Full.</p>
        </div>
        <div className="ai-spot-grid">
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Compliance/></div>
            <h4>21 frameworks prontos</h4>
            <p>NIST CSF 2.0, ISO 27001, CIS Controls v8, LGPD, GDPR, SOC 2, PCI DSS, EU AI Act e outros — importação oficial, curadoria em português.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Target/></div>
            <h4>Matriz de risco de verdade</h4>
            <p>Probabilidade × impacto, com piso por impacto (evento raro e catastrófico não vira "risco baixo") — modelo declarado e auditável, não planilha.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Document/></div>
            <h4>Gestão contínua de controles</h4>
            <p>Registro vivo de status por controle, evidências com validade, e plano de ação priorizado automaticamente pelo risco residual.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Sparkle/></div>
            <h4>Comparação entre frameworks</h4>
            <p>Veja onde NIST, ISO e CIS se sobrepõem — priorize o esforço de compliance sem duplicar trabalho.</p>
          </div>
        </div>

        <div className="ai-spot-cta">
          <div>
            <div className="ai-spot-cta-label">Teste grátis</div>
            <h4>Quer avaliar sua maturidade agora, sem custo?</h4>
            <p>A <strong style={{color: 'var(--text)'}}>GRC Platform</strong> está no ar, sem cadastro — escolha um framework, marque os controles e receba a nota na hora.</p>
          </div>
          <a href="https://grc.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            Abrir GRC Platform
            <Icon.Arrow className="btn-arrow" style={{width: 16, height: 16}}/>
          </a>
        </div>
      </div>

      <div className="ai-spotlight" style={{marginTop: 32}}>
        <div className="ai-spot-head">
          <div className="ai-spot-eyebrow">
            <Icon.Scan style={{width: 14, height: 14}}/>
            <span>Postura de Segurança do Site · destaque</span>
          </div>
          <h3>Nota de A+ a F — a mesma que qualquer visitante pode ver.</h3>
          <p>Lançamos o <strong style={{color: 'var(--text)'}}>InfoCuesta Scan</strong>: informe uma URL e receba, em minutos, uma nota de segurança com base em headers HTTP, certificado TLS, fingerprint de tecnologia, higiene (robots.txt/sitemap/security.txt), autenticação de e-mail (SPF/DMARC) e um módulo de avaliação de APIs (REST/OpenAPI/GraphQL) contra o OWASP API Security Top 10.</p>
        </div>
        <div className="ai-spot-grid">
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Shield/></div>
            <h4>Headers &amp; TLS</h4>
            <p>CSP, HSTS, cabeçalhos anti-clickjacking, ordem de redirect HTTP→HTTPS e validade do certificado — os fundamentos que todo scanner de compliance cobra primeiro.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Target/></div>
            <h4>Fingerprint de tecnologia</h4>
            <p>Identifica CMS, plugins e versões desatualizadas — incluindo achados específicos de WordPress como xmlrpc.php exposto e enumeração via REST API.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Document/></div>
            <h4>API Security Assessment</h4>
            <p>Detecta OpenAPI/Swagger e GraphQL expostos, checa CORS, rate limit e vazamento de chaves/JWT, e mapeia contra o OWASP API Security Top 10.</p>
          </div>
          <div className="ai-spot-card">
            <div className="ai-icon"><Icon.Compliance/></div>
            <h4>Autenticação de e-mail</h4>
            <p>Checa registros SPF e DMARC do domínio — falha aqui é o que abre caminho para phishing e spoofing usando o seu próprio nome.</p>
          </div>
        </div>

        <div className="ai-spot-cta">
          <div>
            <div className="ai-spot-cta-label">Teste grátis</div>
            <h4>Quer ver a nota do seu site agora, sem custo?</h4>
            <p>O <strong style={{color: 'var(--text)'}}>InfoCuesta Scan</strong> está no ar — qualquer visitante roda o scan e vê a nota na hora; um cadastro grátis libera o relatório completo, com direito a 3 relatórios completos por conta.</p>
          </div>
          <a href="https://scan.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            Abrir InfoCuesta Scan
            <Icon.Arrow className="btn-arrow" style={{width: 16, height: 16}}/>
          </a>
        </div>
      </div>
    </div>
  </section>
);

const PAIN_STATS = [
  { v: "60%", l: "dos ataques de ransomware no Brasil atingem PMEs",
    note: "Segundo levantamentos do setor de cibersegurança, 2026" },
  { v: "34%", l: "das pequenas empresas conseguem impedir um ataque antes da criptografia ou extorsão",
    note: "Segundo levantamentos do setor de cibersegurança, 2026" },
  { v: "73%", l: "das PMEs brasileiras ainda não têm seguro cibernético",
    note: "Segundo levantamentos do setor de cibersegurança, 2026" },
];

const PAINS = [
  "Você tem um scanner de vulnerabilidades, mas a lista tem centenas de itens e ninguém sabe por onde começar.",
  "Você nunca sofreu um incidente — e justamente por isso, é difícil justificar investimento em prevenção.",
  "Sua equipe interna é boa, mas não tem tempo nem especialização para gestão contínua de riscos.",
  "O board quer um relatório executivo. A TI entrega um documento técnico de 80 páginas. Ninguém decide nada.",
  "Um cliente ou parceiro exigiu conformidade com ISO 27001 ou NIST e você não sabe por onde começar.",
  "Ferramentas de IA já estão sendo usadas internamente — e ninguém sabe quais dados corporativos estão sendo expostos.",
];

const Pain = () => (
  <section className="pain" data-screen-label="03 Identificação da Dor">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow"><span className="dot"></span>Se você reconhece isso, conversamos</div>
        <h2>Você lidera segurança em uma empresa em crescimento.</h2>
        <p>É provável que algum (ou todos) destes cenários soe familiar:</p>
      </div>
      <div className="pain-list">
        {PAINS.map((p, i) => (
          <div className="pain-item" key={i}>
            <span className="pain-num">0{i + 1}</span>
            <p>{p}</p>
          </div>
        ))}
      </div>

      <div className="proof-stats" style={{marginTop: 40, marginBottom: 0}}>
        {PAIN_STATS.map((s, i) => (
          <div className="stat-card" key={i}>
            <div className="v">{s.v}</div>
            <div className="l">{s.l}</div>
            <div className="note">{s.note}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* Mechanism: BISO comparison */
const Mechanism = () => (
  <section id="mecanismo" data-screen-label="04 Mecanismo - Visão BISO">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow"><span className="dot"></span>Como trabalhamos</div>
        <h2>Não entregamos uma lista de problemas.<br/>Entregamos um plano de ação priorizado.</h2>
        <p>Linguagem executiva para o board. Profundidade técnica para a equipe de TI. Frameworks como ISO 27001 e NIST aplicados de forma prática — não burocrática.</p>
      </div>

      <div className="biso-card">
        <div className="biso-head">
          <span className="badge">Mecanismo único · Visão BISO</span>
        </div>
        <h3>Conectamos risco técnico à decisão de negócio.</h3>
        <p className="biso-lede">Em vez de entregar vulnerabilidades para você decifrar, entregamos <strong style={{color: 'var(--text)'}}>prioridade, contexto e impacto</strong> — para que as decisões certas aconteçam no tempo certo.</p>

        <div className="biso-compare">
          <div className="biso-pane before">
            <h4>O que sua ferramenta entrega</h4>
            {[
              { id: "CVE-2024-3094", sev: "crit", lbl: "CVSS 10.0" },
              { id: "CVE-2024-21413", sev: "crit", lbl: "CVSS 9.8" },
              { id: "CVE-2023-50164", sev: "crit", lbl: "CVSS 9.8" },
              { id: "CVE-2024-29988", sev: "high", lbl: "CVSS 8.8" },
              { id: "CVE-2024-23692", sev: "crit", lbl: "CVSS 9.8" },
              { id: "CVE-2024-4577",  sev: "crit", lbl: "CVSS 9.8" },
              { id: "...", sev: "", lbl: "+ 841 itens" },
            ].map((r, i) => (
              <div className="biso-line" key={i}>
                <span className={`sev ${r.sev}`}></span>
                <span>{r.id}</span>
                <span>{r.lbl}</span>
              </div>
            ))}
          </div>

          <div className="biso-arrow">
            <Icon.ArrowRight style={{width: 36, height: 36}}/>
          </div>

          <div className="biso-pane after">
            <h4>O que a InfocuestaSec entrega</h4>
            {[
              {
                t: "PAN-OS no firewall corporativo",
                d: "Acesso externo da VPN ativa · exposição direta à rede de pagamentos",
                tag: "P0 · 48h",
              },
              {
                t: "PHP CGI no cluster de pagamentos",
                d: "Path crítico de receita · auditoria PCI prevista em Q3",
                tag: "P0 · 72h",
              },
              {
                t: "ConnectWise no jumphost",
                d: "Pivô para todo o ambiente · acesso de prestador",
                tag: "P1 · 7 dias",
              },
              {
                t: "Shadow AI: 14 ferramentas mapeadas",
                d: "3 expondo dados de cliente · plano de governança incluso",
                tag: "P1 · 14 dias",
              },
            ].map((r, i) => (
              <div className="biso-line" key={i}>
                <div className="title">
                  <span>{r.t}</span>
                  <span className="tag">{r.tag}</span>
                </div>
                <div className="desc">{r.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { ValueProp, Pain, Mechanism });