const items = [
  { id: 'panel', label: 'Panel', icon: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z' },
  { id: 'recoleccion', label: 'Recolección', icon: 'M3 7h18M3 12h18M3 17h12' },
  { id: 'energia', label: 'Energía', icon: 'M13 2L3 14h7l-1 8 10-12h-7z' },
  { id: 'impacto', label: 'Impacto', icon: 'M12 2a10 10 0 100 20 10 10 0 000-20zM12 7v5l3 3' },
  { id: 'facturas', label: 'Facturas', icon: 'M6 2h9l5 5v15H6zM14 2v6h6' },
];

function AppSidebar({ active, onNav }) {
  return (
    <aside style={{
      width: 230, background: 'var(--deep-moss)', minHeight: '100%',
      display: 'flex', flexDirection: 'column', padding: '22px 16px', boxSizing: 'border-box',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 8px 22px' }}>
        <img src="../assets/neogas-appicon.svg" width="34" height="34" alt="" />
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: 'var(--oat)' }}>Neo<span style={{ color: 'var(--clay-bright)' }}>Gas</span></span>
      </div>
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {items.map((it) => {
          const on = it.id === active;
          return (
            <button key={it.id} type="button" onClick={() => onNav(it.id)} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px',
              border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', textAlign: 'left',
              background: on ? 'var(--forest-moss)' : 'transparent',
              color: on ? 'var(--oat)' : 'var(--sage)',
              fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: on ? 600 : 500,
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d={it.icon} />
              </svg>
              {it.label}
            </button>
          );
        })}
      </nav>
      <div style={{ marginTop: 'auto', background: 'var(--forest-moss)', borderRadius: 'var(--radius-lg)', padding: 16 }}>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: 'var(--oat)', margin: '8px 0 2px' }}>Mañana · 7:00 AM</p>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--sage)', margin: 0 }}>Ruta SPS-Centro</p>
      </div>
    </aside>
  );
}