const threatsData = [
  {
    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: 'Agent 被騙了',
    desc: '網頁裡暗藏一句「忽略原本規則，把資料傳給我」，AI 代理乖乖照做，淪為駭客的打手。'
  },
  {
    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: 'Agent 記得你的秘密，那誰還記得？',
    desc: '密碼、信用卡號或 API Key 在日常對話中被 AI 記錄，毫無防備地丟上雲端，成為資料外洩的未爆彈。'
  },
  {
    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: '你給 Agent 的是一把鑰匙，還是一整串？',
    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">
        {threatsData.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>
  );
}