function HeroClock({ time, eventName, sport, distance, weather }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', padding: '24px 32px', borderBottom: '1px solid var(--night-line)' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="../../assets/logo-trm.png" alt="TRM" style={{ height: 26, filter: 'invert(1) brightness(1.1)' }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--night-fg-3)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Live tracking</span>
          <span className="pill live"><span className="dot"></span>LIVE</span>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, marginTop: 14, letterSpacing: '-0.02em' }}>{eventName}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--night-fg-2)', marginTop: 8, letterSpacing: '0.04em' }}>
          {sport} · {distance} · {weather}
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--night-fg-3)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Race clock</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 96, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 6 }}>{time}</div>
      </div>
    </div>
  );
}
window.HeroClock = HeroClock;