/* AI Alert Bar + Nav + Hero */

const AiAlertBar = () => (
  <div className="ai-alert-bar">
    <div className="container ai-alert-inner">
      <span className="ai-alert-badge">
        <Icon.Sparkle style={{width: 12, height: 12}}/>
        Novo
      </span>
      <p>
        3 testes grátis: avalie <strong>riscos de IA</strong>, sua <strong>maturidade em GRC</strong> e a <strong>nota de segurança do seu site</strong> agora.
      </p>
      <div className="ai-alert-ctas">
        <a href="https://ia.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="ai-alert-cta">
          AI Security Check
          <Icon.Arrow style={{width: 14, height: 14}}/>
        </a>
        <span className="ai-alert-sep" aria-hidden="true"></span>
        <a href="https://grc.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="ai-alert-cta">
          GRC Platform
          <Icon.Arrow style={{width: 14, height: 14}}/>
        </a>
        <span className="ai-alert-sep" aria-hidden="true"></span>
        <a href="https://scan.infocuesta.com.br" target="_blank" rel="noopener noreferrer" className="ai-alert-cta">
          Scan de Segurança
          <Icon.Arrow style={{width: 14, height: 14}}/>
        </a>
      </div>
    </div>
  </div>
);

const Nav = ({ onCtaClick, onOpenNews }) => (
  <nav className="nav">
    <div className="container nav-inner">
      <a href="#" className="nav-logo">
        <BrandMark />
        <span>Infocuesta<strong style={{fontWeight: 500, color: 'var(--accent-2)'}}>Sec</strong></span>
      </a>
      <div className="nav-links">
        <a href="#mecanismo">Abordagem</a>
        <a href="#beneficios">Benefícios</a>
        <a href="#oferta">Serviços</a>
        <a href="#" onClick={(e) => { e.preventDefault(); onOpenNews && onOpenNews(); }}>
          <span className="nav-news-pulse" />
          Notícias
        </a>
        <a href="https://ia.infocuesta.com.br" target="_blank" rel="noopener noreferrer">AI Check</a>
        <a href="https://grc.infocuesta.com.br" target="_blank" rel="noopener noreferrer">GRC</a>
        <a href="https://scan.infocuesta.com.br" target="_blank" rel="noopener noreferrer">Scan</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta-wrap">
        <a href="#contato" className="btn btn-ghost" style={{padding: '10px 16px', fontSize: 13}}>Entrar em contato</a>
        <a href="#diagnostico" onClick={onCtaClick} className="btn btn-primary" style={{padding: '10px 18px', fontSize: 13}}>
          Vamos conversar
          <Icon.Arrow className="btn-arrow" style={{width: 14, height: 14}} />
        </a>
      </div>
    </div>
  </nav>
);

const HEADLINES = {
  A: {
    eyebrow: "Risco invisível",
    h1: (<>Sua empresa está exposta. <span className="accent">Você só não sabe onde.</span></>),
  },
  B: {
    eyebrow: "Clareza e priorização",
    h1: (<>Pare de apagar incêndios em segurança. <span className="accent">Comece a prevenir os certos.</span></>),
  },
  C: {
    eyebrow: "Autoridade técnica + visão de negócio",
    h1: (<>Gestão de vulnerabilidades que conecta <span className="accent">risco técnico à decisão de negócio.</span></>),
  },
};

/* The hero "noise → signal" visualization.
   Lots of dim CVE rows, with a few that "rise" and become priority. */
const HeroViz = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 4), 2400);
    return () => clearInterval(id);
  }, []);

  const allVulns = [
    { id: "CVE-2024-3094",  name: "xz Utils backdoor",        cvss: "10.0", sev: "crit", biz: "Acesso ao billing prod" },
    { id: "CVE-2024-1709",  name: "ConnectWise auth bypass",  cvss: "10.0", sev: "crit", biz: "Servidor de jumphost" },
    { id: "CVE-2023-50164", name: "Struts2 RCE",              cvss: "9.8",  sev: "crit", biz: "Sem exposição externa" },
    { id: "CVE-2024-21413", name: "Outlook NTLM leak",        cvss: "9.8",  sev: "crit", biz: "Não usado pela equipe" },
    { id: "CVE-2024-29988", name: "SmartScreen bypass",       cvss: "8.8",  sev: "high", biz: "Fora do escopo" },
    { id: "CVE-2024-4577",  name: "PHP CGI argument inj.",    cvss: "9.8",  sev: "crit", biz: "Cluster de pagamentos" },
    { id: "CVE-2024-3400",  name: "PAN-OS command inj.",      cvss: "10.0", sev: "crit", biz: "VPN corporativa ativa" },
    { id: "CVE-2024-27198", name: "TeamCity auth bypass",     cvss: "9.8",  sev: "crit", biz: "Build server interno" },
  ];

  /* Rotate which rows are "priority". Cycle through configurations */
  const priorityByTick = [
    [0, 6],
    [1, 5],
    [0, 7],
    [6, 5],
  ];
  const priority = new Set(priorityByTick[tick]);

  return (
    <div className="hero-viz">
      <div className="hero-viz-header">
        <span>Gestão de vulnerabilidades · live feed</span>
        <span className="live"><span className="pulse"></span>analisando</span>
      </div>
      <div className="vuln-stream">
        {allVulns.map((v, i) => {
          const isPriority = priority.has(i);
          return (
            <div
              key={v.id}
              className={`vuln-row ${v.sev} ${isPriority ? 'priority' : 'muted'}`}
            >
              <span className={`sev`}></span>
              <span className="id">{v.id}</span>
              <span className="name">{v.name}</span>
              <span className="cvss">CVSS {v.cvss}</span>
              <span className="biz">
                {isPriority ? '▲ priorizar' : v.biz.length > 22 ? v.biz.slice(0, 20)+'…' : v.biz}
              </span>
            </div>
          );
        })}
      </div>
      <div className="hero-stat-grid">
        <div className="hero-stat">
          <div className="v">847</div>
          <div className="l">vulns identificadas</div>
        </div>
        <div className="hero-stat" style={{textAlign: 'right'}}>
          <div className="v" style={{color: 'var(--signal)'}}>12</div>
          <div className="l">prioridade real</div>
        </div>
      </div>
    </div>
  );
};

const Hero = ({ headlineVariant }) => {
  const h = HEADLINES[headlineVariant] || HEADLINES.A;
  return (
    <header className="hero" data-screen-label="01 Hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow hero-eyebrow">
            <span className="dot"></span>{h.eyebrow}
          </div>
          <h1>{h.h1}</h1>
          <p className="hero-sub">
            A <strong>InfocuestaSec</strong> identifica, prioriza e orienta a correção dos riscos que <strong>de fato ameaçam o seu negócio</strong> — sem relatórios genéricos, sem jargão vazio.
          </p>
          <div className="hero-ctas">
            <a href="#diagnostico" className="btn btn-primary">
              Vamos conversar
              <Icon.Arrow className="btn-arrow" style={{width: 16, height: 16}}/>
            </a>
            <a href="#mecanismo" className="btn btn-ghost">
              Quero entender minha exposição
              <Icon.ArrowRight style={{width: 16, height: 16}}/>
            </a>
          </div>
          <div className="hero-meta">
            <span>Sem compromisso</span>
            <span className="dot-sep"></span>
            <span>Conversa inicial sem custo</span>
            <span className="dot-sep"></span>
            <span>Resposta em até 24h</span>
          </div>
          <div className="hero-chips">
            <span className="chip"><Icon.Compliance/> ISO 27001 & NIST</span>
            <span className="chip"><Icon.Cloud/> Cloud Security</span>
            <span className="chip"><Icon.Sparkle/> Shadow AI</span>
            <span className="chip"><Icon.Document/> Relatórios executivos</span>
          </div>
        </div>
        <HeroViz />
      </div>
    </header>
  );
};

Object.assign(window, { AiAlertBar, Nav, Hero, HEADLINES });