// Sidebar.jsx
function Sidebar({ active, onNav }) {
  const sections = [
    {
      label: 'Resumen',
      items: [
        { id: 'overview', label: 'Vista general', icon: 'layout-dashboard' },
      ]
    },
    {
      label: 'Análisis',
      items: [
        { id: 'volume',   label: 'Volumen diario',      icon: 'bar-chart-2' },
        { id: 'topics',   label: 'Temas frecuentes',    icon: 'tag' },
        { id: 'timing',   label: 'Tiempos de respuesta',icon: 'clock' },
        { id: 'heatmap',  label: 'Horarios y días',     icon: 'calendar' },
        { id: 'geo',      label: 'Geografía',           icon: 'map-pin' },
      ]
    },
    {
      label: 'Operaciones',
      items: [
        { id: 'agents',   label: 'Agentes',             icon: 'users' },
        { id: 'bot',      label: 'Bot vs. humano',      icon: 'bot' },
        { id: 'menu',     label: 'Menú y consultas',    icon: 'list' },
      ]
    },
    {
      label: 'Insights',
      items: [
        { id: 'insights', label: 'Alertas y mejoras',   icon: 'sparkles', badge: 4 },
      ]
    },
  ];

  return (
    <aside style={{
      width: 232, flexShrink: 0, background: '#fff',
      borderRight: '1px solid var(--border-subtle)',
      display: 'flex', flexDirection: 'column', height: '100vh',
      position: 'sticky', top: 0, overflowY: 'auto',
    }}>
      <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border-subtle)' }}>
        <img src="assets/logo_thumbnail.svg" width="30" height="30" alt="Ochat" style={{ borderRadius: 8 }} />
        <div>
          <div style={{ fontWeight: 800, fontSize: 15, letterSpacing: '-0.02em', color: 'var(--fg-1)' }}>Ochat</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 1 }}>Mostto · Analytics</div>
        </div>
      </div>

      <nav style={{ padding: '8px 10px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        {sections.map(sec => (
          <div key={sec.label}>
            <div style={{ padding: '12px 6px 4px', fontSize: 10, fontWeight: 600, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              {sec.label}
            </div>
            {sec.items.map(it => {
              const isActive = active === it.id;
              return (
                <button key={it.id} onClick={() => onNav(it.id)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 9, padding: '7px 10px',
                    background: isActive ? 'var(--primary-50)' : 'transparent',
                    color: isActive ? 'var(--primary-700)' : 'var(--fg-2)',
                    border: 'none',
                    borderLeft: isActive ? '2px solid var(--primary-600)' : '2px solid transparent',
                    borderRadius: '0 8px 8px 0',
                    marginLeft: -10, paddingLeft: isActive ? 18 : 20,
                    fontSize: 13, fontWeight: isActive ? 600 : 500,
                    cursor: 'pointer', textAlign: 'left', width: 'calc(100% + 10px)',
                    fontFamily: 'var(--font-sans)', transition: 'all 120ms',
                  }}>
                  <Icon name={it.icon} size={15} style={{ flexShrink: 0, color: isActive ? 'var(--primary-600)' : 'var(--fg-3)' }} />
                  <span style={{ flex: 1 }}>{it.label}</span>
                  {it.badge && (
                    <span style={{ background: 'var(--danger-500)', color: '#fff', fontSize: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 9999, lineHeight: '16px' }}>{it.badge}</span>
                  )}
                </button>
              );
            })}
          </div>
        ))}
      </nav>

      <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 6px' }}>
          <div style={{ width: 30, height: 30, borderRadius: 9999, background: 'var(--brand-gradient)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>MG</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>Admin Mostto</div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>WhatsApp · Abr–May 2026</div>
          </div>
        </div>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;