const threats = [
  {
    icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>),
    color: '#C28F3D',
    title: 'OpenClaw RCE 漏洞',
    desc: 'CVE-2026-25253 讓駭客能在一秒內劫持系統。我們的 Docker Sidecar 提供物理網段隔離。'
  },
  {
    icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>),
    color: '#3F6A8A',
    title: 'PII 隱私洩漏',
    desc: '自動遮蔽身份證、信用卡及 API Key。在存入 Vector DB 前完成去識別化。'
  },
  {
    icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>),
    color: '#9B3A2F',
    title: '惡意提示注入',
    desc: '間接提示注入會讓 AI 被洗腦。意圖膠囊將輸入視為純資料，剝奪命令執行權。'
  }
];

function Threats() {
  return (
    <section id="features" className="lo-threats lo-reveal">
      <div className="lo-eyebrow">Defense Mechanism</div>
      <h2 className="lo-h1-serif">當前的 <span className="lo-en">AI</span> 安全威脅</h2>
      <div className="lo-threats-grid">
        {threats.map((t, i) => (
          <article key={i} className="lo-card lo-card-threat lo-reveal" style={{ transitionDelay: `${i * 120}ms` }}>
            <div className="lo-threat-icon" style={{ color: t.color }}>{t.icon}</div>
            <h3>{t.title}</h3>
            <p>{t.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}