// Sidebar + top bar — v3 (5 módulos)

const NAV = [
  { id: "asistente",    label: "Asistente IA",          icon: "Chat"   },
  { id: "pedidos",      label: "Generador de Pedido",    icon: "Doc"    },
  { id: "inteligencia", label: "Inteligencia Comercial", icon: "Globe"  },
  { id: "rutas",        label: "Rutas y Prospección",    icon: "Pin"    },
  { id: "planogramas",  label: "Planogramas",            icon: "Grid"   },
];

function Sidebar({ current, onNavigate }) {
  const d = window.APP_DATA.company;
  return (
    <aside className="side">
      <div className="side-brand">
        <div className="side-logo"><img src="app_v3/logo-quilosa.png" alt="Quilosa" /></div>
        <div className="side-brand-text">
          <div className="side-brand-name">Copiloto Comercial</div>
          <div className="side-brand-sub">{d.tagline}</div>
        </div>
      </div>
      <div className="side-chips">
        <span className="side-chip">{d.partner}</span>
        <span className="side-chip status">{d.integration}</span>
      </div>
      <nav className="side-nav">
        {NAV.map((n) => {
          const I = Icon[n.icon];
          return (
            <button key={n.id} className={current === n.id ? "active" : ""} onClick={() => onNavigate(n.id)}>
              <I /> {n.label}
            </button>
          );
        })}
      </nav>
      <div className="side-foot">
        {d.name} — {d.tagline}<br />{d.founded}
      </div>
    </aside>
  );
}

function TopBar({ title, sub, lang, setLang }) {
  return (
    <div className="topbar">
      <div>
        <h1>{title}</h1>
        {sub && <div className="sub">{sub}</div>}
      </div>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <div className="lang-switch">
          {["ES", "PT", "EN"].map((l) => (
            <button key={l} className={lang === l ? "active" : ""} onClick={() => setLang(l)}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, TopBar });