function JobDetail({ onNavigate }) {
  return (
    <div style={{ maxWidth: 1080, margin: '0 auto', padding: '32px 40px 80px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 40 }}>
      {/* Main */}
      <div>
        {/* Breadcrumb */}
        <button onClick={()=>onNavigate('jobs')} style={{
          background:'none', border:'none', cursor:'pointer', color:'var(--fg-3)',
          fontSize: 12.5, display:'inline-flex', alignItems:'center', gap:4, padding: 0, marginBottom: 20,
        }}>
          <Icon name="arrow-left" size={13}/>모든 채용공고
        </button>

        <TagLine>ENGINEERING · SR</TagLine>
        <h1 style={{ fontSize: 36, fontWeight: 700, letterSpacing:'-0.03em', margin: '10px 0 0', lineHeight: 1.1 }}>
          Sr. Frontend Engineer
        </h1>
        <div style={{ display:'flex', gap: 14, marginTop: 14, fontSize: 13, color: 'var(--fg-2)' }}>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="map-pin" size={13}/>Seoul · Remote OK</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="briefcase" size={13}/>Full-time</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="clock" size={13}/>상시 채용</span>
        </div>

        {/* Body */}
        <div style={{ marginTop: 36, fontSize: 15, lineHeight: 1.7, color: 'var(--fg-1)' }}>
          <h2 style={{ fontSize: 20, fontWeight: 700, letterSpacing:'-0.01em', margin: '0 0 12px' }}>팀 소개</h2>
          <p style={{ margin: 0, color: 'var(--fg-2)' }}>
            결제 UI 코어 팀은 매일 2천만 명이 사용하는 Toss의 결제 경험을 만들어갑니다. React·TypeScript 기반 SDK를 4개 프로덕트에 공급하며, 최근에는 Web Performance 이니셔티브를 리드해 결제 완료율을 <b style={{color:'var(--fg-1)'}}>+3.2%p</b> 개선했습니다.
          </p>

          <h2 style={{ fontSize: 20, fontWeight: 700, letterSpacing:'-0.01em', margin: '32px 0 12px' }}>이런 일을 해요</h2>
          <ul style={{ margin: 0, paddingLeft: 20, color: 'var(--fg-2)' }}>
            <li>Toss 결제 SDK의 신규 기능 설계·개발</li>
            <li>레거시 결제 위젯의 성능 최적화 및 접근성 개선</li>
            <li>디자인 시스템 컴포넌트 오너십 (Buttons, Fields, Modals)</li>
            <li>주니어 엔지니어 코드 리뷰 및 기술 멘토링</li>
          </ul>

          <h2 style={{ fontSize: 20, fontWeight: 700, letterSpacing:'-0.01em', margin: '32px 0 12px' }}>이런 분을 찾아요</h2>
          <ul style={{ margin: 0, paddingLeft: 20, color: 'var(--fg-2)' }}>
            <li>React·TypeScript로 프로덕션 제품을 <b style={{color:'var(--fg-1)'}}>5년 이상</b> 만들어보신 분</li>
            <li>Web Performance 지표를 개선한 경험이 있으신 분 (LCP, INP)</li>
            <li>디자인 시스템·컴포넌트 라이브러리를 설계·유지해보신 분</li>
            <li>모호한 문제를 스스로 정의하고 결정하는 걸 즐기시는 분</li>
          </ul>
        </div>
      </div>

      {/* Sticky sidebar */}
      <aside>
        <div style={{
          position: 'sticky', top: 88,
          padding: 20,
          background: 'var(--neutral-0)',
          border: '1px solid var(--border-default)',
          borderRadius: 14,
        }}>
          <div style={{ fontSize: 12, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>지원 마감</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>상시 · 마감 없음</div>
          <Button variant="primary" size="lg" style={{ width:'100%', justifyContent:'center', marginTop: 16 }} onClick={()=>onNavigate('apply')}>지금 지원하기</Button>
          <button style={{
            width:'100%', marginTop: 8, padding: '10px 14px',
            background:'transparent', border:'1px solid var(--border-strong)', borderRadius: 8,
            fontSize: 13, fontWeight: 500, color:'var(--fg-1)', cursor:'pointer',
            display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 6,
          }}><Icon name="share-2" size={14}/>공유하기</button>

          <div style={{ height: 1, background:'var(--border-subtle)', margin: '20px -20px' }}/>

          <div style={{ display:'grid', gap: 10 }}>
            <MetaRow label="채용 담당" value="한지현"/>
            <MetaRow label="Hiring Manager" value="박준영"/>
            <MetaRow label="채용 절차" value="서류 → 1차 → 2차 → 오퍼"/>
            <MetaRow label="예상 프로세스" value="약 3–4주"/>
          </div>
        </div>
      </aside>
    </div>
  );
}

function MetaRow({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{label}</div>
      <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{value}</div>
    </div>
  );
}

window.JobDetail = JobDetail;