function FeatureRow() {
  const items = [
    {
      eyebrow: 'Data analysis',
      swatch: 'var(--syn-red)',
      text: 'var(--syn-red)',
      icon: '../assets/icon-data-analysis.png',
      title: 'Thousands of relationships, mapped live',
      body: "Players, teams, games, and markets — connected in real time. The graph updates as the games do, so the signal is always reading from today's lineup, not last week's.",
    },
    {
      eyebrow: 'Natural language processing',
      swatch: 'var(--syn-orange)',
      text: 'var(--syn-orange-700)',
      icon: '../assets/icon-nlp.png',
      title: 'Beat reports, pressers, and fan sentiment — quantified',
      body: "Beat-writer notes, press conferences, and social sentiment converted into structured, citation-bearing signal. Every claim carries the source and the date.",
    },
    {
      eyebrow: 'Machine learning',
      swatch: 'var(--syn-amber)',
      text: 'var(--syn-amber-700)',
      icon: '../assets/icon-machine-learning.png',
      title: 'A model that compounds with every game',
      body: "Every game, trade, and injury makes the next day's cards sharper. The system gets better the longer the season runs — and the longer you read.",
    },
  ];
  return (
    <section style={{
      padding: '96px 48px',
      background: 'var(--syn-paper)',
      borderBottom: '1px solid var(--syn-rule)',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--syn-font-mono)',
          fontSize: 12, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--syn-fg-subtle)',
          fontWeight: 500, marginBottom: 14,
        }}>What's under the hood</div>
        <h2 style={{
          fontFamily: 'var(--syn-font-display)',
          fontSize: 36, fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.08,
          color: 'var(--syn-navy)',
          margin: '0 0 64px',
          whiteSpace: 'nowrap',
        }}>Three systems powering content creation.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {items.map((it, i) => (
            <div key={i}>
              <img
                src={it.icon}
                alt=""
                style={{
                  display: 'block',
                  width: 96, height: 'auto',
                  marginBottom: 22,
                }}
              />
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                marginBottom: 18,
              }}>
                <span style={{ width: 10, height: 10, background: it.swatch, borderRadius: 2 }} />
                <span style={{
                  fontFamily: 'var(--syn-font-mono)',
                  fontSize: 11, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: it.text,
                  fontWeight: 600,
                }}>{it.eyebrow}</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--syn-font-display)',
                fontSize: 26, fontWeight: 600,
                letterSpacing: '-0.02em', lineHeight: 1.2,
                color: 'var(--syn-navy)',
                margin: '0 0 14px',
              }}>{it.title}</h3>
              <p style={{
                fontFamily: 'var(--syn-font-body)',
                fontSize: 15, lineHeight: 1.65,
                color: 'var(--syn-fg-muted)',
                margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FeatureRow = FeatureRow;