// Hero — cinematic opener with light-streaks, headline, and key stats
function Hero({ onCTA, accentWord }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Cinematic light-streak backdrop */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `
          radial-gradient(ellipse 80% 60% at 72% 50%, rgba(232,18,60,0.22) 0%, transparent 55%),
          radial-gradient(ellipse 120% 80% at 100% 50%, #5A0A24 0%, #45091E 22%, #1F080D 55%, #120609 90%)
        `,
      }}/>
      {/* SVG streak rays */}
      <svg viewBox="0 0 1440 720" preserveAspectRatio="xMidYMid slice" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 0,
        opacity: 0.35, pointerEvents: 'none',
      }}>
        <defs>
          <radialGradient id="glow" cx="72%" cy="50%" r="30%">
            <stop offset="0%" stopColor="#FF1F4A" stopOpacity="0.7"/>
            <stop offset="100%" stopColor="#FF1F4A" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="ray" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#FF1F4A" stopOpacity="0"/>
            <stop offset="60%" stopColor="#FF8FA3" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="#fff" stopOpacity="0.9"/>
          </linearGradient>
        </defs>
        <circle cx="1040" cy="360" r="280" fill="url(#glow)"/>
        {Array.from({length: 38}).map((_, i) => {
          const a = (i / 38) * Math.PI * 2;
          const r1 = 120, r2 = 900;
          const x1 = 1040 + Math.cos(a) * r1, y1 = 360 + Math.sin(a) * r1;
          const x2 = 1040 + Math.cos(a) * r2, y2 = 360 + Math.sin(a) * r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
            stroke="url(#ray)" strokeWidth={1.3 + (i%3)*0.4} opacity={0.35 + (i%5)*0.12}/>;
        })}
      </svg>

      {/* Grain overlay */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(180deg, transparent 60%, rgba(10,6,8,0.5) 100%)',
      }}/>

      <div data-mf="hero-inner" style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1280, margin: '0 auto', padding: '88px 44px 120px',
        display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 60, alignItems: 'center',
      }}>
        {/* LEFT — headline stack */}
        <div>
          <Eyebrow tone="red">Welcome to Master Filmmaker</Eyebrow>
          <h1 data-mf="hero-headline" style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(52px, 6.6vw, 104px)',
            lineHeight: 0.98, letterSpacing: '-0.025em',
            margin: '26px 0 24px', color: '#fff',
          }}>
            Scaling Video <span style={{color: 'rgba(255,255,255,0.32)'}}>&amp;</span><br/>
            Creative <span style={{
              color: '#E8123C',
              textShadow: '0 0 40px rgba(232,18,60,0.4)',
            }}>{accentWord || 'Agencies'}</span>
          </h1>
          <p data-mf="hero-desc" style={{
            fontFamily: 'Poppins', fontSize: 18, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.72)', maxWidth: 540, margin: '0 0 36px',
            fontWeight: 400,
          }}>
            <b style={{ color: '#fff' }}>No Fluff. No Gimmicks.</b> We help agency owners master
            the 3 Pillars of Business — <span style={{ color: '#fff' }}>Marketing, Sales & Fulfillment</span> —
            so you can reach more clients, tell more stories, and build the business of your dreams.
          </p>
          <div data-mf="hero-cta-row" style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <Button size="xl" onClick={onCTA}>Schedule Demo</Button>
            <a data-mf="hero-watch-link" href="#free-training" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              color: '#fff', fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
              textDecoration: 'none', padding: '10px 4px',
            }}>
              <span style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.2)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>▶</span>
              Watch The Free Training
            </a>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 44, flexWrap: 'wrap' }}>
            <Rating/>
          </div>
        </div>

        {/* RIGHT — stat card */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignSelf: 'stretch', justifyContent: 'center' }}>
          <div data-mf="hero-stat-card" style={{
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.10)',
            borderRadius: 24, padding: 36,
            backdropFilter: 'blur(12px)',
          }}>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', color: '#E8123C',
              fontWeight: 700, marginBottom: 10 }}>AGENCY OWNERS SERVED</div>
            <div data-mf="hero-stat-number" style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 96,
              lineHeight: 1, letterSpacing: '-0.03em' }}>
              <Counter to={804} suffix="+"/>
            </div>
            <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)', marginTop: 12, lineHeight: 1.5 }}>
              Video & creative business owners scaling with the 3 Pillars framework
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;