/* Atlas — Sidebar
 * Dark plum-900 rail with brand lockup, primary navigation, and signed-in user.
 * Mirrors the chrome of templates/atlas-page/AtlasPage.dc.html.
 */
function Sidebar({ activeNav = "overview", onNavigate = () => {} }) {
  const sections = [
    {
      label: "Workforce",
      items: [
        { id: "overview", name: "Overview", count: 30 },
        { id: "matrix", name: "Matrix" },
        { id: "groups", name: "Work groups", count: 11 },
        { id: "people", name: "People" },
        { id: "events", name: "Event log" },
      ],
    },
    {
      label: "Finance",
      items: [
        { id: "contractor-spend", name: "Contractor spend" },
        { id: "cost-centres", name: "Cost centres" },
      ],
    },
  ];

  return (
    <aside className="atk-sidebar">
      <div className="atk-brand">
        <div className="atk-brand-mark">A</div>
        <div>
          <div className="atk-brand-name">Atlas</div>
          <div className="atk-brand-sub">Organisation</div>
        </div>
      </div>

      {sections.map((sec) => (
        <React.Fragment key={sec.label}>
          <div className="atk-nav-sec">{sec.label}</div>
          {sec.items.map((it) => (
            <button
              key={it.id}
              type="button"
              className={"atk-nav-item" + (activeNav === it.id ? " is-active" : "")}
              onClick={() => onNavigate(it.id)}
            >
              <span>{it.name}</span>
              {it.count != null && <span className="atk-nav-count">{it.count}</span>}
            </button>
          ))}
        </React.Fragment>
      ))}

      <div className="atk-side-foot">
        <span className="atk-side-pip">GR</span>
        <div>
          <div className="atk-side-name">Giorgia Romano</div>
          <div className="atk-side-role">People Ops</div>
        </div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;
globalThis.Sidebar = Sidebar;