const NAV = [
  { id: "dashboard",   icon: "ph-gauge" },
  { id: "reserves",    icon: "ph-calendar-blank" },
  { id: "carta",       icon: "ph-fork-knife" },
  { id: "experiences", icon: "ph-confetti" },
  { id: "settings",    icon: "ph-gear-six" },
];

function Sidebar({ route, setRoute, lang, setLang, onLogout, clientName }) {
  const T = window.T;
  const LangToggle = window.LangToggle;
  const t = T[lang];
  return (
    <aside className="srv-side">
      <div>
        <div className="srv-brand-mark">ServiaOS</div>
        <div className="srv-brand-sub eyebrow">
          <span className="srv-brand-name">{clientName || "—"}</span>
          <span className="srv-brand-tag">Intranet</span>
        </div>
      </div>
      <nav className="srv-nav">
        {NAV.map(n => (
          <button key={n.id} className={"srv-nav-item " + (route === n.id ? "on" : "")} onClick={() => setRoute(n.id)}>
            <i className={"ph " + n.icon}></i>
            <span>{t.nav[n.id]}</span>
          </button>
        ))}
      </nav>
      <div className="srv-side-foot">
        <LangToggle lang={lang} setLang={setLang} />
        <button className="srv-logout" onClick={onLogout}><i className="ph ph-sign-out"></i>{t.logout}</button>
      </div>
    </aside>
  );
}

window.NAV = NAV;
window.Sidebar = Sidebar;