function CTAFinal() {
  const [hover, setHover] = useState(false);
  return (
    <Section id="diagnostico" pad="lg" style={{ background: 'var(--bg)', borderTop: '1px solid var(--line-soft)', position: 'relative', overflow: 'hidden' }}>
      {/* Ambient accent sweep */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(800px 400px at 50% 100%, oklch(0.78 0.13 70 / 0.10), transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <Reveal>
          <div className="mono" style={{ justifyContent: 'center', display: 'flex', gap: 10, alignItems: 'center', marginBottom: 48 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />
            Último chamado
          </div>
        </Reveal>

        <MaskLines
          tag="h2"
          className="serif"
          delay={100}
          style={{
            fontSize: 'clamp(44px, 8vw, 128px)',
            lineHeight: 0.94,
            letterSpacing: '-0.035em',
            maxWidth: 1200,
            margin: '0 auto',
          }}
          lines={[
            <>Se o seu produto</>,
            <>não tem <em className="italic">clareza</em></>,
            <>de mercado, <em className="italic">ele já</em></>,
            <><em className="italic">está</em> perdendo espaço.</>,
          ]}
        />

        <Reveal delay={800}>
          <p style={{ maxWidth: 560, margin: '48px auto 0', fontSize: 18, color: 'var(--fg-dim)', lineHeight: 1.55 }}>
            A primeira conversa dura 40 minutos e vale como diagnóstico real.
            Você sai com pelo menos minha visão inicial sobre seu produto.
          </p>
        </Reveal>

        <Reveal delay={950}>
          <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
            <button
              onClick={() => window.__openContactModal()}
              onMouseEnter={() => setHover(true)}
              onMouseLeave={() => setHover(false)}
              className="cta-btn"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 18,
                background: 'var(--accent)',
                color: 'var(--bg)',
                padding: '22px 36px',
                borderRadius: 999,
                fontSize: 18,
                fontWeight: 500,
                letterSpacing: '-0.01em',
                transition: 'transform .4s, box-shadow .4s',
                transform: hover ? 'translateY(-3px)' : 'none',
                boxShadow: hover ? '0 20px 60px -20px oklch(0.78 0.13 70 / 0.6)' : '0 0 0 transparent',
              }}
            >
              Diagnosticar meu produto
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ transition: 'transform .4s', transform: hover ? 'translateX(4px)' : 'none' }}>
                <path d="M4 14L14 4M14 4H7M14 4V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            </button>
            <span className="mono">40 min · sem compromisso · vagas limitadas por mês</span>
          </div>
        </Reveal>
        <style>{`
          @media (max-width: 480px) {
            .cta-btn { width: 100%; justify-content: center; padding: 18px 24px !important; font-size: 16px !important; }
          }
        `}</style>
      </div>
    </Section>
  );
}

window.CTAFinal = CTAFinal;