// Claimmee 关于我们 / 信任背书。合成演示。
const Ab = window.ClaimmeeDesignSystem_e4fda8;
const MktAb = window.ClaimmeeMkt;
const RevealAb = window.ClaimmeeReveal;
const SecTitleAb = window.ClaimmeeSectionTitle;

function About() {
  const wrap = { width: 'min(1000px, calc(100vw - 32px))', margin: '0 auto' };
  const a = MktAb.ABOUT;

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 90 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 64, paddingBottom: 64 }}>
        <div style={wrap}>
          <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(2rem,4vw,3.2rem)', fontWeight: 950, letterSpacing: '-0.03em', lineHeight: 1.1, maxWidth: 720 }}>{a.mission}</h1>
        </div>
      </section>

      {/* 数据 */}
      <section style={{ ...wrap, paddingTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="three-col">
          {a.stats.map((s, i) => (
            <RevealAb key={s.k} delay={i * 60}>
              <div style={{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-teal)', background: 'var(--white)', boxShadow: 'var(--shadow-xs)', padding: 24, textAlign: 'center', height: '100%' }}>
                <div style={{ fontSize: '1.7rem', fontWeight: 950, color: 'var(--teal-700)', letterSpacing: '-0.02em' }}>{s.k}</div>
                <div style={{ marginTop: 8, color: 'var(--text-muted)', fontSize: '0.88rem', lineHeight: 1.5 }}>{s.v}</div>
              </div>
            </RevealAb>
          ))}
        </div>
      </section>

      {/* 价值观 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <SecTitleAb eyebrow="我们坚持的" title="三个不妥协的原则" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
          {a.values.map((v, i) => (
            <RevealAb key={v.t} delay={i * 70}>
              <Ab.Panel style={{ height: '100%' }}>
                <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--amber-100)', color: 'var(--amber-700)', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '1.1rem' }}>{i + 1}</div>
                <h3 style={{ margin: '14px 0 8px', fontSize: '1.25rem', fontWeight: 800, color: 'var(--slate-900)' }}>{v.t}</h3>
                <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 1.7 }}>{v.d}</p>
              </Ab.Panel>
            </RevealAb>
          ))}
        </div>
      </section>

      {/* 信任背书 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <Ab.Panel variant="tint" style={{ padding: 36 }}>
          <h3 style={{ margin: '0 0 18px', fontSize: '1.2rem', fontWeight: 800, color: 'var(--slate-900)', textAlign: 'center' }}>合规与信任</h3>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            {a.partners.map((p) => (
              <span key={p} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '0.7rem 1.1rem', borderRadius: 'var(--radius-pill)', background: 'var(--white)', border: '1px solid var(--border-teal)', fontWeight: 750, color: 'var(--slate-700)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--teal-600)' }} />{p}
              </span>
            ))}
          </div>
        </Ab.Panel>
      </section>

      {/* CTA */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <Ab.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>
        </Ab.Panel>
        <Ab.Disclaimer style={{ marginTop: 16 }}>市场数据引自公开行业研究；合作方与背书为产品设想占位，不代表已建立的真实合作关系。</Ab.Disclaimer>
      </section>
    </div>
  );
}

window.About = About;