const NAV = [
  { id: "dashboard", label: "Dashboard",  ico: "home"    },
  { id: "calendar",  label: "Calendar",   ico: "planner" },
  { id: "pipeline",  label: "Pipeline",   ico: "funnel"  },
  { id: "brands",    label: "Brands",     ico: "deals"   },
  { id: "ideas",     label: "Ideas",      ico: "backlog" },
];

const Sidebar = ({ active, onNav, counts }) => (
  <aside className="sidebar">
    <div className="brand">
      <div className="brand-mark">y</div>
      <div>
        <div className="brand-name serif">yuri.studio</div>
        <div className="brand-sub">Creator OS</div>
      </div>
    </div>

    {NAV.map(n => (
      <button key={n.id} className={`nav-item${active === n.id ? " active" : ""}`} onClick={() => onNav(n.id)}>
        <span className="nav-ico"><Icon name={n.ico} size={17} /></span>
        <span className="nav-label">{n.label}</span>
        {counts[n.id] != null && <span className="nav-count">{counts[n.id]}</span>}
      </button>
    ))}

    <div className="side-foot">
      <div className="avatar">Y</div>
      <div style={{ fontSize: 12, lineHeight: 1.25 }}>
        <div style={{ fontWeight: 600, color: "var(--ink)" }}>Yuri</div>
        <div className="mut" style={{ fontSize: 10.5 }}>with Alan · manager</div>
      </div>
    </div>
  </aside>
);

const MobileTabs = ({ active, onNav }) => (
  <nav className="mobile-tab">
    {NAV.map(n => (
      <button key={n.id} className={active === n.id ? "active" : ""} onClick={() => onNav(n.id)}>
        <Icon name={n.ico} size={18} />
        <span>{n.label}</span>
      </button>
    ))}
  </nav>
);

Object.assign(window, { Sidebar, MobileTabs, NAV });