// site/features.jsx

function Features() {
  return (
    <section className="section features-section" id="features">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">
            <span className="num">01</span>
            <span>Widget System</span>
          </div>
          <h2 className="section-title">Six widgets.<br/>Every match.</h2>
        </div>
        <p className="section-kicker">
          Drop a Setly widget anywhere — lock screen, home screen, StandBy, Smart Stack.
          They reshape themselves around the surface you're watching.
        </p>
      </div>

      <div className="features-grid">
        <div className="feat-card span-7 dark">
          <div className="feat-num">01 / SEASON</div>
          <h3 className="feat-title">The whole<br/>ATP year, at a glance.</h3>
          <p className="feat-body">
            From Melbourne in January to Turin in November — fourteen tournaments, four surfaces,
            one strip. Live tournaments glow, finished ones fade.
          </p>
          <div className="feat-mock">
            <WidgetSeason/>
          </div>
        </div>

        <div className="feat-card span-5">
          <div className="feat-num">02 / LIVE</div>
          <h3 className="feat-title">Score-streaming<br/>that wakes up.</h3>
          <p className="feat-body">
            Live Activities push every break point to your Dynamic Island. Set scores
            update silently between points.
          </p>
          <div className="feat-mock">
            <WidgetLive/>
          </div>
        </div>

        <div className="feat-card span-5 accent">
          <div className="feat-num" style={{ color: 'rgba(255,255,255,0.7)' }}>03 / SURFACE</div>
          <h3 className="feat-title">A palette<br/>per surface.</h3>
          <p className="feat-body">
            Clay turns the widget terra rossa, grass goes Wimbledon green, hard glides into
            Melbourne blue, indoor goes purple. The widget knows where the ball is.
          </p>
          <div className="feat-mock" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div style={{ background: '#FF6B30', borderRadius: 14, padding: 12, fontWeight: 700, fontFamily: 'var(--font-display)', color: '#fff', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Clay<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 500, letterSpacing: '0.16em', marginTop: 4 }}>#FF6B30</div></div>
            <div style={{ background: '#5AE860', borderRadius: 14, padding: 12, fontWeight: 700, fontFamily: 'var(--font-display)', color: '#082B0B', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Grass<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 500, letterSpacing: '0.16em', marginTop: 4 }}>#5AE860</div></div>
            <div style={{ background: '#4E98FF', borderRadius: 14, padding: 12, fontWeight: 700, fontFamily: 'var(--font-display)', color: '#fff', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Hard<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 500, letterSpacing: '0.16em', marginTop: 4 }}>#4E98FF</div></div>
            <div style={{ background: '#A78BFA', borderRadius: 14, padding: 12, fontWeight: 700, fontFamily: 'var(--font-display)', color: '#2E0D60', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Indoor<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 500, letterSpacing: '0.16em', marginTop: 4 }}>#A78BFA</div></div>
          </div>
        </div>

        <div className="feat-card span-7">
          <div className="feat-num">04 / TREND</div>
          <h3 className="feat-title">Follow your favourite<br/>player like a stock.</h3>
          <p className="feat-body">
            Pin Sinner, Alcaraz, Draper, Musetti — Setly watches their ranking, win rate, and
            tournament progression. Sparkline updates twice a day.
          </p>
          <div className="feat-mock" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, maxWidth: 540 }}>
            <WidgetTrend surface="clay"/>
            <WidgetTrend surface="grass"/>
          </div>
        </div>

        <div className="feat-card span-6">
          <div className="feat-num">05 / COUNTDOWN</div>
          <h3 className="feat-title">Next slam,<br/>at a glance.</h3>
          <p className="feat-body">
            A live countdown to the next Grand Slam — colored by surface, accurate to the second.
          </p>
          <div className="feat-mock" style={{ maxWidth: 320 }}>
            <WidgetCountdown/>
          </div>
        </div>

        <div className="feat-card span-6">
          <div className="feat-num">06 / PRIVACY</div>
          <h3 className="feat-title">No accounts.<br/>No tracking.</h3>
          <p className="feat-body">
            Setly is a single-developer app. No analytics SDKs, no email harvesting,
            no in-app ads. The data lives on-device.
          </p>
          <div className="feat-mock" style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {['No account', 'No ads', 'No trackers', 'On-device'].map(t => (
              <div key={t} style={{
                padding: '10px 16px', borderRadius: 999,
                border: '1px solid var(--divider)',
                fontWeight: 600, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'var(--text-2)'
              }}>{t}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features });