function Sidebar() {
  const sections = [
    {
      heading: 'Pipeline',
      items: [
        { icon: 'layout-dashboard', label: 'Dashboard', active: true },
        { icon: 'inbox', label: 'Leads', count: 12 },
        { icon: 'file-text', label: 'Applications', count: 8 },
        { icon: 'file-check-2', label: 'Loans in Progress', count: 23 },
        { icon: 'check-circle-2', label: 'Closed' },
      ],
    },
    {
      heading: 'Tools',
      items: [
        { icon: 'search', label: 'Lender Search' },
        { icon: 'calculator', label: 'Scenario Builder' },
        { icon: 'shield-check', label: 'Guidelines' },
        { icon: 'book-open', label: 'Knowledge Base' },
      ],
    },
    {
      heading: 'Team',
      items: [
        { icon: 'users', label: 'Loan Officers' },
        { icon: 'bar-chart-3', label: 'LO Performance' },
        { icon: 'settings', label: 'Settings' },
      ],
    },
  ];
  return (
    <aside style={{
      width: 260, height: '100vh', background: '#fff',
      borderRight: '1px solid var(--border-subtle)',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'var(--font-body)',
    }}>
      <div style={{
        padding: '22px 22px 18px',
        borderBottom: '1px solid var(--border-subtle)',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 20, letterSpacing: '-.01em', color: 'var(--cms-blue)',
        }}>CMS<span style={{ color: 'var(--cms-orange)' }}>·</span> OS</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '.08em',
          textTransform: 'uppercase', color: 'var(--fg-muted)',
          fontFamily: 'var(--font-mono)', marginTop: 2,
        }}>Operating System</div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 10px' }}>
        {sections.map(sec => (
          <div key={sec.heading} style={{ marginBottom: 18 }}>
            <div style={{
              fontSize: 10, fontWeight: 700, letterSpacing: '.08em',
              textTransform: 'uppercase', color: 'var(--fg-subtle)',
              padding: '6px 12px',
            }}>{sec.heading}</div>
            {sec.items.map(it => (
              <a key={it.label} href="#" style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 12px', borderRadius: 6,
                fontSize: 13, fontWeight: it.active ? 600 : 500,
                color: it.active ? 'var(--cms-blue)' : 'var(--fg)',
                background: it.active ? 'rgba(0,38,154,.08)' : 'transparent',
                borderLeft: it.active ? '2px solid var(--cms-blue)' : '2px solid transparent',
                textDecoration: 'none',
                marginBottom: 1,
              }}>
                <i data-lucide={it.icon} style={{ width: 16, height: 16, opacity: it.active ? 1 : .7 }}/>
                <span style={{ flex: 1 }}>{it.label}</span>
                {it.count && <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  padding: '1px 7px', borderRadius: 9999,
                  background: 'var(--cms-orange)', color: '#fff',
                }}>{it.count}</span>}
              </a>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        padding: 14, borderTop: '1px solid var(--border-subtle)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <img src="./assets/images/leader-deshawn.png" style={{
          width: 34, height: 34, borderRadius: '50%', objectFit: 'cover',
        }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)' }}>DeShawn</div>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>NMLS #212405</div>
        </div>
        <i data-lucide="settings" style={{ width: 16, height: 16, color: 'var(--fg-muted)' }}/>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;