// 留学背景评估页 - multi-step form
const StudyAbroadPage = () => {
  const t = useT();
  const lang = useLang();
  const s = t.sa;
  const [step, setStep] = React.useState(2); // show step 2 mid-flow

  const steps = [
    { key: 1, label: s.stepGpa },
    { key: 2, label: s.stepTest },
    { key: 3, label: s.stepResearch },
    { key: 4, label: s.stepActivity },
    { key: 5, label: s.stepGoal },
  ];

  return (
    <div className="pb-scroll">
      <PBNav active="studyAbroad" />

      <section style={{ padding: '64px 48px 40px', background: 'var(--pb-paper)', borderBottom: '1px solid var(--pb-border)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="pb-eyebrow" style={{ marginBottom: 16 }}>{s.eyebrow}</div>
          <h1 className="pb-h1" style={{ fontSize: 56, whiteSpace: 'pre-line', maxWidth: 880, marginBottom: 20 }}>{s.title}</h1>
          <p style={{ fontSize: 17, color: 'var(--pb-fg-muted)', maxWidth: 760, lineHeight: 1.65 }}>{s.sub}</p>
        </div>
      </section>

      <section style={{ padding: '48px 48px 96px' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          {/* Stepper */}
          <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 40, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 18, left: 18, right: 18, height: 1, background: 'var(--pb-border)' }}/>
            {steps.map((st, i) => (
              <div key={st.key} className="pb-col" style={{ alignItems: 'center', gap: 8, position: 'relative', background: 'var(--pb-bg)', padding: '0 12px' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  display: 'grid', placeItems: 'center',
                  background: st.key < step ? 'var(--pb-success)' : st.key === step ? 'var(--pb-navy-900)' : 'var(--pb-surface)',
                  color: st.key <= step ? 'var(--pb-gold-500)' : 'var(--pb-fg-muted)',
                  border: st.key === step ? 'none' : '1px solid var(--pb-border)',
                  fontFamily: 'var(--pb-serif)', fontWeight: 600, fontSize: 14
                }}>
                  {st.key < step ? '✓' : st.key}
                </div>
                <div style={{ fontSize: 12, fontWeight: st.key === step ? 600 : 400, color: st.key === step ? 'var(--pb-fg)' : 'var(--pb-fg-muted)' }}>{st.label}</div>
              </div>
            ))}
          </div>

          {/* Form card */}
          <div className="pb-card" style={{ padding: 48 }}>
            <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 28 }}>
              <div>
                <div className="pb-mono" style={{ fontSize: 11, color: 'var(--pb-gold-700)', letterSpacing: '0.1em', marginBottom: 6 }}>
                  {s.step} {step} {s.of} 5
                </div>
                <h2 style={{ fontFamily: 'var(--pb-serif)', fontSize: 32, fontWeight: 500, margin: 0 }}>
                  {lang === 'zh' ? '标化考试成绩' : 'Standardized testing'}
                </h2>
                <p style={{ color: 'var(--pb-fg-muted)', marginTop: 8 }}>
                  {lang === 'zh' ? '选填你已参加或计划参加的考试，数据将用于与目标院校录取学生画像对比。' : 'Tests you\'ve taken or plan to take. Used to benchmark against admitted-student profiles.'}
                </p>
              </div>
              <div className="pb-progress-track" style={{ width: 160, height: 4, alignSelf: 'center' }}>
                <div className="pb-progress-fill gold" style={{ width: `${(step/5)*100}%` }}/>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {[
                { label: 'TOEFL', value: '108', max: '120', note: lang === 'zh' ? 'R29 L28 S25 W26' : 'R29 L28 S25 W26', taken: true },
                { label: 'IELTS', value: '—', max: '9.0', note: lang === 'zh' ? '未参加' : 'Not taken', taken: false },
                { label: 'SAT', value: '1510', max: '1600', note: 'EBRW 730 / Math 780', taken: true },
                { label: 'ACT', value: '—', max: '36', note: lang === 'zh' ? '未参加' : 'Not taken', taken: false },
                { label: 'GRE', value: '329', max: '340', note: 'V160 Q169 AW 4.5', taken: true },
                { label: 'GMAT', value: '—', max: '800', note: lang === 'zh' ? '未参加' : 'Not taken', taken: false },
                { label: lang === 'zh' ? 'AP 课程' : 'AP courses', value: '7', max: lang === 'zh' ? '门，平均 4.6' : ' courses, avg 4.6', note: lang === 'zh' ? 'CS/Calc BC/Phys C/Stats…' : 'CS/Calc BC/Phys C/Stats…', taken: true },
                { label: lang === 'zh' ? 'A-Level' : 'A-Level', value: '—', max: '', note: lang === 'zh' ? '未参加' : 'Not taken', taken: false },
              ].map((t, i) => (
                <div key={i} style={{
                  border: t.taken ? '1px solid var(--pb-navy-700)' : '1px dashed var(--pb-border-strong)',
                  borderRadius: 'var(--pb-radius)',
                  padding: '16px 20px',
                  background: t.taken ? 'var(--pb-navy-50)' : 'transparent',
                  cursor: 'pointer'
                }}>
                  <div className="pb-row" style={{ justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                    <span style={{ fontWeight: 600, letterSpacing: '0.04em', fontSize: 14 }}>{t.label}</span>
                    {t.taken && <span style={{ fontSize: 11, color: 'var(--pb-gold-700)' }}>● {lang === 'zh' ? '已填' : 'Entered'}</span>}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, fontFamily: 'var(--pb-mono)' }}>
                    <span style={{ fontSize: 24, fontWeight: 600, color: t.taken ? 'var(--pb-fg)' : 'var(--pb-fg-muted)' }}>{t.value}</span>
                    <span style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>/ {t.max}</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 4 }}>{t.note}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, padding: '16px 20px', background: 'var(--pb-gold-100)', border: '1px solid var(--pb-gold-400)', borderRadius: 'var(--pb-radius)', display: 'flex', alignItems: 'center', gap: 14, fontSize: 13 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--pb-gold-700)" strokeWidth="1.8"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="10"/></svg>
              <div style={{ color: 'var(--pb-gold-700)' }}>
                {lang === 'zh' ? '基于你的目标方向（美国 Top 30 + CS 硕士），建议 GRE 维持现状，但 TOEFL 口语 25 分偏低，建议刷至 26+。' : 'For your goal (US Top 30 + CS Master\'s), GRE looks solid; TOEFL Speaking 25 is below threshold — aim for 26+.'}
              </div>
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36 }}>
              <button className="pb-btn pb-btn-ghost" onClick={() => setStep(Math.max(1, step - 1))}>← {s.prev}</button>
              <button className="pb-btn pb-btn-primary" onClick={() => setStep(Math.min(5, step + 1))}>
                {step === 5 ? s.submit : s.next} →
              </button>
            </div>
          </div>

          {/* Live preview */}
          <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="pb-card" style={{ padding: 24 }}>
              <div className="pb-eyebrow" style={{ marginBottom: 12 }}>{lang === 'zh' ? '实时背景画像' : 'Live profile portrait'}</div>
              {/* Radar */}
              <svg viewBox="0 0 240 240" width="100%" height="200">
                <g transform="translate(120,120)">
                  {[1, 0.75, 0.5, 0.25].map((r, i) => (
                    <polygon key={i}
                      points={[0, 1, 2, 3, 4].map(j => {
                        const a = -Math.PI / 2 + (j * 2 * Math.PI / 5);
                        return `${Math.cos(a) * 90 * r},${Math.sin(a) * 90 * r}`;
                      }).join(' ')}
                      fill="none" stroke="var(--pb-border)" strokeWidth="0.8"
                    />
                  ))}
                  {[0, 1, 2, 3, 4].map(j => {
                    const a = -Math.PI / 2 + (j * 2 * Math.PI / 5);
                    return <line key={j} x1="0" y1="0" x2={Math.cos(a)*90} y2={Math.sin(a)*90} stroke="var(--pb-border)" strokeWidth="0.8"/>;
                  })}
                  {/* values: GPA 0.85, Test 0.78, Research 0.65, Activity 0.72, Writing 0.6 */}
                  <polygon
                    points={[0.85, 0.78, 0.65, 0.72, 0.6].map((v, j) => {
                      const a = -Math.PI / 2 + (j * 2 * Math.PI / 5);
                      return `${Math.cos(a)*90*v},${Math.sin(a)*90*v}`;
                    }).join(' ')}
                    fill="rgba(201,169,104,0.25)" stroke="#C9A968" strokeWidth="2"
                  />
                  {['GPA', lang === 'zh' ? '标化' : 'Test', lang === 'zh' ? '科研' : 'Research', lang === 'zh' ? '活动' : 'Activity', lang === 'zh' ? '文书' : 'Writing'].map((lab, j) => {
                    const a = -Math.PI / 2 + (j * 2 * Math.PI / 5);
                    return <text key={j} x={Math.cos(a)*108} y={Math.sin(a)*108} fontSize="10" fontFamily="Inter" fill="var(--pb-fg-muted)" textAnchor="middle" dominantBaseline="middle">{lab}</text>;
                  })}
                </g>
              </svg>
            </div>
            <div className="pb-card" style={{ padding: 24 }}>
              <div className="pb-eyebrow" style={{ marginBottom: 12 }}>{lang === 'zh' ? '当前定位（预测）' : 'Current positioning (forecast)'}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 12 }}>
                <div>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 36, fontWeight: 500, color: 'var(--pb-navy-900)', lineHeight: 1 }}>B+</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '综合档位' : 'Overall tier'}</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 36, fontWeight: 500, color: 'var(--pb-gold-700)', lineHeight: 1 }}>72%</div>
                  <div className="pb-stat-label">{lang === 'zh' ? 'Top 30 概率' : 'Top 30 odds'}</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 36, fontWeight: 500, lineHeight: 1 }}>14</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '匹配院校' : 'Matched schools'}</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 36, fontWeight: 500, lineHeight: 1 }}>6.2 mo</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '建议提升时间' : 'Suggested prep'}</div>
                </div>
              </div>
              <div style={{ marginTop: 20, padding: 14, background: 'var(--pb-surface-alt)', borderRadius: 'var(--pb-radius)', fontSize: 12, color: 'var(--pb-fg-muted)', lineHeight: 1.55 }}>
                {lang === 'zh' ? '完成全部 5 步后将生成详细报告，包括 24 所匹配院校与 12 个月时间线。' : 'Finish all 5 steps to unlock the full report: 24 matched schools and a 12-month timeline.'}
              </div>
            </div>
          </div>
        </div>
      </section>

      <PBFooter />
    </div>
  );
};

window.StudyAbroadPage = StudyAbroadPage;