// Claimmee 费用透明页 — 佣金、首单免佣、市场平均对比、计算示例。
const Fe = window.ClaimmeeDesignSystem_e4fda8;
const MktFee = window.ClaimmeeMkt;
const Reveal2 = window.ClaimmeeReveal;
const SecTitle2 = window.ClaimmeeSectionTitle;

function Fees() {
  const wrap = { width: 'min(960px, calc(100vw - 32px))', margin: '0 auto' };
  const fees = MktFee.FEES;
  const gross = 600;
  const claimmeeKeep = Math.round(gross * (1 - fees.example.claimmeeFee));
  const marketKeep = Math.round(gross * (1 - fees.example.marketFee));

  const rows = [
    ['服务佣金', fees.claimmee.commission, fees.market.commission],
    ['首单费用', fees.claimmee.first, fees.market.first],
    ['处理时长', fees.claimmee.time, fees.market.time],
    ['中文服务', fees.claimmee.lang, fees.market.lang],
    ['不成功是否收费', '不收费', '通常不收费'],
  ];

  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' }}>透明费用</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 />成功只收 15–18%</h1>
          <p style={{ margin: '18px auto 0', color: 'var(--text-on-teal)', maxWidth: 520, fontSize: '1.1rem', lineHeight: 1.7 }}>没有预付款、没有隐藏费用。约为市场平均水平的一半，而且首单免佣金。</p>
        </div>
      </section>

      {/* 计算示例 */}
      <section style={{ ...wrap, paddingTop: 64 }}>
        <SecTitle2 eyebrow="一笔 €600 赔偿为例" title="你实际能拿回多少" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="two-col">
          <Reveal2>
            <Fe.Panel variant="hero" style={{ textAlign: 'center', height: '100%' }}>
              <div style={{ color: 'var(--text-on-teal)', fontWeight: 800 }}>通过 Claimmee（18%）</div>
              <div style={{ fontSize: '3.4rem', fontWeight: 950, color: '#fff', lineHeight: 1.1, marginTop: 6 }}>€{claimmeeKeep}</div>
              <div style={{ color: 'var(--teal-100)', marginTop: 4 }}>你拿回 · 服务费 €{gross - claimmeeKeep}</div>
              <div style={{ marginTop: 14, display: 'inline-block', padding: '6px 14px', borderRadius: 'var(--radius-pill)', background: 'var(--amber-500)', color: 'var(--amber-ink)', fontWeight: 900, fontSize: '0.85rem' }}>首单免佣金 → 拿回 €{gross}</div>
            </Fe.Panel>
          </Reveal2>
          <Reveal2 delay={80}>
            <Fe.Panel style={{ textAlign: 'center', height: '100%' }}>
              <div style={{ color: 'var(--text-muted)', fontWeight: 800 }}>市场平均（约 35%）</div>
              <div style={{ fontSize: '3.4rem', fontWeight: 950, color: 'var(--slate-400)', lineHeight: 1.1, marginTop: 6 }}>€{marketKeep}</div>
              <div style={{ color: 'var(--text-muted)', marginTop: 4 }}>你拿回 · 服务费 €{gross - marketKeep}</div>
              <div style={{ marginTop: 14, color: 'var(--text-muted)', fontSize: '0.85rem' }}>同样一笔赔偿，少拿 €{claimmeeKeep - marketKeep}</div>
            </Fe.Panel>
          </Reveal2>
        </div>
      </section>

      {/* 对比表 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <SecTitle2 eyebrow="逐项对比" title="Claimmee vs 市场平均" sub="以下为基于公开行业数据的事实陈述，不指向任何特定公司的视觉或评价。" />
        <Fe.Panel style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 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(--teal-700)', color: '#fff', fontWeight: 900, textAlign: 'center' }}>Claimmee</div>
            <div style={{ padding: '18px 22px', background: 'var(--surface-sunken)', fontWeight: 800, color: 'var(--slate-600)', textAlign: 'center' }}>市场平均</div>
            {rows.map((r, i) => (
              <React.Fragment key={r[0]}>
                <div style={{ padding: '16px 22px', borderTop: '1px solid var(--border-subtle)', fontWeight: 700, color: 'var(--slate-700)' }}>{r[0]}</div>
                <div style={{ padding: '16px 22px', borderTop: '1px solid var(--teal-100)', background: 'var(--surface-tint)', textAlign: 'center', fontWeight: 800, color: 'var(--teal-700)' }}>{r[1]}</div>
                <div style={{ padding: '16px 22px', borderTop: '1px solid var(--border-subtle)', textAlign: 'center', color: 'var(--text-muted)' }}>{r[2]}</div>
              </React.Fragment>
            ))}
          </div>
        </Fe.Panel>
        <Fe.Disclaimer style={{ marginTop: 16 }}>佣金与处理时长为行业公开数据的概括性区间，可能随案件与时间变化；不代表对任何特定服务商的评价。Claimmee 数据为目标值，正式上线前以最终条款为准。</Fe.Disclaimer>
      </section>

      {/* CTA */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <Fe.Panel variant="tint" style={{ textAlign: 'center', padding: '48px 32px' }}>
          <h2 style={{ margin: '0 0 10px', fontSize: 'clamp(1.6rem,3.5vw,2.4rem)', fontWeight: 900, color: 'var(--slate-900)' }}>先免费看看你能拿回多少</h2>
          <p style={{ margin: '0 auto 24px', color: 'var(--text-body)', maxWidth: 440, lineHeight: 1.6 }}>初筛免费、无需证件，符合条件再谈下一步。</p>
          <Fe.Button variant="primary" size="lg" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')}>开始免费初筛 →</Fe.Button>
        </Fe.Panel>
      </section>
    </div>
  );
}

window.Fees = Fees;