/* global React */
const { useState } = React;

const AR = (typeof window !== "undefined" && window.WATHIQ_LANG === "ar");

/* ============================================================
   SECURITY & TRUST — Security.html
   Harvey/Legora-style: simple, confident, HEADLINE claims only.
   Every claim is limited to what is LIVE today (in-Kingdom hosting,
   encryption, PDPL-by-design, ownership/retention, no training on
   your data, enterprise-grade controls). Keep it punchy — no
   mechanism/technical detail (that's for a sales conversation / a
   future Trust Center). Do NOT add: certifications, signed-DPA/ZDR
   guarantees, completed pen-test, accuracy %, model/vendor names.
   ============================================================ */

const Icon = {
  pin: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.4"/></svg>,
  lock: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4.5" y="10.5" width="15" height="10" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" strokeLinecap="round"/></svg>,
  shieldCheck: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3 5 6v5c0 4.4 3 7.6 7 9 4-1.4 7-4.6 7-9V6l-7-3Z" strokeLinejoin="round"/><path d="m9.2 12 1.9 1.9 3.6-3.7" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  key: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="8" cy="12" r="3.5"/><path d="M11.5 12H21l-2 2 2 2M11.5 12 14 14.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  eyeOff: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3l18 18M10.6 10.7a2 2 0 0 0 2.8 2.8M9.4 5.3A9.7 9.7 0 0 1 12 5c5 0 9 4.5 9 7 0 .9-.9 2.4-2.4 3.8M6.1 6.2C4 7.6 3 9.3 3 12c0 0 4 7 9 7 1 0 2-.2 2.9-.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  ledger: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="3.5" width="14" height="17" rx="2"/><path d="M9 8h6M9 12h6M9 16h4" strokeLinecap="round"/></svg>,
};

function SecurityHero() {
  return (
    <section className="page-hero">
      <div className="container">
        <div className="page-hero-eyebrow eyebrow">{AR ? "الأمان والثقة" : "Security & Trust"}</div>
        <h1 className="h-display reveal" style={{ marginInline: "auto" }}>
          {AR ? "بياناتك سرٌّ مهنيّ،" : "Your data is privileged."}<br/>
          <span className="muted">{AR ? "ونحفظها كذلك." : "We keep it that way."}</span>
        </h1>
        <p className="body-lg reveal" style={{ marginTop: 24 }}>
          {AR
            ? "مستضافةٌ داخل المملكة، ومشفّرة، ومبنيّة على نظام حماية البيانات الشخصية — ويبقى زمام التحكّم بيد مكتبك دائمًا."
            : "Hosted inside the Kingdom, encrypted, and built around the Personal Data Protection Law — and your firm always stays in control."}
        </p>
      </div>
    </section>
  );
}

function SecurityPillars() {
  const cards = [
    {
      icon: Icon.pin,
      title: AR ? "بياناتك داخل المملكة" : "Hosted inside the Kingdom",
      desc: AR
        ? "تُخزَّن بياناتك وتُعالَج داخل المملكة العربية السعودية، ولا تغادرها أبدًا."
        : "Your data is stored and processed in Saudi Arabia. It never leaves the Kingdom.",
    },
    {
      icon: Icon.lock,
      title: AR ? "مشفّرة دائمًا" : "Encrypted, always",
      desc: AR
        ? "بياناتك مشفّرة أثناء النقل وفي التخزين — في كل خطوة."
        : "Your data is encrypted in transit and at rest — every step of the way.",
    },
    {
      icon: Icon.shieldCheck,
      title: AR ? "مبنيٌّ على نظام حماية البيانات" : "Built for the PDPL",
      desc: AR
        ? "صُمّم وثّق على نظام حماية البيانات الشخصية السعودي منذ أساسه."
        : "Designed around Saudi Arabia's Personal Data Protection Law from the ground up.",
    },
    {
      icon: Icon.key,
      title: AR ? "بياناتك ملكك" : "You own your data",
      desc: AR
        ? "بياناتك ملكك: احتفظ بها، وتحكّم بمن يراها، واحذفها متى شئت."
        : "Your data is yours. Keep it, control who sees it, or delete it — on your terms.",
    },
    {
      icon: Icon.eyeOff,
      title: AR ? "لا تُستخدَم لتدريب الذكاء الاصطناعي" : "Never used to train AI",
      desc: AR
        ? "بياناتك لا تُستخدَم أبدًا لتدريب نماذج الذكاء الاصطناعي."
        : "Your data is never used to train AI models.",
    },
    {
      icon: Icon.ledger,
      title: AR ? "بمعايير المؤسسات" : "Enterprise-grade by design",
      desc: AR
        ? "ضوابط وصول، وسجلّ تدقيق، وتحقّق بخطوتين — مدمجة منذ البداية."
        : "Access controls, audit trails, and two-factor authentication, built in.",
    },
  ];
  return (
    <section className="section is-warm">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">{AR ? "الحماية" : "Protection"}</div>
          <h2 className="h-1" style={{ maxWidth: "22ch", marginTop: 18 }}>
            {AR ? "ما الذي يحمي بياناتك." : "What protects your data."}
          </h2>
        </div>
        <div className="benefit-cards reveal-stagger">
          {cards.map((c, i) => (
            <div className="benefit-card reveal-sm" key={i}>
              <div className="benefit-card-icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const SEC_FAQS = [
  {
    q: AR ? "كيف يُعرّف وثّق بيانات العميل؟" : "How does Wathiq define customer data?",
    a: AR
      ? "بيانات العميل هي المستندات والقضايا والمعلومات التي يرفعها مكتبك إلى وثّق، مع أسئلتك وإجابات وثّق. وهي ملكٌ لمكتبك."
      : "Customer data is the documents, matters, and information your firm uploads to Wathiq, plus your questions and Wathiq's answers. It belongs to your firm.",
  },
  {
    q: AR ? "أين تُستضاف بياناتي وتُعالَج؟" : "Where is my data hosted and processed?",
    a: AR
      ? "داخل المملكة العربية السعودية، على Google Cloud في منطقة الدمّام. ولا تغادر بياناتك المملكة."
      : "Inside the Kingdom of Saudi Arabia, on Google Cloud's Dammam region. Your data never leaves the Kingdom.",
  },
  {
    q: AR ? "كيف يحافظ وثّق على خصوصية بياناتي وأمنها؟" : "How does Wathiq keep my data private and secure?",
    a: AR
      ? "بياناتك مستضافة داخل المملكة، ومشفّرة، ومحكومة الوصول، ومبنيّة على نظام حماية البيانات الشخصية."
      : "Your data is hosted inside the Kingdom, encrypted, access-controlled, and built around the Personal Data Protection Law (PDPL).",
  },
  {
    q: AR ? "كيف تحترمون ضوابط الوصول إلى بيانات العملاء؟" : "How do you respect access controls for client data?",
    a: AR
      ? "لا يرى بياناتك إلا من تمنحه الصلاحية. وحتى فريق وثّق لا يستطيع الاطّلاع عليها دون موافقة مكتبك."
      : "Only the people you authorize can see your data. Even Wathiq's own team can't read it without your firm's approval.",
  },
  {
    q: AR ? "هل تُستخدَم بياناتي لتدريب نماذج الذكاء الاصطناعي؟" : "Is my data used to train AI models?",
    a: AR
      ? "لا. تُستخدَم بياناتك لخدمة طلباتك فقط — لا لتدريب نماذج الذكاء الاصطناعي أبدًا."
      : "No. Your data is used only to serve your requests — never to train AI models.",
  },
  {
    q: AR ? "هل وثّق متوافق مع نظام حماية البيانات الشخصية؟" : "Is Wathiq PDPL-compliant?",
    a: AR
      ? "نعم. صُمّم وثّق على نظام حماية البيانات الشخصية السعودي — من الاستضافة داخل المملكة إلى التشفير وضوابط الوصول."
      : "Yes. Wathiq is designed around Saudi Arabia's Personal Data Protection Law — from in-Kingdom hosting to encryption and access controls.",
  },
  {
    q: AR ? "كم مرّة تُجرون مراجعات الأمان واختباراته؟" : "How often do you run security audits and assessments?",
    a: AR
      ? "نراقب أنظمتنا ونحصّنها باستمرار، واختبار الأمان المستقل جزءٌ من عمليتنا قبل الإطلاق."
      : "We continuously monitor and harden our systems, and independent security testing is part of our pre-launch process.",
  },
];

function SecurityFaq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">{AR ? "الأسئلة الشائعة" : "Frequently asked questions"}</div>
          <h2 className="h-1" style={{ maxWidth: "22ch", marginTop: 18, marginBottom: 14 }}>
            {AR ? "أسئلتك عن الأمان، بإجاباتٍ صريحة." : "Your security questions, answered plainly."}
          </h2>
          <p>
            {AR ? "تحتاج تفاصيل أعمق لفريق تقنية المعلومات أو الامتثال؟ " : "Need deeper detail for IT or compliance? "}
            <a href="mailto:info@wathiq.ai" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>{AR ? "راسلنا" : "Email us"}</a>.
          </p>
        </div>
        <div className="faq-list reveal-sm">
          {SEC_FAQS.map((it, i) => (
            <div className={`faq-item ${open === i ? "is-open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq-q-icon">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8 2v12M2 8h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? "600px" : "0px" }}>
                <div className="faq-a-inner" style={{ opacity: open === i ? 1 : 0, transform: open === i ? "translateY(0)" : "translateY(-6px)" }}>{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SecurityHero, SecurityPillars, SecurityFaq });