/* FAQ + CTA Final + PS + Footer */

const WA_NUMBER = "5511921989935";
const WA_TEXT_DIAG = "Olá! Vim pela página da Infocuesta SEC e gostaria de agendar uma conversa inicial sobre segurança.";
const WA_TEXT_GENERIC = "Olá! Vim pela página da Infocuesta SEC e gostaria de mais informações.";
const WA_URL_DIAG = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(WA_TEXT_DIAG)}`;
const WA_URL_GENERIC = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(WA_TEXT_GENERIC)}`;

/* Robust open helper — ensures a fully detached top-level navigation so
   the WhatsApp redirect chain isn't trapped inside an iframe sandbox.
   In normal browser contexts this is identical to a target="_blank" click. */
function openWhatsApp(e, url) {
  if (e) e.preventDefault();
  try {
    const w = window.open(url, '_blank', 'noopener,noreferrer');
    if (!w || w.closed || typeof w.closed === 'undefined') {
      // Popup blocked — fall back to top-level navigation
      window.top ? (window.top.location.href = url) : (window.location.href = url);
    }
  } catch (_err) {
    window.location.href = url;
  }
}

const FAQS = [
  { q: "Quanto tempo preciso dedicar para a parceria funcionar?",
    a: "O modelo é desenhado para gerar o mínimo de overhead para a sua equipe. Após o diagnóstico inicial e alinhamento de escopo, a maior parte do trabalho operacional é nosso. Você recebe relatórios, participa de reuniões de revisão e toma decisões — sem precisar se tornar especialista em segurança." },
  { q: "Serve para quem ainda está estruturando a área de segurança?",
    a: "Sim — e é exatamente para esse perfil que nossa abordagem foi calibrada. PMEs e empresas em crescimento sem estrutura interna robusta são nosso foco principal. Partimos de onde você está, não de onde você deveria estar." },
  { q: "Vocês substituem o time interno de TI ou segurança?",
    a: "Não. Atuamos como extensão e reforço especializado. Seu time continua responsável pelo dia a dia — nós trazemos visão estratégica, priorização e profundidade técnica onde falta." },
  { q: "Como funciona o diagnóstico inicial?",
    a: "É uma conversa de 30 a 60 minutos — sem custo, sem compromisso. Mapeamos seu ambiente, principais riscos e maturidade atual. Ao final, você tem uma visão clara do que precisa de atenção e como poderíamos ajudar." },
  { q: "Trabalham com que tecnologias e frameworks?",
    a: "Microsoft Defender, Qualys, Tenable, ambientes cloud (AWS, Azure, GCP), ISO 27001, NIST, segurança em APIs e aplicações. Ambientes híbridos e projetos críticos são nossa especialidade." },
  { q: "Vocês ajudam com conformidade para clientes e parceiros?",
    a: "Sim. Apoiamos empresas que precisam atender exigências de segurança de clientes enterprise, auditorias externas ou adequação a frameworks regulatórios — com foco prático, não burocrático." },
  { q: "Como funciona o contato inicial?",
    a: "Você agenda pelo formulário ou WhatsApp. Retornamos em até 24 horas para alinhar a melhor data para o diagnóstico. Simples assim." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" data-screen-label="11 FAQ">
      <div className="container" style={{maxWidth: 920}}>
        <div className="section-head" style={{margin: '0 auto 40px', textAlign:'left'}}>
          <div className="eyebrow"><span className="dot"></span>Perguntas frequentes</div>
          <h2>Dúvidas que aparecem antes de toda primeira conversa.</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle"><Icon.Plus style={{width: 14, height: 14}}/></span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CtaFinal = () => (
  <section id="diagnostico" className="cta-final" data-screen-label="12 CTA Final">
    <div className="container">
      <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex', marginBottom: 22}}>
        <span className="dot"></span>Sua próxima decisão de segurança
      </div>
      <h2>Decida com base em <em>risco real</em> — não em suposição.</h2>
      <p>Você já sabe que a exposição existe. A questão agora é ter clareza sobre onde — e agir antes que alguém descubra antes de você.</p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a href={WA_URL_DIAG} onClick={(e) => openWhatsApp(e, WA_URL_DIAG)} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
          Vamos conversar
          <Icon.Arrow className="btn-arrow" style={{width: 18, height: 18}}/>
        </a>
        <a href={WA_URL_GENERIC} onClick={(e) => openWhatsApp(e, WA_URL_GENERIC)} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
          <Icon.Whatsapp style={{width: 16, height: 16}}/>
          WhatsApp · (11) 92198-9935
        </a>
      </div>
      <div className="meta-line">Sem compromisso · Sem custo · Resposta em até 24h</div>
    </div>
  </section>
);

const PsClose = () => (
  <section data-screen-label="13 PS / Fechamento" style={{paddingTop: 0}}>
    <div className="container">
      <div className="ps-card">
        <div className="ps-label">P.S. · uma última coisa</div>
        <p>
          Se você chegou até aqui, é porque sabe que segurança é prioridade — mas talvez ainda não tenha encontrado uma parceria que una profundidade técnica com clareza de negócio. É exatamente isso que a InfocuestaSec entrega. As vagas para novos clientes são limitadas. O diagnóstico inicial é gratuito e sem compromisso. <strong style={{color: 'var(--text)'}}>O único risco real é continuar sem a informação que você precisa para decidir.</strong>
        </p>
      </div>
    </div>
  </section>
);

const Footer = ({ onOpenMvv, onOpenPrivacy, onOpenEthics }) => (
  <footer className="site-footer" id="contato">
    <div className="container">
      <div className="footer-grid">
        <div>
          <a href="#" className="nav-logo" style={{marginBottom: 18}}>
            <BrandMark />
            <span>Infocuesta<strong style={{fontWeight:500, color:'var(--accent-2)'}}>Sec</strong></span>
          </a>
          <p className="muted" style={{fontSize:14, maxWidth:340, marginTop: 14}}>
            Segurança descomplicada para o seu negócio. Gestão de vulnerabilidades, cloud security e consultoria estratégica.
          </p>
        </div>
        <div>
          <h4>Contato</h4>
          <a href={WA_URL_GENERIC} onClick={(e) => openWhatsApp(e, WA_URL_GENERIC)} target="_blank" rel="noopener noreferrer"><Icon.Whatsapp style={{width: 14, height: 14, verticalAlign:'middle', marginRight:8, color:'var(--accent-2)'}}/>WhatsApp · (11) 92198-9935</a>
          <a href="mailto:contato@infocuesta.com.br">contato@infocuesta.com.br</a>
          <span className="small mono" style={{color:'var(--text-3)', marginTop:8}}>Resposta em até 24h</span>
        </div>
        <div>
          <h4>Institucional</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); onOpenMvv && onOpenMvv(); }}>Missão, Visão e Valores</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onOpenPrivacy && onOpenPrivacy(); }}>Política de Privacidade · LGPD</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onOpenEthics && onOpenEthics(); }}>Código de Ética e Conduta</a>
          <a href="https://ia.infocuesta.com.br" target="_blank" rel="noopener noreferrer">AI Security Check (teste grátis)</a>
          <a href="https://grc.infocuesta.com.br" target="_blank" rel="noopener noreferrer">GRC Platform (teste grátis)</a>
          <a href="https://scan.infocuesta.com.br" target="_blank" rel="noopener noreferrer">InfoCuesta Scan (teste grátis)</a>
          <div style={{display:'flex', gap:10, marginTop: 14}}>
            <a href="https://www.linkedin.com/company/infocuestasec" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" style={{display:'flex', padding:8, border:'1px solid var(--line)', borderRadius:8}}><Icon.Linkedin style={{width:16, height:16}}/></a>
            <a href="https://www.instagram.com/infocuestasec" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{display:'flex', padding:8, border:'1px solid var(--line)', borderRadius:8}}><Icon.Instagram style={{width:16, height:16}}/></a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 InfocuestaSec — Todos os direitos reservados.</span>
        <span>LP v1.0 · Build {new Date().toISOString().slice(0,10)}</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { FAQ, CtaFinal, PsClose, Footer, WA_URL_DIAG, WA_URL_GENERIC, openWhatsApp });