// Home / Landing page
const HomePage = () => {
  const t = useT();
  const lang = useLang();
  const h = t.home;

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

      {/* ===== Hero — editorial split ===== */}
      <section style={{ padding: '64px 56px 88px', background: 'var(--pb-paper)', borderBottom: '1px solid var(--pb-border)', position: 'relative' }}>
        {/* corner ornament */}
        <div style={{ position: 'absolute', top: 28, right: 56, fontFamily: 'var(--pb-mono)', fontSize: 11, color: 'var(--pb-fg-muted)', letterSpacing: '0.18em' }}>
          EST. 2018 · BEIJING · SHANGHAI · SHENZHEN
        </div>

        <div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 96, alignItems: 'start', paddingTop: 56 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 36 }}>
              <span className="pb-section-num">N° 01</span>
              <span className="pb-eyebrow">{h.eyebrow}</span>
            </div>

            <h1 className="pb-h1" style={{ fontSize: 84, lineHeight: 0.98, letterSpacing: '-0.025em', marginBottom: 32 }}>
              {lang === 'zh' ? (
                <>每一程升学，<br/>都值得<em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>清晰的</em>答案。</>
              ) : (
                <>Every path to higher education<br/>deserves a <em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>clear</em> answer.</>
              )}
            </h1>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, maxWidth: 540 }}>
              <p style={{ fontSize: 17, color: 'var(--pb-fg-muted)', lineHeight: 1.7, marginBottom: 36, fontFamily: 'var(--pb-serif)', fontStyle: 'italic' }}>
                {lang === 'zh'
                  ? '从中国高考志愿，到全球申请规划——以数据为锚，以经验为舟，把每一个选择都变得可量化、可对照、可承担。'
                  : 'From Gaokao placement to global admissions — anchored in data, guided by mentors, every choice rendered measurable, comparable, and accountable.'}
              </p>
            </div>

            <div className="pb-row pb-gap-12" style={{ marginBottom: 56 }}>
              <button className="pb-btn pb-btn-primary pb-btn-lg" onClick={() => navigateTo('/gaokao')}>
                {h.heroPrimary}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
              <button className="pb-btn pb-btn-ghost pb-btn-lg" onClick={() => navigateTo('/eval')}>{h.heroSecondary}</button>
            </div>

            {/* Quick stats — refined hairline grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--pb-border)' }}>
              {[
                { n: '12,000', suffix: '+', l: lang === 'zh' ? '累计服务学生' : 'Students served' },
                { n: '380K', l: lang === 'zh' ? '录取数据条目' : 'Admit records' },
                { n: '94.2', suffix: '%', l: lang === 'zh' ? 'Top 100 录取率' : 'Top 100 rate' },
                { n: '8.6', suffix: '/10', l: lang === 'zh' ? '学生平均评分' : 'Avg. NPS' },
              ].map((s, i) => (
                <div key={i} style={{ padding: '28px 0', borderRight: i < 3 ? '1px solid var(--pb-border)' : 'none', paddingLeft: i > 0 ? 20 : 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline' }}>
                    <span className="pb-stat-num" style={{ fontSize: 42 }}>{s.n}</span>
                    {s.suffix && <span style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, color: 'var(--pb-gold-700)', marginLeft: 2 }}>{s.suffix}</span>}
                  </div>
                  <div className="pb-stat-label" style={{ marginTop: 10, fontSize: 11, letterSpacing: '0.12em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* ===== Hero visual — refined probability map ===== */}
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', top: -16, left: 0, right: 0, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--pb-mono)', fontSize: 10, color: 'var(--pb-fg-muted)', letterSpacing: '0.15em' }}>
              <span>FIG. 01</span>
              <span>{lang === 'zh' ? '录取概率图' : 'PROBABILITY MAP'}</span>
            </div>
            <div style={{ position: 'relative', aspectRatio: '4/5', background: 'linear-gradient(180deg, #0B1F3A 0%, #050913 100%)', borderRadius: 0, overflow: 'hidden', boxShadow: '0 40px 80px -30px rgba(11,31,58,0.45), inset 0 0 0 1px rgba(201,169,104,0.18)' }}>
              <svg width="100%" height="100%" viewBox="0 0 500 625" style={{ position: 'absolute', inset: 0 }}>
                <defs>
                  <pattern id="grid-fine" width="25" height="25" patternUnits="userSpaceOnUse">
                    <path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(201,169,104,0.05)" strokeWidth="0.5"/>
                  </pattern>
                  <pattern id="grid-major" width="125" height="125" patternUnits="userSpaceOnUse">
                    <path d="M 125 0 L 0 0 0 125" fill="none" stroke="rgba(201,169,104,0.10)" strokeWidth="0.5"/>
                  </pattern>
                  <radialGradient id="glow" cx="50%" cy="65%" r="60%">
                    <stop offset="0%" stopColor="#C9A968" stopOpacity="0.12"/>
                    <stop offset="100%" stopColor="#C9A968" stopOpacity="0"/>
                  </radialGradient>
                </defs>

                <rect width="500" height="625" fill="url(#grid-fine)"/>
                <rect width="500" height="625" fill="url(#grid-major)"/>
                <rect width="500" height="625" fill="url(#glow)"/>

                {/* Compass rose top-left */}
                <g transform="translate(48, 80)" opacity="0.6">
                  <circle cx="0" cy="0" r="22" fill="none" stroke="#C9A968" strokeWidth="0.5"/>
                  <circle cx="0" cy="0" r="14" fill="none" stroke="#C9A968" strokeWidth="0.5"/>
                  <path d="M 0 -22 L 0 22 M -22 0 L 22 0" stroke="#C9A968" strokeWidth="0.5"/>
                  <path d="M 0 -22 L -3 -8 L 0 -10 L 3 -8 Z" fill="#C9A968" opacity="0.8"/>
                  <text x="0" y="-30" textAnchor="middle" fill="#C9A968" fontSize="9" fontFamily="JetBrains Mono">N</text>
                </g>

                {/* Bridge structure — more refined */}
                <g>
                  <line x1="0" y1="500" x2="500" y2="500" stroke="rgba(201,169,104,0.22)" strokeWidth="0.5"/>
                  <line x1="0" y1="510" x2="500" y2="510" stroke="rgba(201,169,104,0.10)" strokeWidth="0.5"/>
                  <path d="M 30 500 Q 250 270 470 500" stroke="rgba(201,169,104,0.55)" strokeWidth="1" fill="none"/>
                  <path d="M 30 500 Q 250 290 470 500" stroke="rgba(201,169,104,0.3)" strokeWidth="0.5" fill="none"/>

                  {/* Suspension cables */}
                  {[60, 110, 160, 210, 260, 310, 360, 410, 440].map((x, i) => {
                    const y = 500 - 230 * Math.sin(((x - 30) / 440) * Math.PI);
                    return <line key={i} x1={x} y1={y} x2={x} y2="500" stroke="rgba(201,169,104,0.2)" strokeWidth="0.5"/>;
                  })}
                </g>

                {/* School markers — nodes on the bridge */}
                {[
                  { x: 90, y: 425, label: 'Tsinghua', sub: '清华', prob: '64', tier: 'reach' },
                  { x: 170, y: 360, label: 'Stanford', sub: '斯坦福', prob: '38', tier: 'reach' },
                  { x: 250, y: 335, label: 'NUS', sub: '新国立', prob: '78', tier: 'match' },
                  { x: 330, y: 360, label: 'HKU', sub: '港大', prob: '85', tier: 'match' },
                  { x: 410, y: 425, label: 'Fudan', sub: '复旦', prob: '92', tier: 'safety' },
                ].map((p, i) => (
                  <g key={i}>
                    <circle cx={p.x} cy={p.y} r="20" fill="none" stroke="#C9A968" strokeOpacity="0.18" strokeWidth="0.5"/>
                    <circle cx={p.x} cy={p.y} r="11" fill="none" stroke="#C9A968" strokeOpacity="0.4" strokeWidth="0.5"/>
                    <circle cx={p.x} cy={p.y} r="4" fill="#C9A968"/>
                    <line x1={p.x} y1={p.y - 12} x2={p.x} y2={p.y - 28} stroke="rgba(201,169,104,0.3)" strokeWidth="0.5"/>
                    <text x={p.x} y={p.y - 36} textAnchor="middle" fill="#F4ECDA" fontSize="11" fontFamily="Cormorant Garamond" fontWeight="500" fontStyle="italic">{p.label}</text>
                    <text x={p.x} y={p.y + 36} textAnchor="middle" fill="#C9A968" fontSize="13" fontFamily="JetBrains Mono" fontWeight="500">{p.prob}<tspan fontSize="9">%</tspan></text>
                  </g>
                ))}

                {/* "YOU" anchor */}
                <g>
                  <line x1="250" y1="500" x2="250" y2="565" stroke="rgba(201,169,104,0.4)" strokeWidth="0.5" strokeDasharray="2 3"/>
                  <circle cx="250" cy="565" r="6" fill="none" stroke="#C9A968" strokeWidth="1"/>
                  <circle cx="250" cy="565" r="2.5" fill="#C9A968"/>
                  <text x="250" y="592" textAnchor="middle" fill="#F4ECDA" fontSize="10" fontFamily="Inter" fontWeight="500" letterSpacing="3">{lang === 'zh' ? '你 · YOU' : 'YOU'}</text>
                </g>

                {/* Header inside */}
                <text x="32" y="36" fill="#C9A968" fontSize="10" fontFamily="JetBrains Mono" letterSpacing="2">PROBABILITY MAP</text>
                <text x="32" y="52" fill="rgba(255,255,255,0.4)" fontSize="9" fontFamily="JetBrains Mono">score 658 · rank 4,217 · Beijing 2025</text>

                {/* Legend bottom */}
                <g transform="translate(32, 600)" opacity="0.7">
                  <circle cx="4" cy="0" r="3" fill="#B0463E"/>
                  <text x="14" y="3" fill="rgba(255,255,255,0.6)" fontSize="9" fontFamily="JetBrains Mono">REACH</text>
                  <circle cx="84" cy="0" r="3" fill="#C9A968"/>
                  <text x="94" y="3" fill="rgba(255,255,255,0.6)" fontSize="9" fontFamily="JetBrains Mono">MATCH</text>
                  <circle cx="164" cy="0" r="3" fill="#76B89B"/>
                  <text x="174" y="3" fill="rgba(255,255,255,0.6)" fontSize="9" fontFamily="JetBrains Mono">SAFETY</text>
                </g>
              </svg>
            </div>
            <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--pb-mono)', fontSize: 10, color: 'var(--pb-fg-muted)', letterSpacing: '0.15em' }}>
              <span>{lang === 'zh' ? '基于 380,000 条历年录取数据' : 'BASED ON 380K HISTORICAL ADMITS'}</span>
              <span>v.4.2</span>
            </div>
          </div>
        </div>

        {/* Trust strip — refined */}
        <div style={{ maxWidth: 1320, margin: '120px auto 0', textAlign: 'center' }}>
          <div className="pb-rule" style={{ marginBottom: 40, fontSize: 11, letterSpacing: '0.3em' }}>{h.trustBy}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', gap: 0 }}>
            {h.schools.map((s, i) => (
              <React.Fragment key={i}>
                <span style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, color: 'var(--pb-fg-muted)', fontStyle: 'italic', padding: '0 32px', fontWeight: 400 }}>{s}</span>
                {i < h.schools.length - 1 && <span style={{ color: 'var(--pb-gold-500)', fontSize: 6 }}>◆</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Manifesto / Pillars ===== */}
      <section style={{ padding: '128px 56px', background: 'var(--pb-surface)', position: 'relative' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, marginBottom: 88 }}>
            <div>
              <span className="pb-section-num" style={{ display: 'block', marginBottom: 16 }}>N° 02 — {lang === 'zh' ? '我们的方法' : 'OUR METHOD'}</span>
              <span className="pb-eyebrow" style={{ marginBottom: 28, display: 'inline-flex' }}>{h.pillarsEyebrow}</span>
              <h2 className="pb-h2" style={{ whiteSpace: 'pre-line', fontSize: 48 }}>
                {lang === 'zh' ? (
                  <>不是给你<br/>另一份<em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>排名表</em>，<br/>而是给你<br/>一份<em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>选择权</em>。</>
                ) : (
                  <>Not another <em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>ranking</em>.<br/>A real <em style={{ fontStyle: 'italic', color: 'var(--pb-gold-700)' }}>choice</em>.</>
                )}
              </h2>
            </div>
            <div style={{ alignSelf: 'end', maxWidth: 520, paddingTop: 80 }}>
              <p className="pb-dropcap" style={{ color: 'var(--pb-fg-muted)', fontSize: 16, lineHeight: 1.78, fontFamily: 'var(--pb-serif)' }}>
                {lang === 'zh'
                  ? '过去十年，中国家庭在升学这件事上的预算翻了三倍，而拿到清晰、可量化建议的概率没有变。我们把数据科学带回这件最古老的事——为下一代人做选择。'
                  : 'Over the past decade, Chinese household budgets for college planning have tripled. The odds of receiving a clear, quantified answer have not. We bring data science back to the oldest task in the family — choosing for the next generation.'}
              </p>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--pb-border)', borderLeft: '1px solid var(--pb-border)' }}>
            {h.pillars.map((p, i) => (
              <div key={i} style={{ padding: '48px 48px 56px', borderRight: '1px solid var(--pb-border)', borderBottom: '1px solid var(--pb-border)', position: 'relative' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
                  <span className="pb-mono" style={{ color: 'var(--pb-gold-700)', fontSize: 11, letterSpacing: '0.18em' }}>{p.tag}</span>
                  <span style={{ fontFamily: 'var(--pb-serif)', fontSize: 28, color: 'var(--pb-gold-500)', fontStyle: 'italic', fontWeight: 400 }}>0{i+1}</span>
                </div>
                <h3 className="pb-h3" style={{ marginBottom: 16, fontSize: 26 }}>{p.title}</h3>
                <p style={{ color: 'var(--pb-fg-muted)', lineHeight: 1.75, fontSize: 14.5, maxWidth: 480 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Two-tool teaser — magazine spread ===== */}
      <section style={{ padding: '128px 56px', background: 'var(--pb-paper)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <span className="pb-section-num" style={{ display: 'block', marginBottom: 16 }}>N° 03 — {lang === 'zh' ? '免费工具' : 'FREE TOOLS'}</span>
            <h2 className="pb-h2" style={{ fontSize: 44 }}>
              {lang === 'zh' ? <>两件称手的工具，<br/>从今天开始用。</> : <>Two instruments,<br/>made for the journey.</>}
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--pb-border)', border: '1px solid var(--pb-border)' }}>
            {[
              {
                num: 'I',
                tag: lang === 'zh' ? '工具一 · 国内' : 'Tool I · Domestic',
                title: lang === 'zh' ? '高考志愿测算' : 'Gaokao Calculator',
                latin: lang === 'zh' ? 'Calculator Sinensis' : '高考志愿测算',
                body: lang === 'zh' ? '输入分数、位次、选科组合——立即看到冲、稳、保三档院校与录取概率。基于教育部公开数据与历年一分一段表。' : 'Enter score, rank, subject combo — see reach, match, safety with calibrated probability bands. Built on MoE public data and historical rank tables.',
                cta: lang === 'zh' ? '开始测算' : 'Try it',
                accent: '#0B1F3A',
              },
              {
                num: 'II',
                tag: lang === 'zh' ? '工具二 · 海外' : 'Tool II · Overseas',
                title: lang === 'zh' ? '留学背景评估' : 'Profile Evaluation',
                latin: lang === 'zh' ? 'Profilum Evaluatio' : '留学背景评估',
                body: lang === 'zh' ? 'GPA、标化、科研、活动、文书——五维评估你的竞争力，跨七大留学目的地匹配冲稳保院校。' : 'GPA, testing, research, activities, essays — a five-axis read of your profile, matched across seven destinations.',
                cta: lang === 'zh' ? '开始评估' : 'Start',
                accent: '#9C7E3D',
              },
            ].map((tool, i) => (
              <div key={i} style={{ padding: '64px 56px', background: 'var(--pb-surface)', cursor: 'pointer', transition: 'background 0.3s' }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--pb-surface-alt)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'var(--pb-surface)'; }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
                  <span className="pb-mono" style={{ color: 'var(--pb-gold-700)', fontSize: 11, letterSpacing: '0.18em' }}>{tool.tag}</span>
                  <span style={{ fontFamily: 'var(--pb-serif)', fontSize: 56, color: 'var(--pb-gold-500)', fontStyle: 'italic', fontWeight: 400, lineHeight: 0.8, opacity: 0.7 }}>{tool.num}</span>
                </div>
                <h3 className="pb-h3" style={{ marginBottom: 8, fontSize: 32 }}>{tool.title}</h3>
                <div style={{ fontFamily: 'var(--pb-serif)', fontStyle: 'italic', color: 'var(--pb-gold-700)', fontSize: 14, marginBottom: 24, opacity: 0.8 }}>— {tool.latin}</div>
                <p style={{ color: 'var(--pb-fg-muted)', lineHeight: 1.75, marginBottom: 32, fontSize: 14.5, maxWidth: 460 }}>{tool.body}</p>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--pb-fg)', fontWeight: 500, fontSize: 13, letterSpacing: '0.04em', borderBottom: '1px solid var(--pb-fg)', paddingBottom: 4 }}>
                  {tool.cta}
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Flow / Path ===== */}
      <section style={{ padding: '128px 56px', background: 'var(--pb-surface)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <span className="pb-section-num" style={{ display: 'block', marginBottom: 16 }}>N° 04 — {lang === 'zh' ? '我们的流程' : 'THE PROCESS'}</span>
            <h2 className="pb-h2" style={{ fontSize: 44 }}>{h.flowTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 26, left: '8.33%', right: '8.33%', height: 1, background: 'var(--pb-gold-500)', opacity: 0.3 }}/>
            {h.flow.map((s, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '0 16px', position: 'relative' }}>
                <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--pb-paper)', border: '1px solid var(--pb-gold-500)', color: 'var(--pb-navy-900)', display: 'grid', placeItems: 'center', fontFamily: 'var(--pb-serif)', fontStyle: 'italic', fontWeight: 500, fontSize: 18, marginBottom: 24, position: 'relative', zIndex: 1 }}>
                  {s.step}
                </div>
                <h4 style={{ fontFamily: 'var(--pb-serif)', fontSize: 19, fontWeight: 500, margin: '0 0 10px', color: 'var(--pb-fg)' }}>{s.title}</h4>
                <p style={{ color: 'var(--pb-fg-muted)', fontSize: 13, lineHeight: 1.6, margin: 0, maxWidth: 160 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Testimonials — editorial blockquotes ===== */}
      <section style={{ padding: '128px 56px', background: 'var(--pb-navy-900)', color: 'var(--pb-ivory)', position: 'relative', overflow: 'hidden' }}>
        {/* decorative quote */}
        <div style={{ position: 'absolute', top: 60, left: 56, fontFamily: 'var(--pb-serif)', fontSize: 280, lineHeight: 1, color: 'rgba(201,169,104,0.08)', fontStyle: 'italic', userSelect: 'none' }}>“</div>

        <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64 }}>
            <div>
              <span className="pb-section-num" style={{ color: 'var(--pb-gold-500)', display: 'block', marginBottom: 12 }}>N° 05</span>
              <h2 className="pb-h2" style={{ color: 'var(--pb-ivory)', fontSize: 40 }}>
                {lang === 'zh' ? <>学生与家长，<em style={{ fontStyle: 'italic', color: 'var(--pb-gold-500)' }}>说</em>。</> : <>In their <em style={{ fontStyle: 'italic', color: 'var(--pb-gold-500)' }}>own</em> words.</>}
              </h2>
            </div>
            <div className="pb-mono" style={{ fontSize: 11, color: 'rgba(244,236,218,0.5)', letterSpacing: '0.18em' }}>2024 — 2025 · 312 REVIEWS</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
            {[
              {
                quote: lang === 'zh' ? 'AI 测算的概率和最后的录取结果几乎一致。让我们家少走了很多弯路，也省了被中介忽悠的钱。' : 'The AI probability map and final admissions outcomes lined up almost perfectly. Saved us months of vague answers.',
                who: lang === 'zh' ? '张同学家长' : 'Zhang Family',
                meta: lang === 'zh' ? '北京 · 北大光华 · 2024' : 'Beijing · PKU Guanghua · 2024',
              },
              {
                quote: lang === 'zh' ? '主顾问是真正的清华学姐，每次开会都有清晰的下一步。文书改了七稿，最后一稿我自己读哭了。' : 'My counselor was a real Tsinghua alum. Every meeting ended with clear next steps. The PS went through seven drafts.',
                who: lang === 'zh' ? '李同学' : 'Li',
                meta: lang === 'zh' ? '上海 · Stanford CS · 2024' : 'Shanghai · Stanford CS · 2024',
              },
              {
                quote: lang === 'zh' ? '保录协议给了我们家长很大的安全感。价格不便宜，但他们真的兑现了，整个过程没有一次失约。' : 'The guaranteed-admission contract gave our family real peace of mind. Not cheap, but they delivered.',
                who: lang === 'zh' ? '王同学家长' : 'Wang Family',
                meta: lang === 'zh' ? '深圳 · UCL · 2025' : 'Shenzhen · UCL · 2025',
              },
            ].map((tt, i) => (
              <div key={i} style={{ padding: '8px 40px 8px 0', borderRight: i < 2 ? '1px solid rgba(201,169,104,0.18)' : 'none', paddingLeft: i > 0 ? 40 : 0 }}>
                <div className="pb-stars" style={{ marginBottom: 24 }}>★★★★★</div>
                <p style={{ fontFamily: 'var(--pb-serif)', fontSize: 21, lineHeight: 1.5, fontStyle: 'italic', marginBottom: 32, color: 'var(--pb-ivory)', fontWeight: 400, textWrap: 'pretty' }}>{tt.quote}</p>
                <div style={{ paddingTop: 20, borderTop: '1px solid rgba(201,169,104,0.18)' }}>
                  <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 16, color: 'var(--pb-gold-500)', fontStyle: 'italic', marginBottom: 4 }}>— {tt.who}</div>
                  <div className="pb-mono" style={{ fontSize: 10, color: 'rgba(244,236,218,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{tt.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section style={{ padding: '120px 56px', background: 'var(--pb-paper)', position: 'relative' }}>
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div className="pb-ornament" style={{ marginBottom: 32, justifyContent: 'center', display: 'flex' }}>◆</div>
          <h2 className="pb-h2" style={{ marginBottom: 24, fontSize: 52 }}>{h.ctaTitle}</h2>
          <p style={{ color: 'var(--pb-fg-muted)', fontSize: 17, lineHeight: 1.7, marginBottom: 44, fontFamily: 'var(--pb-serif)', fontStyle: 'italic', maxWidth: 620, margin: '0 auto 44px' }}>{h.ctaSub}</p>
          <div className="pb-row pb-gap-12" style={{ justifyContent: 'center' }}>
            <button className="pb-btn pb-btn-gold pb-btn-lg">{t.cta.tryFree}</button>
            <button className="pb-btn pb-btn-ghost pb-btn-lg">{t.cta.book}</button>
          </div>
        </div>
      </section>

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

window.HomePage = HomePage;
