{isKo ? '동의하신 내역은 IP, 브라우저 정보, 시각과 함께 GDPR Art. 7에 따라 기록됩니다.' : 'Your consent is recorded with IP, user agent, and timestamp per GDPR Art. 7.'}

{isKo ? '본인 정보와, 받으신 입학 추천인 코드(있을 경우)를 입력합니다.' : 'Your personal info and the admission referrer code you received (if any).'}

{isKo ? '국가, 학력 정보, 학력 증명 메모를 입력합니다.' : 'Country, academic background, and a transcript note.'}

{isKo ? '학력 증명서 메모' : 'Transcript note'}

</div>
      <TranscriptUpload form={form} setForm={setForm} isKo={isKo} />
    </>
  );
}

function Step2({ form, setForm, upd, isKo }) {
  const c1 = (form.essay_body || '').length;
  const c2 = (form.essay_body_2 || '').length;

return (
    <>
      <p className="apply-desc">{isKo
        ? '두 가지 에세이 문항에 답해주세요. 추천인은 최소 3명을 입력해야 합니다.'
        : 'Answer both essay questions. At least 3 recommenders are required.'}</p>

<h4 className="apply-sub">{isKo ? '에세이 1' : 'Essay 1'}</h4>
      <div className="field">
        <label>{isKo ? '제목 *' : 'Title *'}</label>
        <input value={form.essay_title} onChange={upd('essay_title')}
          placeholder={isKo ? '예: 국경 너머의 학습' : 'e.g. Learning across borders'} />
      </div>
      <div className="field">
        <label>{isKo ? '본문 * (최소 50자)' : 'Body * (min 50 characters)'}</label>
        <textarea rows="6" value={form.essay_body} onChange={upd('essay_body')}
          placeholder={isKo ? '본인의 배경, 관심사, DreamPath를 통해 이루고 싶은 것에 대해 작성하세요.' : 'Background, interests, and what you hope to achieve through DreamPath.'} />
        <span className="hint">{c1} {isKo ? '자' : 'characters'}</span>
      </div>

<h4 className="apply-sub">{isKo ? '에세이 2' : 'Essay 2'}</h4>
      <div className="field">
        <label>{isKo ? '제목 *' : 'Title *'}</label>
        <input value={form.essay_title_2} onChange={upd('essay_title_2')}
          placeholder={isKo ? '예: 5년 후의 나' : 'e.g. Where I see myself in 5 years'} />
      </div>
      <div className="field">
        <label>{isKo ? '본문 * (최소 50자)' : 'Body * (min 50 characters)'}</label>
        <textarea rows="6" value={form.essay_body_2} onChange={upd('essay_body_2')}
          placeholder={isKo ? '학업 계획, 커리어 목표, DreamPath 이후에 대해 작성하세요.' : 'Academic plan, career goals, and your path after DreamPath.'} />
        <span className="hint">{c2} {isKo ? '자' : 'characters'}</span>
      </div>

<h4 className="apply-sub">{isKo ? '스카우트 추천인 (최소 3명)' : 'Scout recommenders (minimum 3)'}</h4>
      <p className="hint" style={{marginBottom:12}}>{isKo
        ? '추천인 정보(이름, 이메일, 전화번호 — 국제번호 형식 +국가코드, 회원국명, 훈련 수준)를 최소 3명 입력해주세요. 추천서는 각 추천인별로 PDF 업로드 가능합니다.'
        : 'Provide at least 3 recommenders with name, email, international phone (+country code), member country, and training level. PDF letter is optional per recommender.'}</p>

{(form.recommenders || []).map((r, i) => (
        <RecommenderCard key={i} index={i} rec={r} isKo={isKo}
          onChange={(next) => {
            const list = [...(form.recommenders || [])];
            list[i] = next;
            setForm({ ...form, recommenders: list });
          }}
          onRemove={form.recommenders.length > 3 ? () => {
            const list = (form.recommenders || []).filter((_, j) => j !== i);
            setForm({ ...form, recommenders: list });
          } : null}
        />
      ))}

<button type="button" className="btn btn-secondary btn-sm"
        onClick={() => setForm({ ...form, recommenders: [...(form.recommenders || []), blankRecommender()] })}>
        + {isKo ? '추천인 추가' : 'Add recommender'}
      </button>
    </>
  );
}

<div className="field">
        <label>{isKo ? '지원 프로그램' : 'Program'}</label>
        <select value={form.program} onChange={upd('program')}>
          {progList.map(p => (
            <option key={p.id} value={p.id}>{isKo ? p.title_ko : p.title_en}</option>
          ))}
        </select>
      </div>

<h4 className="apply-sub">{isKo ? '트랙 선택 *' : 'Choose a track *'}</h4>
      <div className="track-grid">
        {TRACKS.map(t => (
          <label key={t.id} className={'track-card' + (form.track === t.id ? ' on' : '')}>
            <input type="radio" name="track" value={t.id}
              checked={form.track === t.id} onChange={() => setForm({ ...form, track: t.id })} />
            <div className="track-head">
              <span className="track-name">{isKo ? t.name_ko : t.name_en}</span>
              {t.badge_ko && <span className="track-badge">{isKo ? t.badge_ko : t.badge_en}</span>}
            </div>
            <p className="track-desc">{isKo ? t.desc_ko : t.desc_en}</p>
            <div className="track-price">
              {t.id === 'partial' ? (isKo ? '$3 ~ $7' : '$3 – $7')
                : t.price === 0 ? (isKo ? '무료' : 'Free')
                : `$${t.price}`}
            </div>
          </label>
        ))}
      </div>

{form.track === 'partial' && (
        <>
          <h4 className="apply-sub">{isKo ? '장학 비율 선택' : 'Pick scholarship tier'}</h4>
          <div className="tier-row">
            {PARTIALS.map(t => (
              <label key={t.tier} className={'tier-chip' + (form.partial_tier === t.tier ? ' on' : '')}>
                <input type="radio" name="tier" value={t.tier}
                  checked={form.partial_tier === t.tier} onChange={() => setForm({ ...form, partial_tier: t.tier })} />
                <span className="tier-pct">{t.pct}</span>
                <span className="tier-fee">${t.price}</span>
              </label>
            ))}
          </div>
        </>
      )}

{form.track && form.track !== 'general' && (
        <>
          <h4 className="apply-sub">{isKo ? '결제' : 'Payment'}</h4>
          <div className="pay-summary">
            <div>
              <div className="pay-label">{isKo ? '결제 금액' : 'Amount due'}</div>
              <div className="pay-amount">US ${amount}.00</div>
            </div>
            <div className="pay-lock"><i data-lucide="lock" width="14" height="14" strokeWidth="2"></i> Secured</div>
          </div>
          <div className="form-row">
            <div className="field">
              <label>{isKo ? '카드 번호' : 'Card number'}</label>
              <input inputMode="numeric" maxLength="19" placeholder="0000 0000 0000 0000"
                onChange={(e) => {
                  const digits = e.target.value.replace(/\D/g,'').slice(0,16);
                  setForm({ ...form, card_last4: digits.slice(-4) });
                  e.target.value = digits.replace(/(.{4})/g,'$1 ').trim();
                }} />
            </div>
            <div className="field">
              <label>{isKo ? '만료 · CVC' : 'Expiry · CVC'}</label>
              <input placeholder="MM/YY · 123" />
            </div>
          </div>
          <div className="pay-note">{isKo
            ? '이 프로토타입은 실제로 결제를 처리하지 않습니다. 카드 번호 마지막 4자리만 저장됩니다.'
            : 'This prototype does not process real payments. Only the last 4 digits are recorded.'}</div>
        </>
      )}
    </>
  );
}

window.Apply = Apply;

{isKo ? '지원이 접수되었습니다.' : 'Your application is in.'}

{isKo ? '감사합니다, ' : 'Thanks, '}{form.name}.

{isKo ? '4단계. 온라인으로 완료.' : 'Four steps. All online.'}

{steps[step]}