function Sidebar({
  clients: _clients, activeView, onView, overdueOnly, onOverdueToggle,
  stageFilter, onStageFilter,
  paymentsTab, onPaymentsTab,
  sitesTab, onSitesTab,
  pipelineTab, onPipelineTab,
}) {
  const src    = _clients || CLIENTS;
  const paying = src.filter(c => c.mrr > 0);
  const overdue = src.filter(c => c.overdue).length;

  function item(label, icon, isActive, onClick, count) {
    return (
      <a key={label} className={"cm-side__item " + (isActive ? "is-active" : "")}
         style={{ cursor:"pointer" }} onClick={onClick}>
        <i data-lucide={icon} className="cm-icon-sm"></i>
        {label}
        {count != null && <span className="cm-side__count">{count}</span>}
      </a>
    );
  }

  function SectionContent() {
    if (activeView === "pipeline") {
      const isKanban = pipelineTab === "active" && !overdueOnly;
      return (
        <div className="cm-side__group">
          <span className="cm-side__groupLabel">Views</span>
          {item("Kanban",  "kanban-square", isKanban,    () => { onPipelineTab("active"); if (overdueOnly) onOverdueToggle(); }, src.filter(c=>c.stage!=="closed"&&c.stage!=="archive").length)}
          {item("Overdue", "alert-circle",  overdueOnly, () => { if (!overdueOnly) onPipelineTab("active"); onOverdueToggle(); }, overdue)}
        </div>
      );
    }

    if (activeView === "payments") {
      return (
        <div className="cm-side__group">
          <span className="cm-side__groupLabel">Views</span>
          {item("Active subs", "credit-card", paymentsTab==="active",   () => onPaymentsTab("active"),   paying.length)}
          {item("Invoices",    "receipt",     paymentsTab==="invoices", () => onPaymentsTab("invoices"))}
        </div>
      );
    }

    if (activeView === "sites") {
      return (
        <div className="cm-side__group">
          <span className="cm-side__groupLabel">Views</span>
          {item("Live",     "check-circle", sitesTab==="live",     () => onSitesTab("live"),     src.filter(c=>c.live).length)}
          {item("Building", "hammer",       sitesTab==="building", () => onSitesTab("building"), src.filter(c=>c.built&&!c.deployed).length)}
        </div>
      );
    }

    return null;
  }

  return (
    <aside className="cm-side">
      <div className="cm-side__ws">
        <span className="cm-side__wsName">{activeView[0].toUpperCase() + activeView.slice(1)}</span>
      </div>
      {SectionContent()}
    </aside>
  );
}
window.Sidebar = Sidebar;