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

/* ============================================================
   SHOWCASE — product mocks that mirror real Wathiq surfaces
   ============================================================ */

const SHOWCASE_COPY = {
  en: {
    eyebrow: "Professional-class AI",
    title: "Wathiq is AI designed for the Saudi legal profession.",
    lede: "A workspace where matter context, the Saudi legal corpus, and ready-made agents come together — so your team focuses on the work only lawyers can do.",
    tabsLabel: "Saudi legal teams use Wathiq for",
    tabs: [
      { key: "assistant", label: "Assistant" },
      { key: "workflows", label: "Workflow Agents" },
      { key: "contract",  label: "Contract Review" },
      { key: "drafting",  label: "Drafting" },
      { key: "builder",   label: "Agent Builder" },
      { key: "citations", label: "Citation Audit" },
    ],
    cta: "Explore the platform",
  },
  ar: {
    eyebrow: "ذكاءٌ اصطناعي بمستوى المهنة",
    title: "وثّق ذكاءٌ اصطناعي مُصمَّم للممارسة القانونية السعودية.",
    lede: "مساحة عمل تجمع سياق القضية والمكتبة النظامية السعودية والوكلاء الجاهزين، ليتفرّغ فريقك لما لا يُتقنه إلا المحامي.",
    tabsLabel: "تستخدم الفرق القانونية وثّق في",
    tabs: [
      { key: "assistant", label: "المساعد" },
      { key: "workflows", label: "وكلاء سير العمل" },
      { key: "contract",  label: "مراجعة العقود" },
      { key: "drafting",  label: "الصياغة" },
      { key: "builder",   label: "بناء الوكلاء" },
      { key: "citations", label: "تدقيق المراجع" },
    ],
    cta: "اكتشف المنصة",
  },
};

/* ============================================================
   ASSISTANT — mirrors the home thread (Choose matter, @-mention
   agents, Files / Article Search / Auto / Full Research chips)
   ============================================================ */

function MockAssistant({ lang }) {
  const ar = lang === "ar";
  return (
    <div className="mck mck-assist" dir={ar ? "rtl" : "ltr"}>
      <div className="mck-assist-topbar">
        <div className="mck-assist-topbar-l">
          <span className="mck-assist-matterpill">
            <span className="mck-assist-matterpill-icon">▦</span>
            {ar ? "النيل التجارية ضد التقنيات المتقدمة" : "Al-Nile Trading v. Advanced Tech"}
            <span className="mck-assist-matterpill-caret">⌄</span>
          </span>
        </div>
        <div className="mck-assist-topbar-r">
          <span className="mck-assist-ghost-btn">+ {ar ? "محادثة جديدة" : "New thread"}</span>
          <span className="mck-assist-ghost-btn">↗ {ar ? "مشاركة" : "Share"}</span>
        </div>
      </div>

      <div className="mck-assist-body">
        <div className="mck-assist-wordmark">
          <span className="mck-assist-w-glyph">w</span>
          <span className="mck-assist-w-rest">athiq</span>
        </div>

        <div className="mck-assist-quickrow">
          <span className="mck-assist-quick">
            <span className="mck-assist-quick-icon">⌑</span>
            {ar ? "صياغة مستند" : "Draft document"}
          </span>
          <span className="mck-assist-quick">
            <span className="mck-assist-quick-icon">▦</span>
            {ar ? "جدول مراجعة" : "Review table"}
          </span>
        </div>

        <div className="mck-assist-composer">
          <div className="mck-assist-composer-toprow">
            <span className="mck-assist-composer-hint">@ {ar ? "للوكلاء" : "for agents"}</span>
            <span className="mck-assist-composer-hint">⌗ {ar ? "المكتبة" : "Library"}</span>
          </div>

          <div className="mck-assist-prompt">
            {ar
              ? "راجع البند ٤.٢ في اتفاقية الخدمات، وقارن سقف المسؤولية بدليل المكتب."
              : "Review clause 4.2 of the MSA and compare the liability cap against the firm playbook."}
            <span className="mck-caret" />
          </div>

          <div className="mck-assist-chiprow">
            <span className="mck-assist-chip">
              <span className="mck-assist-chip-icon">⎘</span>
              {ar ? "ملفات" : "Files"}
              <span className="mck-assist-chip-count">3</span>
            </span>
            <span className="mck-assist-chip">
              <span className="mck-assist-chip-icon">⌕</span>
              {ar ? "بحث الأنظمة" : "Article Search"}
            </span>
            <span className="mck-assist-chip is-on">
              <span className="mck-assist-chip-icon">◇</span>
              {ar ? "تلقائي" : "Auto"}
            </span>
            <span className="mck-assist-chip">
              <span className="mck-assist-chip-icon">⌬</span>
              {ar ? "بحث موسّع" : "Full Research"}
            </span>
            <span className="mck-assist-chip-spacer" />
            <span className="mck-assist-chip mck-assist-chip-mode">
              {ar ? "تلقائي" : "Auto"} <span className="mck-assist-chip-caret">⌄</span>
            </span>
          </div>
        </div>

        <div className="mck-assist-mention">
          <div className="mck-assist-mention-head">
            <span className="mck-assist-mention-prefix">@</span>
            <span className="mck-assist-mention-tag">{ar ? "اختر وكيلاً" : "Insert agent"}</span>
          </div>
          {[
            { label: ar ? "موجز فحص نافٍ للجهالة"           : "Matter due-diligence brief",         steps: 4 },
            { label: ar ? "مراجعة بنود العقد (الأنظمة السعودية)" : "Contract clause review (Saudi law)", steps: 3 },
            { label: ar ? "مذكرة بحث تنظيمي"               : "Regulatory research memo",            steps: 3 },
          ].map((a, i) => (
            <div className={`mck-assist-mention-row ${i === 1 ? "is-hover" : ""}`} key={i}>
              <span className="mck-assist-mention-glyph">⌬</span>
              <span className="mck-assist-mention-name">{a.label}</span>
              <span className="mck-assist-mention-steps">{a.steps} {ar ? "خطوات" : "steps"}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   WORKFLOW AGENTS — Library tab with prebuilt + custom cards
   ============================================================ */

function MockWorkflows({ lang }) {
  const ar = lang === "ar";
  const tabs = [
    { k: "workflow", label: ar ? "وكلاء سير العمل" : "Workflow agents", count: 4 },
    { k: "prompts",  label: ar ? "النصوص الجاهزة"  : "Prompts" },
    { k: "play",     label: ar ? "أدلة العمل"      : "Playbooks" },
    { k: "ex",       label: ar ? "أمثلة"            : "Examples" },
  ];
  const agents = [
    {
      label: ar ? "موجز فحص نافٍ للجهالة" : "Matter due-diligence brief",
      desc:  ar
        ? "يجمع سياق القضية وأدلة الخزينة، ويصوغ موجزاً مبنياً على الأنظمة السعودية ثم يحيله للاعتماد."
        : "Pulls matter context + vault evidence, drafts a risk brief grounded in Saudi law, then routes for approval.",
      area: ar ? "عام" : "General",
      author: "F. Al-Otaibi",
      steps: 4,
      tone: "mint",
      star: true,
    },
    {
      label: ar ? "مراجعة بنود العقد (الأنظمة السعودية)" : "Contract clause review (Saudi law)",
      desc:  ar
        ? "يبحث في المكتبة النظامية عن البنود الإلزامية ذات العلاقة ويراجع العقد عليها ثم يحيله للاعتماد."
        : "Searches the Saudi legal corpus for relevant mandatory clauses, reviews against them, then routes for approval.",
      area: ar ? "عقود" : "Contracts",
      author: "M. Al-Zahrani",
      steps: 3,
      tone: "bronze",
    },
    {
      label: ar ? "مذكرة بحث تنظيمي" : "Regulatory research memo",
      desc:  ar
        ? "يجمع البحث الإلكتروني المباشر مع المكتبة النظامية السعودية لإعداد مذكرة بتحديثات اللوائح."
        : "Combines live web search with the Saudi legal corpus to draft a regulatory update memo.",
      area: ar ? "حوكمة" : "Regulatory",
      author: "K. Al-Dossari",
      steps: 3,
      tone: "violet",
    },
    {
      label: ar ? "تجهيز اتفاقية السرية" : "NDA intake & redline",
      desc:  ar
        ? "يستلم اتفاقيات السرية الواردة، يقارنها بأسلوب المكتب، ويُعيد نسخة معدّلة جاهزة للإرسال."
        : "Receives inbound NDAs, compares to firm style, returns a redlined draft ready to send.",
      area: ar ? "عقود" : "Contracts",
      author: "R. Al-Shehri",
      steps: 5,
      tone: "amber",
    },
  ];
  return (
    <div className="mck mck-wf" dir={ar ? "rtl" : "ltr"}>
      <div className="mck-wf-head">
        <div className="mck-wf-title">{ar ? "المكتبة" : "Library"}</div>
        <div className="mck-wf-search">
          <span className="mck-wf-search-icon">⌕</span>
          <span className="mck-wf-search-placeholder">{ar ? "ابحث…" : "Search"}</span>
        </div>
      </div>
      <div className="mck-wf-tabs">
        {tabs.map((tab, i) => (
          <span key={tab.k} className={`mck-wf-tab ${i === 0 ? "is-active" : ""}`}>
            {tab.label}
            {tab.count && <span className="mck-wf-tab-count">{tab.count}</span>}
          </span>
        ))}
      </div>
      <div className="mck-wf-filters">
        <span className="mck-wf-filter">☆ {ar ? "المفضّلة" : "Starred"}</span>
        <span className="mck-wf-filter">{ar ? "مجال العمل" : "Practice area"} <span className="mck-wf-filter-caret">⌄</span></span>
        <span className="mck-wf-filter">{ar ? "المُنشئ" : "Creator"} <span className="mck-wf-filter-caret">⌄</span></span>
        <span className="mck-wf-filter">{ar ? "ترتيب: الصلة" : "Sort: Relevance"} <span className="mck-wf-filter-caret">⌄</span></span>
        <span className="mck-wf-filter-spacer" />
        <span className="mck-wf-count">{agents.length} {ar ? "وكلاء" : "workflow agents"}</span>
      </div>
      <div className="mck-wf-grid">
        <div className="mck-wf-newcard">
          <span className="mck-wf-newcard-plus">+</span>
          <div>
            <div className="mck-wf-newcard-h">{ar ? "أنشئ وكيل سير عمل" : "Create a workflow agent"}</div>
            <div className="mck-wf-newcard-sub">{ar ? "أتمتة المهام المتعدّدة الخطوات." : "Automate complex multi-step tasks."}</div>
          </div>
        </div>
        {agents.map((a, i) => (
          <div className="mck-wf-card" key={i}>
            <div className="mck-wf-card-top">
              <div className={`mck-wf-card-icon tone-${a.tone}`}>
                <span className="mck-wf-card-icon-glyph">⌬</span>
              </div>
              {a.star && <span className="mck-wf-card-star">★</span>}
            </div>
            <div className="mck-wf-card-label">{a.label}</div>
            <div className="mck-wf-card-desc">{a.desc}</div>
            <div className="mck-wf-card-foot">
              <span className="mck-wf-card-area">{a.area}</span>
              <span className="mck-wf-card-steps">{a.steps} {ar ? "خطوات" : "steps"}</span>
            </div>
            <div className="mck-wf-card-author">
              <span className="mck-wf-card-avatar">{a.author.slice(0, 1)}</span>
              <span>{a.author}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   CONTRACT REVIEW  (kept; updated copy)
   ============================================================ */

function MockContract({ lang }) {
  const ar = lang === "ar";
  return (
    <div className="mck mck-contract" dir={ar ? "rtl" : "ltr"}>
      <div className="mck-doc-bar">
        <div className="mck-doc-title">
          <span className="mck-doc-icon">⌑</span>
          {ar ? "اتفاقية خدمات تقنية ـ شركة الأنظمة المتقدمة" : "Master Services Agreement — Advanced Systems Co."}
        </div>
        <div className="mck-doc-meta">
          <span className="mck-pill">{ar ? "تم الفحص" : "Reviewed"}</span>
          <span>{ar ? "٢٨ صفحة" : "28 pages"}</span>
          <span>{ar ? "الأنظمة السعودية" : "Saudi law"}</span>
        </div>
      </div>
      <div className="mck-doc-body">
        <div className="mck-doc-page">
          <div className="mck-doc-section-h">{ar ? "الفصل الرابع ـ المسؤولية والتعويض" : "Section 4 — Liability & Indemnity"}</div>
          <div className="mck-doc-p">{ar ? "تُحدِّد مسؤولية الطرف الأول عن أي إخلال بأحكام هذه الاتفاقية بقيمة الرسوم المدفوعة خلال الاثني عشر شهراً السابقة على واقعة الإخلال" : "The Provider's liability for any breach of this Agreement shall be limited to the fees paid during the twelve (12) months preceding the event giving rise to the claim"}</div>
          <div className="mck-doc-p mck-doc-flag risk-high">{ar ? "ولا يجوز للطرف الثاني المطالبة بأي تعويض عن الأضرار التبعية أو غير المباشرة أيّاً كانت طبيعتها." : ", and the Client shall not be entitled to recover consequential or indirect damages of any nature whatsoever."}</div>
          <div className="mck-doc-p">{ar ? "يلتزم الطرف الأول بتعويض الطرف الثاني عن أي مطالبات من الغير تنشأ عن انتهاك حقوق الملكية الفكرية" : "The Provider agrees to indemnify the Client against any third-party claims arising from infringement of intellectual property rights"}</div>
          <div className="mck-doc-p mck-doc-flag risk-med">{ar ? "وذلك بحدٍ أقصى لا يتجاوز قيمة العقد الإجمالية." : ", subject to a cap not exceeding the aggregate contract value."}</div>
          <div className="mck-doc-section-h">{ar ? "الفصل الخامس ـ القانون الواجب التطبيق" : "Section 5 — Governing Law"}</div>
          <div className="mck-doc-p">{ar ? "تخضع هذه الاتفاقية وتُفسَّر وفقاً لأنظمة المملكة العربية السعودية، وتختص بنظر أي نزاع ينشأ عنها المحاكم التجارية بمدينة الرياض." : "This Agreement shall be governed by and construed in accordance with the laws of the Kingdom of Saudi Arabia. The Commercial Courts of Riyadh shall have exclusive jurisdiction."}</div>
        </div>

        <aside className="mck-doc-side">
          <div className="mck-side-h">{ar ? "ملاحظات الذكاء" : "AI findings"}</div>
          <div className="mck-finding risk-high">
            <div className="mck-finding-h"><span className="risk-dot" />{ar ? "خطر عالٍ" : "High risk"}</div>
            <div className="mck-finding-t">{ar ? "إقصاء كامل للأضرار التبعية يتعارض مع دليل المكتب (المادة ٣.٢)." : "Total exclusion of consequential damages conflicts with firm playbook §3.2."}</div>
            <div className="mck-finding-cite">{ar ? "بند ٤.٢" : "Clause 4.2"}</div>
          </div>
          <div className="mck-finding risk-med">
            <div className="mck-finding-h"><span className="risk-dot" />{ar ? "خطر متوسط" : "Medium risk"}</div>
            <div className="mck-finding-t">{ar ? "سقف التعويض غير معتاد للقطاع. اقتراح: ضعف القيمة." : "Indemnity cap is below market. Suggest: 2× contract value."}</div>
            <div className="mck-finding-cite">{ar ? "بند ٤.٤" : "Clause 4.4"}</div>
          </div>
          <div className="mck-finding risk-info">
            <div className="mck-finding-h"><span className="risk-dot" />{ar ? "ملاحظة" : "Note"}</div>
            <div className="mck-finding-t">{ar ? "بنود الاختصاص متوافقة مع نظام المحاكم التجارية." : "Jurisdiction clause aligned with the Commercial Courts Law."}</div>
            <div className="mck-finding-cite">{ar ? "بند ٥.١" : "Clause 5.1"}</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

/* ============================================================
   DRAFTING  (kept)
   ============================================================ */

function MockDrafting({ lang }) {
  const ar = lang === "ar";
  return (
    <div className="mck mck-drafting" dir={ar ? "rtl" : "ltr"}>
      <div className="mck-edit-toolbar">
        <div className="mck-edit-title">
          <span className="mck-doc-icon">⌑</span>
          {ar ? "مذكرة قانونية ـ قضية الإيجار التجاري" : "Memorandum — Commercial Lease Dispute"}
        </div>
        <div className="mck-edit-actions">
          <span className="mck-chip">{ar ? "العربية" : "Arabic"}</span>
          <span className="mck-chip mck-chip-soft">{ar ? "أسلوب المكتب" : "Firm style"}</span>
          <span className="mck-chip mck-chip-soft">{ar ? "محكمة تجارية" : "Commercial court"}</span>
        </div>
      </div>
      <div className="mck-edit-body">
        <div className="mck-edit-page">
          <h4 className="mck-edit-h">{ar ? "أولاً: الوقائع" : "I. Statement of Facts"}</h4>
          <p>{ar ? "أبرم الموكّل عقد إيجار تجاري مع المدّعى عليه بتاريخ ١٤٤٣/٠٣/١٥ هـ، تتضمّن مدته خمس سنوات قابلة للتجديد"
                : "On 15 Rabi' I, 1443 AH the Client entered into a commercial lease with the Respondent for an initial term of five (5) years, subject to renewal"}<span className="mck-ins">{ar ? "بإشعار خطّي قبل ستين يوماً من نهاية المدة" : " upon ninety (60) days' prior written notice"}</span>.</p>
          <p>{ar ? "أخلّ المدّعى عليه بسداد الأجرة المستحقّة عن الربع الأخير من السنة المالية"
                : "The Respondent defaulted on rent due for the final quarter of the fiscal year"} <span className="mck-del">{ar ? "بقيمة ٤٢٠٬٠٠٠ ريال" : ", in the amount of SAR 420,000"}</span><span className="mck-ins">{ar ? ", بقيمة إجمالية قدرها أربعمئة وعشرون ألف ريال سعودي (٤٢٠٬٠٠٠ ر.س)" : ", in the aggregate amount of four hundred and twenty thousand Saudi Riyals (SAR 420,000)"}</span>.</p>
          <h4 className="mck-edit-h">{ar ? "ثانياً: الأسانيد النظامية" : "II. Legal Basis"}</h4>
          <p>{ar ? "تستند الموكلة إلى نظام المحاكم التجارية، ولا سيما المادة (١٦) منه، والمادة (٧٤) من نظام الإيجارات"
                : "The Client relies on the Commercial Courts Law, in particular Article 16 thereof, and Article 74 of the Tenancy Regulation"}.</p>
        </div>

        <aside className="mck-edit-side">
          <div className="mck-side-h">{ar ? "اقتراحات الذكاء" : "AI suggestions"}</div>
          <div className="mck-sugg">
            <div className="mck-sugg-tag">{ar ? "تحسين" : "Improve"}</div>
            <div className="mck-sugg-t">{ar ? "أضف فترة الإشعار لتجنّب الغموض في حق التجديد." : "Add the notice period to remove ambiguity in the renewal clause."}</div>
            <div className="mck-sugg-applied">{ar ? "تم التطبيق ✓" : "Applied ✓"}</div>
          </div>
          <div className="mck-sugg">
            <div className="mck-sugg-tag">{ar ? "صياغة" : "Style"}</div>
            <div className="mck-sugg-t">{ar ? "اكتب القيمة بالحروف والأرقام وفق أسلوب المكتب." : "Write monetary value in words and figures per firm style."}</div>
            <div className="mck-sugg-applied">{ar ? "تم التطبيق ✓" : "Applied ✓"}</div>
          </div>
          <div className="mck-sugg">
            <div className="mck-sugg-tag">{ar ? "مرجع" : "Cite"}</div>
            <div className="mck-sugg-t">{ar ? "أضف الإحالة إلى نظام الإيجارات ـ المادة ٧٤." : "Add citation to Tenancy Regulation — Art. 74."}</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

/* ============================================================
   AGENT BUILDER  (DAG canvas — drag legal tools, wire into a graph)
   ============================================================ */

function MockBuilder({ lang, keepLtr }) {
  const ar = lang === "ar";
  // node positions on a 1000x500 logical canvas
  const nodes = [
    { id: "in",   x:  40, y: 210, kind: "input",  label: ar ? "سياق القضية" : "Matter context",    tone: "ink"     },
    { id: "vlt",  x: 230, y: 100, kind: "tool",   label: ar ? "بحث الخزينة" : "Vault search",      tone: "mint",   sub: ar ? "أدلّة" : "evidence" },
    { id: "stat", x: 230, y: 220, kind: "tool",   label: ar ? "بحث الأنظمة" : "Statute lookup",    tone: "bronze", sub: ar ? "نظام العمل" : "Labor Law" },
    { id: "case", x: 230, y: 340, kind: "tool",   label: ar ? "السوابق" : "Case search",           tone: "violet", sub: ar ? "م.ع." : "Labor Ct." },
    { id: "rsn",  x: 470, y: 220, kind: "reason", label: ar ? "تحليل المخاطر" : "Risk reasoning",  tone: "amber"   },
    { id: "drf",  x: 680, y: 130, kind: "draft",  label: ar ? "صياغة الموجز" : "Draft brief",      tone: "mint"    },
    { id: "ver",  x: 680, y: 320, kind: "check",  label: ar ? "تدقيق المراجع" : "Cite check",      tone: "bronze"  },
    { id: "app",  x: 890, y: 220, kind: "gate",   label: ar ? "بوابة اعتماد" : "Approval gate",    tone: "ink",    sub: ar ? "أ. الزهراني" : "M. Al-Zahrani" },
  ];
  const edges = [
    ["in","vlt"], ["in","stat"], ["in","case"],
    ["vlt","rsn"], ["stat","rsn"], ["case","rsn"],
    ["rsn","drf"], ["rsn","ver"],
    ["drf","app"], ["ver","app"],
  ];
  const W = 1000, H = 500, NW = 140, NH = 56;
  const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]));
  // edge anchors: right side of source, left side of target (logical LTR — we
  // flip the SVG transform for RTL further down via container css)
  const edgePath = (a, b) => {
    const sx = a.x + NW, sy = a.y + NH / 2;
    const tx = b.x,      ty = b.y + NH / 2;
    const dx = (tx - sx) * 0.45;
    return `M ${sx} ${sy} C ${sx + dx} ${sy}, ${tx - dx} ${ty}, ${tx} ${ty}`;
  };
  return (
    <div className="mck mck-bld" dir={keepLtr ? "ltr" : (ar ? "rtl" : "ltr")}>
      <div className="mck-bld-bar">
        <div className="mck-bld-bar-l">
          <span className="mck-bld-betatag">{ar ? "تشغيل المخطّط ـ تجريبي" : "DAG runtime · beta"}</span>
          <span className="mck-bld-name">
            <span className="mck-doc-icon">⌬</span>
            {ar ? "موجز فحص نافٍ للجهالة" : "Matter due-diligence brief"}
          </span>
        </div>
        <div className="mck-bld-bar-r">
          <span className="mck-bld-status">
            <span className="mck-bld-status-dot" />
            {ar ? "محفوظ" : "Saved"}
          </span>
          <span className="mck-bld-runbtn">▶ {ar ? "تشغيل" : "Run"}</span>
        </div>
      </div>

      <div className="mck-bld-body">
        <aside className="mck-bld-palette">
          <div className="mck-side-h">{ar ? "الأدوات" : "Tools"}</div>
          {[
            { g: "⌕", l: ar ? "بحث الأنظمة" : "Statute lookup",   tone: "bronze" },
            { g: "▤", l: ar ? "بحث الخزينة" : "Vault search",      tone: "mint"   },
            { g: "⚖", l: ar ? "السوابق"     : "Case search",       tone: "violet" },
            { g: "◇", l: ar ? "تحليل المخاطر" : "Risk reasoning",  tone: "amber"  },
            { g: "⌑", l: ar ? "صياغة"       : "Draft document",   tone: "mint"   },
            { g: "✓", l: ar ? "تدقيق المراجع" : "Cite check",      tone: "bronze" },
            { g: "▦", l: ar ? "جدول مراجعة"  : "Review table",     tone: "ink"    },
            { g: "⎙", l: ar ? "بوابة اعتماد"  : "Approval gate",   tone: "ink"    },
          ].map((t, i) => (
            <div className="mck-bld-tool" key={i}>
              <span className={`mck-bld-tool-icon tone-${t.tone}`}>{t.g}</span>
              <span className="mck-bld-tool-label">{t.l}</span>
              <span className="mck-bld-tool-grip">⋮⋮</span>
            </div>
          ))}
        </aside>

        <div className="mck-bld-canvas">
          <div className="mck-bld-canvas-grid" />
          <svg className="mck-bld-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
            <defs>
              <marker id="bld-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="rgba(201,168,118,0.6)" />
              </marker>
            </defs>
            {edges.map(([a, b], i) => (
              <path
                key={i}
                d={edgePath(nodeMap[a], nodeMap[b])}
                stroke="rgba(201,168,118,0.45)"
                strokeWidth="1.4"
                fill="none"
                markerEnd="url(#bld-arrow)"
              />
            ))}
          </svg>

          {nodes.map((n) => (
            <div
              key={n.id}
              className={`mck-bld-node kind-${n.kind} tone-${n.tone}`}
              style={{
                left: `${(n.x / W) * 100}%`,
                top:  `${(n.y / H) * 100}%`,
                width: `${(NW / W) * 100}%`,
                height: `${(NH / H) * 100}%`,
              }}
            >
              <span className="mck-bld-node-glyph">⌬</span>
              <span className="mck-bld-node-body">
                <span className="mck-bld-node-label">{n.label}</span>
                {n.sub && <span className="mck-bld-node-sub">{n.sub}</span>}
              </span>
            </div>
          ))}

          <div className="mck-bld-runtrace">
            <div className="mck-bld-runtrace-row"><span className="mck-bld-runtrace-dot ok" /><span>{ar ? "بحث الأنظمة" : "Statute lookup"}</span><span className="mck-bld-runtrace-t">1.2s</span></div>
            <div className="mck-bld-runtrace-row"><span className="mck-bld-runtrace-dot ok" /><span>{ar ? "بحث الخزينة" : "Vault search"}</span><span className="mck-bld-runtrace-t">0.8s</span></div>
            <div className="mck-bld-runtrace-row"><span className="mck-bld-runtrace-dot live" /><span>{ar ? "تحليل المخاطر" : "Risk reasoning"}</span><span className="mck-bld-runtrace-t">{ar ? "جارٍ" : "running"}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   CITATIONS  (kept)
   ============================================================ */

function MockCitations({ lang }) {
  const ar = lang === "ar";
  const cites = [
    { num: 1, src: ar ? "نظام العمل ـ المادة ٧٧"           : "Labor Law — Article 77",          court: ar ? "م.ن.ع ١٤٢٦هـ" : "Royal Decree M/51",       state: "verified" },
    { num: 2, src: ar ? "اللائحة التنفيذية ـ المادة ٤٨"     : "Implementing Reg. — Art. 48",      court: ar ? "قرار وزاري ١١٥٩٢١" : "Min. Decision 115921", state: "verified" },
    { num: 3, src: ar ? "نظام العمل ـ المادة ٨٠"           : "Labor Law — Article 80",          court: ar ? "م.ن.ع ١٤٢٦هـ" : "Royal Decree M/51",       state: "verified" },
    { num: 4, src: ar ? "نظام المحاكم التجارية ـ المادة ١٦" : "Commercial Courts Law — Art. 16",  court: ar ? "م.ن.ع ١٤٤١هـ" : "Royal Decree M/93",       state: "verified" },
    { num: 5, src: ar ? "نظام حماية البيانات الشخصية"     : "Personal Data Protection Law",       court: ar ? "م.ن.ع ١٤٤٣هـ" : "Royal Decree M/19",       state: "updated" },
    { num: 6, src: ar ? "نظام المعاملات المدنية ـ المادة ١٧٣" : "Civil Transactions Law — Art. 173", court: ar ? "م.ن.ع ١٤٤٤هـ" : "Royal Decree M/191",      state: "verified" },
  ];
  return (
    <div className="mck mck-cites" dir={ar ? "rtl" : "ltr"}>
      <div className="mck-cite-head">
        <div className="mck-side-h">{ar ? "تدقيق المراجع" : "Citation audit"}</div>
        <div className="mck-cite-summary">
          <span className="mck-cite-stat"><strong>6</strong>{ar ? "مرجع" : "Citations"}</span>
          <span className="mck-cite-stat"><strong>6</strong>{ar ? "موثّق" : "Verified"}</span>
          <span className="mck-cite-stat"><strong>0</strong>{ar ? "غير صحيح" : "Hallucinated"}</span>
        </div>
      </div>
      <div className="mck-cite-list">
        {cites.map((c) => (
          <div className="mck-cite-row" key={c.num}>
            <div className="mck-cite-num">[{c.num}]</div>
            <div className="mck-cite-main">
              <div className="mck-cite-src">{c.src}</div>
              <div className="mck-cite-court">{c.court}</div>
            </div>
            <div className={`mck-cite-state state-${c.state}`}>
              <span className="state-dot" />
              {c.state === "verified" ? (ar ? "موثّق" : "Verified") : (ar ? "تم التحديث" : "Updated")}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const MOCKS = {
  assistant: MockAssistant,
  workflows: MockWorkflows,
  contract:  MockContract,
  drafting:  MockDrafting,
  builder:   MockBuilder,
  citations: MockCitations,
};

/* ----------- SHOWCASE wrapper ----------- */

function Showcase({ lang }) {
  const copy = SHOWCASE_COPY[lang];
  const [active, setActive] = useState("assistant");
  const Active = MOCKS[active] || MockAssistant;

  return (
    <section className="showcase" id="platform">
      <div className="container">
        <div className="showcase-head">
          <div className="eyebrow">{copy.eyebrow}</div>
          <h2 className="showcase-title">{copy.title}</h2>
          <p className="showcase-lede">{copy.lede}</p>
        </div>

        <div className="showcase-tabs-row">
          <div className="showcase-tabs-label">{copy.tabsLabel}</div>
          <div className="showcase-tabs" role="tablist">
            {copy.tabs.map((tab) => (
              <button
                key={tab.key}
                role="tab"
                aria-selected={active === tab.key}
                className={`showcase-tab ${active === tab.key ? "is-active" : ""}`}
                onClick={() => setActive(tab.key)}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        <div className="showcase-panel">
          <div className="showcase-mock-enter" key={active}>
            <Active lang={lang} />
          </div>
        </div>

        <div className="showcase-foot">
          <a href="#product" className="btn btn-link">{copy.cta} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Showcase, SHOWCASE_COPY });