function Jobs({ onNavigate }) {
  const [dept, setDept] = useState('전체');
  const [query, setQuery] = useState('');
  const [jobs, setJobs] = useState(() => (window.CIS ? CIS.getJobs() : []));

  // 관리자가 새 공고를 등록하면 storage 이벤트로 반영
  useEffect(() => {
    const t = setInterval(() => setJobs(CIS.getJobs()), 1200);
    return () => clearInterval(t);
  }, []);

  const departments = [
    { id: '전체', ko: '전체', en: 'All' },
    ...CIS.DEPARTMENTS.map(d => ({ id: d.ko, ko: d.ko, en: d.en })),
  ];

  const filtered = jobs.filter(j => {
    if (j.status && j.status !== 'active') return false;
    const deptKo = CIS.departmentOf(j.deptId).ko;
    if (dept !== '전체' && deptKo !== dept) return false;
    if (query) {
      const q = query.toLowerCase();
      const hay = (j.title_ko + ' ' + j.title_en + ' ' + (j.skills || []).join(' ')).toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  return (
    <div style={{ maxWidth: 1080, margin: '0 auto', padding: '48px 40px' }}>
      <TagLine>ALL POSITIONS · 채용 중인 포지션</TagLine>
      <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing:'-0.02em', margin: '10px 0 6px' }}>
        채용 중인 포지션 {jobs.filter(j => j.status === 'active').length}개
        <span style={{ fontSize: 16, color: 'var(--fg-3)', fontWeight: 500, marginLeft: 8 }}>
          ({jobs.filter(j => j.status === 'active').length} open positions)
        </span>
      </h1>
      <p style={{ fontSize: 14, color: 'var(--fg-2)' }}>
        지원 마감일 없음 · 상시 채용 · 서류 결과는 7일 이내에 안내드려요.<br/>
        <span style={{ color: 'var(--fg-3)', fontSize: 12.5 }}>Rolling basis · Screening results within 7 days.</span>
      </p>

      {/* Search */}
      <div style={{ position:'relative', marginTop: 28 }}>
        <span style={{ position:'absolute', left: 14, top:'50%', transform:'translateY(-50%)', color: 'var(--fg-3)', display:'inline-flex' }}>
          <Icon name="search" size={18}/>
        </span>
        <input value={query} onChange={e => setQuery(e.target.value)}
          placeholder="포지션 · 팀 · 스킬로 검색 (Search by position, team, skills)" style={{
          width: '100%', padding: '13px 14px 13px 42px',
          border: '1px solid var(--border-default)', borderRadius: 10,
          background: 'var(--neutral-0)', fontSize: 14, fontFamily:'var(--font-sans)', outline:'none',
          boxSizing: 'border-box',
        }}/>
      </div>

      {/* Department filters (KO/EN) */}
      <div style={{ display:'flex', gap: 6, marginTop: 20, flexWrap: 'wrap' }}>
        {departments.map(d => (
          <span key={d.id} onClick={()=>setDept(d.id)} style={{cursor:'pointer'}}>
            <Chip active={dept === d.id}>
              {d.ko} <span style={{ opacity: 0.7, fontWeight: 400, marginLeft: 3 }}>({d.en})</span>
            </Chip>
          </span>
        ))}
      </div>

      {/* Jobs list */}
      {filtered.length === 0 ? (
        <div style={{
          marginTop: 40, padding: 40, textAlign: 'center',
          background: 'var(--neutral-0)', border: '1px dashed var(--border-strong)',
          borderRadius: 12, color: 'var(--fg-3)',
        }}>
          <Icon name="search-x" size={28} style={{ marginBottom: 8 }}/>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-2)' }}>조건에 맞는 공고가 없어요</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>No postings match your filters.</div>
        </div>
      ) : (
        <div style={{ display: 'grid', gap: 8, marginTop: 24 }}>
          {filtered.map(j => {
            const ind = CIS.industryOf(j.industryId);
            const de = CIS.departmentOf(j.deptId);
            return (
              <div key={j.id} onClick={()=>onNavigate('jobDetail', { jobId: j.id })} style={{
                padding: '20px 22px',
                background: 'var(--neutral-0)',
                border: '1px solid var(--border-default)',
                borderRadius: 12,
                display: 'grid', gridTemplateColumns: '1fr auto',
                alignItems: 'center', gap: 20,
                cursor: 'pointer',
                transition: 'all 140ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor='var(--brand-300)'; e.currentTarget.style.background='var(--brand-50)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor='var(--border-default)'; e.currentTarget.style.background='var(--neutral-0)'; }}>
                <div>
                  <div style={{ display:'flex', alignItems:'center', gap: 10, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em' }}>
                      {j.title_ko || j.title}
                      {j.title_en && (
                        <span style={{ fontSize: 13, color: 'var(--fg-3)', fontWeight: 500, marginLeft: 6 }}>
                          ({j.title_en})
                        </span>
                      )}
                    </span>
                    <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{j.level}</span>
                    {j.questions && j.questions.length > 0 && (
                      <span style={{
                        padding: '2px 8px', background: 'var(--violet-50, #F3EFFF)',
                        color: 'var(--violet-700, #4E27B5)', borderRadius: 999,
                        fontSize: 10.5, fontWeight: 600,
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                      }}>
                        <Icon name="sparkles" size={10}/>
                        AI 면접질문 준비됨
                      </span>
                    )}
                  </div>
                  {/* 업종(카테고리) 병행 표시 — CORE REQUIREMENT */}
                  <div style={{ display:'flex', gap: 14, marginTop: 8, fontSize: 12.5, color: 'var(--fg-3)', flexWrap: 'wrap' }}>
                    <span style={{display:'inline-flex',alignItems:'center',gap:4}}>
                      <Icon name="building-2" size={12}/>
                      <b style={{ color: 'var(--fg-2)' }}>{ind.ko}</b>
                      <span style={{ opacity: 0.7 }}>({ind.en})</span>
                    </span>
                    <span style={{display:'inline-flex',alignItems:'center',gap:4}}>
                      <Icon name="briefcase" size={12}/>
                      {de.ko} <span style={{ opacity: 0.7 }}>({de.en})</span>
                    </span>
                    <span style={{display:'inline-flex',alignItems:'center',gap:4}}>
                      <Icon name="map-pin" size={12}/>{j.loc_ko || j.loc}
                    </span>
                    <span style={{display:'inline-flex',alignItems:'center',gap:4}}>
                      <Icon name="clock" size={12}/>{j.empType || j.type}
                    </span>
                  </div>
                  {(j.skills && j.skills.length > 0) && (
                    <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                      {j.skills.slice(0, 5).map(s => (
                        <span key={s} style={{
                          fontSize: 10.5, padding: '2px 8px',
                          background: 'var(--neutral-100)', color: 'var(--fg-2)',
                          borderRadius: 4, fontFamily: 'var(--font-sans)',
                        }}>{s}</span>
                      ))}
                    </div>
                  )}
                </div>
                <div style={{ color: 'var(--fg-3)' }}><Icon name="arrow-right" size={18}/></div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.Jobs = Jobs;