const Sidebar = ({ route, go, user, openCmd }) => {
  const items = [
    { id: 'inicio',     label: 'Início',                   icon: <I.home size={16}/> },
    { id: 'trilhas',    label: 'Trilhas',                  icon: <I.route size={16}/> },
    { id: 'playbooks',  label: 'Playbooks',                icon: <I.book size={16}/> },
    { id: 'feed',       label: 'O que está acontecendo',   icon: <I.pulse size={16}/> },
    { id: 'biblioteca', label: 'Biblioteca',               icon: <I.library size={16}/> },
    { id: 'cert',       label: 'Certificações',            icon: <I.award size={16}/> },
    { id: 'perfil',     label: 'Perfil e progresso',       icon: <I.user size={16}/> },
  ];

  const isActive = (id) => {
    if (id === 'trilhas' && (route.name === 'trilha' || route.name === 'modulo')) return true;
    if (id === 'playbooks' && route.name === 'playbook') return true;
    return route.name === id;
  };

  return (
    <aside className="w-[240px] shrink-0 h-screen sticky top-0 bg-panel border-r border-line flex flex-col">
      {/* Logo */}
      <div className="h-[60px] px-5 flex items-center border-b border-line">
        <div className="flex items-center gap-2.5">
          <div className="w-[22px] h-[22px] rounded-[5px] bg-accent relative overflow-hidden">
            <div className="absolute inset-0 flex items-center justify-center">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2 3 L7 11 L12 3" stroke="#0A0A0B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </div>
          <span className="text-ink font-semibold tracking-tightest text-[16px]">Velyx</span>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 py-4 px-3 overflow-y-auto">
        <div className="px-2 pb-2 text-mute2 text-[10px] font-mono uppercase tracking-[0.12em]">Navegação</div>
        <ul className="space-y-0.5">
          {items.map(it => {
            const active = isActive(it.id);
            return (
              <li key={it.id}>
                <button onClick={() => go({ name: it.id })}
                  className={`w-full flex items-center gap-2.5 h-[34px] px-2.5 rounded-[6px] text-[13px] t-fast focus-ring
                    ${active ? 'bg-white/[0.05] text-ink' : 'text-mute hover:text-ink hover:bg-white/[0.03]'}`}>
                  <span className={active ? 'text-accent' : 'text-mute'}>{it.icon}</span>
                  <span className="truncate">{it.label}</span>
                  {it.id === 'feed' && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-accent"/>}
                </button>
              </li>
            );
          })}
        </ul>

        <div className="mt-7 px-2 pb-2 text-mute2 text-[10px] font-mono uppercase tracking-[0.12em]">Atalhos</div>
        <ul className="space-y-0.5">
          <li>
            <button onClick={() => go({ name: 'modulo', trilha: 'fundamentos', modulo: 'm6' })}
              className="w-full flex items-center gap-2.5 h-[32px] px-2.5 rounded-[6px] text-[12.5px] text-mute hover:text-ink hover:bg-white/[0.03] t-fast">
              <I.playFill size={12} className="text-accent"/>
              <span className="truncate">Continuar onde parou</span>
            </button>
          </li>
          <li>
            <button onClick={openCmd}
              className="w-full flex items-center gap-2.5 h-[32px] px-2.5 rounded-[6px] text-[12.5px] text-mute hover:text-ink hover:bg-white/[0.03] t-fast">
              <I.search size={12}/>
              <span className="truncate">Buscar</span>
              <span className="ml-auto font-mono text-[10px] text-mute2 hairline px-1.5 rounded">⌘K</span>
            </button>
          </li>
        </ul>
      </nav>

      {/* Footer user */}
      <div className="border-t border-line p-3">
        <button onClick={() => go({ name: 'perfil' })}
          className="w-full flex items-center gap-2.5 p-1.5 rounded-[6px] hover:bg-white/[0.04] t-fast focus-ring">
          <Avatar initials={user.avatar} size={32}/>
          <div className="flex-1 min-w-0 text-left">
            <div className="text-[13px] text-ink truncate leading-tight">{user.fullName}</div>
            <div className="text-[11px] text-mute truncate leading-tight">{user.company}</div>
          </div>
          <I.chevDown size={14} className="text-mute2"/>
        </button>
      </div>
    </aside>
  );
};

window.Sidebar = Sidebar;