// Overview.jsx — program stats + funding areas + marquee events
function Overview() {
  const stats = [
    { num: '45+', label: 'Student-Athletes' },
    { num: '10', label: 'Home Games' },
    { num: '10K+', label: 'Annual Impressions' },
    { num: '15K', label: 'Vype Reach' },
  ];

  const funds = window.FUNDING_AREAS;
  const events = window.MARQUEE_EVENTS;

  return (
    <section className="section" style={{ borderBottom: '1px solid var(--border)' }}>
      <div className="section-narrow">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Why Sponsor</div>
          <h2 className="chrome-text" style={{
            fontSize: 'clamp(40px, 5.5vw, 72px)', margin: 0,
          }}>
            Back the Program.<br />Reach the Community.
          </h2>
          <p style={{
            maxWidth: 700, margin: '20px auto 0',
            fontSize: 16, color: 'var(--fg-3)', textAlign: 'center',
          }}>
            Sponsorships fund equipment, travel, facility upgrades, and team-building for the
            Vandegrift Boys Basketball program — and put your business in front of the Four Points
            community at every home game, on every livestream, and across the Booster Club channels.
          </p>
        </div>

        {/* Stats grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 0,
          border: '1px solid var(--border)',
          borderRadius: 6,
          overflow: 'hidden',
          background: 'linear-gradient(180deg, #161616 0%, #0a0a0a 100%)',
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 28px rgba(0,0,0,0.5)',
          marginBottom: 80,
        }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{
              padding: '40px 24px',
              textAlign: 'center',
              borderRight: i < stats.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <div className="stat-num">{s.num}</div>
              <div style={{
                marginTop: 14,
                fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 11,
                textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--fg-3)',
              }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Where it goes */}
        <div style={{ marginBottom: 80 }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Where Every Dollar Goes</div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(32px, 4vw, 48px)',
              textTransform: 'uppercase', letterSpacing: '0.02em',
              color: 'var(--viper-white)', margin: 0,
            }}>Direct to the Program</h3>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
            gap: 14,
          }}>
            {funds.map(f => (
              <div key={f.num} style={{
                padding: '24px 22px',
                background: 'linear-gradient(180deg, #161616 0%, #0a0a0a 100%)',
                border: '1px solid var(--border)',
                borderRadius: 6,
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14,
                  color: 'var(--fg-muted)', letterSpacing: '0.08em', marginBottom: 12,
                }}>{f.num}</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14,
                  textTransform: 'uppercase', letterSpacing: '0.16em',
                  color: 'var(--viper-white)', marginBottom: 10,
                }}>{f.title}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.55 }}>{f.desc}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Marquee events */}
        <div>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Marquee Touchpoints</div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(32px, 4vw, 48px)',
              textTransform: 'uppercase', letterSpacing: '0.02em',
              color: 'var(--viper-white)', margin: 0,
            }}>Your Brand, All Season</h3>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 0,
            border: '1px solid var(--border)',
            borderRadius: 6,
            overflow: 'hidden',
            background: 'linear-gradient(180deg, #141414 0%, #080808 100%)',
          }}>
            {events.map((e, i) => (
              <div key={e.title} style={{
                padding: '28px 22px',
                borderRight: i < events.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <div style={{
                  display: 'inline-block',
                  padding: '4px 10px',
                  background: 'linear-gradient(180deg, #d8d8d8 0%, #9a9a9a 100%)',
                  color: '#0a0a0a',
                  fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 10,
                  textTransform: 'uppercase', letterSpacing: '0.18em',
                  borderRadius: 3, marginBottom: 14,
                }}>{e.when}</div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22,
                  textTransform: 'uppercase', letterSpacing: '0.02em',
                  color: 'var(--viper-white)', lineHeight: 1.05, marginBottom: 8,
                }}>{e.title}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.5 }}>{e.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}