function MyApplications() {
  const apps = [
    { id: 'APP-2026-8f3a', role:'Sr. Frontend Engineer', dept:'Engineering', applied:'2026.08.06', stage: 1, current:'서류 검토' },
    { id: 'APP-2026-6d2b', role:'Product Designer', dept:'Design', applied:'2026.07.28', stage: 2, current:'1차 인터뷰' },
    { id: 'APP-2026-4a19', role:'Frontend Engineer', dept:'Engineering', applied:'2026.07.10', stage: -1, current:'불합격' },
  ];
  const stages = ['서류 검토', '1차 인터뷰', '2차 인터뷰', '오퍼', '입사'];

  return (
    <div style={{ maxWidth: 960, margin: '0 auto', padding: '32px 40px 80px' }}>
      <TagLine>MY APPLICATIONS</TagLine>
      <h1 style={{ fontSize: 30, fontWeight: 700, letterSpacing:'-0.02em', margin: '10px 0 6px' }}>내 지원 현황</h1>
      <p style={{ fontSize: 14, color: 'var(--fg-2)' }}>진행 중 {apps.filter(a=>a.stage>0).length}건 · 종결 {apps.filter(a=>a.stage<0).length}건</p>

      <div style={{ display:'grid', gap: 12, marginTop: 28 }}>
        {apps.map(a => (
          <div key={a.id} style={{ padding: 20, background:'var(--neutral-0)', border:'1px solid var(--border-default)', borderRadius: 14 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <span style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em' }}>{a.role}</span>
              <span style={{ fontSize: 11.5, color: 'var(--brand-700)', background:'var(--brand-50)', padding:'2px 8px', borderRadius: 999, fontWeight: 600 }}>{a.dept}</span>
              <div style={{ flex: 1 }}/>
              <span style={{ fontSize: 12, color: 'var(--fg-3)', fontFamily:'var(--font-mono)' }}>{a.id}</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 6 }}>지원일 {a.applied}</div>

            {/* Stepper */}
            <div style={{ marginTop: 20, display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 0, position:'relative' }}>
              {stages.map((s,i) => {
                const active = a.stage > 0 && i < a.stage;
                const current = a.stage > 0 && i === a.stage - 1;
                const rejected = a.stage < 0 && i === 0;
                const bg = rejected ? 'var(--danger-500)' : current ? 'var(--brand-500)' : active ? 'var(--brand-500)' : 'var(--neutral-200)';
                const color = (active || current || rejected) ? '#fff' : 'var(--fg-3)';
                return (
                  <div key={s} style={{ display:'flex', flexDirection:'column', alignItems:'center', position:'relative' }}>
                    {i < stages.length - 1 && (
                      <div style={{
                        position:'absolute', top: 12, left: '50%', right: '-50%',
                        height: 2, background: (active) ? 'var(--brand-500)' : 'var(--neutral-200)',
                      }}/>
                    )}
                    <div style={{
                      width: 26, height: 26, borderRadius: 999,
                      background: bg, color, display:'inline-flex', alignItems:'center', justifyContent:'center',
                      fontSize: 11, fontWeight: 700, fontFamily:'var(--font-latin)', zIndex: 1,
                      border: '3px solid var(--neutral-0)',
                    }}>{rejected ? '✕' : (active || current) ? '✓' : i+1}</div>
                    <div style={{ fontSize: 11.5, marginTop: 8, color: current ? 'var(--fg-1)' : 'var(--fg-3)', fontWeight: current ? 600 : 400 }}>{s}</div>
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 20, padding: '10px 14px', background: a.stage < 0 ? 'var(--danger-50)' : 'var(--brand-50)', borderRadius: 8, fontSize: 12.5, color: a.stage < 0 ? 'var(--danger-700)' : 'var(--brand-700)' }}>
              {a.stage < 0 ? '이번 기회에는 인연이 닿지 않았어요. 다음 기회에 다시 뵙기를 기대해요.' :
               a.stage === 1 ? '채용팀이 이력서를 검토하고 있어요. 3–5일 이내에 안내드려요.' :
               '1차 인터뷰가 예정되어 있어요. 이메일을 확인해주세요.'}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.MyApplications = MyApplications;