const NavButton = ({ id, label, icon, active, onClick }) => (
  <button onClick={()=> onClick(id)} style={{
    display:'flex', alignItems:'center', gap: 10, padding:'10px 12px', borderRadius: 10,
    background: active ? 'var(--fg)' : 'transparent', color: active ? '#fff' : 'var(--fg-muted)',
    border:'none', cursor:'pointer', fontSize: 14, fontWeight: active ? 500 : 400, textAlign:'left',
    transition:'background .15s ease, color .15s ease', width:'100%'
  }}
  onMouseEnter={e=> !active && (e.currentTarget.style.background='var(--surface-2)', e.currentTarget.style.color='var(--fg)')}
  onMouseLeave={e=> !active && (e.currentTarget.style.background='transparent', e.currentTarget.style.color='var(--fg-muted)')}
  >
    {icon}<span>{label}</span>
  </button>
);

Object.assign(window, { NavButton });