window.FinalCTA = function FinalCTA() {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();

  const goToContact = (e) => {
    e.preventDefault();
    const el = document.getElementById('contact');
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  const sectionPadding = isMobile ? '128px 24px' : isTablet ? '160px 32px' : '240px 48px';
  const h2Size = isMobile ? 56 : isTablet ? 96 : 160;

  return (
    <section style={{
      padding: sectionPadding,
      background: 'var(--invert-bg)',
      color: 'var(--invert-text)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          fontSize: h2Size, fontWeight: 800, lineHeight: 0.92,
          letterSpacing: '-0.045em',
          color: 'var(--invert-text)', margin: '0 0 40px',
          maxWidth: 1080,
        }}>
          The future<br />
          has favorites.
        </h2>
        <p style={{
          fontSize: isMobile ? 18 : 22, lineHeight: 1.4,
          color: '#a3a3a3', margin: '0 0 48px',
          maxWidth: 600,
        }}>
          Six weeks from now: operating with agents, or watching competitors do it. Pick a side.
        </p>
        <a href="#contact" onClick={goToContact} className="btn-solid" style={{
          background: '#ffffff',
          color: 'var(--invert-bg)',
          borderColor: '#ffffff',
        }}>
          Book a consultation
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </section>
  );
};