// TopBar — sticky header for the dashboard.
function TopBar({ clock }) {
  return (
    <header className="kit-top">
      <div className="kit-brand">
        <img src="../../assets/logo-trm.png" alt="TRM" />
        <span className="b-meta">Dashboard</span>
      </div>
      <div className="kit-search">
        <i data-lucide="search" style={{ width: 14, height: 14, color: 'var(--ink-3)' }}></i>
        <input placeholder="Search events, bibs, athletes…" />
      </div>
      <div className="kit-top-actions">
        <span className="pill live"><span className="dot"></span>LIVE · 1 EVENT</span>
        <span className="kit-clk">{clock}</span>
        <i data-lucide="bell" style={{ width: 18, height: 18 }}></i>
        <div style={{ width: 28, height: 28, border: '1px solid var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>JR</div>
      </div>
    </header>
  );
}
window.TopBar = TopBar;