// 服务与价格页
const ServicesPage = () => {
  const t = useT();
  const lang = useLang();
  const sv = t.sv;

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

      <section style={{ padding: '64px 48px 40px', background: 'var(--pb-paper)', borderBottom: '1px solid var(--pb-border)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div className="pb-eyebrow" style={{ marginBottom: 16 }}>{sv.eyebrow}</div>
          <h1 className="pb-h1" style={{ fontSize: 56, whiteSpace: 'pre-line', maxWidth: 880, margin: '0 auto 20px' }}>{sv.title}</h1>
          <p style={{ fontSize: 17, color: 'var(--pb-fg-muted)', maxWidth: 720, margin: '0 auto', lineHeight: 1.65 }}>{sv.sub}</p>
        </div>
      </section>

      {/* Pricing tiers */}
      <section style={{ padding: '64px 48px', background: 'var(--pb-bg)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'stretch' }}>
          {sv.tiers.map((tier, i) => (
            <div key={i} className="pb-card" style={{
              padding: 32,
              border: tier.highlight ? '2px solid var(--pb-gold-500)' : '1px solid var(--pb-border)',
              background: tier.highlight ? 'var(--pb-navy-900)' : 'var(--pb-surface)',
              color: tier.highlight ? 'var(--pb-ivory)' : 'var(--pb-fg)',
              position: 'relative',
              display: 'flex', flexDirection: 'column'
            }}>
              {tier.highlight && (
                <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: 'var(--pb-gold-500)', color: 'var(--pb-navy-900)', padding: '4px 14px', borderRadius: 100, fontSize: 11, fontWeight: 700, letterSpacing: '0.08em' }}>
                  {tier.tag.toUpperCase()}
                </div>
              )}
              {!tier.highlight && (
                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--pb-gold-700)', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 4 }}>{tier.tag}</div>
              )}

              <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 26, fontWeight: 600, margin: '0 0 8px', color: tier.highlight ? 'var(--pb-gold-500)' : 'var(--pb-fg)' }}>{tier.name}</h3>
              <p style={{ fontSize: 13, color: tier.highlight ? 'rgba(246,242,234,0.7)' : 'var(--pb-fg-muted)', margin: '0 0 24px', lineHeight: 1.5, minHeight: 40 }}>{tier.desc}</p>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 24 }}>
                <span style={{ fontFamily: 'var(--pb-serif)', fontSize: 40, fontWeight: 600, lineHeight: 1, color: tier.highlight ? 'var(--pb-gold-500)' : 'var(--pb-fg)' }}>{tier.price}</span>
                <span style={{ fontSize: 13, color: tier.highlight ? 'rgba(246,242,234,0.6)' : 'var(--pb-fg-muted)' }}>{tier.period}</span>
              </div>

              <div style={{ height: 1, background: tier.highlight ? 'rgba(201,169,104,0.25)' : 'var(--pb-border)', marginBottom: 20 }}/>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13, lineHeight: 1.5, flex: 1 }}>
                {tier.features.map((f, j) => (
                  <li key={j} style={{ display: 'flex', gap: 10 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={tier.highlight ? 'var(--pb-gold-500)' : 'var(--pb-navy-700)'} strokeWidth="2.5" style={{ flexShrink: 0, marginTop: 4 }}><path d="M20 6 9 17l-5-5"/></svg>
                    <span style={{ color: tier.highlight ? 'rgba(246,242,234,0.92)' : 'var(--pb-fg)' }}>{f}</span>
                  </li>
                ))}
              </ul>

              <button className={tier.highlight ? 'pb-btn pb-btn-gold' : 'pb-btn pb-btn-ghost'} style={{ marginTop: 28, width: '100%' }}>{tier.cta}</button>
            </div>
          ))}
        </div>
      </section>

      {/* Add-ons grid */}
      <section style={{ padding: '64px 48px', background: 'var(--pb-surface-alt)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <h2 className="pb-h2" style={{ marginBottom: 28 }}>{sv.addons}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {sv.addonsList.map((a, i) => (
              <div key={i} style={{ background: 'var(--pb-surface)', padding: '20px 22px', borderRadius: 'var(--pb-radius)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', border: '1px solid var(--pb-border)' }}>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{a.name}</span>
                <span style={{ fontFamily: 'var(--pb-mono)', fontSize: 13, color: 'var(--pb-gold-700)' }}>{a.price}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section style={{ padding: '64px 48px', background: 'var(--pb-bg)' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <h2 className="pb-h2" style={{ marginBottom: 28 }}>{lang === 'zh' ? '套餐对比' : 'Package comparison'}</h2>
          <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: 16, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--pb-fg-muted)' }}>{lang === 'zh' ? '服务项目' : 'Item'}</th>
                  <th style={{ textAlign: 'center', padding: 16, fontSize: 12, fontWeight: 600 }}>{lang === 'zh' ? '初步' : 'Initial'}</th>
                  <th style={{ textAlign: 'center', padding: 16, fontSize: 12, fontWeight: 600 }}>{lang === 'zh' ? '按需' : 'À la carte'}</th>
                  <th style={{ textAlign: 'center', padding: 16, fontSize: 12, fontWeight: 600, color: 'var(--pb-gold-700)' }}>{lang === 'zh' ? '全程' : 'Full season'}</th>
                  <th style={{ textAlign: 'center', padding: 16, fontSize: 12, fontWeight: 600 }}>{lang === 'zh' ? '保录' : 'Guaranteed'}</th>
                </tr>
              </thead>
              <tbody>
                {[
                  [lang === 'zh' ? '主顾问 1v1' : '1:1 lead counselor', '–', '✓', '✓', '✓+'],
                  [lang === 'zh' ? '院校申请数量' : 'Schools', '–', '1', '8', '12'],
                  [lang === 'zh' ? '主文书润色轮次' : 'PS revisions', '–', '3', '∞', '∞'],
                  [lang === 'zh' ? '面试模拟' : 'Mock interviews', '–', lang === 'zh' ? '按次' : 'À la carte', '4', '8'],
                  [lang === 'zh' ? '科研/活动匹配' : 'Research / activity match', '–', '–', '✓', '✓+'],
                  [lang === 'zh' ? '签证全程' : 'Visa', '–', '✓', '✓', '✓'],
                  [lang === 'zh' ? '保录协议' : 'Guarantee contract', '–', '–', '–', '✓'],
                ].map((row, i) => (
                  <tr key={i} style={{ borderTop: '1px solid var(--pb-border)' }}>
                    <td style={{ padding: '14px 16px', fontWeight: 500 }}>{row[0]}</td>
                    {row.slice(1).map((c, j) => (
                      <td key={j} style={{ textAlign: 'center', padding: '14px 16px', color: c === '–' ? 'var(--pb-fg-muted)' : c === '✓' || c === '✓+' ? 'var(--pb-success)' : 'var(--pb-fg)', fontWeight: c === '✓+' ? 700 : 500 }}>
                        {c}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '64px 48px', background: 'var(--pb-paper)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <h2 className="pb-h2" style={{ marginBottom: 32 }}>{sv.faq}</h2>
          {sv.faqList.map((f, i) => (
            <details key={i} style={{ borderTop: '1px solid var(--pb-border)', padding: '20px 0' }} open={i === 0}>
              <summary style={{ cursor: 'pointer', fontSize: 16, fontWeight: 500, fontFamily: 'var(--pb-serif)', listStyle: 'none', display: 'flex', justifyContent: 'space-between' }}>
                <span>{f.q}</span>
                <span style={{ color: 'var(--pb-gold-700)' }}>+</span>
              </summary>
              <p style={{ marginTop: 12, color: 'var(--pb-fg-muted)', lineHeight: 1.7 }}>{f.a}</p>
            </details>
          ))}
        </div>
      </section>

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

window.ServicesPage = ServicesPage;