/*
 * Sidebar — Transmodal ops left rail.
 * Navy surface, brand-blue active state, no hover-only nav (touch-friendly).
 * Mirrors the IA in DESIGN.md §5 (Embarques, Rastreo, Documentación, Reportes, Cuenta).
 */
const Sidebar = ({ activeSection = "embarques", onNavigate = () => {} }) => {
  const items = [
    { id: "embarques",     label: "Embarques",     icon: "▣" },
    { id: "rastreo",       label: "Rastreo",       icon: "◎" },
    { id: "documentacion", label: "Documentación", icon: "▤" },
    { id: "reportes",      label: "Reportes",      icon: "◧" },
    { id: "cuenta",        label: "Cuenta",        icon: "◉" },
  ];
  return (
    <aside className="tm-sidebar">
      <div className="tm-sidebar__brand">
        <img src="../../assets/logo-grupo-transmodal-blanco.png" alt="Grupo Transmodal" />
      </div>
      <nav className="tm-sidebar__nav" aria-label="Operaciones">
        {items.map((it) => (
          <button
            key={it.id}
            type="button"
            className={"tm-sidebar__item " + (activeSection === it.id ? "is-active" : "")}
            onClick={() => onNavigate(it.id)}
          >
            <span className="tm-sidebar__icon" aria-hidden="true">{it.icon}</span>
            <span className="tm-sidebar__label">{it.label}</span>
          </button>
        ))}
      </nav>
      <div className="tm-sidebar__foot">
        <div className="tm-sidebar__user">
          <span className="tm-avatar" aria-hidden="true">CT</span>
          <div className="tm-sidebar__user-meta">
            <div className="tm-sidebar__user-name">Carla Tamayo</div>
            <div className="tm-sidebar__user-role">Dispatch · Lázaro Cárdenas</div>
          </div>
        </div>
      </div>
    </aside>
  );
};
window.Sidebar = Sidebar;
globalThis.Sidebar = Sidebar;