// Sidebar navigation
function Sidebar({ screen, onNav, hasReport }) {
  const nav = [
    { id: 'campaign', label: 'Kampagne', icon: Icons.campaign },
    { id: 'report',   label: 'Report',   icon: Icons.reports },
  ];

  return (
    <aside style={{
      width: 220, flexShrink: 0, display: 'flex', flexDirection: 'column',
      background: 'var(--ink-950)', borderRight: '1px solid var(--line-ink)',
      height: '100vh', position: 'sticky', top: 0, overflow: 'hidden',
    }}>
      {/* Logo */}
      <div style={{ padding: '22px 20px 20px', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 'var(--radius-sm)',
            background: 'var(--lime-500)', display: 'flex', alignItems: 'center',
            justifyContent: 'center', flexShrink: 0,
          }}>
            <span style={{ font: 'var(--weight-extra) 14px/1 var(--font-display)', color: 'var(--ink-950)', letterSpacing: '-0.04em' }}>ID</span>
          </div>
          <div>
            <div style={{ font: 'var(--weight-bold) var(--text-sm)/1 var(--font-display)', color: 'var(--paper-0)', letterSpacing: '-0.02em' }}>Influencer</div>
            <div style={{ font: 'var(--weight-medium) var(--text-xs)/1 var(--font-sans)', color: 'var(--ink-400)', marginTop: 2 }}>Discovery</div>
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ flex: 1, padding: '12px 10px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {nav.map(item => {
          const active = screen === item.id || (item.id === 'report' && screen === 'analysis');
          return (
            <button key={item.id} onClick={() => onNav(item.id)}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                width: '100%', height: 38, padding: '0 10px',
                border: 'none', borderRadius: 'var(--radius-md)',
                cursor: 'pointer', textAlign: 'left',
                background: active ? 'rgba(194, 238, 42, 0.10)' : 'transparent',
                color: active ? 'var(--lime-500)' : 'var(--ink-400)',
                font: `${active ? 'var(--weight-semibold)' : 'var(--weight-medium)'} var(--text-sm)/1 var(--font-sans)`,
                transition: 'background var(--dur-fast), color var(--dur-fast)',
              }}>
              <span style={{ display: 'inline-flex', opacity: active ? 1 : 0.6 }}>{item.icon}</span>
              {item.label}
              {item.id === 'report' && hasReport && (
                <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 18, height: 18, borderRadius: 'var(--radius-pill)',
                  background: 'var(--approve-solid)', color: '#fff',
                  font: 'var(--weight-bold) 10px/1 var(--font-mono)' }}>1</span>
              )}
            </button>
          );
        })}
      </nav>

      {/* Footer */}
      <div style={{ padding: '14px 14px 18px', borderTop: '1px solid rgba(255,255,255,0.07)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--ink-700)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            font: 'var(--weight-bold) var(--text-xs)/1 var(--font-display)', color: 'var(--lime-400)' }}>MK</div>
          <div>
            <div style={{ font: 'var(--weight-semibold) var(--text-xs)/1 var(--font-sans)', color: 'var(--paper-1)' }}>Marie Koch</div>
            <div style={{ font: 'var(--weight-medium) var(--text-2xs)/1 var(--font-sans)', color: 'var(--ink-500)', marginTop: 2 }}>Brand Manager</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar });