// 院校匹配报告页 with paywall
const ReportPage = () => {
  const t = useT();
  const lang = useLang();
  const r = t.rp;

  const visibleSchools = [
    { name: lang === 'zh' ? '麻省理工学院' : 'MIT', major: 'EECS', tier: 'reach', prob: 12, country: 'US', rank: 'Top 5', highlight: lang === 'zh' ? '科研经历偏弱' : 'Research depth gap' },
    { name: 'Stanford', major: 'CS - AI', tier: 'reach', prob: 18, country: 'US', rank: 'Top 5', highlight: lang === 'zh' ? '需 1 篇顶会论文' : 'Need 1 top-tier paper' },
    { name: 'Carnegie Mellon', major: 'SCS', tier: 'reach', prob: 32, country: 'US', rank: 'Top 10', highlight: lang === 'zh' ? '匹配度高，竞争激烈' : 'Strong fit, high comp.' },
    { name: 'University of Michigan', major: 'CSE', tier: 'match', prob: 64, country: 'US', rank: 'Top 25', highlight: lang === 'zh' ? '与你画像相近的录取学生 38 人' : '38 admits with similar profile' },
    { name: 'Imperial College', major: 'Computing', tier: 'match', prob: 78, country: 'UK', rank: 'G5', highlight: lang === 'zh' ? '英国首选，背景适配' : 'UK top choice, strong fit' },
    { name: 'NUS', major: 'CS', tier: 'safety', prob: 92, country: 'SG', rank: 'Top 15', highlight: lang === 'zh' ? '稳妥保底，奖学金可期' : 'Solid safety, scholarship plausible' },
  ];

  const lockedSchools = [
    'University of Toronto', 'UCLA', 'Cornell', 'Columbia', 'University of Edinburgh', 'HKU', 'TU Munich',
    'Northwestern', 'University of Washington', 'EPFL', 'KAIST', 'University of Sydney', 'Monash',
    'Georgia Tech', 'UC San Diego', 'University of Illinois', 'McGill', 'NTU'
  ];

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

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

      {/* Report header */}
      <section style={{ background: 'var(--pb-navy-900)', color: 'var(--pb-ivory)', padding: '56px 48px 64px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 28 }}>
            <div className="pb-eyebrow" style={{ color: 'var(--pb-gold-500)' }}>{r.eyebrow}</div>
            <div className="pb-mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em' }}>
              REPORT ID · PB-2026-04-{Math.floor(Math.random()*9000+1000)} · {r.generated} 2026.04.30
            </div>
          </div>

          <h1 style={{ fontFamily: 'var(--pb-serif)', fontSize: 52, fontWeight: 500, margin: '0 0 12px', letterSpacing: '-0.005em' }}>
            {lang === 'zh' ? '陈同学的留学背景画像' : 'Profile portrait — Chen'}
          </h1>
          <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)', marginBottom: 40 }}>
            {lang === 'zh' ? '上海·复旦附中·物化生·目标 美国 CS 硕士 2027 秋' : 'Shanghai · Fudan HS · STEM · Target US CS Master\'s · Fall 2027'}
          </div>

          {/* Score blocks */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {[
              { label: r.academicScore, value: 'A−', sub: 'GPA 3.82 / 4.0', mark: 88 },
              { label: lang === 'zh' ? '标化分' : 'Test score', value: 'A', sub: 'TOEFL 108 · GRE 329', mark: 91 },
              { label: r.activityScore, value: 'B+', sub: lang === 'zh' ? '4 项核心活动' : '4 core activities', mark: 78 },
              { label: r.overallTier, value: lang === 'zh' ? 'B+' : 'B+', sub: lang === 'zh' ? 'Top 30 候选' : 'Top 30 candidate', mark: 82 },
            ].map((b, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(201,169,104,0.2)', borderRadius: 'var(--pb-radius-lg)', padding: 24 }}>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>{b.label}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 56, fontWeight: 500, color: 'var(--pb-gold-500)', lineHeight: 1 }}>{b.value}</div>
                  <div style={{ fontFamily: 'var(--pb-mono)', fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>{b.mark}</div>
                </div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 10 }}>{b.sub}</div>
                <div style={{ height: 3, background: 'rgba(255,255,255,0.08)', borderRadius: 100, marginTop: 14, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${b.mark}%`, background: 'var(--pb-gold-500)', borderRadius: 100 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Strengths / improvements */}
      <section style={{ padding: '56px 48px', background: 'var(--pb-paper)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1.2fr', gap: 32 }}>
          <div className="pb-card">
            <div className="pb-eyebrow" style={{ color: 'var(--pb-success)', marginBottom: 12 }}>● {r.strengths}</div>
            <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.8, color: 'var(--pb-fg)' }}>
              <li>{lang === 'zh' ? 'GPA 持续在年级前 5%' : 'Top 5% GPA in class'}</li>
              <li>{lang === 'zh' ? '标化考试成绩稳定且均衡' : 'Balanced standardized scores'}</li>
              <li>{lang === 'zh' ? '一作 SCI 论文 1 篇（影响因子 4.2）' : '1 first-author SCI paper (IF 4.2)'}</li>
              <li>{lang === 'zh' ? '校机器人队队长，全国二等奖' : 'Robotics team captain, national 2nd'}</li>
            </ul>
          </div>
          <div className="pb-card">
            <div className="pb-eyebrow" style={{ color: 'var(--pb-warn)', marginBottom: 12 }}>● {r.weaknesses}</div>
            <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.8, color: 'var(--pb-fg)' }}>
              <li>{lang === 'zh' ? 'TOEFL 口语 25，建议刷至 26+' : 'TOEFL Speaking 25 → aim 26+'}</li>
              <li>{lang === 'zh' ? '缺少海外名校背景的推荐人' : 'Missing rec. letter from name-brand prof'}</li>
              <li>{lang === 'zh' ? '工业实习经历偏短（< 2 个月）' : 'Industry internship < 2 months'}</li>
              <li>{lang === 'zh' ? '文书素材尚未系统整理' : 'Essay materials not yet organized'}</li>
            </ul>
          </div>
          <div className="pb-card" style={{ background: 'var(--pb-navy-900)', color: 'var(--pb-ivory)', borderColor: 'var(--pb-navy-900)' }}>
            <div className="pb-eyebrow" style={{ color: 'var(--pb-gold-500)', marginBottom: 12 }}>{r.recommendation}</div>
            <p style={{ fontFamily: 'var(--pb-serif)', fontSize: 19, lineHeight: 1.55, fontStyle: 'italic', margin: '0 0 16px' }}>
              {lang === 'zh'
                ? '"在你目前的轨迹下，Top 30 美国 CS 硕士命中概率为 72%。如果在未来 6 个月内补足一段海外暑研 + 一封藤校教授推荐信，命中率可推至 88%。"'
                : '"On your current trajectory, your Top 30 US CS Master\'s admit probability is 72%. Add one summer research + one Ivy professor recommendation over the next six months, and that lifts to 88%."'}
            </p>
            <div style={{ fontSize: 12, color: 'var(--pb-gold-500)' }}>— {lang === 'zh' ? '资深规划师 · 王老师（MIT MS / 8 年经验）' : 'Senior counselor · Wang (MIT MS / 8 yrs)'}</div>
          </div>
        </div>
      </section>

      {/* School list */}
      <section style={{ padding: '32px 48px 96px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 28, alignItems: 'baseline' }}>
            <h2 className="pb-h2">{r.schoolListTitle}</h2>
            <div className="pb-row pb-gap-12">
              <span className="pb-tag">{lang === 'zh' ? '展示 6 / 24' : 'Showing 6 / 24'}</span>
              <button className="pb-btn pb-btn-ghost pb-btn-sm">{lang === 'zh' ? '导出 PDF' : 'Export PDF'}</button>
            </div>
          </div>

          {/* Visible schools */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {visibleSchools.map((s, i) => (
              <div key={i} className="pb-card" style={{ padding: '20px 24px', display: 'grid', gridTemplateColumns: '120px 2fr 1.5fr 1.4fr 100px', gap: 20, alignItems: 'center' }}>
                <span style={{ display: 'inline-flex', padding: '4px 10px', fontSize: 11, fontWeight: 600, borderRadius: 4, background: tierColor[s.tier] + '15', color: tierColor[s.tier], textTransform: 'uppercase', letterSpacing: '0.05em', justifySelf: 'start' }}>
                  {tierLabel[s.tier]}
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 19, fontWeight: 600 }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 2 }}>{s.major} · {s.country} · {s.rank}</div>
                </div>
                <div className="pb-prob-bar">
                  <div className="pb-prob-track">
                    <div className={`pb-prob-fill ${s.tier}`} style={{ width: `${s.prob}%` }}/>
                  </div>
                  <span className="pb-mono" style={{ minWidth: 36, textAlign: 'right', fontWeight: 600, fontSize: 14 }}>{s.prob}%</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', fontStyle: 'italic' }}>{s.highlight}</div>
                <button className="pb-btn pb-btn-ghost pb-btn-sm" style={{ justifySelf: 'end' }}>{lang === 'zh' ? '详情' : 'Details'}</button>
              </div>
            ))}
          </div>

          {/* Locked schools — soft paywall */}
          <div style={{ position: 'relative', marginTop: 32 }}>
            <div className="pb-locked-blur" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {lockedSchools.slice(0, 5).map((name, i) => (
                <div key={i} className="pb-card" style={{ padding: '20px 24px', display: 'grid', gridTemplateColumns: '120px 2fr 1.5fr 1.4fr 100px', gap: 20, alignItems: 'center' }}>
                  <span style={{ background: 'var(--pb-ink-100)', height: 22, borderRadius: 4 }}/>
                  <div>
                    <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 19, fontWeight: 600 }}>{name}</div>
                    <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 2 }}>━━━━━━━━━━━━━</div>
                  </div>
                  <div style={{ background: 'var(--pb-ink-100)', height: 16, borderRadius: 4 }}/>
                  <div style={{ background: 'var(--pb-ink-100)', height: 14, borderRadius: 4, width: '70%' }}/>
                  <div style={{ background: 'var(--pb-ink-100)', height: 28, borderRadius: 4 }}/>
                </div>
              ))}
            </div>

            {/* Paywall card */}
            <div style={{
              position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
              width: 'min(680px, 90%)',
              background: 'var(--pb-surface)',
              border: '1px solid var(--pb-gold-500)',
              borderRadius: 'var(--pb-radius-lg)',
              padding: 40,
              boxShadow: 'var(--pb-shadow-lg)',
              textAlign: 'center'
            }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--pb-navy-900)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--pb-gold-500)" strokeWidth="1.6"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
              </div>
              <h3 className="pb-h3" style={{ marginBottom: 8 }}>{r.lockedTitle}</h3>
              <p style={{ color: 'var(--pb-fg-muted)', marginBottom: 24, lineHeight: 1.6 }}>{r.lockedSub}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, textAlign: 'left' }}>
                {r.paidItems.map((it, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, fontSize: 13, alignItems: 'flex-start' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--pb-gold-700)" strokeWidth="2.5" style={{ flexShrink: 0, marginTop: 3 }}><path d="M20 6 9 17l-5-5"/></svg>
                    {it}
                  </li>
                ))}
              </ul>
              <div className="pb-row pb-gap-12" style={{ justifyContent: 'center' }}>
                <button className="pb-btn pb-btn-primary pb-btn-lg">{r.unlock}</button>
                <button className="pb-btn pb-btn-ghost pb-btn-lg">{t.cta.book}</button>
              </div>
              <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 14 }}>{r.unlockNote}</div>
            </div>
          </div>
        </div>
      </section>

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

window.ReportPage = ReportPage;