// Sidebar.jsx — fixed left nav with logo, sections, and footer.

function Sidebar({ activeView, onNavigate, suggestionsCount }) {
  const NAV = [
    { id: "home",        label: "Home",        icon: "home" },
    { id: "signals",     label: "Signals",     icon: "zap" },
    { id: "goals",       label: "Goals",       icon: "target" },
    { id: "suggestions", label: "Suggestions", icon: "sparkles", badge: suggestionsCount },
    { id: "briefings",   label: "Briefings",   icon: "newspaper" },
    { id: "accounts",    label: "Accounts",    icon: "building" },
    { id: "pipeline",    label: "Pipeline",    icon: "trending" },
    { id: "contacts",    label: "Contacts",    icon: "userCircle" },
    { id: "activity",    label: "Activity",    icon: "clock" },
  ];

  return (
    <aside className="sidebar">
      <div className="brand">
        <img src="assets/gt-wordmark.svg" alt="Ground Truth" style={{ height: 19, width: "auto", display: "block" }} />
      </div>

      {NAV.map(item => (
        <button
          key={item.id}
          className={`nav-item ${activeView === item.id ? "active" : ""}`}
          onClick={() => onNavigate(item.id)}
        >
          <Icon name={item.icon} className="icon" size={14} />
          <span>{item.label}</span>
          {item.badge > 0 && <span className="nav-badge">{item.badge}</span>}
        </button>
      ))}

      <hr />

      <button
        className={`nav-item ${activeView === "settings" ? "active" : ""}`}
        onClick={() => onNavigate("settings")}
      >
        <Icon name="settings" className="icon" size={14} />
        <span>Settings</span>
      </button>

      <div className="sb-footer">
        <div className="row gap-2">
          <div style={{
            width: 22, height: 22, borderRadius: 999,
            background: "oklch(0.62 0.22 264 / 0.18)",
            color: "var(--gt-purple-light)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontSize: 9, fontWeight: 600
          }}>JS</div>
          <span>jen@orbit.co</span>
        </div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;