function Jobs({ onNavigate }) {
  const [dept, setDept] = useState('전체');
  const departments = ['전체', 'Engineering', 'Design', 'Data', 'Product', 'GTM', 'Operations'];
  const locations = ['Seoul', 'Remote OK', 'Contract'];

  const allJobs = [
    { title:'Sr. Frontend Engineer', dept:'Engineering', loc:'Seoul · Remote OK', type:'Full-time', tag:'Sr' },
    { title:'Product Designer', dept:'Design', loc:'Seoul', type:'Full-time', tag:'Mid' },
    { title:'Data Analyst', dept:'Data', loc:'Seoul · Remote OK', type:'Full-time', tag:'Jr–Mid' },
    { title:'Sr. Backend Engineer', dept:'Engineering', loc:'Seoul', type:'Full-time', tag:'Sr' },
    { title:'iOS Engineer', dept:'Engineering', loc:'Seoul', type:'Full-time', tag:'Mid–Sr' },
    { title:'DevOps Engineer', dept:'Engineering', loc:'Seoul · Remote OK', type:'Contract', tag:'Sr' },
    { title:'Product Manager · Payments', dept:'Product', loc:'Seoul', type:'Full-time', tag:'Sr' },
    { title:'Marketing Manager', dept:'GTM', loc:'Seoul', type:'Full-time', tag:'Mid' },
    { title:'Content Strategist', dept:'GTM', loc:'Seoul', type:'Full-time', tag:'Mid' },
  ];
  const jobs = dept === '전체' ? allJobs : allJobs.filter(j => j.dept === dept);

  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' }}>채용 중인 포지션 {allJobs.length}개</h1>
      <p style={{ fontSize: 14, color: 'var(--fg-2)' }}>지원 마감일 없음 · 상시 채용 · 서류 결과는 7일 이내에 안내드려요.</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 placeholder="포지션, 팀, 스킬로 검색" 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',
        }}/>
      </div>

      {/* Filters */}
      <div style={{ display:'flex', gap: 6, marginTop: 20, flexWrap: 'wrap' }}>
        {departments.map(d => (
          <span key={d} onClick={()=>setDept(d)} style={{cursor:'pointer'}}>
            <Chip active={dept === d}>{d}</Chip>
          </span>
        ))}
      </div>

      {/* Jobs list */}
      <div style={{ display: 'grid', gap: 8, marginTop: 24 }}>
        {jobs.map((j,i) => (
          <div key={i} onClick={()=>onNavigate('jobDetail')} 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',
          }}
          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 }}>
                <span style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em' }}>{j.title}</span>
                <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{j.tag}</span>
              </div>
              <div style={{ display:'flex', gap: 14, marginTop: 8, fontSize: 12.5, color: 'var(--fg-3)' }}>
                <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="building-2" size={12}/>{j.dept}</span>
                <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="map-pin" size={12}/>{j.loc}</span>
                <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="briefcase" size={12}/>{j.type}</span>
              </div>
            </div>
            <div style={{ color: 'var(--fg-3)' }}><Icon name="arrow-right" size={18}/></div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Jobs = Jobs;