function ApplyForm({ onNavigate }) {
  const [step, setStep] = useState(1);

  return (
    <div style={{ maxWidth: 760, margin: '0 auto', padding: '32px 40px 80px' }}>
      {/* Progress */}
      <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 32 }}>
        {[1,2,3].map(n => (
          <div key={n} style={{ display:'flex', alignItems:'center', gap: 10, flex: n < 3 ? 1 : 0 }}>
            <div style={{
              width: 28, height: 28, borderRadius: 999,
              background: step >= n ? 'var(--brand-500)' : 'var(--neutral-100)',
              color: step >= n ? '#fff' : 'var(--fg-3)',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              fontSize: 12, fontWeight: 700, fontFamily: 'var(--font-latin)',
            }}>{step > n ? '✓' : n}</div>
            {n < 3 && <div style={{ flex: 1, height: 2, background: step > n ? 'var(--brand-500)' : 'var(--neutral-200)' }}/>}
          </div>
        ))}
      </div>

      <TagLine>STEP {step} / 3</TagLine>
      <h1 style={{ fontSize: 30, fontWeight: 700, letterSpacing:'-0.02em', margin: '10px 0 6px' }}>
        {step === 1 && '기본 정보'}
        {step === 2 && '이력서 & 커버레터'}
        {step === 3 && '지원 완료'}
      </h1>
      <p style={{ fontSize: 14, color: 'var(--fg-2)', marginBottom: 32 }}>
        {step === 1 && 'Sr. Frontend Engineer 포지션에 지원해주셔서 감사해요.'}
        {step === 2 && '이력서 파일을 업로드해주세요. AI가 자동으로 요약해서 채용팀에 전달돼요.'}
        {step === 3 && '접수가 완료되었어요. 서류 결과는 7일 이내에 이메일로 안내드려요.'}
      </p>

      {step === 1 && (
        <div style={{ display:'grid', gap: 18 }}>
          <FormField label="이름" required><input className="input" placeholder="예: 한지현"/></FormField>
          <FormField label="이메일" required><input className="input" type="email" placeholder="you@example.com"/></FormField>
          <FormField label="전화번호" required><input className="input" placeholder="010-1234-5678"/></FormField>
          <FormField label="LinkedIn / GitHub URL"><input className="input" placeholder="https://linkedin.com/in/…"/></FormField>
          <FormField label="현재 근무처 (선택)"><input className="input" placeholder="회사명"/></FormField>
          <div style={{ display:'flex', justifyContent:'flex-end', marginTop: 12 }}>
            <Button variant="primary" size="lg" onClick={()=>setStep(2)}>다음 →</Button>
          </div>
        </div>
      )}
      {step === 2 && (
        <div style={{ display:'grid', gap: 18 }}>
          <FormField label="이력서" required>
            <div style={{
              border: '2px dashed var(--border-strong)', borderRadius: 12, padding: 32,
              textAlign: 'center', background: 'var(--neutral-25)',
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-50)', color:'var(--brand-600)', margin: '0 auto', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name="upload-cloud" size={22}/>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 12 }}>파일을 여기로 드래그하거나 클릭해서 업로드</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>PDF, DOCX · 최대 10MB</div>
              <Button variant="secondary" size="sm" style={{ marginTop: 14 }}>파일 선택</Button>
            </div>
          </FormField>

          {/* AI privacy notice */}
          <div style={{
            padding: 14, background: 'var(--violet-50)', border: '1px solid var(--violet-100)',
            borderRadius: 10, display:'flex', gap: 10, fontSize: 12.5, color: 'var(--violet-700)',
          }}>
            <span style={{ flexShrink: 0, marginTop: 1 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
            </span>
            <div>
              <b>AI 요약 활용 안내</b> · AI가 이력서를 요약해 채용팀에 전달하지만, 서류 통과 여부는 사람이 최종 결정해요.
            </div>
          </div>

          <FormField label="지원 동기 (선택)">
            <textarea className="input" rows="4" placeholder="어떤 문제를 함께 풀고 싶은지 알려주세요."/>
          </FormField>

          <label style={{ display:'flex', gap: 8, alignItems:'flex-start', fontSize: 12.5, color: 'var(--fg-2)' }}>
            <input type="checkbox" defaultChecked style={{ marginTop: 3 }}/>
            <span>개인정보 수집·이용에 동의합니다. 채용 목적으로만 사용되며 최대 3년간 보관돼요.</span>
          </label>

          <div style={{ display:'flex', justifyContent:'space-between', marginTop: 12 }}>
            <Button variant="ghost" onClick={()=>setStep(1)}>← 이전</Button>
            <Button variant="primary" size="lg" onClick={()=>setStep(3)}>지원 완료</Button>
          </div>
        </div>
      )}
      {step === 3 && (
        <div style={{ padding: '48px 20px', textAlign: 'center', background: 'var(--neutral-0)', border:'1px solid var(--border-default)', borderRadius: 14 }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--success-50)', color: 'var(--success-600)', display:'inline-flex', alignItems:'center', justifyContent:'center', margin: '0 auto' }}>
            <Icon name="check-circle-2" size={32} stroke={2}/>
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 700, letterSpacing:'-0.02em', marginTop: 18 }}>지원이 접수되었어요</h2>
          <p style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 8, maxWidth: 420, marginLeft:'auto', marginRight:'auto' }}>
            지원 번호 <code style={{ background:'var(--neutral-100)', padding: '2px 6px', borderRadius: 4, fontFamily:'var(--font-mono)' }}>APP-2026-8f3a</code>. 서류 결과는 7일 이내에 이메일로 안내드려요.
          </p>
          <div style={{ display:'flex', gap: 8, justifyContent:'center', marginTop: 24 }}>
            <Button variant="secondary" onClick={()=>onNavigate('my')}>지원 현황 보기</Button>
            <Button variant="primary" onClick={()=>onNavigate('jobs')}>다른 공고 보기</Button>
          </div>
        </div>
      )}

      <style>{`
        .input {
          font-family: var(--font-sans); font-size: 14px;
          padding: 11px 14px; border: 1px solid var(--border-strong);
          border-radius: 8px; background: var(--neutral-0);
          width: 100%; outline: none; resize: vertical;
        }
        .input:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
      `}</style>
    </div>
  );
}

function FormField({ label, required, children }) {
  return (
    <div>
      <label style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--fg-2)', display:'block', marginBottom: 6 }}>
        {label} {required && <span style={{ color: 'var(--danger-500)' }}>*</span>}
      </label>
      {children}
    </div>
  );
}

window.ApplyForm = ApplyForm;