// 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(7,132,190,0.22) 0%, transparent 55%),
          radial-gradient(ellipse 120% 80% at 100% 50%, #1B2C3A 0%, #16202A 22%, #111417 55%, #0A0C0E 90%)
        `,
      }}/>
      {/* Drifting line waves over the backdrop */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 1, overflow: 'hidden', pointerEvents: 'none',
      }}>
        <LineWave lines={7}/>
      </div>

      {/* Grain overlay */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(180deg, transparent 60%, rgba(10,12,14,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>
          <h1 data-mf="hero-headline" style={{
            fontFamily: 'Archivo', fontWeight: 800,
            fontSize: 'clamp(44px, 5.4vw, 88px)',
            lineHeight: 0.98, letterSpacing: '-0.025em',
            margin: '26px 0 24px', color: '#fff',
          }}>
            Scaling <span style={{
              color: '#0784BE',
              textShadow: '0 0 40px rgba(7,132,190,0.4)',
            }}>{accentWord || 'Service Businesses'}</span>
          </h1>
          <p data-mf="hero-desc" style={{
            fontFamily: 'Archivo', 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 service business owners master
            the 2 Pillars of Growth — <span style={{ color: '#fff' }}>Marketing &amp; Sales</span> —
            so you can book more inbound clients, sign better contracts, 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>
          </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: '#0784BE',
              fontWeight: 700, marginBottom: 10 }}>SERVICE BUSINESSES SERVED</div>
            <div data-mf="hero-stat-number" style={{ fontFamily: 'Archivo', fontWeight: 800, fontSize: 96,
              lineHeight: 1, letterSpacing: '-0.03em' }}>
              <Counter to={828} suffix="+"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;