function AppHeader({ active, onNavigate }) {
  const nav = [
    { id: 'landing', label: '홈', en: 'Home' },
    { id: 'mock', label: 'AI 모의 면접', en: 'Mock Interview', pill: true },
    { id: 'jobs', label: '채용공고', en: 'Jobs' },
    { id: 'my', label: '지원 현황', en: 'My Applications' },
  ];
  return (
    <header style={{
      height: 68, borderBottom: '1px solid var(--border-default)',
      background: 'var(--neutral-0)',
      display: 'flex', alignItems: 'center', padding: '0 32px',
      position: 'sticky', top: 0, zIndex: 10,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10, cursor:'pointer' }} onClick={() => onNavigate('landing')}>
        <img src="../../assets/logo-mark.svg" width="30" height="30" alt="" style={{ borderRadius: 7 }}/>
        <div style={{ lineHeight: 1.15 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, letterSpacing:'-0.01em', whiteSpace:'nowrap' }}>Career Intelligence</div>
          <div style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing:'0.14em', fontWeight: 500 }}>SUITE</div>
        </div>
      </div>

      <nav style={{ display:'flex', gap: 4, marginLeft: 32 }}>
        {nav.map(n => (
          <div key={n.id} onClick={() => onNavigate(n.id)} style={{
            padding: '6px 12px', borderRadius: 8, cursor:'pointer',
            fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap',
            display: 'inline-flex', alignItems: 'center', gap: 5,
            color: active === n.id ? 'var(--fg-1)' : 'var(--fg-2)',
            background: active === n.id ? 'var(--neutral-100)' : 'transparent',
          }}>
            {n.pill && (
              <span style={{
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                width: 14, height: 14, borderRadius: 4,
                background:'linear-gradient(135deg, var(--brand-500), var(--violet-500))', color:'#fff',
              }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
              </span>
            )}
            {n.label}
          </div>
        ))}
      </nav>

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

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

      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <span style={{ fontSize: 12, color: 'var(--fg-3)', display:'flex', alignItems:'center', gap: 4, whiteSpace:'nowrap' }}>
          <Icon name="globe" size={13}/>
          KO / EN
        </span>
        <Button variant="secondary" size="sm">로그인</Button>
      </div>
    </header>
  );
}

window.AppHeader = AppHeader;