function AppHeader({ active, onNavigate }) {
  const [user, setUser] = useState(() => (window.CIS ? CIS.currentUser() : null));

  // 로그인 상태 폴링 (다른 창/탭에서 로그아웃 반영)
  useEffect(() => {
    const t = setInterval(() => setUser(window.CIS ? CIS.currentUser() : null), 800);
    const onStorage = () => setUser(window.CIS ? CIS.currentUser() : null);
    window.addEventListener('storage', onStorage);
    return () => { clearInterval(t); window.removeEventListener('storage', onStorage); };
  }, []);

  const nav = [
    { id: 'landing', ko: '홈',            en: 'Home' },
    { id: 'mock',    ko: 'AI 모의 면접',  en: 'AI Mock Interview', pill: true },
    { id: 'jobs',    ko: '채용공고',      en: 'Jobs' },
    { id: 'my',      ko: '지원 현황',     en: 'My Applications' },
  ];

  function doLogout() {
    if (!confirm('로그아웃하시겠어요? · Log out?')) return;
    CIS.logout(); setUser(null); onNavigate('landing');
  }

  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',
          }}
          title={n.ko + ' · ' + n.en}>
            {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>
            )}
            <span>
              {n.ko}
              <span style={{ fontSize: 10.5, color: 'var(--fg-3)', marginLeft: 4, fontWeight: 400 }}>({n.en})</span>
            </span>
          </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}/>
          지원자 (Applicant)
        </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}/>
          관리자 (Admin)
        </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>

        {user && user.loggedIn ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 10px 5px 5px',
              background: 'var(--neutral-50)', borderRadius: 999,
              border: '1px solid var(--border-subtle)',
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: 999,
                background: 'linear-gradient(135deg, var(--brand-500), var(--violet-500))',
                color: '#fff', fontSize: 11, fontWeight: 700,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{(user.name || 'U').slice(0, 1)}</span>
              <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg-1)' }}>{user.name}</span>
            </div>
            <Button variant="ghost" size="sm" onClick={doLogout}>로그아웃 (Log out)</Button>
          </div>
        ) : (
          <>
            <Button variant="ghost" size="sm" onClick={() => onNavigate('signup')}>회원가입 (Sign up)</Button>
            <Button variant="secondary" size="sm" onClick={() => onNavigate('login')}>로그인 (Login)</Button>
          </>
        )}
      </div>
    </header>
  );
}

window.AppHeader = AppHeader;