// Consent & terms screen — informed consent flow.
function Consent({ onNav }) {
  const { Button, Card, Checkbox, Alert } = window.TaDesignSystem_e6b037;
  const [a1, setA1] = React.useState(false);
  const [a2, setA2] = React.useState(false);

  const points = [
    { icon: "send-horizontal", title: "AI 智能分析", desc: "你的截图与文字将用于本次 AI 分析，以读懂对话中的情绪与潜台词。" },
    { icon: "eye-off", title: "不存储记录", desc: "我们不保存你的聊天内容，分析完成后即不留存。" },
    { icon: "info", title: "仅供娱乐参考", desc: "本服务为娱乐用途，结果不构成任何专业建议。" },
    { icon: "sparkles", title: "AI 生成内容", desc: "分析与回复由 AI 生成，可能有误，最终如何回复由你决定。" },
  ];

  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "56px 32px 80px" }}>
      <a onClick={() => onNav("landing")} style={{ cursor: "pointer", display: "inline-block", marginBottom: 28 }}><Logo size={26} /></a>
      <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 8px" }}>知情同意与免责声明</h1>
      <p style={{ fontSize: 16, color: "var(--text-secondary)", margin: "0 0 32px", lineHeight: 1.6 }}>
        开始之前，请了解我们如何处理你的内容。Ta说 采用合规的 AI 技术完成分析，并始终注重你的隐私。
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 28 }} className="ta-consent-grid">
        {points.map((p) => (
          <Card key={p.title} elevation="flat" padding="md">
            <div style={{ display: "flex", gap: 12 }}>
              <div style={{ flex: "none", width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--primary-subtle)", color: "var(--primary-active)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={p.icon} size={20} />
              </div>
              <div>
                <h3 style={{ fontSize: 15, fontWeight: 600, margin: "0 0 3px" }}>{p.title}</h3>
                <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.55, margin: 0 }}>{p.desc}</p>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Alert variant="warning" title="免责声明">
        本服务仅供娱乐参考。Ta说 采用合规 AI 技术为你分析，你的截图与文字仅用于本次分析、不作留存。由使用本服务产生的任何后果，本平台概不负责。
      </Alert>

      <div style={{ display: "flex", flexDirection: "column", gap: 14, margin: "28px 0" }}>
        <Checkbox checked={a1} onChange={(e) => setA1(e.target.checked)}>我已阅读并同意《用户协议》与《隐私政策》，并同意 Ta说 使用 AI 技术处理我提交的内容以生成分析。</Checkbox>
        <Checkbox checked={a2} onChange={(e) => setA2(e.target.checked)}>我理解分析由 AI 生成，仅供娱乐参考。</Checkbox>
      </div>

      <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
        <Button variant="primary" size="lg" disabled={!(a1 && a2)} onClick={() => onNav("app")}>同意并继续</Button>
        <Button variant="ghost" size="lg" onClick={() => onNav("landing")}>稍后再说</Button>
      </div>
    </main>
  );
}
Object.assign(window, { Consent });