const Sidebar = ({ active, onNav }) => {
  const wrap = { background: 'var(--bg-parchment)', borderRight: '1px solid var(--border-1)', padding: '24px 16px', display: 'flex', flexDirection: 'column', gap: 4, minHeight: '100vh' };
  const brand = { display: 'flex', alignItems: 'center', gap: 10, padding: '4px 10px 24px' };
  const sectionLabel = { fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)', padding: '14px 12px 6px' };
  const item = (isActive) => ({
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '9px 12px', borderRadius: 8,
    fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 500,
    color: isActive ? 'var(--fg-1)' : 'var(--fg-2)',
    background: isActive ? 'rgba(17,122,77,0.08)' : 'transparent',
    border: '1px solid', borderColor: isActive ? 'rgba(17,122,77,0.25)' : 'transparent',
    cursor: 'pointer', textAlign: 'left', width: '100%',
  });
  const dot = (color) => ({ width: 6, height: 6, borderRadius: '50%', background: color, boxShadow: `0 0 8px ${color}` });

  const groups = [];

  return (
    <aside style={wrap}>
      <div style={brand}>
        <img src="../../assets/logo-mark.svg?v=20260520-a3b" style={{ width: 32, height: 32 }} alt="" />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--fg-1)' }}>Guardian Orb</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-3)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>by Conceptual Health</div>
        </div>
      </div>
      {groups.map((g, gi) => (
        <React.Fragment key={gi}>
          <div style={sectionLabel}>{g.label}</div>
          {g.items.map(it => (
            <button key={it.id} style={item(active === it.id)} onClick={() => onNav && onNav(it.id)}>
              <span style={dot(it.color)} />
              <span>{it.label}</span>
            </button>
          ))}
        </React.Fragment>
      ))}
      <div style={{ flex: 1 }} />
      <div style={{ padding: 12, borderRadius: 10, background: 'var(--bg-bone)', border: '1px solid var(--border-1)', fontSize: 11, color: 'var(--fg-2)', lineHeight: 1.5 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-clinical)', marginBottom: 4 }}>HIPAA · AES-256</div>
        Patent Pending<br/>63/921,717
      </div>
    </aside>
  );
};
window.Sidebar = Sidebar;