function RaceControl({ leaders, alerts, mats }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
      <div className="card">
        <div className="card-head">
          <h3>Live leaderboard · Coastline 10K</h3>
          <span className="pill live" style={{ marginLeft: 'auto' }}><span className="dot"></span>LIVE</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 14, fontWeight: 600 }}>00:42:18.4</span>
        </div>
        <table className="lb">
          <thead>
            <tr>
              <th style={{ width: 36 }}>POS</th>
              <th style={{ width: 50 }}>BIB</th>
              <th>NAME</th>
              <th>WAVE</th>
              <th className="num">SPLIT 3</th>
              <th className="num">GAP</th>
              <th className="num">PACE</th>
            </tr>
          </thead>
          <tbody>
            {leaders.map(l => (
              <tr key={l.pos}>
                <td style={{ fontWeight: 700, color: l.pos === 1 ? 'var(--flag)' : 'var(--ink)' }}>{l.pos}</td>
                <td>{l.bib}</td>
                <td className="name">{l.name}</td>
                <td>{l.wave}</td>
                <td className="num">{l.split}</td>
                <td className={'num ' + (l.gap === '—' ? '' : 'loss')}>{l.gap}</td>
                <td className="num">{l.pace}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Timing mats</h3></div>
          <div style={{ padding: 14, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {mats.map(m => (
              <div key={m.id} style={{ border: '1px solid var(--hairline)', padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="dot" style={{ width: 8, height: 8, borderRadius: 999, background: m.online ? 'var(--green)' : 'var(--flag)', display: 'inline-block' }}></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600 }}>{m.name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-4)' }}>{m.id} · {m.km} km</div>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>{m.reads}</span>
              </div>
            ))}
          </div>
        </div>
        <AlertFeed alerts={alerts} />
      </div>
    </div>
  );
}
window.RaceControl = RaceControl;