// Final CTA — large closing punch
function FinalCTA() {
  return (
    <section style={{ padding: 'var(--pl-section-py) 0 60px' }}>
      <div className="pl-container">
        <div style={{
          position: 'relative',
          background: 'linear-gradient(135deg, var(--pl-accent-ink) 0%, #3b1d8b 50%, var(--pl-accent-deep) 100%)',
          borderRadius: 36,
          padding: '72px 60px',
          overflow: 'hidden',
          textAlign: 'center',
          color: '#fff',
          boxShadow: '0 40px 100px -30px rgba(60,24,140,.6)',
        }}>
          {/* decorative */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0)',
            backgroundSize: '28px 28px',
            opacity: .6,
            maskImage: 'radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%)',
            WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%)',
          }} />
          {/* glow */}
          <div style={{
            position: 'absolute', top: -160, left: '50%', transform: 'translateX(-50%)',
            width: 600, height: 600, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(168, 85, 247, .25), transparent 65%)',
          }} />

          <div style={{ position: 'relative' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 14px', borderRadius: 999,
              background: 'rgba(255,255,255,.12)',
              border: '1px solid rgba(255,255,255,.2)',
              fontSize: 12.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase',
              marginBottom: 24,
            }}>
              <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#fbbf24' }} />
              Promo lanzamiento activa
            </span>
            <h2 className="pl-display" style={{
              fontSize: 'clamp(40px, 5.5vw, 72px)', margin: '0 0 18px', letterSpacing: '-.025em',
            }}>
              Deja de buscar leads. <br />
              <em style={{ fontStyle: 'normal', background: 'linear-gradient(90deg, #fbbf24, #fde68a)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
                Que te encuentren ellos.
              </em>
            </h2>
            <p style={{ fontSize: 19, color: 'rgba(255,255,255,.78)', maxWidth: 620, margin: '0 auto 36px' }}>
              Pago anual único. Cancela cuando quieras.
              <br />
              O elige Lifetime: <b style={{ color: '#fbbf24' }}>699€ una vez, para siempre.</b>
            </p>

            <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
              <a href="#planes" className="pl-btn pl-btn-lg" style={{ background: '#fbbf24', color: '#1a0d3a', boxShadow: '0 10px 30px -10px rgba(251,191,36,.6)' }}>
                Pillar mi acceso ahora <IconArrowRight size={16} stroke={2.5} />
              </a>
              <a href="#video" className="pl-btn pl-btn-lg" style={{ background: 'rgba(255,255,255,.1)', color: '#fff', border: '1px solid rgba(255,255,255,.2)' }}>
                <IconPlay size={14} /> Ver el demo
              </a>
            </div>

            <div style={{
              marginTop: 30,
              display: 'inline-flex', alignItems: 'center', gap: 22,
              fontSize: 13, color: 'rgba(255,255,255,.65)',
              flexWrap: 'wrap', justifyContent: 'center',
            }}>
              <span>🔒 Pago seguro con Stripe</span>
              <span>·</span>
              <span>⚡ Acceso inmediato</span>
              <span>·</span>
              <span>♾️ Cancela cuando quieras</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.FinalCTA = FinalCTA;