// Claimmee 授权与隐私确认页 — 合规导向，占位文本待法务复核。仅演示，不触发真实提交。
const A = window.ClaimmeeDesignSystem_e4fda8;
const MktA = window.ClaimmeeMkt;

function Authorize() {
  const wrap = { width: 'min(820px, calc(100vw - 32px))', margin: '0 auto' };
  const c = MktA._case || MktA.buildCase(MktA._prefill, null);
  const [agree, setAgree] = React.useState(false);
  const [withdraw, setWithdraw] = React.useState(true);

  const submit = () => {
    MktA._case = c;
    window.ClaimmeeNav && window.ClaimmeeNav('tracking');
  };

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 80 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 44, paddingBottom: 40 }}>
        <div style={wrap}>
          <div style={{ color: 'var(--teal-100)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>第 4 步 · 合规授权</div>
          <h1 style={{ margin: '10px 0 0', color: '#fff', fontSize: 'clamp(1.8rem,3.8vw,2.6rem)', fontWeight: 900, letterSpacing: '-0.03em' }}>授权与隐私确认</h1>
          <p style={{ margin: '12px 0 0', color: 'var(--text-on-teal)', maxWidth: 560, lineHeight: 1.65 }}>在我们代你联系航司之前，需要你明确授权。以下条款为占位示例，正式上线前将经法务复核。</p>
        </div>
      </section>

      <div style={{ ...wrap, marginTop: -16, display: 'grid', gap: 16 }}>
        {/* 案件摘要 */}
        <A.Panel>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <div>
              <A.LabelChip>本次案件</A.LabelChip>
              <div style={{ marginTop: 8, fontWeight: 900, fontSize: '1.3rem', color: 'var(--slate-900)' }}>{c.route}</div>
              <div style={{ color: 'var(--text-muted)', marginTop: 2 }}>{c.disruptionLabel}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem', fontWeight: 700 }}>预计赔偿</div>
              <div style={{ fontSize: '2.2rem', fontWeight: 950, color: 'var(--teal-700)', lineHeight: 1 }}>{c.amount > 0 ? '€' + c.amount : '—'}</div>
            </div>
          </div>
        </A.Panel>

        {/* 条款 */}
        <A.Panel style={{ display: 'grid', gap: 18 }}>
          {MktA.AUTH_TERMS.map((t, i) => (
            <div key={t.title} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'start' }}>
              <span style={{ width: 36, height: 36, flex: '0 0 auto', borderRadius: 'var(--radius-md)', background: i === 3 ? 'var(--amber-100)' : 'var(--teal-100)', color: i === 3 ? 'var(--amber-700)' : 'var(--teal-700)', display: 'grid', placeItems: 'center', fontWeight: 900 }}>{i + 1}</span>
              <div>
                <strong style={{ display: 'block', color: 'var(--slate-900)', marginBottom: 4 }}>{t.title}</strong>
                <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 1.7 }}>{t.body}</p>
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderRadius: 'var(--radius-lg)', background: 'var(--surface-sunken)', color: 'var(--slate-600)', fontWeight: 700, fontSize: '0.85rem' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--slate-400)' }} />占位文本 · 需法务复核 · Counsel review required
          </div>
        </A.Panel>

        {/* 同意 */}
        <A.Panel style={{ display: 'grid', gap: 16 }}>
          <A.CheckboxRow checked={agree} onChange={(e) => setAgree(e.target.checked)}>
            我已阅读并同意 {MktA.AUTH_DOCS.map((d, i) => (<React.Fragment key={d}><a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--teal-700)', fontWeight: 800 }}>{d}</a>{i < MktA.AUTH_DOCS.length - 1 ? '、' : ''}</React.Fragment>))}，并授权 Claimmee 代我处理本次索赔。
          </A.CheckboxRow>
          <A.CheckboxRow checked={withdraw} onChange={(e) => setWithdraw(e.target.checked)}>我了解可随时撤回授权并要求删除我的数据（GDPR）。</A.CheckboxRow>
          <A.Button variant="primary" size="lg" fullWidth disabled={!agree} onClick={submit}>{agree ? '确认授权并创建案件（演示）' : '请先勾选同意条款'}</A.Button>
          <A.Disclaimer>本页为合成演示，不会真实提交、不联系航司、不收集真实证件或银行信息。正式授权流程将在法务复核与上线后启用。</A.Disclaimer>
        </A.Panel>

        <div style={{ textAlign: 'center' }}>
          <A.Button variant="ghost" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')}>← 返回初筛</A.Button>
        </div>
      </div>
    </div>
  );
}

window.Authorize = Authorize;