/* FinalCTA.jsx — strong closing call to action */
const FinalCTA = ({ onNav }) => (
  <section style={{ background: 'var(--ar-bg-main)', padding: '40px 0 0' }}>
    <Container>
      <Reveal>
        <div className="final-cta-card" style={{
          position: 'relative', overflow: 'hidden', borderRadius: 28, padding: '64px 56px', textAlign: 'center',
          background: `radial-gradient(700px 400px at 50% -20%, rgba(0,212,255,0.30), transparent 60%),
                       linear-gradient(150deg, rgba(0,94,255,0.28), rgba(11,16,32,0.96))`,
          border: '1px solid rgba(0,212,255,0.32)',
          boxShadow: '0 40px 110px -40px rgba(0,94,255,0.6)',
        }}>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)', backgroundSize: '22px 22px', maskImage: 'radial-gradient(circle at 50% 0%, black 30%, transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', background: 'rgba(0,212,255,0.10)', border: '1px solid rgba(0,212,255,0.35)', borderRadius: 999, marginBottom: 22 }}>
              <span className="ar-pulse" style={{ width: 6, height: 6, borderRadius: 999, background: '#00D4FF' }} />
              <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: '#00D4FF', textTransform: 'uppercase' }}>VAMOS COMEÇAR</span>
            </div>
            <h2 style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 52px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--ar-text-main)', margin: 0, textWrap: 'balance' }}>
              Pronto para aplicar <GradText>IA de verdade</GradText> na sua empresa?
            </h2>
            <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.55, color: 'var(--ar-text-muted)', maxWidth: 620, margin: '18px auto 32px', textWrap: 'pretty' }}>
              Solicite uma demonstração e veja como agentes inteligentes e automações
              podem transformar seu atendimento, vendas e gestão.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Button size="lg" onClick={() => onNav('contato')}>Solicitar demonstração <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i></Button>
              <Button variant="secondary" size="lg" onClick={() => onNav('contato')}><i data-lucide="message-circle" style={{ width: 18, height: 18 }}></i> Falar com a AR</Button>
            </div>
          </div>
        </div>
      </Reveal>
    </Container>
  </section>
);

window.FinalCTA = FinalCTA;