// Claimmee 权益科普页 — EC261/2004 教育矩阵，反复回链到初筛。
const R = window.ClaimmeeDesignSystem_e4fda8;
const MktR = window.ClaimmeeMkt;
const Reveal3 = window.ClaimmeeReveal;
const SecTitle3 = window.ClaimmeeSectionTitle;

function Rights() {
  const wrap = { width: 'min(1000px, calc(100vw - 32px))', margin: '0 auto' };
  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 90 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 56, paddingBottom: 56 }}>
        <div style={{ ...wrap }}>
          <div style={{ color: 'var(--teal-100)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>了解你的权益</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, maxWidth: 640 }}>EC261/2004：欧洲旅客的赔偿权利</h1>
          <p style={{ margin: '18px 0 0', color: 'var(--text-on-teal)', maxWidth: 600, fontSize: '1.1rem', lineHeight: 1.7 }}>从欧盟出发、或由欧盟航司承运前往欧盟的航班，遭遇延误、取消或拒载时，旅客通常有权获得固定金额赔偿。下面是关键情形。</p>
        </div>
      </section>

      <section style={{ ...wrap, paddingTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="two-col">
          {MktR.RIGHTS.map((r, i) => (
            <Reveal3 key={r.tag} delay={i * 70}>
              <R.Panel style={{ height: '100%' }}>
                <span style={{ display: 'inline-block', padding: '0.3rem 0.7rem', borderRadius: 'var(--radius-pill)', background: 'var(--teal-100)', color: 'var(--teal-700)', fontWeight: 900, fontSize: '0.8rem' }}>{r.tag}</span>
                <h3 style={{ margin: '14px 0 8px', fontSize: '1.3rem', fontWeight: 800, color: 'var(--slate-900)' }}>{r.title}</h3>
                <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 1.7 }}>{r.body}</p>
              </R.Panel>
            </Reveal3>
          ))}
        </div>
      </section>

      {/* 档位提醒 */}
      <section style={{ ...wrap, paddingTop: 64 }}>
        <SecTitle3 eyebrow="赔偿金额" title="按航程距离分三档" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="three-col">
          {MktR.TIERS.map((t) => (
            <div key={t.amt} style={{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-teal)', background: 'var(--white)', padding: 24, textAlign: 'center', boxShadow: 'var(--shadow-xs)' }}>
              <div style={{ fontSize: '2.4rem', fontWeight: 950, color: 'var(--teal-700)' }}>€{t.amt}</div>
              <div style={{ marginTop: 6, fontWeight: 700, color: 'var(--slate-700)', fontSize: '0.92rem' }}>{t.range}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 时效提醒 */}
      <section style={{ ...wrap, paddingTop: 56 }}>
        <R.Panel variant="tint" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18, alignItems: 'center', padding: 28 }} className="note-grid">
          <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--amber-100)', color: 'var(--amber-700)', display: 'grid', placeItems: 'center', fontWeight: 950, fontSize: '1.3rem' }}>!</div>
          <div>
            <strong style={{ display: 'block', color: 'var(--slate-900)', marginBottom: 4 }}>诉讼时效因国家而异</strong>
            <span style={{ color: 'var(--text-body)', lineHeight: 1.65 }}>德国约 3 年、法国约 5 年、英国最长可达 6 年。越早处理越有利——别让权利过期。</span>
          </div>
        </R.Panel>
      </section>

      {/* CTA */}
      <section style={{ ...wrap, paddingTop: 64 }}>
        <R.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 }}>用中文 3 分钟初筛，立刻知道答案。免费、无需证件。</p>
          <button onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')} style={{ border: 0, borderRadius: 'var(--radius-pill)', padding: '1.05rem 2.2rem', background: 'var(--amber-500)', color: 'var(--amber-ink)', fontWeight: 900, fontSize: '1.1rem', fontFamily: 'var(--font-sans)', cursor: 'pointer', boxShadow: 'var(--shadow-amber)' }}>开始免费初筛 →</button>
        </R.Panel>
      </section>
    </div>
  );
}

window.Rights = Rights;