const STEPS = [
  {
    n: '01',
    title: 'Read a prop',
    body: 'Pick a sport. Find the player. Set the line. We grade it in seconds across forty-plus factors.',
  },
  {
    n: '02',
    title: 'Read the grade',
    body: 'Letter grade. Projection. Confidence. Factor breakdown. Kill conditions. Alt line ladder. The whole picture.',
  },
  {
    n: '03',
    title: 'Make the call',
    body: 'Take the prop, walk away, or shop the alt line. Either way, you decided with intelligence — not vibes.',
  },
];

export default function HowItWorks() {
  return (
    <section
      style={{
        padding: '96px 24px',
        borderTop: '1px solid var(--border)',
      }}
    >
      <div style={{ maxWidth: 1100, 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 }}
          >
            How it works.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
            Three steps. No tout picks. No black box.
          </p>
        </header>

        <div className="hiw-grid" style={{ display: 'grid', gap: 24, position: 'relative' }}>
          {STEPS.map((s, i) => (
            <div
              key={s.n}
              className={`surface diagonal-cut animate-fade-up stagger-${i + 1}`}
              style={{
                padding: 32,
                position: 'relative',
              }}
            >
              <div
                className="mono"
                style={{
                  fontSize: 12,
                  fontWeight: 700,
                  color: 'var(--grade-a)',
                  letterSpacing: '0.10em',
                  marginBottom: 24,
                }}
              >
                STEP {s.n}
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        :global(.hiw-grid) {
          grid-template-columns: 1fr;
        }
        @media (min-width: 768px) {
          :global(.hiw-grid) {
            grid-template-columns: repeat(3, 1fr);
          }
        }
      `}</style>
    </section>
  );
}