function Sidebar({ page, setPage, campaigns }) {
  const items = [
    { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard' },
    { id: 'create', label: 'Create campaign', icon: 'Plus' },
    { id: 'campaigns', label: 'Campaigns', icon: 'Megaphone', badge: campaigns?.length },
    { id: 'assets', label: 'Brand assets', icon: 'Gem' },
    { id: 'settings', label: 'Account', icon: 'Gear' },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">K</div>
        <div className="brand-name">Kibie</div>
      </div>

      <div className="nav-section">Workspace</div>
      {items.slice(0, 3).map(it => {
        const Icon = I[it.icon];
        return (
          <button key={it.id}
            className="nav-item"
            data-active={page === it.id}
            onClick={() => setPage(it.id)}>
            <Icon className="icon" />
            <span>{it.label}</span>
            {it.badge ? <span className="spacer" /> : null}
            {it.badge ? <span style={{ fontSize: 11, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)' }}>{it.badge}</span> : null}
          </button>
        );
      })}

      <div className="nav-section">Library</div>
      {items.slice(3).map(it => {
        const Icon = I[it.icon];
        return (
          <button key={it.id}
            className="nav-item"
            data-active={page === it.id}
            onClick={() => setPage(it.id)}>
            <Icon className="icon" />
            <span>{it.label}</span>
          </button>
        );
      })}

      <div className="nav-footer">
        <div className="avatar-chip">
          <div className="avatar-circle">SK</div>
          <div>
            <div className="name">Sarah Kim</div>
            <div className="plan">Growth · 2 seats</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar });