// Sidebar.jsx — French navigation, Atlas brand mark.

const SIDEBAR_W = 256;

const NAV = [
  { group: 'PRINCIPAL' },
  { icon: 'layout-dashboard', label: 'Tableau de bord', hash: '#/dashboard' },
  { icon: 'users-round',      label: 'CRM',              hash: '#/crm' },
  { icon: 'package',          label: 'Produits',         hash: '#/produits' },
  { icon: 'tags',             label: 'Catégories',       hash: '#/categories' },
  { icon: 'briefcase',        label: 'Services',         hash: '#/services' },
  { icon: 'warehouse',        label: 'Inventaire',       hash: '#/inventaire' },
  { group: 'SYSTÈME' },
  { icon: 'settings',         label: 'Paramètres',       hash: '#/parametres' },
  { icon: 'life-buoy',        label: 'Aide & Support' },
];

function AtlasLogo() {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'22px 20px 24px' }}>
      <div style={{ width:32, height:32, borderRadius:9, background:'linear-gradient(135deg,#C2410C,#D97706)', display:'grid', placeItems:'center' }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M2 12 L6 12 L8 6 L11 18 L14 9 L16 12 L22 12" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
        <span style={{ font:'800 13px/1 var(--m-font-sans)', letterSpacing:'.14em', color:'#fff' }}>BUSINESS PULSE</span>
        <span style={{ font:'500 9px/1 var(--m-font-sans)', letterSpacing:'.32em', color:'#C2410C' }}>A I</span>
      </div>
    </div>
  );
}

function Sidebar({ activeHash, routes, onClose, mobile }) {
  return (
    <aside style={{
      width: SIDEBAR_W, flex:`0 0 ${SIDEBAR_W}px`,
      background:'var(--app-sidebar-bg)',
      color:'var(--app-sidebar-tx)', minHeight:'100vh',
      position: mobile ? 'fixed' : 'sticky', top:0, left:0, zIndex: 50,
      alignSelf:'flex-start',
      borderRight:'1px solid var(--app-sidebar-2)',
      display:'flex', flexDirection:'column'
    }}>
      <AtlasLogo />
      <nav style={{ padding:'0 12px', flex:1, overflowY:'auto' }}>
        {NAV.map((n, i) => n.group ? (
          <div key={i} style={{
            font:'500 10px/1 var(--m-font-sans)', letterSpacing:'.18em',
            color:'#5C5F6F', padding:'18px 12px 8px', textTransform:'uppercase'
          }}>{n.group}</div>
        ) : (
          <a key={i} href={n.hash || '#'} onClick={onClose} style={{
            display:'flex', alignItems:'center', gap:12, height:38, padding:'0 12px',
            borderRadius:8,
            color: n.hash === activeHash ? '#fff' : '#9A9CAE',
            background: n.hash === activeHash ? 'rgba(194,65,12,.18)' : 'transparent',
            font:'500 13px/1 var(--m-font-sans)', cursor:'pointer',
            position:'relative', marginBottom:2,
            transition:'background 140ms ease-out, color 140ms ease-out',
          }}
          onMouseEnter={e => { if (n.hash !== activeHash) e.currentTarget.style.background = 'rgba(255,255,255,.04)'; }}
          onMouseLeave={e => { if (n.hash !== activeHash) e.currentTarget.style.background = 'transparent'; }}>
            <i data-lucide={n.icon} style={{ width:18, height:18, strokeWidth:1.6 }}></i>
            <span>{n.label}</span>
            {n.hash === activeHash && <span style={{ position:'absolute', left:0, top:8, bottom:8, width:3, borderRadius:2, background:'#C2410C' }}></span>}
          </a>
        ))}
      </nav>

      {/* Bottom card — upgrade prompt */}
      <div style={{ padding:14 }}>
        <div style={{
          padding:14, borderRadius:10,
          background:'linear-gradient(135deg, rgba(194,65,12,.20), rgba(217,119,6,.10))',
          border:'1px solid rgba(194,65,12,.25)'
        }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
            <div style={{ width:28, height:28, borderRadius:7, background:'#C2410C', display:'grid', placeItems:'center' }}>
              <i data-lucide="sparkles" style={{ width:14, height:14, color:'#fff' }}></i>
            </div>
            <span style={{ font:'700 12px/1 var(--m-font-sans)', color:'#fff' }}>Pulse Premium</span>
          </div>
          <div style={{ font:'500 11px/1.4 var(--m-font-sans)', color:'#B5B7C8', marginBottom:10 }}>
            Débloquez l'IA prédictive et l'export multi-format.
          </div>
          <button style={{
            width:'100%', height:30, borderRadius:6, background:'#fff',
            color:'#1B1C22', font:'700 11px/1 var(--m-font-sans)', border:0
          }}>Découvrir</button>
        </div>
      </div>
    </aside>
  );
}

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