const Sidebar = ({ currentArea, setArea, role, user, onOpenAddArea }) => {
  const allowed = SIDEBAR_BY_ROLE(role, user);
  const visibleAreas = AREAS.filter(a => allowed.includes(a.id));

  return (
    <aside className="cdc-side">
      <div className="cdc-side__brand">
        <img src="assets/casa-de-casas-logo.jpg" alt="Casa de Casas" style={{ width: 130, height: "auto" }} />
        <div className="cdc-side__brand-sub">Punta Mita · México</div>
      </div>

      <nav className="cdc-side__nav">
        {visibleAreas.map(a => {
          const Cmp = I[a.icon] || I.Home;
          return (
            <button
              key={a.id}
              className="cdc-nav-item"
              aria-current={a.id === currentArea ? "page" : undefined}
              onClick={() => setArea(a.id)}
            >
              <Cmp size={20} className="cdc-nav-item__icon" />
              <span>{a.label}</span>
            </button>
          );
        })}

        {PERMISSIONS[role].canCreateTask("any", user) && role !== "staff" && (
          <button className="cdc-side__add" onClick={onOpenAddArea}>
            <I.Plus size={18} />
            <span>Area</span>
          </button>
        )}
      </nav>

      <div className="cdc-side__foot">
        <div className="cdc-side__big-brand">
          <img src="assets/casa-de-casas-logo.jpg" alt="Casa de Casas" style={{ width: 150, height: "auto" }} />
        </div>
        <button className="cdc-side__config">
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <I.Settings size={18} /> Configuración
          </span>
          <I.ChevR size={16} />
        </button>
      </div>
    </aside>
  );
};

Object.assign(window, { Sidebar });