// FinalCTA — ultra-slim, Fortune 500 corporate strip
function FinalCTA() {
  return (
    <section className="desktop-only" style={{ background: '#0B1220', color: '#fff',
      borderTop: '1px solid #eaecf0', position: 'relative', overflow: 'hidden' }}>
      {/* subtle right-side glow */}
      <div aria-hidden style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, transparent 0%, rgba(30,87,214,0.10) 55%, rgba(30,87,214,0.22) 100%)',
        pointerEvents: 'none' }}/>
      {/* faint grid */}
      <svg aria-hidden width="100%" height="100%" style={{ position: 'absolute', inset: 0,
        opacity: 0.10, pointerEvents: 'none' }}>
        <defs>
          <pattern id="finalCtaGrid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#344054" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#finalCtaGrid)"/>
      </svg>

      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto',
        padding: '24px 64px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>

        {/* Left: kicker + headline */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#12b76a',
              boxShadow: '0 0 0 4px rgba(18,183,106,0.18)' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)' }}>
              Get started
            </span>
          </div>
          <div aria-hidden style={{ width: 1, height: 26, background: 'rgba(255,255,255,0.14)' }}/>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600,
            letterSpacing: '-0.018em', lineHeight: 1.25, color: '#fff' }}>
            Get your quote in seconds.
          </h2>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.58)',
            letterSpacing: '-0.005em' }}>
            No contracts, no integration hoops.
          </span>
        </div>

        {/* Right: trust facts + actions */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 18,
            fontSize: 12, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.005em' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="check" size={12} style={{ color: '#6EE7B7' }}/> No credit card
            </span>
            <span style={{ color: 'rgba(255,255,255,0.18)' }}>·</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="check" size={12} style={{ color: '#6EE7B7' }}/> No setup fee
            </span>
            <span style={{ color: 'rgba(255,255,255,0.18)' }}>·</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="check" size={12} style={{ color: '#6EE7B7' }}/> Live in minutes
            </span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <a href="#hero-quote" onClick={(e) => {
              e.preventDefault();
              const src = /Integrations/i.test(location.pathname)
                ? 'integrations-final-cta'
                : 'homepage-final-cta';
              if (window.__abgsCTA && window.__abgsCTA.openQuote) {
                window.__abgsCTA.openQuote(src);
              } else {
                // Fallback: smooth-scroll to hero if helpers haven't loaded.
                const el = document.getElementById('hero-quote');
                if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72,
                  behavior: 'smooth' });
              }
            }} style={{ padding: '10px 18px', background: '#fff', color: '#0B1220',
              border: 0, borderRadius: 8, fontFamily: 'inherit', fontSize: 13,
              fontWeight: 600, cursor: 'pointer', display: 'inline-flex',
              alignItems: 'center', gap: 8, textDecoration: 'none',
              letterSpacing: '-0.005em' }}>
              Get instant quote
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </a>
            <button onClick={() => {
              if (window.__abgsCTA && window.__abgsCTA.openContact) {
                window.__abgsCTA.openContact('final-cta-talk', { intent: 'sales' });
              }
            }} style={{ padding: '10px 18px', background: 'transparent',
              color: '#fff', border: '1px solid rgba(255,255,255,0.22)', borderRadius: 8,
              fontFamily: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'pointer',
              letterSpacing: '-0.005em' }}>
              Talk to sales
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.FinalCTA = FinalCTA;