// 高考志愿测算工具页
const GaokaoPage = () => {
  const t = useT();
  const lang = useLang();
  const g = t.gk;
  const [score, setScore] = React.useState(658);
  const [rank, setRank] = React.useState(4217);
  const [province, setProvince] = React.useState(0);
  const [major, setMajor] = React.useState(1);

  // Mocked school data
  const schools = [
    { name: lang === 'zh' ? '清华大学' : 'Tsinghua University', major: lang === 'zh' ? '计算机科学与技术' : 'Computer Science', tier: 'reach', prob: 14, cutoff: 695, cutoffRank: 187, gap: -37, location: lang === 'zh' ? '北京' : 'Beijing' },
    { name: lang === 'zh' ? '北京大学' : 'Peking University', major: lang === 'zh' ? '元培学院' : 'Yuanpei College', tier: 'reach', prob: 22, cutoff: 689, cutoffRank: 312, gap: -31, location: lang === 'zh' ? '北京' : 'Beijing' },
    { name: lang === 'zh' ? '复旦大学' : 'Fudan University', major: lang === 'zh' ? '计算机科学与技术' : 'Computer Science', tier: 'reach', prob: 38, cutoff: 672, cutoffRank: 1845, gap: -14, location: lang === 'zh' ? '上海' : 'Shanghai' },
    { name: lang === 'zh' ? '上海交通大学' : 'Shanghai Jiao Tong', major: lang === 'zh' ? 'IEEE 试点班' : 'IEEE Pilot Class', tier: 'match', prob: 64, cutoff: 661, cutoffRank: 3208, gap: -3, location: lang === 'zh' ? '上海' : 'Shanghai' },
    { name: lang === 'zh' ? '浙江大学' : 'Zhejiang University', major: lang === 'zh' ? '图灵班' : 'Turing Class', tier: 'match', prob: 72, cutoff: 656, cutoffRank: 4012, gap: 2, location: lang === 'zh' ? '杭州' : 'Hangzhou' },
    { name: lang === 'zh' ? '中国科学技术大学' : 'USTC', major: lang === 'zh' ? '计算机科学与技术' : 'Computer Science', tier: 'match', prob: 76, cutoff: 654, cutoffRank: 4488, gap: 4, location: lang === 'zh' ? '合肥' : 'Hefei' },
    { name: lang === 'zh' ? '南京大学' : 'Nanjing University', major: lang === 'zh' ? '计算机科学与技术' : 'Computer Science', tier: 'match', prob: 81, cutoff: 651, cutoffRank: 5012, gap: 7, location: lang === 'zh' ? '南京' : 'Nanjing' },
    { name: lang === 'zh' ? '同济大学' : 'Tongji University', major: lang === 'zh' ? '软件工程' : 'Software Engineering', tier: 'safety', prob: 92, cutoff: 638, cutoffRank: 7805, gap: 20, location: lang === 'zh' ? '上海' : 'Shanghai' },
    { name: lang === 'zh' ? '华中科技大学' : 'HUST', major: lang === 'zh' ? '计算机科学' : 'Computer Science', tier: 'safety', prob: 95, cutoff: 632, cutoffRank: 9241, gap: 26, location: lang === 'zh' ? '武汉' : 'Wuhan' },
  ];

  const tierLabel = { reach: g.reach, match: g.match, safety: g.safety };
  const tierColor = { reach: 'var(--pb-danger)', match: 'var(--pb-navy-700)', safety: 'var(--pb-success)' };

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

      {/* Header */}
      <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 }}>{g.eyebrow}</div>
          <h1 className="pb-h1" style={{ fontSize: 56, whiteSpace: 'pre-line', maxWidth: 800, marginBottom: 20 }}>{g.title}</h1>
          <p style={{ fontSize: 17, color: 'var(--pb-fg-muted)', maxWidth: 720, lineHeight: 1.65 }}>{g.sub}</p>
        </div>
      </section>

      {/* Tool: Form + Results */}
      <section style={{ padding: '48px 48px 96px', background: 'var(--pb-bg)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '380px 1fr', gap: 32, alignItems: 'start' }}>
          {/* Form */}
          <div className="pb-card" style={{ position: 'sticky', top: 100, padding: 32 }}>
            <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 24 }}>
              <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>
                {lang === 'zh' ? '你的考试情况' : 'Your exam'}
              </h3>
              <span className="pb-tag pb-tag-gold">FREE</span>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label className="pb-label">{g.formProvince}</label>
                <select className="pb-select" value={province} onChange={e => setProvince(+e.target.value)}>
                  {g.provinces.map((p, i) => <option key={i} value={i}>{p}</option>)}
                </select>
              </div>
              <div>
                <label className="pb-label">{g.formYear}</label>
                <select className="pb-select" defaultValue="2025">
                  <option>2026</option><option>2025</option><option>2024</option>
                </select>
              </div>
            </div>

            <div style={{ marginTop: 16 }}>
              <label className="pb-label">{g.formScore}</label>
              <div style={{ position: 'relative' }}>
                <input className="pb-input" type="number" value={score} onChange={e => setScore(+e.target.value)} style={{ paddingRight: 60, fontFamily: 'var(--pb-mono)', fontSize: 18, fontWeight: 600 }}/>
                <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--pb-fg-muted)', fontSize: 12 }}>/ 750</span>
              </div>
            </div>

            <div style={{ marginTop: 16 }}>
              <label className="pb-label">{g.formRank}</label>
              <input className="pb-input" type="number" value={rank} onChange={e => setRank(+e.target.value)} style={{ fontFamily: 'var(--pb-mono)', fontSize: 16 }}/>
              <div style={{ marginTop: 6, fontSize: 11, color: 'var(--pb-fg-muted)' }}>
                {lang === 'zh' ? `约位居 ${g.provinces[province]} ${(rank/1000).toFixed(1)}K 名` : `Top ${(rank/1000).toFixed(1)}K in ${g.provinces[province]}`}
              </div>
            </div>

            <div style={{ marginTop: 16 }}>
              <label className="pb-label">{g.formSubject}</label>
              <select className="pb-select">
                <option>{lang === 'zh' ? '物理 + 化学 + 生物' : 'Physics + Chem + Bio'}</option>
                <option>{lang === 'zh' ? '物理 + 化学 + 政治' : 'Physics + Chem + Politics'}</option>
                <option>{lang === 'zh' ? '历史 + 政治 + 地理' : 'History + Politics + Geography'}</option>
              </select>
            </div>

            <div style={{ marginTop: 16 }}>
              <label className="pb-label">{g.formMajor}</label>
              <select className="pb-select" value={major} onChange={e => setMajor(+e.target.value)}>
                {g.majors.map((m, i) => <option key={i} value={i}>{m}</option>)}
              </select>
            </div>

            <div style={{ marginTop: 24 }}>
              <label className="pb-label">{g.formAdvanced}</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {g.preferences.map((p, i) => (
                  <span key={i} style={{
                    padding: '6px 12px', fontSize: 12, borderRadius: 100,
                    border: `1px solid var(--pb-border-strong)`,
                    background: i < 2 ? 'var(--pb-navy-900)' : 'transparent',
                    color: i < 2 ? 'var(--pb-gold-500)' : 'var(--pb-fg)',
                    cursor: 'pointer'
                  }}>{p}</span>
                ))}
              </div>
            </div>

            <button className="pb-btn pb-btn-primary" style={{ width: '100%', marginTop: 28, padding: '14px' }}>
              {g.compute}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="pb-btn pb-btn-link" style={{ width: '100%', marginTop: 8 }}>{g.reset}</button>
          </div>

          {/* Results */}
          <div className="pb-col pb-gap-24">
            {/* Position context */}
            <div className="pb-card">
              <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 20 }}>
                <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>{g.yifenyiduan}</h3>
                <span style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>{lang === 'zh' ? '数据来源：教育考试院' : 'Source: Provincial Bureau'}</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
                <div>
                  <div className="pb-stat-num" style={{ fontSize: 32 }}>{score}</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '总分' : 'Score'}</div>
                </div>
                <div>
                  <div className="pb-stat-num" style={{ fontSize: 32 }}>{rank.toLocaleString()}</div>
                  <div className="pb-stat-label">{g.yourPosition}</div>
                </div>
                <div>
                  <div className="pb-stat-num" style={{ fontSize: 32, color: 'var(--pb-gold-700)' }}>{lang === 'zh' ? '前 1.8%' : 'Top 1.8%'}</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '本省百分位' : 'Percentile'}</div>
                </div>
                <div>
                  <div className="pb-stat-num" style={{ fontSize: 32 }}>+18</div>
                  <div className="pb-stat-label">{lang === 'zh' ? '高于一本线' : 'Above tier-1 line'}</div>
                </div>
              </div>
              {/* Mini score-rank chart */}
              <div style={{ marginTop: 28 }}>
                <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginBottom: 10 }}>{lang === 'zh' ? '一分一段表（节选）' : 'Score-rank table (excerpt)'}</div>
                <svg width="100%" height="120" viewBox="0 0 700 120">
                  <defs>
                    <linearGradient id="rankGrad" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#0B1F3A" stopOpacity="0.18"/>
                      <stop offset="100%" stopColor="#0B1F3A" stopOpacity="0.02"/>
                    </linearGradient>
                  </defs>
                  {/* baseline */}
                  <line x1="0" y1="100" x2="700" y2="100" stroke="var(--pb-border)" strokeWidth="1"/>
                  {/* histogram-like bars */}
                  {Array.from({ length: 35 }).map((_, i) => {
                    const h = 18 + Math.sin(i * 0.4) * 12 + (i < 5 ? 5 : 0) + (i > 28 ? 8 : 0);
                    return <rect key={i} x={i * 20 + 2} y={100 - h} width="14" height={h} fill={i === 17 ? '#C9A968' : 'var(--pb-navy-100)'} rx="1"/>;
                  })}
                  <line x1="350" y1="10" x2="350" y2="110" stroke="#C9A968" strokeWidth="1.5" strokeDasharray="3,3"/>
                  <text x="356" y="18" fill="#9C7E3D" fontSize="10" fontFamily="JetBrains Mono">{lang === 'zh' ? '你 658 分' : 'You · 658'}</text>
                  <text x="6" y="116" fill="var(--pb-fg-muted)" fontSize="9" fontFamily="JetBrains Mono">580</text>
                  <text x="340" y="116" fill="var(--pb-fg-muted)" fontSize="9" fontFamily="JetBrains Mono">650</text>
                  <text x="666" y="116" fill="var(--pb-fg-muted)" fontSize="9" fontFamily="JetBrains Mono">720</text>
                </svg>
              </div>
            </div>

            {/* Reach/Match/Safety summary */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {[
                { k: 'reach', n: 3, label: g.reach, sub: lang === 'zh' ? '概率 < 50%' : 'Prob < 50%' },
                { k: 'match', n: 4, label: g.match, sub: lang === 'zh' ? '概率 50–85%' : 'Prob 50–85%' },
                { k: 'safety', n: 2, label: g.safety, sub: lang === 'zh' ? '概率 > 85%' : 'Prob > 85%' },
              ].map(t => (
                <div key={t.k} className="pb-card" style={{ padding: 20, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', top: 0, left: 0, width: 4, height: '100%', background: tierColor[t.k] }}/>
                  <div className="pb-row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div>
                      <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 32, fontWeight: 600, color: tierColor[t.k] }}>{t.n}</div>
                      <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4 }}>{t.label}</div>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--pb-fg-muted)', fontFamily: 'var(--pb-mono)' }}>{t.sub}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* School recommendation table */}
            <div className="pb-card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: '24px 28px', borderBottom: '1px solid var(--pb-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>
                  {lang === 'zh' ? '推荐院校 9 所（共 36 所匹配）' : '9 schools shown (36 matched)'}
                </h3>
                <button className="pb-btn pb-btn-link pb-btn-sm">{lang === 'zh' ? '查看完整列表 →' : 'Full list →'}</button>
              </div>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--pb-surface-alt)' }}>
                    <th style={{ textAlign: 'left', padding: '12px 28px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{lang === 'zh' ? '档位' : 'Tier'}</th>
                    <th style={{ textAlign: 'left', padding: '12px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{g.schoolCol}</th>
                    <th style={{ textAlign: 'left', padding: '12px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{g.lineCol}</th>
                    <th style={{ textAlign: 'right', padding: '12px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{g.gapCol}</th>
                    <th style={{ textAlign: 'left', padding: '12px 28px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', minWidth: 200 }}>{g.probabilityCol}</th>
                  </tr>
                </thead>
                <tbody>
                  {schools.map((s, i) => (
                    <tr key={i} style={{ borderTop: '1px solid var(--pb-border)' }}>
                      <td style={{ padding: '20px 28px' }}>
                        <span style={{ display: 'inline-flex', padding: '3px 10px', fontSize: 11, fontWeight: 600, borderRadius: 4, background: tierColor[s.tier] + '15', color: tierColor[s.tier], textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                          {tierLabel[s.tier]}
                        </span>
                      </td>
                      <td style={{ padding: '20px 16px' }}>
                        <div style={{ fontWeight: 600, fontSize: 15, fontFamily: 'var(--pb-serif)' }}>{s.name}</div>
                        <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 2 }}>{s.major} · {s.location}</div>
                      </td>
                      <td style={{ padding: '20px 16px', fontFamily: 'var(--pb-mono)', fontSize: 13 }}>
                        <div>{s.cutoff}</div>
                        <div style={{ fontSize: 11, color: 'var(--pb-fg-muted)' }}>#{s.cutoffRank.toLocaleString()}</div>
                      </td>
                      <td style={{ padding: '20px 16px', textAlign: 'right', fontFamily: 'var(--pb-mono)', fontSize: 14, fontWeight: 600, color: s.gap >= 0 ? 'var(--pb-success)' : 'var(--pb-danger)' }}>
                        {s.gap > 0 ? '+' : ''}{s.gap}
                      </td>
                      <td style={{ padding: '20px 28px', minWidth: 220 }}>
                        <div className="pb-prob-bar">
                          <div className="pb-prob-track">
                            <div className={`pb-prob-fill ${s.tier}`} style={{ width: `${s.prob}%` }}/>
                          </div>
                          <span style={{ minWidth: 36, textAlign: 'right', fontWeight: 600 }}>{s.prob}%</span>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ padding: '16px 28px', background: 'var(--pb-surface-alt)', fontSize: 12, color: 'var(--pb-fg-muted)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{lang === 'zh' ? '* 概率基于 2014–2024 年录取数据 + 当年招生计划，每周更新' : '* Probability based on 2014–2024 records + current quota, weekly refreshed'}</span>
                <span className="pb-mono">UPDATED 2026.04.28</span>
              </div>
            </div>

            {/* Soft upsell */}
            <div style={{ background: 'var(--pb-navy-900)', color: 'var(--pb-ivory)', padding: '32px 36px', borderRadius: 'var(--pb-radius-lg)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
              <div>
                <div className="pb-eyebrow" style={{ color: 'var(--pb-gold-500)', marginBottom: 8 }}>{lang === 'zh' ? '想要更深入的解读？' : 'Want a deeper read?'}</div>
                <h4 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 500, margin: 0 }}>
                  {lang === 'zh' ? '与资深志愿规划师 30 分钟一对一，免费' : '30-min 1:1 with a senior planner. Free.'}
                </h4>
              </div>
              <button className="pb-btn pb-btn-gold">{t.cta.book}</button>
            </div>
          </div>
        </div>
      </section>

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

window.GaokaoPage = GaokaoPage;