function JobPostings() {
  const jobs = [
    { title: 'Sr. Frontend Engineer', dept: 'Engineering', loc: 'Seoul · Remote OK', type: 'Full-time', applicants: 87, new: 12, stage: 'active', days: 14 },
    { title: 'Product Designer', dept: 'Design', loc: 'Seoul', type: 'Full-time', applicants: 42, new: 6, stage: 'active', days: 9 },
    { title: 'Data Analyst', dept: 'Data', loc: 'Seoul · Remote OK', type: 'Full-time', applicants: 3, new: 3, stage: 'active', days: 5, alert: true },
    { title: 'Sr. Backend Engineer', dept: 'Engineering', loc: 'Seoul', type: 'Full-time', applicants: 61, new: 0, stage: 'active', days: 28 },
    { title: 'iOS Engineer', dept: 'Engineering', loc: 'Seoul', type: 'Full-time', applicants: 24, new: 4, stage: 'draft', days: null },
    { title: 'DevOps Engineer', dept: 'Infra', loc: 'Seoul · Remote OK', type: 'Contract', applicants: 18, new: 2, stage: 'active', days: 21 },
    { title: 'Marketing Manager', dept: 'GTM', loc: 'Seoul', type: 'Full-time', applicants: 33, new: 5, stage: 'closed', days: null },
  ];

  return (
    <div style={{ padding: '20px 24px', display: 'grid', gap: 16 }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div>
          <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing:'-0.02em', margin: 0 }}>채용공고</h1>
          <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 2 }}>7개 진행 중 · 이번 달 신규 지원 152건</div>
        </div>
        <div style={{ flex: 1 }} />
        <Button variant="secondary" size="md" icon="download">CSV 내보내기</Button>
        <Button variant="primary" size="md" icon="plus">공고 만들기</Button>
      </div>

      {/* Filter tabs */}
      <div style={{ display:'flex', gap: 4, borderBottom: '1px solid var(--border-default)' }}>
        {[['전체', 7], ['진행 중', 5], ['임시저장', 1], ['마감', 1]].map(([t,c],i) => (
          <div key={t} style={{
            padding: '10px 14px', fontSize: 13,
            fontWeight: i === 0 ? 600 : 500,
            color: i === 0 ? 'var(--fg-1)' : 'var(--fg-3)',
            borderBottom: `2px solid ${i === 0 ? 'var(--brand-500)' : 'transparent'}`,
            cursor: 'pointer', marginBottom: -1,
            display:'inline-flex', alignItems:'center', gap: 6,
          }}>{t}<span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums' }}>{c}</span></div>
        ))}
      </div>

      {/* Job cards */}
      <div style={{ display: 'grid', gap: 10 }}>
        {jobs.map((j,i) => <JobCard key={i} job={j} />)}
      </div>
    </div>
  );
}

function JobCard({ job }) {
  const stageTone = { active: 'success', draft: 'neutral', closed: 'danger' };
  const stageLabel = { active: '진행 중', draft: '임시저장', closed: '마감' };
  return (
    <Card hoverable style={{ padding: '14px 18px', display:'grid', gridTemplateColumns:'1fr 320px', gap: 20, alignItems: 'center' }}>
      <div>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>{job.title}</span>
          <Badge tone={stageTone[job.stage]} dot>{stageLabel[job.stage]}</Badge>
          {job.alert && (
            <span style={{ display:'inline-flex', alignItems:'center', gap: 4, background:'var(--warning-50)', color:'var(--warning-700)', fontSize: 11.5, fontWeight: 600, padding:'3px 8px', borderRadius: 999 }}>
              <Icon name="alert-triangle" size={11}/>
              지원자 부족
            </span>
          )}
        </div>
        <div style={{ display:'flex', gap: 14, fontSize: 12.5, color: 'var(--fg-3)', marginTop: 6 }}>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="building-2" size={12}/>{job.dept}</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="map-pin" size={12}/>{job.loc}</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="briefcase" size={12}/>{job.type}</span>
          {job.days != null && <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="clock" size={12}/>{job.days}일 게시</span>}
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr auto', gap: 14, alignItems:'center' }}>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', letterSpacing:'-0.02em' }}>{job.applicants}</div>
          <div style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase' }}>지원자</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700, color: job.new > 0 ? 'var(--brand-600)' : 'var(--fg-3)', fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', letterSpacing:'-0.02em' }}>+{job.new}</div>
          <div style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase' }}>이번 주</div>
        </div>
        <span style={{ color: 'var(--fg-3)', cursor:'pointer' }}><Icon name="more-vertical" size={16}/></span>
      </div>
    </Card>
  );
}

window.JobPostings = JobPostings;