// Security & Compliance page

function SecurityPage({ t, setPage, lang }) {
  return (
    <div className="page-shell">
      <section className="block">
        <div className="wrap">
          <div className="eyebrow">{t.security.kicker}</div>
          <h2 className="section-title" style={{maxWidth:980, marginTop:18}}>
            {t.security.title_a}<em>{t.security.title_em}</em>{t.security.title_b}
          </h2>
          <p className="section-kicker" style={{marginTop:24, marginBottom:56, maxWidth:780}}>{t.security.lede}</p>

          <div className="sec-pillars">
            {t.security.pillars.map((p, i) => (
              <article className="sec-card" key={i}>
                <div className="sec-tag">{p.tag}</div>
                <h3 className="sec-title">{p.title}</h3>
                <p className="sec-desc">{p.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="block" style={{background:"var(--bg-1)"}}>
        <div className="wrap">
          <div className="about-grid">
            <div>
              <div className="eyebrow">{t.security.certs_title}</div>
              <h3 style={{fontFamily:"var(--serif)", fontSize:28, color:"var(--ink)", marginTop:20, marginBottom:28, fontWeight:500}}>
                {lang === "en" ? "Standards we align to" : "我们对标的标准"}
              </h3>
              <div className="certs-row">
                {t.security.certs.map((c, i) => <span className="cert-chip" key={i}>{c}</span>)}
              </div>
              <p style={{marginTop:32, color:"var(--ink-3)", fontSize:13.5, lineHeight:1.7}}>
                {lang === "en"
                  ? "Our security program is actively being attested. Certification roadmaps and current evidence are available under NDA to qualified buyers."
                  : "我们的安全体系正在接受第三方认证。已签署 NDA 的合格采购方可以获取认证路线图与现有证据材料。"}
              </p>
            </div>
            <div>
              <div className="eyebrow">{t.security.docs_title}</div>
              <ul className="docs-list" style={{marginTop:20}}>
                {t.security.docs.map((d, i) => <li key={i}>{d}</li>)}
              </ul>
              <div style={{marginTop:32, padding:"20px 22px", border:"1px solid var(--gold-deep)", borderRadius:"var(--r-md)", background:"rgba(200,162,90,0.04)"}}>
                <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:"0.2em", color:"var(--gold)", textTransform:"uppercase", marginBottom:8}}>
                  {lang === "en" ? "Security Contact" : "安全联系方式"}
                </div>
                <a href="mailto:security@fantula.net" style={{fontFamily:"var(--serif)", fontSize:20, color:"var(--gold-2)"}}>security@fantula.net</a>
                <p style={{marginTop:12, fontSize:13, color:"var(--ink-3)", lineHeight:1.6}}>{t.security.contact_line.replace(/.*security@fantula\.com/, "").replace(/^[:：\s]+/, "")}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABlock t={t} setPage={setPage} />
    </div>
  );
}

Object.assign(window, { SecurityPage });