// Claimmee 会员订阅页 — 航班预警 + 优先处理 €19.99/年。合成演示。
const Su = window.ClaimmeeDesignSystem_e4fda8;
const Reveal4 = window.ClaimmeeReveal;
const SecTitle4 = window.ClaimmeeSectionTitle;

function Subscribe() {
  const wrap = { width: 'min(1000px, calc(100vw - 32px))', margin: '0 auto' };
  const benefits = [
    { t: '航班延误主动预警', d: '出发前与行程中实时监控你的航班，一旦可能符合索赔条件，第一时间用中文提醒你。' },
    { t: '优先索赔处理通道', d: '订阅用户的案件进入优先队列，更快进入审核与航司沟通阶段。' },
    { t: '专属中文客服', d: '人工中文客服优先响应，全程协助你准备材料与跟进进度。' },
  ];
  const compare = [
    ['航班资格初筛', true, true],
    ['不成功不收费索赔', true, true],
    ['航班延误主动预警', false, true],
    ['优先处理通道', false, true],
    ['专属中文客服', false, true],
  ];

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 90 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 56, paddingBottom: 56 }}>
        <div style={{ ...wrap, textAlign: 'center' }}>
          <div style={{ color: 'var(--teal-100)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Claimmee 会员</div>
          <h1 style={{ margin: '14px 0 0', color: '#fff', fontSize: 'clamp(2.2rem,4.5vw,3.4rem)', fontWeight: 950, letterSpacing: '-0.04em', lineHeight: 1.05 }}>别等航班出问题<br />才想起你的权益</h1>
          <p style={{ margin: '18px auto 0', color: 'var(--text-on-teal)', maxWidth: 520, fontSize: '1.1rem', lineHeight: 1.7 }}>会员主动帮你盯航班、抢先一步发现可索赔的机会，并享优先处理与专属中文客服。</p>
          <div style={{ marginTop: 24, display: 'inline-flex', alignItems: 'baseline', gap: 8, padding: '14px 26px', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.2)' }}>
            <span style={{ color: '#fff', fontSize: '2rem', fontWeight: 950 }}>€19.99</span>
            <span style={{ color: 'var(--teal-100)', fontWeight: 700 }}>/ 年</span>
          </div>
        </div>
      </section>

      {/* 权益 */}
      <section style={{ ...wrap, paddingTop: 64 }}>
        <SecTitle4 eyebrow="会员权益" title="多一层主动保护" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
          {benefits.map((b, i) => (
            <Reveal4 key={b.t} delay={i * 80}>
              <Su.Panel style={{ height: '100%' }}>
                <div style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--teal-100)', color: 'var(--teal-700)', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '1.2rem' }}>{i + 1}</div>
                <h3 style={{ margin: '14px 0 8px', fontSize: '1.2rem', fontWeight: 800, color: 'var(--slate-900)' }}>{b.t}</h3>
                <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 1.7 }}>{b.d}</p>
              </Su.Panel>
            </Reveal4>
          ))}
        </div>
      </section>

      {/* 对比 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <SecTitle4 eyebrow="免费 vs 会员" title="按需选择" sub="不订阅也能免费初筛、不成功不收费地索赔——会员让一切更主动、更快。" />
        <Su.Panel style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr' }}>
            <div style={{ padding: '18px 22px', background: 'var(--surface-sunken)', fontWeight: 800, color: 'var(--slate-600)', fontSize: '0.85rem' }}>功能</div>
            <div style={{ padding: '18px 22px', background: 'var(--surface-sunken)', fontWeight: 800, color: 'var(--slate-600)', textAlign: 'center' }}>免费</div>
            <div style={{ padding: '18px 22px', background: 'var(--teal-700)', color: '#fff', fontWeight: 900, textAlign: 'center' }}>会员 €19.99/年</div>
            {compare.map((r) => (
              <React.Fragment key={r[0]}>
                <div style={{ padding: '15px 22px', borderTop: '1px solid var(--border-subtle)', fontWeight: 700, color: 'var(--slate-700)' }}>{r[0]}</div>
                <div style={{ padding: '15px 22px', borderTop: '1px solid var(--border-subtle)', textAlign: 'center', color: r[1] ? 'var(--teal-700)' : 'var(--slate-300)', fontWeight: 900 }}>{r[1] ? '✓' : '—'}</div>
                <div style={{ padding: '15px 22px', borderTop: '1px solid var(--teal-100)', background: 'var(--surface-tint)', textAlign: 'center', color: r[2] ? 'var(--teal-700)' : 'var(--slate-300)', fontWeight: 900 }}>{r[2] ? '✓' : '—'}</div>
              </React.Fragment>
            ))}
          </div>
        </Su.Panel>
      </section>

      {/* CTA */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <Su.Panel variant="hero" style={{ textAlign: 'center', padding: '52px 32px' }}>
          <h2 style={{ margin: '0 0 10px', color: '#fff', fontSize: 'clamp(1.7rem,3.5vw,2.6rem)', fontWeight: 950, letterSpacing: '-0.03em' }}>先免费初筛，随时升级会员</h2>
          <p style={{ margin: '0 auto 24px', color: 'var(--text-on-teal)', maxWidth: 460, lineHeight: 1.65 }}>支持微信、支付宝付款。本页为演示，不会真实扣款。</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')} style={{ border: 0, borderRadius: 'var(--radius-pill)', padding: '1rem 2rem', background: 'var(--amber-500)', color: 'var(--amber-ink)', fontWeight: 900, fontSize: '1.05rem', fontFamily: 'var(--font-sans)', cursor: 'pointer', boxShadow: 'var(--shadow-amber)' }}>免费开始初筛</button>
            <button style={{ border: '1px solid rgba(255,255,255,0.4)', borderRadius: 'var(--radius-pill)', padding: '1rem 2rem', background: 'rgba(255,255,255,0.1)', color: '#fff', fontWeight: 900, fontSize: '1.05rem', fontFamily: 'var(--font-sans)', cursor: 'pointer' }}>订阅会员（演示）</button>
          </div>
        </Su.Panel>
        <Su.Disclaimer style={{ marginTop: 16 }}>会员价格与权益为产品设想，正式上线前以最终条款为准；本页不进行真实支付或数据采集。</Su.Disclaimer>
      </section>
    </div>
  );
}

window.Subscribe = Subscribe;