const FEATURES = [
  {
    icon: '◆',
    title: 'Player DNA archetypes',
    body: 'Every player has a prop fingerprint. We classify it, show you which props are reliable vs volatile, and grade accordingly.',
  },
  {
    icon: '↻',
    title: 'Self-improving model',
    body: 'Every resolved grade makes the next one sharper. The engine learns what works and corrects what doesn\'t.',
  },
  {
    icon: '⚡',
    title: 'Lineup intel before tip-off',
    body: 'Real-time lineup and injury data from trusted sources, giving you the edge before the books adjust.',
  },
  {
    icon: '⊘',
    title: 'Kill conditions',
    body: 'Six hard checks on every prop. If minutes, fatigue, blowout risk, or splits say no, we flag it — even on an A grade.',
  },
  {
    icon: '∿',
    title: 'Parlay correlation math',
    body: 'We catch the legs that secretly fight each other. The books love correlated unders — we surface them before you tap.',
  },
  {
    icon: '⌧',
    title: 'Deep pitcher-batter matchups',
    body: 'We score discipline, contact quality, and zone tendencies for every MLB matchup. Not just ERA.',
  },
  {
    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. Public accuracy by grade tier, once the sample is large enough to mean something.',
  },
];

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>
  );
}