// Free Training CTA — "Join The Fastest Growing Community" + video
function CommunityCTA({ onWatch }) {
  return (
    <section data-mf="community-cta" id="free-training" style={{
      position: 'relative',
      background: `
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(232,18,60,0.22) 0%, transparent 60%),
        linear-gradient(180deg, #0A0608 0%, #15070B 100%)
      `,
      padding: '130px 44px 140px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow tone="red">Free Training · 45 Minutes</Eyebrow>
        <h2 style={{
          fontFamily: 'Poppins', fontWeight: 800,
          fontSize: 'clamp(44px, 5.6vw, 84px)',
          lineHeight: 0.98, letterSpacing: '-0.028em',
          margin: '24px auto 18px', color: '#fff',
        }}>
          Join the fastest growing community<br/>
          <span style={{ color: '#E8123C' }}>of creatives on earth.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)',
          maxWidth: 640, margin: '0 auto 48px' }}>
          Watch the exact 3-Pillars framework our clients use to add five-figure retainers in 45 minutes or less. No sign-up tricks. No upsell maze.
        </p>

        {/* YouTube embed */}
        <div style={{
          position: 'relative', aspectRatio: '16/9',
          maxWidth: 960, margin: '0 auto',
          borderRadius: 24, overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.12)',
          boxShadow: '0 30px 80px rgba(0,0,0,0.6), 0 0 100px rgba(232,18,60,0.2)',
          background: '#0A0608',
        }}>
          <iframe
            src="https://www.youtube-nocookie.com/embed/4-3MUUIEFwI?rel=0&modestbranding=1&playsinline=1"
            title="Master Filmmaker — Free Training"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
            referrerPolicy="strict-origin-when-cross-origin"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', border: 0,
            }}
          />
        </div>

        <div style={{ marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <Button size="xl" onClick={onWatch}>Watch The Free Training</Button>
        </div>
      </div>
    </section>
  );
}
window.CommunityCTA = CommunityCTA;