// Shared sidebar — slate aesthetic. Use: <Sidebar active="improve" badges={{ tasks: 2, defects: 21 }} />
const Sidebar = ({ active, badges = {} }) => {
  const groups = [
    { g: 'Workspace', items: [
      ['home', 'Home'],
      ['tasks', 'My tasks', badges.tasks],
      ['audit', 'Audit'],
      ['defects', 'Defects', badges.defects],
      ['improve', 'Improve', badges.improve],
      ['solve', 'Solve'],
      ['checks', 'Checks'],
      ['memory', 'Memory'],
      ['quality', 'Quality'],
    ]},
    { g: 'Engagement', items: [
      ['feed', 'Feed'],
      ['leaderboard', 'Leaderboard'],
      ['coach', 'Coach'],
    ]},
  ];
  return (
    <aside style={{ background: 'linear-gradient(180deg,#1A1F2A,#0F1218)', borderRight: '1px solid #2A3142', padding: '18px 12px', display: 'flex', flexDirection: 'column' }}>
      <style>{`.nav-item:hover{background:rgba(255,255,255,0.04)}`}</style>
      <div style={{ display: 'flex', gap: 11, alignItems: 'center', padding: 10, border: '1px solid #2A3142', borderRadius: 12, background: 'rgba(255,255,255,0.03)', marginBottom: 16 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: 'linear-gradient(135deg,#FF5722,#FF8A4F)', color: '#fff', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>R</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, color: '#F0EDE5' }}>Your Plant</div>
          <div className="mono" style={{ fontSize: 9, color: '#7A8294', marginTop: 2 }}>LEANOS · v2</div>
        </div>
      </div>
      {groups.map(g => (
        <div key={g.g} style={{ marginTop: 14 }}>
          <div className="mono" style={{ fontSize: 9, color: '#5A6378', padding: '0 12px', marginBottom: 6 }}>{g.g}</div>
          {g.items.map(([k, n, b]) => {
            const a = k === active;
            return (
              <div key={k} className="nav-item" style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', borderRadius: 8, fontSize: 13, color: a ? '#FFFFFF' : '#B8BFCE', cursor: 'pointer', background: a ? 'rgba(255,87,34,0.15)' : 'transparent', borderLeft: a ? '2px solid #FF5722' : '2px solid transparent', paddingLeft: a ? 10 : 12 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: a ? '#FF5722' : '#3A4258' }} />
                <span>{n}</span>
                {b && <span className="mono" style={{ marginLeft: 'auto', fontSize: 10, padding: '1px 6px', borderRadius: 5, background: '#FF5722', color: '#fff' }}>{b}</span>}
              </div>
            );
          })}
        </div>
      ))}
      <div style={{ marginTop: 'auto', display: 'flex', gap: 10, padding: 10, border: '1px solid #2A3142', borderRadius: 10, background: 'rgba(255,255,255,0.03)', alignItems: 'center' }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: 'linear-gradient(135deg,#7C3AED,#1F5FAE)', color: '#fff', fontWeight: 600, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>RT</div>
        <div style={{ overflow: 'hidden' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#F0EDE5' }}>You</div>
          <div style={{ fontSize: 10, color: '#7A8294', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>operations@yourplant.com</div>
        </div>
      </div>
    </aside>
  );
};

window.Sidebar = Sidebar;