// 方法论 / 数据说明页 — B2
// Route: /#/gaokao/method
// Explains accurately: (1) data provenance, (2) admission-probability model,
// (3) 宁缺勿错 data-integrity stance.
// Reads from the REAL model (lib/gaokao-admission-model.js) — no invented numbers.

const GaokaoMethodPage = () => {
  const lang = useLang();

  const cardStyle = {
    background: 'var(--pb-surface)',
    border: '1px solid var(--pb-border)',
    borderRadius: 10,
    padding: '24px 28px',
    marginBottom: 24,
  };

  const sectionLabelStyle = {
    fontSize: 11,
    fontWeight: 600,
    color: 'var(--pb-fg-muted)',
    textTransform: 'uppercase',
    letterSpacing: '0.06em',
    marginBottom: 12,
  };

  const headingStyle = {
    fontFamily: 'var(--pb-serif)',
    fontSize: 20,
    fontWeight: 700,
    color: 'var(--pb-fg)',
    marginBottom: 10,
    marginTop: 0,
  };

  const bodyStyle = {
    fontSize: 14,
    color: 'var(--pb-fg)',
    lineHeight: 1.8,
    marginBottom: 0,
  };

  const highlightStyle = {
    background: 'var(--pb-surface-alt)',
    borderLeft: '3px solid var(--pb-gold-500)',
    borderRadius: '0 6px 6px 0',
    padding: '10px 16px',
    marginTop: 12,
    fontSize: 13,
    color: 'var(--pb-fg)',
    lineHeight: 1.7,
  };

  const badgeStyle = (bg, color) => ({
    display: 'inline-block',
    padding: '2px 8px',
    fontSize: 11,
    fontWeight: 700,
    borderRadius: 4,
    background: bg,
    color: color,
    marginRight: 6,
    marginBottom: 4,
    letterSpacing: '0.03em',
  });

  // 5-tier colors (mirror lib/gaokao-admission-model.js fineBucket thresholds)
  const tierBadges = [
    { key: '搏', en: 'Gamble',  pct: '<40%',  bg: '#fee2e2', color: '#991b1b' },
    { key: '冲', en: 'Reach',   pct: '40–55%', bg: '#fef3c7', color: '#92400e' },
    { key: '稳', en: 'Match',   pct: '55–75%', bg: '#dbeafe', color: '#1e40af' },
    { key: '保', en: 'Safety',  pct: '75–90%', bg: '#d1fae5', color: '#065f46' },
    { key: '垫', en: 'Floor',   pct: '≥90%',   bg: '#ecfeff', color: '#155e75' },
  ];

  return (
    <div className="pb-scroll" data-testid="method-page">
      <PBNav active="gaokao" />

      {/* ── Hero ──────────────────────────────────────────────────────────── */}
      <section style={{
        padding: '48px 48px 36px',
        background: 'var(--pb-navy-900)',
        color: '#fff',
      }}>
        <div style={{ maxWidth: 860, margin: '0 auto' }}>
          {/* Breadcrumb */}
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 20, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span
              style={{ cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}
              onClick={() => { window.location.hash = '#/gaokao'; }}
            >
              {lang === 'zh' ? '高考测算' : 'Gaokao Calculator'}
            </span>
            <span>›</span>
            <span style={{ color: '#fff' }}>
              {lang === 'zh' ? '方法论 / 数据说明' : 'Methodology & Data'}
            </span>
          </div>

          <h1 style={{ fontFamily: 'var(--pb-serif)', fontSize: 32, fontWeight: 700, margin: '0 0 10px', lineHeight: 1.2 }}>
            {lang === 'zh' ? '方法论 · 数据说明' : 'Methodology & Data Transparency'}
          </h1>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', margin: 0, lineHeight: 1.7, maxWidth: 640 }}>
            {lang === 'zh'
              ? '我们怎样获取数据、如何计算录取概率、为什么我们选择宁缺勿错——完整、如实地说清楚。'
              : 'How we source data, how we compute admission probability, and why we choose accuracy over impressiveness — explained fully and honestly.'}
          </p>
        </div>
      </section>

      {/* ── Body ──────────────────────────────────────────────────────────── */}
      <section style={{ padding: '40px 48px 80px', background: 'var(--pb-bg)' }}>
        <div style={{ maxWidth: 860, margin: '0 auto' }}>

          {/* ── Section 1: 数据从哪来 ────────────────────────────────────── */}
          <div style={cardStyle}>
            <div style={sectionLabelStyle}>
              {lang === 'zh' ? '一、数据来源' : '1. Data Provenance'}
            </div>
            <h2 style={headingStyle}>
              {lang === 'zh' ? '数据从哪来' : 'Where does our data come from?'}
            </h2>
            <p style={bodyStyle}>
              {lang === 'zh' ? (
                <>
                  当前正式上线的录取分数线（投档线/录取位次）数据覆盖<strong>海南省（HI）</strong>，来源为海南省考试局官方公布的招生计划及录取结果，
                  经过人工逐条核对后收录。海南省采用以<strong>位次</strong>（全省排名）为唯一录取参考的标准分制度（满分 900 分），
                  我们录入的是各院校各专业组的<strong>实际投档位次</strong>，而非分数线换算值。
                </>
              ) : (
                <>
                  Cutoff data currently live on the platform covers <strong>Hainan Province (HI)</strong>, sourced from the official
                  Hainan Provincial Examination Authority enrollment plans and admission results, verified manually row by row.
                  Hainan uses a standard-score system (max 900) where the single admission reference is the candidate's
                  <strong> rank</strong> (province-wide); we store the actual <strong>投档位次 (cutoff rank)</strong> per school
                  and major group, not a score conversion.
                </>
              )}
            </p>

            <div style={highlightStyle}>
              {lang === 'zh' ? (
                <>
                  <strong>数据透明度（逐格溯源）：</strong>
                  每一个投档位次数据格均附有来源引注（官方年份、批次、批次代码），可在院校详情页直接查看。
                  非官方数据来源会明确标注，未经核实的数据不展示。
                </>
              ) : (
                <>
                  <strong>Per-cell source transparency:</strong> Each cutoff rank entry carries a source citation (official year,
                  batch, batch code), visible on the school detail page. Non-official sources are labeled; unverified
                  data is not displayed.
                </>
              )}
            </div>

            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {[
                lang === 'zh' ? '海南省考试局官方公告' : 'Hainan Exam Authority (official)',
                lang === 'zh' ? '历年招生计划（已审核）' : 'Enrollment plans (audited)',
                lang === 'zh' ? '逐条人工核对' : 'Manual row-by-row verification',
                lang === 'zh' ? '专业组投档位次（非分数换算）' : 'Major-group cutoff ranks (not score conversions)',
              ].map((tag) => (
                <span key={tag} style={{
                  padding: '4px 12px', fontSize: 12, borderRadius: 5,
                  background: 'var(--pb-surface-alt)',
                  border: '1px solid var(--pb-border)',
                  color: 'var(--pb-fg)',
                }}>
                  {tag}
                </span>
              ))}
            </div>

            <div style={{ marginTop: 16, padding: '10px 14px', background: '#fef3c7', borderRadius: 6, fontSize: 12, color: '#92400e', lineHeight: 1.6 }}>
              {lang === 'zh'
                ? '⚠ 专业就业率与起薪数据（专业百科页）来自 2022–2024 届毕业生均值估算，非权威统计，已标注「估算」标记。全国其他省份的录取位次数据正在接入中，上线前不展示。'
                : '⚠ Major employment rate and salary data (major wiki page) are 2022–2024 graduate average estimates, not authoritative statistics — labeled "Estimate". Cutoff rank data for other provinces is being ingested and will not be shown until verified.'}
            </div>
          </div>

          {/* ── Section 2: 录取概率怎么算 ───────────────────────────────── */}
          <div style={cardStyle}>
            <div style={sectionLabelStyle}>
              {lang === 'zh' ? '二、概率算法' : '2. Probability Model'}
            </div>
            <h2 style={headingStyle}>
              {lang === 'zh' ? '录取概率怎么算' : 'How is admission probability computed?'}
            </h2>

            <p style={bodyStyle}>
              {lang === 'zh' ? (
                <>
                  我们使用<strong>位次法 Logistic 曲线</strong>，这是国内主流志愿工具（掌上高考、夸克、优志愿、圆梦志愿）的公认主路线。
                  全站所有概率值均来自同一个模型（<code style={{ fontSize: 12, background: 'var(--pb-surface-alt)', padding: '1px 5px', borderRadius: 3 }}>lib/gaokao-admission-model.js</code>），
                  不同页面不会出现同一考生同一学校概率相差 20 个百分点的情况。
                </>
              ) : (
                <>
                  We use the <strong>rank-method logistic curve</strong> — the consensus approach among China's leading
                  application tools (掌上高考, 夸克, 优志愿, 圆梦志愿). All probability values site-wide come from a
                  single model (<code style={{ fontSize: 12, background: 'var(--pb-surface-alt)', padding: '1px 5px', borderRadius: 3 }}>lib/gaokao-admission-model.js</code>);
                  the same candidate and school will never show a 20-point gap between pages.
                </>
              )}
            </p>

            {/* Step 1: Predicted cutoff */}
            <div style={{ marginTop: 18, marginBottom: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pb-fg)', marginBottom: 6 }}>
                {lang === 'zh' ? '① 预测投档线：近 3 年 1:2:3 加权' : 'Step 1 — Predicted cutoff: 3-year 1:2:3 recency weighting'}
              </div>
              <p style={{ ...bodyStyle, fontSize: 13 }}>
                {lang === 'zh' ? (
                  <>
                    用历史 3 年投档位次做<strong>近年优先加权平均</strong>：最近一年权重 3、前年权重 2、大前年权重 1，
                    合计权重 6。这是主流竞品平滑大小年的通用公式。
                    只有 1 年数据时，会给出「低置信度」标记，并放宽置信区间。
                  </>
                ) : (
                  <>
                    Historical cutoff ranks from up to 3 years are averaged with <strong>recency weighting 1:2:3</strong>
                    (oldest weight 1, previous year weight 2, most recent weight 3 — total 6). This is the standard
                    large-swing-year smoothing formula used by leading competitors. When only 1 year of history is
                    available, a low-confidence flag is set and the confidence band is widened.
                  </>
                )}
              </p>
            </div>

            {/* Step 2: Probability formula */}
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pb-fg)', marginBottom: 6 }}>
                {lang === 'zh' ? '② 录取概率：正好压线 = 50%' : 'Step 2 — Probability: exactly at cutoff = 50%'}
              </div>
              <div style={highlightStyle}>
                <code style={{ fontSize: 13, display: 'block', marginBottom: 6 }}>
                  p = 0.5 + 0.8 × ln(预测投档位次 / 你的位次)
                </code>
                {lang === 'zh' ? (
                  <>
                    当你的位次<strong>恰好等于</strong>预测投档位次时，概率精确为 <strong>50%</strong>——这是一枚硬币正反面，既没有把握也没有绝望。
                    位次优于投档线时概率高于 50%，差于时低于 50%，单调递增。
                    概率钳制在 [0%, 100%]。
                  </>
                ) : (
                  <>
                    When your rank <strong>equals</strong> the predicted cutoff rank, probability is exactly <strong>50%</strong> —
                    a coin flip, neither reassuring nor hopeless. Better rank (smaller number) → above 50%;
                    worse rank → below 50%; strictly monotone. Probability is clamped to [0%, 100%].
                  </>
                )}
              </div>
            </div>

            {/* Step 3: 3-bucket allocation + 5-tier display */}
            <div style={{ marginBottom: 6 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pb-fg)', marginBottom: 8 }}>
                {lang === 'zh' ? '③ 分桶：3 档分配 + 5 档精细标注' : 'Step 3 — Buckets: 3-tier allocation + 5-tier display labels'}
              </div>
              <p style={{ ...bodyStyle, fontSize: 13, marginBottom: 10 }}>
                {lang === 'zh' ? (
                  <>
                    志愿排序和配额按<strong>3 档分配</strong>：保（p ≥ 85%）/ 稳（50% ≤ p &lt; 85%）/ 冲（p &lt; 50%）。
                    界面上额外显示<strong>5 档精细标注</strong>，提供更细的填报参考——但不影响底层排序逻辑（「精细标注、粗放分配」）。
                  </>
                ) : (
                  <>
                    Slot ordering and allocation use a <strong>3-tier system</strong>: 保/Safety (p ≥ 85%) / 稳/Match (50% ≤ p &lt; 85%) / 冲/Reach (p &lt; 50%).
                    The UI additionally shows <strong>5-tier display labels</strong> for finer guidance — these do not affect the underlying allocation logic ("label finely, allocate broadly").
                  </>
                )}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {tierBadges.map((t) => (
                  <div key={t.key} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '6px 12px', borderRadius: 6,
                    background: t.bg, border: `1px solid ${t.color}22`,
                  }}>
                    <span style={{ fontWeight: 700, fontSize: 15, color: t.color }}>{t.key}</span>
                    <span style={{ fontSize: 11, color: t.color, opacity: 0.85 }}>
                      {lang === 'zh' ? t.pct : `${t.en} ${t.pct}`}
                    </span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 10, fontSize: 12, color: 'var(--pb-fg-muted)', lineHeight: 1.6 }}>
                {lang === 'zh'
                  ? '压线 50% 落「冲」档（硬币正反面属于冲，而非稳），符合审慎原则。'
                  : 'The cutoff 50% falls in 冲/Reach (a coin flip belongs in Reach, not Match) — consistent with a conservative stance.'}
              </div>
            </div>

            {/* Confidence band note */}
            <div style={{ marginTop: 14, padding: '10px 14px', background: 'var(--pb-surface-alt)', borderRadius: 6, fontSize: 12, color: 'var(--pb-fg-muted)', lineHeight: 1.6 }}>
              {lang === 'zh' ? (
                <>
                  <strong>置信区间说明：</strong>概率点估计旁边的区间（如 32%–68%）反映历年投档位次的波动范围，
                  是对「明年录取线会落在哪里」的预测区间，而非均值的标准误。
                  真实波动约为预测位次的 20–30%（基于海南真实数据回测），我们使用更宽的区间以保证诚实。
                </>
              ) : (
                <>
                  <strong>Confidence band:</strong> The range shown beside the point estimate (e.g. 32%–68%) reflects the
                  historical volatility of cutoff ranks — a prediction interval for where next year's cutoff will land,
                  not the standard error of the mean. Real-world swing is ~20–30% of the predicted rank
                  (based on Hainan backtests); we use wider bands to stay honest.
                </>
              )}
            </div>
          </div>

          {/* ── Section 3: 宁缺勿错 ─────────────────────────────────────── */}
          <div style={cardStyle}>
            <div style={sectionLabelStyle}>
              {lang === 'zh' ? '三、数据诚信原则' : '3. Data Integrity Stance'}
            </div>
            <h2 style={headingStyle}>
              {lang === 'zh' ? '宁缺勿错 — 为什么我们不造假' : '"Better absent than wrong" — why we don\'t fabricate data'}
            </h2>

            <p style={bodyStyle}>
              {lang === 'zh' ? (
                <>
                  高考志愿填报是一次性、不可逆的决定。一个虚高的概率或未经核实的分数线，可能让考生
                  冲线失误、浪费志愿机会。我们选择的原则是：<strong>宁缺勿错</strong>——
                  没有可靠来源的数据，不展示，而不是用估算值占位。
                </>
              ) : (
                <>
                  Gaokao application is a one-shot, irreversible decision. An inflated probability or unverified
                  cutoff score could cause a candidate to overshoot and waste slots. Our policy is
                  <strong> 宁缺勿错 (better absent than wrong)</strong> — data without a reliable source is
                  hidden, not filled in with estimates.
                </>
              )}
            </p>

            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                {
                  zh: '录取榜（各校逐人录取结果）',
                  en: 'Admitted-student rosters (per-person admission results)',
                  zh2: '无可靠公开来源 — 不展示',
                  en2: 'No reliable public source — not shown',
                  type: 'hidden',
                },
                {
                  zh: '综合评价录取数据',
                  en: 'Comprehensive evaluation (综合评价) admission data',
                  zh2: '无可靠公开来源 — 不展示',
                  en2: 'No reliable public source — not shown',
                  type: 'hidden',
                },
                {
                  zh: '专业就业率 / 平均起薪（专业百科页）',
                  en: 'Major employment rate / salary (major wiki page)',
                  zh2: '来自估算，已标注「估算」标记',
                  en2: 'From estimates; labeled "Estimate"',
                  type: 'estimate',
                },
                {
                  zh: '海南省历年投档位次',
                  en: 'Hainan Province historical cutoff ranks',
                  zh2: '来自官方公告，逐条核对',
                  en2: 'From official announcements, verified row-by-row',
                  type: 'verified',
                },
              ].map((item) => {
                const typeColor = item.type === 'verified'
                  ? { bg: '#d1fae5', color: '#065f46', label: lang === 'zh' ? '已核实' : 'Verified' }
                  : item.type === 'estimate'
                  ? { bg: '#fef3c7', color: '#92400e', label: lang === 'zh' ? '估算' : 'Estimate' }
                  : { bg: '#fee2e2', color: '#991b1b', label: lang === 'zh' ? '不展示' : 'Hidden' };
                return (
                  <div key={item.zh} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                    gap: 12, padding: '10px 14px',
                    background: 'var(--pb-surface-alt)',
                    borderRadius: 7, border: '1px solid var(--pb-border)',
                  }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--pb-fg)', marginBottom: 2 }}>
                        {lang === 'zh' ? item.zh : item.en}
                      </div>
                      <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>
                        {lang === 'zh' ? item.zh2 : item.en2}
                      </div>
                    </div>
                    <span style={{
                      padding: '3px 10px', fontSize: 11, fontWeight: 700,
                      borderRadius: 4, flexShrink: 0,
                      background: typeColor.bg, color: typeColor.color,
                    }}>
                      {typeColor.label}
                    </span>
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 16, fontSize: 13, color: 'var(--pb-fg-muted)', lineHeight: 1.7 }}>
              {lang === 'zh'
                ? '数据完整性是我们的产品核心。如您发现数据错误，请发邮件告知，我们会第一时间核查并修正。'
                : 'Data integrity is the core of our product. If you find an error, please email us — we will verify and correct it promptly.'}
            </div>
          </div>

          {/* ── Back links ────────────────────────────────────────────────── */}
          <div style={{ textAlign: 'center', marginTop: 12 }}>
            <button
              className="pb-btn pb-btn-link pb-btn-sm"
              onClick={() => { window.location.hash = '#/gaokao'; }}
            >
              {lang === 'zh' ? '← 返回测算页' : '← Back to calculator'}
            </button>
          </div>
        </div>
      </section>

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

Object.assign(window, { GaokaoMethodPage });