/* global React, HeroMarquee, MockAssistant, MockContract, MockDrafting,
   MockWorkflows, MockBuilder, MockCitations */
const { useState, useEffect, useRef } = React;
const AR = (typeof window !== "undefined" && window.WATHIQ_LANG === "ar");

/* ============================================================
   HOME — sections that compose the home page

   NOTE: The hero (<section class="hero">), the nav, and the logo marquee now all
   live as STATIC HTML in index.html so the whole above-the-fold paints before
   React/Babel load (instant, no white flash). Edit that copy THERE. React only
   renders the sections below the fold (+ CTA + footer).
   ============================================================ */

/* ============================================================
   "Every case. One workspace" — 3 image cards w/ live mocks
   ============================================================ */

function EveryCase({ lang = "en" }) {
  const items = [
    {
      label: AR ? "راجِع أسرع" : "Review Faster",
      desc: AR
        ? "راجِع العقود والمستندات القانونية في دقائق لا ساعات. يرصد وثّق البنود الناقصة والتعارضات والمخاطر، فيتفرّغ المحامي لما يُحسنه: الحُكم القانوني."
        : "Analyze contracts and legal documents in minutes, not hours. Wathiq highlights missing clauses, inconsistencies, and risks so lawyers can focus on judgment — not manual review.",
      demo: "contract-review",
    },
    {
      label: AR ? "صُغ بذكاء" : "Draft Smarter",
      desc: AR
        ? "صُغ مستنداتك القانونية وأعِد صياغتها ونقّحها دون أن تغادر مساحة عملك. يقترح وثّق الصياغة والبنية، ويبقى القرار الأخير بيد المحامي وحده."
        : "Draft, rewrite, and refine legal documents directly in your workspace with AI assistance. Wathiq suggests language and structure while keeping lawyers fully in control.",
      demo: "assistant",
    },
    {
      label: AR ? "أدِر باقتدار" : "Manage Better",
      desc: AR
        ? "تابِع القضايا والمستندات والقرارات وسير العمل من مساحة عمل واحدة خاضعة للحوكمة. كل إجراء مُوثّقٌ ومنظّمٌ وقابلٌ للتدقيق أمام فريقك القانوني."
        : "Track matters, documents, decisions, and progress in one governed workspace. Every action is visible, structured, and auditable across your legal team.",
      demo: "workflow-agents",
    },
  ];
  const secRef = useRef(null);
  const [live, setLive] = useState(false);
  useEffect(() => {
    const el = secRef.current;
    if (!el || !("IntersectionObserver" in window)) { setLive(true); return; }
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => setLive(e.isIntersecting)),
      { threshold: 0.2 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section className="section" ref={secRef}>
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">{AR ? "أدوات أذكى. نتائج أوضح." : "Smarter tools, Better outcomes"}</div>
          <h2 className="h-2">{AR ? "كل قضية. مساحة عمل واحدة" : "Every case. One workspace"}</h2>
          <p>
            {AR
              ? "البحث القانوني والصياغة وإدارة القضايا في مساحة عمل واحدة موحّدة، مصمَّمة للفرق القانونية في السعودية."
              : "Legal research, drafting, and matter management — all in one governed workspace designed for Saudi legal teams."}
          </p>
        </div>
        <div className="cards-3">
          {items.map(({ label, desc, demo }, i) => (
            <div className="feat-card reveal" key={i}>
              <div className="feat-card-media is-demo no-smooth">
                <iframe
                  className="demo-iframe demo-still"
                  src={`/demos/${demo}-video.html?still=1&lang=${AR ? "ar" : "en"}`}
                  title={`${label} preview`}
                  loading="lazy"
                  tabIndex={-1}
                  scrolling="no"
                ></iframe>
                {live ? (
                  <DemoVideoLayer src={`/demos/${demo}-video.html?lang=${AR ? "ar" : "en"}`} label={label} />
                ) : null}
              </div>
              <div className="feat-card-text">
                <h3 className="h-3">{label}</h3>
                <p>{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DemoVideoLayer({ src, label }) {
  const [ready, setReady] = useState(false);
  return (
    <iframe
      className={`demo-iframe demo-video ${ready ? "is-ready" : ""}`}
      src={src}
      title={`${label} animated demo`}
      onLoad={() => setReady(true)}
      tabIndex={-1}
      scrolling="no"
    ></iframe>
  );
}

/* ============================================================
   "Built on the deepest Saudi legal database" intro
   ============================================================ */

function BuiltOn() {
  return (
    <section className="section is-warm">
      <div className="container">
        <div style={{ maxWidth: "32ch" }} className="reveal">
          <div className="eyebrow">{AR ? "الأساس" : "The foundation"}</div>
        </div>
        <h2 className="h-1 reveal" style={{ maxWidth: "20ch", marginTop: 18, marginBottom: 28 }}>
          {AR ? "مبنيٌّ على أعمق قاعدة بيانات قانونية سعودية." : "Built on the deepest Saudi legal database."}
        </h2>
        <p className="body-lg reveal" style={{ maxWidth: "58ch" }}>
          {AR
            ? "ابحث في أكثر من 16,000 مادة نظامية سعودية، وحرِّر مستنداتك، وراجِع عقودك بذكاءٍ اصطناعي مصمَّم للأنظمة السعودية — يُتقن العربية والإنجليزية معًا، وكلُّ استشهادٍ فيه قابلٌ للتتبّع حتى مصدره."
            : "Search 16,000+ Saudi legal articles, draft documents, and review contracts with an AI built for Saudi law — Arabic and English as equals, every citation traceable."}
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   PLATFORM — "One platform, in five layers"
   ============================================================ */

function Platform() {
  const layers = [
    {
      n: "01",
      title: AR ? "مساحة العمل" : "Workspace",
      lead: AR ? "حيث يجري العمل فعلًا." : "Where the work lives.",
      desc: AR
        ? "القضايا والتقويمات والمواعيد والمهام في نظام واحد — يرى كل شريك ومحامٍ عمله وعمل فريقه في لمحة. لا شيء يضيع بين الفِرَق، ولا موعد يفوت."
        : "Matters, calendars, deadlines, and tasks in a single system — every partner and associate sees their own work and the team's at a glance. Nothing sits in a silo. Nothing slips.",
    },
    {
      n: "02",
      title: AR ? "قاعدة المعرفة" : "Knowledge",
      lead: AR ? "كل محامٍ يسنده المكتب بأكمله." : "Every lawyer, backed by the whole firm.",
      desc: AR
        ? "أدلّة العمل، ومكتبات القضايا المنجَزة، وخبرة كل مجال ممارسة، وسجلّ القضايا السابقة — تستمدّ منها كل خطوة، فتنتقل خبرة المكتب المتراكمة إلى العمل، لا أن تظلّ حبيسة عقول الشركاء."
        : "Playbooks, closed-matter libraries, practice-area expertise, and matter history feed every action — so the firm's collective experience shows up in the work, not just in the partners' heads.",
    },
    {
      n: "03",
      title: AR ? "التعاون" : "Collaboration",
      lead: AR ? "قضيةٌ واحدة، وأيدٍ كثيرة." : "One matter, many hands.",
      desc: AR
        ? "يجتمع المحامون على الملف نفسه والمسوّدة نفسها والبحث نفسه، ويبقى السياق محفوظًا أمام الجميع — فلا يضيع سياق العمل في رسالة بريد مُعاد توجيهها."
        : "Lawyers work the same file, the same draft, the same research together — in shared context, so the thread is never lost in a forwarded email.",
    },
    {
      n: "04",
      title: AR ? "نظامٌ حيّ" : "Living Law",
      lead: AR ? "الأنظمة تتغيّر. ووثّق يتغيّر معها." : "The law moves. So does Wathiq.",
      desc: AR
        ? "متابعة حيّة للأنظمة واللوائح السعودية فور صدورها من مصادرها الرسمية، ومنها جريدة أم القرى — فلا يعمل فريقك يومًا على نصٍّ تجاوزه التعديل."
        : "A live feed of Saudi laws and regulations drawn from official sources, including the Umm Al-Qura Official Gazette — your team is never working from last year's text.",
    },
    {
      n: "05",
      title: AR ? "المنتجات" : "Products",
      lead: AR ? "أدوات مصمَّمة لكل خطوة في العمل القانوني." : "Purpose-built tools for every step of legal work.",
      desc: AR
        ? "بحثٌ وصياغة ومراجعة وتقديم مرافعات وأتمتة. ليست تطبيقات متفرّقة، بل منصة واحدة تعرف فيها كل أداة القضية والنظام والمكتب."
        : "Research, drafting, review, court filings, and automation. Not a drawer of disconnected apps, but one platform where each tool knows the matter, the law, and the firm.",
      link: { href: "Product.html", label: AR ? "اطّلِع على المنتج كاملًا" : "See the full product" },
    },
  ];
  return (
    <section className="section layers-section" id="product">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">{AR ? "المنصة" : "The platform"}</div>
          <h2 className="h-1" style={{ maxWidth: "16ch", marginTop: 18, marginBottom: 22 }}>
            {AR ? "منصةٌ واحدة، في خمس طبقات." : "One platform, in five layers."}
          </h2>
          <p className="body-lg" style={{ maxWidth: "60ch" }}>
            {AR
              ? "وثّق هو النظام الذي يدير عليه المكتب أعماله — حيث تتلاقى مساحة العمل والفريق والأنظمة ومعرفة المكتب وأدواته في كيان واحد."
              : "Wathiq is the system a firm runs on — where the workspace, the team, the law, the firm's knowledge, and its tools come together as one."}
          </p>
        </div>
        <div className="layers-list">
          {layers.map((l) => (
            <article className="layer-row reveal-slide" key={l.n}>
              <div className="layer-num" aria-hidden="true">{l.n}</div>
              <div className="layer-body">
                <h3 className="layer-title">{l.title}</h3>
                <p className="layer-lead">{l.lead}</p>
                <p className="layer-desc">{l.desc}</p>
                {l.link ? (
                  <a className="layer-link" href={l.link.href}>
                    {l.link.label} <span className="arrow">{AR ? "←" : "→"}</span>
                  </a>
                ) : null}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PILL BAND — sticky text left, pill links right
   ============================================================ */

function PillBand() {
  const pills = [
    { n: "01", slug: "collaboration", label: "Collaboration",   labelAr: "التعاون",        desc: AR ? "يجمع الشركاء والمحامين والفرق القانونية الداخلية على عملٍ واحد." : "Work across partners, associates, and in-house teams." },
    { n: "02", slug: "matter",        label: "Matter Tracking",  labelAr: "متابعة القضايا", desc: AR ? "كل قضية ومهلة ومستند في مكان واحد." : "Every case, deadline, and document in one place." },
    { n: "03", slug: "calendar",      label: "Calendar",         labelAr: "التقويم",        desc: AR ? "مواعيد المحاكم والمرافعات وتوافر الفريق." : "Court dates, filings, and team availability." },
    { n: "04", slug: "visibility",    label: "Visibility",       labelAr: "الوضوح",         desc: AR ? "مسار تدقيق كامل. مخرجات جاهزة للمحاكم." : "Full audit trail. Court-ready exports." },
    { n: "05", slug: "governance",    label: "Governance",       labelAr: "الحوكمة",        desc: AR ? "صلاحيات حسب الدور، وحفظ البيانات، وبقاؤها داخل المملكة." : "Role-based access, retention, residency." },
  ];
  return (
    <section className="pills-section">
      <div className="container">
        <div className="pills-grid">
          <div className="pills-left reveal">
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>{AR ? "مساحة العمل" : "The workspace"}</div>
            <h2 className="h-2" style={{ marginTop: 18 }}>{AR ? "نظامٌ واحدٌ بحوكمةٍ كاملة لكل جانب من العمل القانوني." : "One governed system for every part of legal work."}</h2>
            <p className="body-md" style={{ marginTop: 18 }}>
              {AR
                ? "استبدِل أدواتك المتفرّقة بمساحة عمل واحدة بُنيت على طريقة المكاتب السعودية في الممارسة — الاستشهادات، وتتبّع الإصدارات، والاعتمادات، والعربية في الصميم."
                : "Replace a stack of disconnected tools with a single workspace built for the way Saudi firms actually practice — citations, versioning, approvals, and Arabic at the core."}
            </p>
            <div style={{ marginTop: 28 }}>
              <a href="Contact.html" className="btn btn-white">{AR ? "ابدأ الآن" : "Get started"} <span className="arrow">{AR ? "←" : "→"}</span></a>
            </div>
          </div>
          <div className="pills-list reveal-stagger">
            {pills.map((p) => (
              <a className="pill-link reveal-sm" href={`#ft-${p.slug}`} key={p.n}>
                <div className="pill-link-l">
                  <span className="num">{p.n}</span>
                  <span>
                    <span className="label">{AR ? p.labelAr : p.label}</span>
                    <span className="desc">{p.desc}</span>
                  </span>
                </div>
                <span className="pill-link-r">{AR ? "←" : "→"}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EveryCase, BuiltOn, Platform, PillBand });