function SideNav({ active, onNav }) {
  const items = [
    { id: 'events', icon: 'calendar', label: 'Events', badge: '12' },
    { id: 'live', icon: 'radio', label: 'Race control', badge: '1' },
    { id: 'results', icon: 'trophy', label: 'Results' },
    { id: 'participants', icon: 'users', label: 'Participants' },
    { id: 'mats', icon: 'route', label: 'Timing mats' },
    { id: 'reports', icon: 'bar-chart-3', label: 'Reports' },
  ];
  const settings = [
    { id: 'team', icon: 'user-cog', label: 'Team' },
    { id: 'billing', icon: 'credit-card', label: 'Billing' },
    { id: 'settings', icon: 'settings', label: 'Settings' },
  ];
  return (
    <aside className="kit-side">
      <div className="kit-side-section">Operations</div>
      {items.map(it => (
        <div key={it.id} className={'kit-nav-item' + (active === it.id ? ' active' : '')} onClick={() => onNav(it.id)}>
          <i data-lucide={it.icon}></i>
          <span>{it.label}</span>
          {it.badge && <span className="badge">{it.badge}</span>}
        </div>
      ))}
      <div className="kit-side-section">Account</div>
      {settings.map(it => (
        <div key={it.id} className={'kit-nav-item' + (active === it.id ? ' active' : '')} onClick={() => onNav(it.id)}>
          <i data-lucide={it.icon}></i>
          <span>{it.label}</span>
        </div>
      ))}
      <div style={{ flex: 1 }}></div>
      <div style={{ padding: 14, borderTop: '1px solid var(--hairline)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        v3.18.0 · build 2741
      </div>
    </aside>
  );
}
window.SideNav = SideNav;