const FEATURES = [
  {
    icon: '◆',
    title: 'Multi-dimensional player archetypes',
    body: 'Players aren\'t one thing. Our model scores every dimension — pitcher discipline, batter approach, NBA usage shape — and blends them per matchup.',
  },
  {
    icon: '↻',
    title: 'Auto-calibrating engine',
    body: 'Every resolved grade trains the next one. Point-biserial weight tuning, per-stat calibration, blind-spot detection. The model improves itself.',
  },
  {
    icon: '⚡',
    title: 'Beat reporter intelligence',
    body: 'Lineup intel from the people closest to the team — 30 minutes before tip. Trust-tiered, redistribution-aware, line-correlated.',
  },
  {
    icon: '⊘',
    title: 'Kill conditions',
    body: 'We don\'t just grade the prop. We tell you what kills it. Six hard checks per read: minutes, sample, fatigue, blowout risk, splits, line conflict.',
  },
  {
    icon: '∿',
    title: 'Parlay correlation math',
    body: 'Phi-coefficient analysis catches the legs that secretly fight each other. The books love correlated unders. We surface them.',
  },
  {
    icon: '⌧',
    title: 'ABS intelligence (MLB)',
    body: 'The automated strike zone changes everything. Per-pitcher, per-batter discipline scoring. Zone 14 framing loss. Challenge math.',
  },
  {
    icon: '◯',
    title: 'Every sport, one engine',
    body: 'NBA. MLB. WNBA. Soccer. NFL coming September 2026 — more rolling out through 2026. A unified intelligence layer with sport-specific calibration.',
  },
  {
    icon: '⌦',
    title: 'The honest ledger',
    body: 'Every grade. Every result. No hiding. No deletion. Brier score and CLV from day one. Public accuracy by tier.',
  },
];

export default function Features() {
  return (
    <section
      style={{
        padding: '96px 24px',
        borderTop: '1px solid var(--border)',
      }}
    >
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <header style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
          <h2
            className="text-balance"
            style={{
              fontSize: 'clamp(28px, 4vw, 44px)',
              fontWeight: 700,
              letterSpacing: '-0.02em',
              marginBottom: 16,
            }}
          >
            One platform. Everything connected.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
            Built by bettors who got tired of switching between five tabs to grade one prop.
          </p>
        </header>

        <div
          style={{
            display: 'grid',
            gap: 16,
          }}
          className="features-grid"
        >
          {FEATURES.map((f, i) => (
            <div
              key={f.title}
              className={`surface surface-hover diagonal-cut animate-fade-up stagger-${(i % 6) + 1}`}
              style={{ padding: 24 }}
            >
              <div
                className="mono"
                style={{
                  fontSize: 28,
                  color: 'var(--grade-a)',
                  marginBottom: 16,
                  lineHeight: 1,
                }}
                aria-hidden
              >
                {f.icon}
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>{f.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        :global(.features-grid) {
          grid-template-columns: 1fr;
        }
        @media (min-width: 640px) {
          :global(.features-grid) {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        @media (min-width: 1024px) {
          :global(.features-grid) {
            grid-template-columns: repeat(4, 1fr);
          }
        }
      `}</style>
    </section>
  );
}