function Sidebar({ active, onNavigate }) {
  const items = [
    { id: 'dashboard', label: '대시보드', en: 'Dashboard', icon: 'layout-dashboard' },
    { id: 'pipeline', label: '지원자', en: 'Candidates', icon: 'users', badge: 12 },
    { id: 'jobs', label: '채용공고', en: 'Jobs', icon: 'briefcase' },
    { id: 'scheduler', label: '면접 일정', en: 'Interviews', icon: 'calendar' },
    { id: 'reports', label: '리포트', en: 'Reports', icon: 'bar-chart-3' },
  ];
  const secondary = [
    { id: 'ai', label: 'AI 매칭', en: 'AI Match', icon: 'sparkles', accent: true },
    { id: 'email', label: '이메일 템플릿', en: 'Emails', icon: 'mail' },
    { id: 'team', label: '팀 & 권한', en: 'Team', icon: 'user-cog' },
    { id: 'settings', label: '설정', en: 'Settings', icon: 'settings' },
  ];

  return (
    <aside style={{
      width: 240, height: '100%', background: 'var(--neutral-0)',
      borderRight: '1px solid var(--border-default)',
      display: 'flex', flexDirection: 'column',
      padding: '18px 12px', gap: 4,
      flexShrink: 0,
    }}>
      <div style={{ padding: '4px 8px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src="../../assets/logo-mark.svg" width="28" height="28" alt="" style={{ borderRadius: 7 }} />
        <div style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          Career Intelligence
          <div style={{ fontSize: 10.5, fontWeight: 500, color: 'var(--fg-3)', letterSpacing: '0.14em', marginTop: 1 }}>SUITE</div>
        </div>
      </div>

      {/* Mode switcher — Applicant / Admin */}
      <div style={{
        display: 'flex', padding: 3, background: 'var(--neutral-100)',
        borderRadius: 999, marginBottom: 14,
      }}>
        <a href="../applicant/index.html" style={{
          flex: 1, textAlign: 'center', padding: '5px 8px', borderRadius: 999,
          fontSize: 11.5, fontWeight: 500, color: 'var(--fg-3)', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4, whiteSpace: 'nowrap',
        }}>
          <Icon name="user" size={12}/>지원자
        </a>
        <span style={{
          flex: 1, textAlign: 'center', padding: '5px 8px', borderRadius: 999,
          fontSize: 11.5, fontWeight: 600,
          background: 'var(--neutral-0)', color: 'var(--brand-700)', boxShadow: 'var(--shadow-xs)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4, whiteSpace: 'nowrap',
        }}>
          <Icon name="briefcase" size={12}/>관리자
        </span>
      </div>

      <div style={{ padding: '0 8px 6px', fontSize: 10.5, fontWeight: 500, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>워크스페이스</div>
      {items.map(it => (
        <NavItem key={it.id} item={it} active={active === it.id} onClick={() => onNavigate(it.id)} />
      ))}

      <div style={{ padding: '18px 8px 6px', fontSize: 10.5, fontWeight: 500, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Intelligence</div>
      {secondary.map(it => (
        <NavItem key={it.id} item={it} active={active === it.id} onClick={() => onNavigate(it.id)} />
      ))}

      <div style={{ flex: 1 }} />

      <div style={{
        padding: '10px 12px',
        border: '1px solid var(--border-default)',
        borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <Avatar name="한지현" tone={0} size={32} status="online" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>한지현</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>운영팀 · Recruiter</div>
        </div>
        <Icon name="chevron-down" size={14} style={{ color: 'var(--fg-3)' }} />
      </div>
    </aside>
  );
}

function NavItem({ item, active, onClick }) {
  const [hover, setHover] = useState(false);
  const style = {
    display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
    borderRadius: 6, fontSize: 13, fontWeight: active ? 500 : 400,
    cursor: 'pointer', whiteSpace: 'nowrap',
    color: active ? 'var(--brand-700)' : (item.accent ? 'var(--violet-700)' : 'var(--fg-1)'),
    background: active ? 'var(--brand-50)' : (hover ? 'var(--neutral-50)' : 'transparent'),
    transition: 'background 120ms var(--ease-out)',
  };
  return (
    <div style={style} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <span style={{ color: active ? 'var(--brand-600)' : (item.accent ? 'var(--violet-600)' : 'var(--fg-3)'), display: 'inline-flex' }}>
        <Icon name={item.icon} size={16} />
      </span>
      <span style={{ flex: 1 }}>{item.label}</span>
      {item.badge && (
        <span style={{ fontSize: 10.5, fontWeight: 600, background: 'var(--brand-500)', color: '#fff', borderRadius: 999, padding: '1px 6px', fontFamily: 'var(--font-latin)' }}>{item.badge}</span>
      )}
    </div>
  );
}

window.Sidebar = Sidebar;