// Hero.jsx — full-bleed hero
function Hero({ onCta }) {
  return (
    <section style={{
      position: 'relative',
      minHeight: 'min(820px, 92vh)',
      padding: '120px 32px 96px',
      display: 'grid', placeItems: 'center',
      overflow: 'hidden',
      borderBottom: '1px solid var(--viper-steel)',
    }}>
      <div className="hero-photo"></div>
      <div className="hero-vignette"></div>

      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 1100 }}>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 12,
          textTransform: 'uppercase', letterSpacing: '0.32em', color: 'var(--fg-3)',
          marginBottom: 22,
        }}>
          Vandegrift Vipers Boys Basketball · 2026–2027 Season
        </div>

        <h1 className="chrome-text" style={{
          fontSize: 'clamp(72px, 13vw, 200px)',
          margin: 0,
        }}>
          Become a<br />Vipers Sponsor
        </h1>

        <div style={{ display: 'flex', justifyContent: 'center', margin: '34px 0 28px' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 16,
            padding: '10px 22px',
            background: 'linear-gradient(180deg, #d8d8d8 0%, #9a9a9a 50%, #4a4a4a 100%)',
            color: '#0a0a0a',
            fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 13,
            textTransform: 'uppercase', letterSpacing: '0.2em',
            borderRadius: 4,
            boxShadow: 'var(--shadow-plate)',
            borderTop: '1px solid #f4f4f4',
            borderBottom: '1px solid #1a1a1a',
          }}>
            <span>Relentless</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#0a0a0a' }}></span>
            <span>Disciplined</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#0a0a0a' }}></span>
            <span>Vipers</span>
          </div>
        </div>

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 17, color: 'var(--fg-2)',
          maxWidth: 640, margin: '0 auto 36px', lineHeight: 1.6,
        }}>
          Partner with Vandegrift Boys Basketball and put your business in front of 300+ Viper families,
          10 home games, a 15K Vype livestream audience, and a Fall golf tournament.
          Six tiers — pick what fits.
        </p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="viper-btn-chrome" onClick={onCta}>Choose a Tier ↓</button>
          <a href="#compare" className="viper-btn-ghost" style={{ textDecoration: 'none', display: 'inline-block' }}>
            Compare Benefits
          </a>
        </div>
      </div>

      {/* Scroll cue */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 10,
        textTransform: 'uppercase', letterSpacing: '0.32em', color: 'var(--fg-muted)',
      }}>↓ Scroll</div>
    </section>
  );
}