/* global React */
const { useRef, useEffect } = React;

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

/* ============================================================
   ABOUT — sections for the About page
   ============================================================ */

function AboutHero() {
  return (
    <section className="page-hero">
      <div className="container">
        <h1 className="h-display reveal" style={{ marginInline: "auto" }}>
          {AR ? "صُنع في المملكة العربية السعودية،" : "Built in Saudi Arabia,"}<br/>
          <span className="muted">{AR ? "للفرق القانونية السعودية." : "for Saudi legal teams."}</span>
        </h1>
        <p className="body-lg reveal" style={{ marginTop: 24 }}>
          {AR
            ? "وُلِد وثّق لأن العمل القانوني في المملكة يستحق أدوات سعودية تُتقن العربية، وتُلمّ بالأنظمة، وتُبقي القرار النهائي بيد المحامي."
            : "Wathiq was created because legal work in the Kingdom deserves localized tools that understand Saudi law, speak Arabic natively, and put lawyers in control."}
        </p>
      </div>
    </section>
  );
}

function AboutManifesto() {
  return (
    <section className="section is-warm">
      <div className="container">
        <div className="reveal" style={{ marginBottom: 36 }}>
          <div className="eyebrow">{AR ? "لماذا أنشأنا وثّق" : "Why we built Wathiq"}</div>
        </div>
        <div className="manifesto">
          <p className="reveal">
            {AR
              ? "بدأ وثّق لأن أدوات الذكاء الاصطناعي التي غيّرت وجه القطاع القانوني عالميًا تقوم على قوانين أجنبية، وتُدار من بنية تحتية خارج المملكة، ومهيّأة للإنجليزية — ولا واحدة منها تستطيع أن تخدم مكتبًا سعوديًا في عمله اليومي بالدقة والخصوصية المطلوبة."
              : "Wathiq was started because the AI tools transforming the legal industry abroad were built on foreign law, hosted on infrastructure outside the Kingdom, and tuned for English. None of them could safely or accurately serve a Saudi firm doing real work."}
          </p>
          <p className="reveal">
            {AR
              ? "ونبني البديل: منصة ذكاء اصطناعي قانونية مبنية من جذورها على الأنظمة السعودية، واللغة العربية، ونظام حماية البيانات الشخصية."
              : "We are building the alternative: a legal AI platform engineered, from the ground up, around Saudi law, the Arabic language, and the Personal Data Protection Law."}
          </p>
        </div>
      </div>
    </section>
  );
}

function AboutBeliefs() {
  const cards = [
    {
      g: "ع",
      title: AR ? "ذكاء اصطناعي يفهم الأنظمة السعودية" : "AI that understands Saudi law",
      desc: AR
        ? "يحلّل وثّق العقود، ويرصد المخاطر، ويصيغ المستندات وفق الأنظمة السعودية — نظام العمل، وإجراءات المحاكم التجارية، ومتطلبات البنك المركزي السعودي (ساما)."
        : "Wathiq analyzes contracts, flags risks, and drafts documents with awareness of Saudi regulations — labor law, commercial court procedures, SAMA compliance.",
    },
    {
      g: "1",
      title: AR ? "مكان واحد لكل قضية ومعاملة" : "A single place for every matter",
      desc: AR
        ? "المستندات والمواعيد والقرارات ونقاش الفريق — تجتمع كلها في مساحة عمل واحدة موحّدة، فيصبح لكل قضية مرجع واحد موثوق."
        : "Documents, deadlines, decisions, and team communication — all in one governed workspace. One source of truth for every case.",
    },
    {
      g: "✓",
      title: AR ? "مساحة عمل واحدة خاضعة للحوكمة" : "One governed workspace",
      desc: AR
        ? "القضايا والمستندات والمواعيد والامتثال وعمل الفريق في مكان واحد — ووداعًا لجداول البيانات وسلاسل البريد والملفات المبعثرة."
        : "Cases, documents, deadlines, compliance, and team collaboration in one place. No more spreadsheets, email threads, and scattered files.",
    },
    {
      g: "ا",
      title: AR ? "مبنيٌّ للعربية منذ اليوم الأول" : "Built for Arabic from day one",
      desc: AR
        ? "تحليل المستندات بالعربية والإنجليزية معًا، وواجهة تضع العربية أولًا، ورصد البنود ثنائية اللغة. وثّق لا يترجم — بل يفهم."
        : "Bilingual document analysis. Arabic-first interface. Mixed-language clause detection. Wathiq doesn't translate — it understands.",
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">{AR ? "ما الذي نؤمن به" : "What we believe"}</div>
          <h2 className="h-1" style={{ maxWidth: "22ch", marginTop: 18 }}>
            {AR ? "لماذا تختار الفرق القانونية السعودية وثّق." : "Why Saudi legal teams are happy with Wathiq."}
          </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.g}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutHero, AboutManifesto, AboutBeliefs });