// CTASection.jsx — Dark accent banner closing CTA (editorial)

const CTASection = ({ onNavigate, bookingUrl }) => (
  <section style={{
    background: '#1a1a1a',
    padding: '96px 32px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div style={{
      maxWidth: 1100, margin: '0 auto',
      display: 'flex', flexDirection: 'column', gap: 40,
    }}>
      <h2 style={{
        fontSize: 'clamp(44px, 5.6vw, 88px)',
        color: '#fafaf7',
        margin: 0,
        lineHeight: 1.05,
        letterSpacing: '-0.02em',
        maxWidth: 980,
      }} className="cta-headline">
        Looking to grow your consulting business on <em style={{ color: '#a08245' }}>LinkedIn?</em>
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 560 }}>
        <p style={{
          fontFamily: "'Geist', sans-serif",
          fontSize: 18, color: 'rgba(250,250,247,0.75)',
          fontWeight: 300, lineHeight: 1.6,
          margin: 0,
        }}>Let's connect and see if we're a good fit to collaborate.</p>
        <div>
          <a href={bookingUrl} target="_blank" rel="noopener noreferrer"
            style={{
              display: 'inline-block',
              background: '#fafaf7',
              color: '#1a1a1a',
              fontFamily: "'Geist', sans-serif",
              fontSize: 12, fontWeight: 400,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              padding: '18px 34px', borderRadius: 2,
              textDecoration: 'none',
              transition: 'background 200ms',
            }}
            onMouseEnter={e => e.currentTarget.style.background = '#ffffff'}
            onMouseLeave={e => e.currentTarget.style.background = '#fafaf7'}
          >Book an intro call</a>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { CTASection });