// 录取榜
const CasesPage = () => {
  const t = useT();
  const lang = useLang();
  const c = t.cs;

  const cases = [
    { code: 'PB-2526-0918', from: lang === 'zh' ? '北师大附属实验' : 'BNU HS', to: 'Stanford', major: 'CS - AI', degree: 'BS', country: 'US', date: '2025.12.14', tag: 'ED' },
    { code: 'PB-2526-0907', from: lang === 'zh' ? '复旦附中' : 'Fudan HS', to: 'MIT', major: 'EECS', degree: 'BS', country: 'US', date: '2025.12.14', tag: 'EA' },
    { code: 'PB-2526-0892', from: lang === 'zh' ? '人大附中' : 'RDFZ', to: 'Harvard', major: 'Statistics', degree: 'BS', country: 'US', date: '2025.12.14', tag: 'REA' },
    { code: 'PB-2526-0851', from: lang === 'zh' ? '上外附中' : 'SFLS', to: 'Oxford', major: 'PPE', degree: 'BA', country: 'UK', date: '2026.01.09', tag: '—' },
    { code: 'PB-2526-0834', from: lang === 'zh' ? '深圳中学' : 'Shenzhen HS', to: 'Cambridge', major: 'Engineering', degree: 'BA', country: 'UK', date: '2026.01.13', tag: '—' },
    { code: 'PB-2526-0827', from: lang === 'zh' ? 'WLSA 上海' : 'WLSA SH', to: 'Princeton', major: 'Economics', degree: 'BA', country: 'US', date: '2025.12.14', tag: 'SCEA' },
    { code: 'PB-2526-0793', from: lang === 'zh' ? '北大附中' : 'PKU HS', to: 'Imperial College', major: 'Computing', degree: 'BS', country: 'UK', date: '2025.11.21', tag: '—' },
    { code: 'PB-2526-0788', from: lang === 'zh' ? '杭州外国语学校' : 'HFLS', to: 'NUS', major: 'Business Analytics', degree: 'BS', country: 'SG', date: '2026.02.05', tag: '—' },
    { code: 'PB-2526-0762', from: lang === 'zh' ? '南外' : 'NFLS', to: 'HKU', major: 'Quantitative Finance', degree: 'BSc', country: 'HK', date: '2026.01.18', tag: '—' },
    { code: 'PB-2526-0755', from: lang === 'zh' ? '上海中学' : 'Shanghai HS', to: 'CMU', major: 'SCS', degree: 'BS', country: 'US', date: '2026.03.20', tag: 'RD' },
    { code: 'PB-2526-0741', from: lang === 'zh' ? '北京四中' : 'BHSF', to: 'UCLA', major: 'CS', degree: 'BS', country: 'US', date: '2026.03.20', tag: 'RD' },
    { code: 'PB-2526-0728', from: lang === 'zh' ? '华南师大附中' : 'SCNU HS', to: 'University of Toronto', major: 'CS', degree: 'BS', country: 'CA', date: '2026.02.14', tag: '—' },
  ];

  const flag = { US: '🇺🇸', UK: '🇬🇧', CA: '🇨🇦', SG: '🇸🇬', HK: '🇭🇰', AU: '🇦🇺' };

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

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

      {/* Aggregate strip */}
      <section style={{ padding: '40px 48px', background: 'var(--pb-navy-900)', color: 'var(--pb-ivory)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
          {[
            { n: '847', l: lang === 'zh' ? '2025–26 季录取' : '2025–26 admits' },
            { n: '38', l: lang === 'zh' ? 'Top 10 美本 / 牛剑' : 'Top 10 US / Oxbridge' },
            { n: '142', l: lang === 'zh' ? 'Top 30 美本' : 'Top 30 US' },
            { n: '94.2%', l: lang === 'zh' ? '主申请季 Top 100 命中率' : 'Top 100 hit rate' },
            { n: '$2.8M', l: lang === 'zh' ? '累计奖学金' : 'Total scholarships' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 44, fontWeight: 600, color: 'var(--pb-gold-500)', lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Filters + Table */}
      <section style={{ padding: '48px 48px 96px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {/* Filters */}
          <div style={{ display: 'flex', gap: 16, marginBottom: 28, flexWrap: 'wrap', alignItems: 'center' }}>
            {[
              { k: c.filters.year, opts: ['2025–26', '2024–25', '2023–24'] },
              { k: c.filters.country, opts: [lang === 'zh' ? '全部' : 'All', '🇺🇸 US', '🇬🇧 UK', '🇨🇦 CA', '🇸🇬 SG', '🇭🇰 HK'] },
              { k: c.filters.degree, opts: [lang === 'zh' ? '全部' : 'All', lang === 'zh' ? '本科' : 'Undergrad', lang === 'zh' ? '硕士' : 'Master', lang === 'zh' ? '博士' : 'PhD'] },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span className="pb-label">{f.k}</span>
                <div style={{ display: 'flex', gap: 6 }}>
                  {f.opts.map((o, j) => (
                    <span key={j} style={{
                      padding: '6px 12px', fontSize: 12, fontWeight: 500,
                      borderRadius: 100,
                      background: j === 0 ? 'var(--pb-navy-900)' : 'var(--pb-surface)',
                      color: j === 0 ? 'var(--pb-gold-500)' : 'var(--pb-fg)',
                      border: `1px solid ${j === 0 ? 'var(--pb-navy-900)' : 'var(--pb-border)'}`,
                      cursor: 'pointer'
                    }}>{o}</span>
                  ))}
                </div>
              </div>
            ))}
            <div style={{ marginLeft: 'auto', alignSelf: 'flex-end' }}>
              <input className="pb-input" placeholder={lang === 'zh' ? '搜索学校 / 专业…' : 'Search school / major…'} style={{ width: 240 }}/>
            </div>
          </div>

          {/* Ledger table */}
          <div className="pb-card" style={{ padding: 0, overflow: 'hidden' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: 'var(--pb-surface-alt)' }}>
                  <th style={{ textAlign: 'left', padding: '14px 24px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>ID</th>
                  <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.cols.from}</th>
                  <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.cols.to}</th>
                  <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.cols.major}</th>
                  <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{lang === 'zh' ? '类型' : 'Round'}</th>
                  <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 11, fontWeight: 600, color: 'var(--pb-fg-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.cols.date}</th>
                  <th style={{ padding: '14px 24px' }}/>
                </tr>
              </thead>
              <tbody>
                {cases.map((cs, i) => (
                  <tr key={i} style={{ borderTop: '1px solid var(--pb-border)', cursor: 'pointer' }}>
                    <td style={{ padding: '16px 24px', fontFamily: 'var(--pb-mono)', fontSize: 11, color: 'var(--pb-fg-muted)' }}>{cs.code}</td>
                    <td style={{ padding: '16px 16px', fontSize: 13 }}>{cs.from}</td>
                    <td style={{ padding: '16px 16px', fontFamily: 'var(--pb-serif)', fontSize: 17, fontWeight: 600 }}>
                      <span style={{ marginRight: 8 }}>{flag[cs.country] || '🌍'}</span>{cs.to}
                    </td>
                    <td style={{ padding: '16px 16px', color: 'var(--pb-fg-muted)' }}>{cs.major}</td>
                    <td style={{ padding: '16px 16px' }}>
                      <span style={{ padding: '3px 8px', fontSize: 11, fontWeight: 600, borderRadius: 4, background: cs.tag === '—' ? 'var(--pb-ink-100)' : 'var(--pb-gold-100)', color: cs.tag === '—' ? 'var(--pb-fg-muted)' : 'var(--pb-gold-700)', fontFamily: 'var(--pb-mono)' }}>{cs.tag}</span>
                    </td>
                    <td style={{ padding: '16px 16px', fontFamily: 'var(--pb-mono)', fontSize: 12, color: 'var(--pb-fg-muted)' }}>{cs.date}</td>
                    <td style={{ padding: '16px 24px', textAlign: 'right' }}>
                      <span style={{ color: 'var(--pb-navy-700)', fontSize: 12 }}>{lang === 'zh' ? '查看背景 →' : 'View profile →'}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ padding: '16px 24px', textAlign: 'center', borderTop: '1px solid var(--pb-border)', background: 'var(--pb-surface-alt)' }}>
              <button className="pb-btn pb-btn-link">{lang === 'zh' ? '加载更多（还有 832 条）' : 'Load more (832 remaining)'}</button>
            </div>
          </div>
        </div>
      </section>

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

window.CasesPage = CasesPage;