/* MANARA — How It Works overlay page (FULL BILINGUAL — EN + AR with RTL) */

const { useEffect: useEffectHelp } = React;

const HELP_T = {
  en: {
    eyebrowMission:   'NATIONAL COMMAND CENTER · MINISTRY OF INTERIOR',
    title1:           'One Wall.\nOne Story.\nEvery Department.',
    lede1:            "MANARA brings the operational reality of the entire Ministry of Interior onto a single, unified executive surface. Ten directorates, three operational phases, seven incident-lifecycle stages, and seven emirates — woven together by AI agents that decide what deserves leadership attention at every moment.",

    eyebrowProblem:   'WHY MANARA EXISTS',
    titleProblem:     'Why a single wall, instead of ten dashboards',
    ledeProblem:      "Today, leadership awareness depends on reports — filed, summarized, escalated. Reports are slow, partial, and asymmetric across the ten directorates. MANARA replaces that loop with one continuous surface where the same operational truth is visible to everyone, in real time, without anyone having to ask.",
    problems: [
      { num: '01', title: 'Report-driven awareness',         body: "Critical events reach leadership through chains of summarization. By the time a report lands, the field operation has often moved on." },
      { num: '02', title: 'Departmental silos',              body: "Each directorate has its own dashboards, KPI definitions, and reporting cadence. Cross-department dynamics are invisible from any single view." },
      { num: '03', title: 'Asymmetric data fluency',         body: "Some departments report on dashboards, some on PowerPoint, some by phone. Leadership cannot compare like with like." },
      { num: '04', title: 'No surface for AI to surface',    body: "Wonderful agents already monitor every domain — but without a unified wall, their insights have no place to land in front of leadership." }
    ],

    eyebrowArch:      'THE ARCHITECTURE',
    titleArch:        'How everything fits together',
    ledeArch:         "The wall is organized around one simple narrative: every incident, signal, or KPI flows through a seven-stage lifecycle, grouped into three operational phases. The ten directorates don't sit in separate dashboards — they contribute to all three phases simultaneously, across all seven emirates.",
    archFedBy:        '— Fed by 10 General Directorates —',
    archAcross:       '— Across the 7 Emirates —',
    archCalloutLabel: 'The logic in one sentence',
    archCalloutBody:  "Every signal that reaches the wall has a department of origin, a phase of life, a stage within that phase, and a geographic location across the seven emirates. The four dimensions —",
    archCalloutKey:   'department × phase × stage × geography',
    archCalloutTail:  '— are how the wall organizes everything you see.',

    eyebrowPipeline:  'THE PIPELINE',
    titlePipeline:    'Seven stages, three phases, one flow',
    ledePipeline:     "Every incident — whether a traffic accident, a cyber intrusion, a fire alert, or a border anomaly — follows the same lifecycle. Visualizing this lifecycle as a continuous left-to-right pipeline lets leadership see at a glance where operations are accelerating, where they're bottlenecked, and where outcomes are being delivered.",
    pipelineCalloutLabel: 'Why the pipeline matters',

    eyebrowDept:      'THE DIRECTORATES',
    titleDept:        'How each directorate flows through the lifecycle',
    ledeDept:         "Every General Directorate contributes to all three phases simultaneously. Crime detects incidents, responds with patrols, and delivers clearance rates. Civil Defense detects fires through Hassantuk, responds with crews, and delivers prevention outcomes. The wall shows them woven together, not in silos.",
    flowDetect:       'Detect',
    flowRespond:      'Respond',
    flowDeliver:      'Deliver',

    eyebrowAi:        'THE AI LAYER',
    titleAi:          'Ten Wonderful agents.\nAlways watching. Always prioritizing.',
    ledeAi:           "Because the wall has no navigation and no clicks, AI has to decide what appears on it. Each of the ten directorates has a dedicated Wonderful agent that monitors its domain continuously. They don't wait to be asked. They analyze patterns across systems and surface what deserves leadership attention.",
    aiHowEyebrow:     'HOW THE AI DECIDES WHAT REACHES THE WALL',
    aiHowLede:        "Every signal, KPI shift, and event gets a leadership-relevance score from 0–100 based on four dimensions. Only items above the threshold appear in expanded form. Everything else stays compact so leadership sees that monitoring is comprehensive even when no detail is shown.",
    aiPositiveLabel:  'Positive events are first-class',
    aiPositiveBody1:  'The AI surfaces achievements alongside threats. "Hassantuk has prevented its 401st fire — programme 18% above quarterly target" earns its place on the wall just as much as a critical alert. The wall must feel',
    aiPositiveKey:    'balanced and confident',
    aiPositiveBody2:  ', not alarmist.',

    eyebrowVoice:     'CONVERSATIONAL INTELLIGENCE',
    titleVoice:       'Speak to the wall.\nThe wall reorganizes.',
    ledeVoice:        "The wall is read, not clicked. But leadership can speak to it. Through Wonderful's conversational layer, a minister or briefing officer can ask the wall questions in natural Arabic or English and watch the surface reorganize around the answer — the map flies to the relevant area, the right departments expand, the AI insight bar answers in plain language.",
    askMan:           'Ask MANARA',
    askManSub:        'A persistent voice affordance in the top strip — always listening, never demanding.',
    voiceQueryIcon:   '?',
    voiceResponseLabel: '→ The Wall Responds',

    eyebrowMap:       'THE LIVING MAP',
    titleMap:         'A satellite view that breathes',
    ledeMap:          "The center of the wall is a Mapbox-powered satellite view of the UAE that never sits still. When no one is watching, the camera cinematically circulates between operational centers across the seven emirates. When voice commands come in, the same map becomes the focal point of the answer.",
    mapCaption:       'INDICATIVE — REAL MAP USES MAPBOX SATELLITE-STREETS-V12',

    eyebrowAnatomy:   'THE WALL · ELEMENT BY ELEMENT',
    titleAnatomy:     'Every element on the wall, explained',
    ledeAnatomy:      "Nothing on the wall is decorative. Every chip, number, color, animation, and position carries meaning. Here is the inventory — every persistent element you will see, what it tells leadership, and the design decision behind it.",

    eyebrowPractice:  'BEST PRACTICES THIS WALL EMBODIES',
    titlePractice:    'The principles behind every choice',
    ledePractice:     "MANARA isn't just a dashboard — it's an opinionated answer to a hard question: what does an executive surface look like when the audience never clicks, the data never stops, and the consequences are national? These are the principles we hold ourselves to.",

    eyebrowTimeline:  'THE WHOLE PICTURE',
    titleTimeline:    'How a single moment plays out on the wall',
    ledeTimeline:     "Imagine 14:23 on a Tuesday afternoon. Here is what happens when an incident reaches the wall — and how every layer of the system contributes to leadership awareness within seconds.",
    timelineCalloutLabel: 'The story that never needed a report',
    timelineCalloutBody1: "Leadership saw the event the moment it crossed the relevance threshold. They watched it move through the pipeline. They saw the cross-departmental coordination. They saw the resolution.",
    timelineCalloutKey:   'Without filing a single report. Without clicking once.',
    timelineCalloutBody2: 'That is what MANARA is for.',

    footerMinistry: 'NATIONAL COMMAND CENTER · UAE MINISTRY OF INTERIOR',
    footerPowered:  'POWERED BY',
    footerTail:     '· wonderful.ai · Enterprise AI Agent Platform'
  },
  ar: {
    eyebrowMission:   'مركز القيادة الوطني · وزارة الداخلية',
    title1:           'جدارٌ واحد.\nقصةٌ واحدة.\nكل الإدارات.',
    lede1:            "تجمع منصة منارة الواقع التشغيلي لوزارة الداخلية بأكمله على سطحٍ تنفيذيٍّ واحدٍ موحَّد. عشر إدارات عامة، وثلاث مراحل تشغيلية، وسبع مراحل في دورة حياة الحادث، وسبع إمارات — ينسجها معاً عملاء ذكاء اصطناعي يقررون ما يستحق انتباه القيادة في كل لحظة.",

    eyebrowProblem:   'لماذا أنشئت منارة',
    titleProblem:     'لماذا جدارٌ واحد بدلاً من عشر لوحات',
    ledeProblem:      "اليوم، يعتمد إدراك القيادة على التقارير — تُعدّ، وتُلخَّص، وتُرفع. والتقارير بطيئة، وجزئية، وغير متناظرة بين الإدارات العشر. تستبدل منارة هذه الحلقة بسطحٍ متواصلٍ واحد، تُرى فيه الحقيقة التشغيلية ذاتها للجميع، في الوقت الفعلي، دون أن يضطر أحدٌ إلى السؤال.",
    problems: [
      { num: '٠١', title: 'إدراكٌ مدفوعٌ بالتقارير',          body: "تصل الأحداث الحرجة إلى القيادة عبر سلاسل من التلخيص. وحين يصل التقرير، تكون العملية الميدانية قد تجاوزت تلك المرحلة." },
      { num: '٠٢', title: 'صوامع إدارية',                       body: "لكل إدارةٍ لوحاتها وتعريفاتها للمؤشرات وإيقاع رفعها للتقارير. والديناميكيات بين الإدارات غير مرئية من أي عرضٍ منفرد." },
      { num: '٠٣', title: 'تفاوت في إتقان البيانات',           body: "بعض الإدارات ترفع على لوحات، وبعضها على عروض تقديمية، وبعضها هاتفياً. ولا تستطيع القيادة المقارنة بين متماثلَين." },
      { num: '٠٤', title: 'لا سطح للذكاء الاصطناعي',          body: "عملاء Wonderful يراقبون كل المجالات — لكن دون جدارٍ موحَّد، لا تجد رؤاهم مكاناً تحطّ فيه أمام القيادة." }
    ],

    eyebrowArch:      'البنية',
    titleArch:        'كيف تتلاقى كل العناصر',
    ledeArch:         "ينظَّم الجدار حول سرديةٍ واحدة بسيطة: كل إشارةٍ أو حادثٍ أو مؤشرٍ يمر بدورة حياةٍ من سبع مراحل، مجمَّعة في ثلاث مراحل تشغيلية. الإدارات العشر لا تجلس في لوحاتٍ منفصلة — بل تساهم في المراحل الثلاث في الوقت ذاته، عبر الإمارات السبع.",
    archFedBy:        '— تغذّيها ١٠ إدارات عامة —',
    archAcross:       '— عبر الإمارات السبع —',
    archCalloutLabel: 'المنطق في جملة واحدة',
    archCalloutBody:  "كل إشارةٍ تصل إلى الجدار لها إدارةٌ منشأ، ومرحلة حياة، ومرحلةٌ ضمن تلك المرحلة، وموقعٌ جغرافيٌّ ضمن الإمارات السبع. الأبعاد الأربعة —",
    archCalloutKey:   'الإدارة × المرحلة × المرحلة الفرعية × الجغرافيا',
    archCalloutTail:  '— هي ما ينظَّم به كل ما ترونه على الجدار.',

    eyebrowPipeline:  'خط الأنابيب',
    titlePipeline:    'سبع مراحل، ثلاث مراحل تشغيلية، تدفقٌ واحد',
    ledePipeline:     "كل حادث — سواءٌ كان حادث مرور، أو اختراقاً سيبرانياً، أو إنذار حريق، أو شذوذاً عند المنافذ — يتبع دورة الحياة ذاتها. تصوير هذه الدورة كخط أنابيب متواصل من اليسار إلى اليمين يجعل القيادة ترى بنظرةٍ واحدة أين تتسارع العمليات، وأين تعاني عنق الزجاجة، وأين تتحقق النتائج.",
    pipelineCalloutLabel: 'لماذا يهم خط الأنابيب',

    eyebrowDept:      'الإدارات العامة',
    titleDept:        'كيف تتدفق كل إدارةٍ عبر دورة الحياة',
    ledeDept:         "كل إدارةٍ عامة تساهم في المراحل الثلاث في الوقت ذاته. الشرطة الجنائية تكشف الحوادث، وتستجيب بالدوريات، وتحقق معدلات الحل. الدفاع المدني يكشف الحرائق عبر حصنتك، ويستجيب بالفرق، ويحقق نتائج الوقاية. يُظهرها الجدار منسوجةً معاً، لا منعزلة.",
    flowDetect:       'كشف',
    flowRespond:      'استجابة',
    flowDeliver:      'إنجاز',

    eyebrowAi:        'طبقة الذكاء الاصطناعي',
    titleAi:          'عشرة عملاء Wonderful.\nيراقبون دائماً، يرتّبون الأولوية دائماً.',
    ledeAi:           "بما أن الجدار بلا تنقّلٍ ولا نقرات، فإن الذكاء الاصطناعي هو من يقرر ما يظهر عليه. لكل واحدةٍ من الإدارات العشر عميلٌ من Wonderful يراقب مجاله باستمرار. لا ينتظرون السؤال. يحلّلون الأنماط عبر الأنظمة ويُبرزون ما يستحق انتباه القيادة.",
    aiHowEyebrow:     'كيف يقرّر الذكاء الاصطناعي ما يصل إلى الجدار',
    aiHowLede:        "كل إشارة، وتغيُّر مؤشر، وحدث يحصل على درجة أهمية تنفيذية من ٠ إلى ١٠٠ بناءً على أربعة أبعاد. فقط ما يتجاوز العتبة يظهر في صورته الموسَّعة. يبقى ما عداه مكثَّفاً ليرى المسؤولون أن الرقابة شاملة حتى حين لا تُعرض التفاصيل.",
    aiPositiveLabel:  'الإنجازات الإيجابية أولوية أيضاً',
    aiPositiveBody1:  'يُبرز الذكاء الاصطناعي الإنجازات إلى جانب التهديدات. "حصنتك حال دون وقوع حريقها الـ٤٠١ — البرنامج يتفوق ١٨٪ على الهدف الفصلي" يستحق مكاناً على الجدار مثل أي تنبيهٍ حرج. يجب أن يبدو الجدار',
    aiPositiveKey:    'متوازناً وواثقاً',
    aiPositiveBody2:  '، لا منذراً بالفزع.',

    eyebrowVoice:     'الذكاء الحواري',
    titleVoice:       'تحدّث إلى الجدار.\nيُعيد الجدار ترتيبه.',
    ledeVoice:        "الجدار يُقرأ، لا يُنقر عليه. ومع ذلك تستطيع القيادة التحدث إليه. عبر طبقة Wonderful الحوارية، يستطيع الوزير أو ضابط الإحاطة سؤال الجدار بالعربية أو الإنجليزية الطبيعية، فيُعيد السطح ترتيبه حول الإجابة — تطير الخريطة إلى المنطقة المعنية، تتوسّع الإدارات الصحيحة، ويجيب شريط الرؤى بلغةٍ مفهومة.",
    askMan:           'اسأل منارة',
    askManSub:        'أداة صوتية ثابتة في الشريط العلوي — تستمع دائماً، لا تطلب من أحد شيئاً.',
    voiceQueryIcon:   '؟',
    voiceResponseLabel: '← يستجيب الجدار',

    eyebrowMap:       'الخريطة الحيّة',
    titleMap:         'صورة قمرٍ صناعي تتنفّس',
    ledeMap:          "في قلب الجدار خريطة قمرٍ صناعي للإمارات بقوة Mapbox، لا تستقر أبداً. حين لا يكون أحدٌ يرقبها، تتنقل الكاميرا سينمائياً بين مراكز العمليات في الإمارات السبع. وحين تأتي الأوامر الصوتية، تصبح الخريطة ذاتها بؤرة الإجابة.",
    mapCaption:       'إيضاحي — الخريطة الفعلية تستخدم MAPBOX SATELLITE-STREETS-V12',

    eyebrowAnatomy:   'الجدار · عنصراً عنصرا',
    titleAnatomy:     'كل عنصرٍ على الجدار، شُرح',
    ledeAnatomy:      "لا شيء على الجدار من باب الزينة. كل شارة ورقم ولون وحركة وموقع تحمل معنى. هنا الجرد — كل عنصرٍ ثابتٍ ستراه، وما يخبر القيادة به، والقرار التصميمي وراءه.",

    eyebrowPractice:  'الممارسات التي يجسّدها هذا الجدار',
    titlePractice:    'المبادئ خلف كل اختيار',
    ledePractice:     "منارة ليست مجرد لوحة — إنها إجابةٌ ذات موقفٍ واضح على سؤالٍ صعب: كيف يبدو السطح التنفيذي حين لا ينقر الجمهور أبداً، ولا تتوقف البيانات أبداً، وحين تكون العواقب وطنية؟ هذه هي المبادئ التي نلتزم بها.",

    eyebrowTimeline:  'الصورة الكاملة',
    titleTimeline:    'كيف تجري لحظةٌ واحدة على الجدار',
    ledeTimeline:     "تخيّل الساعة ١٤:٢٣ من ظهر الثلاثاء. هذا ما يحدث حين يصل حادثٌ إلى الجدار — وكيف تساهم كل طبقةٍ من النظام في إدراك القيادة في غضون ثوانٍ.",
    timelineCalloutLabel: 'القصة التي لم تحتج إلى تقرير',
    timelineCalloutBody1: "رأت القيادة الحدث في اللحظة التي تجاوز فيها عتبة الأهمية. شاهدته يتحرك عبر خط الأنابيب. رأت التنسيق بين الإدارات. رأت الحل.",
    timelineCalloutKey:   'دون رفع تقريرٍ واحد. دون نقرةٍ واحدة.',
    timelineCalloutBody2: 'هذا ما وُجدت من أجله منارة.',

    footerMinistry: 'مركز القيادة الوطني · وزارة الداخلية لدولة الإمارات العربية المتحدة',
    footerPowered:  'مُشغَّلة بواسطة',
    footerTail:     '· wonderful.ai · منصة Wonderful لعملاء الذكاء الاصطناعي للمؤسسات'
  }
};

const ARCH_PHASES = {
  en: [
    { key: 'detect',  label: 'DETECT',  color: '#8B5CF6', stages: [{n:'1',name:'Signal'},{n:'2',name:'Detection'}],
      desc: 'Where intelligence is gathered, anomalies are flagged, and threats are identified before they escalate.' },
    { key: 'respond', label: 'RESPOND', color: '#F97316', stages: [{n:'3',name:'Triage'},{n:'4',name:'Assignment'},{n:'5',name:'Active Response'}],
      desc: 'Where resources are triaged, units are assigned, and field operations are coordinated in real time.' },
    { key: 'deliver', label: 'DELIVER', color: '#22C55E', stages: [{n:'6',name:'Resolution'},{n:'7',name:'Outcome'}],
      desc: 'Where outcomes are measured, cases are closed, and policy impact is reported to leadership.' }
  ],
  ar: [
    { key: 'detect',  label: 'كشف',     color: '#8B5CF6', stages: [{n:'١',name:'إشارة'},{n:'٢',name:'كشف'}],
      desc: 'حيث تُجمع المعلومات، وتُرصد المفارقات، وتُعرَّف التهديدات قبل أن تتفاقم.' },
    { key: 'respond', label: 'استجابة', color: '#F97316', stages: [{n:'٣',name:'فرز'},{n:'٤',name:'إسناد'},{n:'٥',name:'استجابة نشطة'}],
      desc: 'حيث تُفرز الموارد، وتُسند الوحدات، وتُنسَّق العمليات الميدانية في الوقت الفعلي.' },
    { key: 'deliver', label: 'إنجاز',   color: '#22C55E', stages: [{n:'٦',name:'حل'},{n:'٧',name:'أثر'}],
      desc: 'حيث تُقاس النتائج، وتُغلق الحالات، ويُرفع الأثر السياساتي للقيادة.' }
  ]
};

const DEPT_BILINGUAL = [
  { en: 'Civil Defense',                 ar: 'الدفاع المدني' },
  { en: 'GDRFA — Residency',             ar: 'الإقامة وشؤون الأجانب' },
  { en: 'Traffic Coordination',          ar: 'التنسيق المروري' },
  { en: 'Federal Criminal Police',       ar: 'الشرطة الجنائية الاتحادية' },
  { en: 'Smart Services',                ar: 'الخدمات الذكية' },
  { en: 'Central Operations',            ar: 'العمليات المركزية' },
  { en: 'Strategy & Performance',        ar: 'الاستراتيجية' },
  { en: 'Punitive & Correctional',       ar: 'المؤسسات العقابية' },
  { en: 'Community Police',              ar: 'الشرطة المجتمعية' },
  { en: 'ICP — Identity & Ports',        ar: 'الهوية والمنافذ' }
];

const EMIRATES = {
  en: ['Abu Dhabi','Dubai','Sharjah','Ajman','Umm Al Quwain','Ras Al Khaimah','Fujairah'],
  ar: ['أبوظبي','دبي','الشارقة','عجمان','أم القيوين','رأس الخيمة','الفجيرة']
};

const PIPELINE_STAGES = {
  en: [
    { num:'01', phase:'DETECT',  color:'#8B5CF6', name:'Signal',          desc:'Continuous ambient monitoring across CCTV, IoT, biometrics, and sensors.' },
    { num:'02', phase:'DETECT',  color:'#8B5CF6', name:'Detection',       desc:'AI flags anomalies, threshold breaches, and pattern matches across systems.' },
    { num:'03', phase:'RESPOND', color:'#F97316', name:'Triage',          desc:'Severity classification and resource matching against the incident profile.' },
    { num:'04', phase:'RESPOND', color:'#F97316', name:'Assignment',      desc:'Nearest unit dispatched. Mobile notification with location and context.' },
    { num:'05', phase:'RESPOND', color:'#F97316', name:'Active Response', desc:'Field operations live. Multi-agency coordination. Real-time status updates.' },
    { num:'06', phase:'DELIVER', color:'#22C55E', name:'Resolution',      desc:'Case closed. Evidence filed. Report generated. Strategic KPIs updated.' },
    { num:'07', phase:'DELIVER', color:'#22C55E', name:'Outcome',         desc:'Citizen impact measured. Policy effectiveness assessed. Learning fed back.' }
  ],
  ar: [
    { num:'٠١', phase:'كشف',     color:'#8B5CF6', name:'إشارة',          desc:'رصدٌ بيئيٌّ متواصل عبر كاميرات المراقبة وإنترنت الأشياء والبصمات الحيوية والمستشعرات.' },
    { num:'٠٢', phase:'كشف',     color:'#8B5CF6', name:'كشف',            desc:'يرصد الذكاء الاصطناعي المفارقات، واختراق الحدود، وتطابق الأنماط عبر الأنظمة.' },
    { num:'٠٣', phase:'استجابة', color:'#F97316', name:'فرز',            desc:'تصنيف الخطورة ومطابقة الموارد مع طبيعة الحادث.' },
    { num:'٠٤', phase:'استجابة', color:'#F97316', name:'إسناد',          desc:'إرسال أقرب وحدة. إشعارٌ على الجوال مع الموقع والسياق.' },
    { num:'٠٥', phase:'استجابة', color:'#F97316', name:'استجابة نشطة',   desc:'عمليات ميدانية حيّة. تنسيقٌ متعدد الجهات. تحديثاتٌ آنية للحالة.' },
    { num:'٠٦', phase:'إنجاز',   color:'#22C55E', name:'حل',             desc:'إغلاق الحالة. حفظ الأدلة. توليد التقرير. تحديث المؤشرات الاستراتيجية.' },
    { num:'٠٧', phase:'إنجاز',   color:'#22C55E', name:'أثر',            desc:'قياس الأثر على المواطن. تقييم فعالية السياسة. تغذية راجعة للتعلم.' }
  ]
};

const PIPELINE_BOTTLENECK = {
  en: { detect: 'Detection', triage: 'Triage', active: 'Active Response', resolution: 'Resolution',
        body: 'detection is working, triage is bottlenecked. If', body2: 'is high but',
        body3: "is low — officers are deployed but cases aren't closing. The pipeline makes operational dynamics visible to leadership in one glance, without anyone needing to file a report." },
  ar: { detect: 'الكشف', triage: 'الفرز', active: 'الاستجابة النشطة', resolution: 'الحل',
        body: 'فالكشف يعمل، لكن الفرز يعاني عنق الزجاجة. وإذا كانت', body2: 'مرتفعة بينما',
        body3: 'منخفضة — فالضباط منتشرون لكن الحالات لا تُغلق. يجعل خط الأنابيب الديناميكيات التشغيلية مرئيةً للقيادة بنظرةٍ واحدة، دون حاجة أحدٍ إلى رفع تقرير.' }
};

const DEPT_FLOWS = [
  { n:{en:'01',ar:'٠١'}, en:'General Command of Civil Defense', ar:'القيادة العامة للدفاع المدني',
    detectEn:'Hassantuk sensors, fire alerts, chemical detections', detectAr:'مستشعرات حصنتك، إنذارات الحريق، الكشوف الكيميائية',
    respondEn:'Fire crew dispatch, evacuation, multi-unit coordination', respondAr:'إرسال فرق الإطفاء، الإخلاء، تنسيق متعدد الوحدات',
    deliverEn:'Fires prevented, response SLA, lives saved', deliverAr:'حرائق محبطة، اتفاقية مستوى الاستجابة، أرواح أُنقذت' },
  { n:{en:'02',ar:'٠٢'}, en:'GDRFA — Residency & Foreigners Affairs', ar:'الإدارة العامة للإقامة وشؤون الأجانب',
    detectEn:'Watch-list matches, biometric flags, visa anomalies', detectAr:'تطابقات قوائم المراقبة، إشارات بيومترية، مفارقات تأشيرات',
    respondEn:'Inspection teams, document verification, holds', respondAr:'فرق التفتيش، التحقق من الوثائق، عمليات الإيقاف',
    deliverEn:'Throughput, Golden Visas, border integrity', deliverAr:'الإنتاجية، التأشيرات الذهبية، سلامة الحدود' },
  { n:{en:'03',ar:'٠٣'}, en:'Traffic Coordination', ar:'الإدارة العامة للتنسيق المروري',
    detectEn:'Accidents, AI radar violations, black spot alerts', detectAr:'الحوادث، مخالفات الرادار الذكي، تنبيهات النقاط السوداء',
    respondEn:'Emergency dispatch, route closure, traffic redirect', respondAr:'إرسال طوارئ، إغلاق المسارات، تحويل المرور',
    deliverEn:'Fatality reduction, response time, fines processed', deliverAr:'خفض الوفيات، زمن الاستجابة، المخالفات المعالَجة' },
  { n:{en:'04',ar:'٠٤'}, en:'Federal Criminal Police', ar:'الإدارة العامة للشرطة الجنائية الاتحادية',
    detectEn:'Incidents reported, Oyoon AI flags, intelligence tips', detectAr:'حوادث مبلَّغ عنها، إشارات عيون الذكية، معلومات استخبارية',
    respondEn:'Patrol dispatch, investigation, evidence collection', respondAr:'إرسال الدوريات، التحقيق، جمع الأدلة',
    deliverEn:'Clearance rate, conviction rate, safety index', deliverAr:'معدل الحل، معدل الإدانة، مؤشر السلامة' },
  { n:{en:'05',ar:'٠٥'}, en:'Smart Services & Digital Security', ar:'الإدارة العامة للخدمات الذكية والأمن الرقمي',
    detectEn:'Phishing, ransomware, SIEM alerts, infrastructure anomalies', detectAr:'تصيد احتيالي، فدية، تنبيهات SIEM، مفارقات بنية تحتية',
    respondEn:'RZAM blocking, incident response, forensics', respondAr:'حجب RZAM، الاستجابة للحوادث، الطب الرقمي',
    deliverEn:'Threats neutralized, ITU ranking, breach prevention', deliverAr:'تهديدات مُعطَّلة، تصنيف ITU، منع الاختراقات' },
  { n:{en:'06',ar:'٠٦'}, en:'Central Operations', ar:'الإدارة العامة للعمليات المركزية',
    detectEn:'999 calls, multi-agency signals, crisis indicators', detectAr:'مكالمات ٩٩٩، إشارات متعددة الجهات، مؤشرات الأزمة',
    respondEn:'Cross-department dispatch, resource orchestration', respondAr:'إرسال متعدد الإدارات، تنسيق الموارد',
    deliverEn:'Response time SLA, coordination effectiveness', deliverAr:'اتفاقية زمن الاستجابة، فعالية التنسيق' },
  { n:{en:'07',ar:'٠٧'}, en:'Strategy & Performance Development', ar:'الإدارة العامة للاستراتيجية وتطوير الأداء',
    detectEn:'KPI breaches, budget variance, audit triggers', detectAr:'تجاوزات المؤشرات، انحراف الميزانية، محفّزات التدقيق',
    respondEn:'Resource reallocation, strategic review activation', respondAr:'إعادة تخصيص الموارد، تفعيل المراجعة الاستراتيجية',
    deliverEn:'National agenda goals, innovation metrics, audit compliance', deliverAr:'أهداف الأجندة الوطنية، مؤشرات الابتكار، الامتثال للتدقيق' },
  { n:{en:'08',ar:'٠٨'}, en:'Punitive & Correctional Establishments', ar:'الإدارة العامة للمؤسسات العقابية والإصلاحية',
    detectEn:'Capacity alerts, behavioral flags, incident reports', detectAr:'تنبيهات السعة، إشارات سلوكية، تقارير حوادث',
    respondEn:'Staff reallocation, lockdown protocols, transfers', respondAr:'إعادة توزيع الموظفين، بروتوكولات الإغلاق، التنقلات',
    deliverEn:'Rehabilitation rate, recidivism reduction, capacity', deliverAr:'معدل التأهيل، خفض العود، السعة' },
  { n:{en:'09',ar:'٠٩'}, en:'Community Police', ar:'الإدارة العامة للشرطة المجتمعية',
    detectEn:'Complaint signals, satisfaction dips, demand spikes', detectAr:'إشارات الشكاوى، تراجع الرضا، ذرى الطلب',
    respondEn:'Smart Police Station routing, case officer assignment', respondAr:'توجيه مراكز الشرطة الذكية، إسناد ضابط القضية',
    deliverEn:'Satisfaction score, service completion, happiness index', deliverAr:'درجة الرضا، إتمام الخدمة، مؤشر السعادة' },
  { n:{en:'10',ar:'١٠'}, en:'ICP — Identity, Citizenship, Customs & Ports', ar:'الهيئة الاتحادية للهوية والجنسية والجمارك وأمن المنافذ',
    detectEn:'Border anomalies, identity flags, customs irregularities', detectAr:'مفارقات حدودية، إشارات هوية، مخالفات جمركية',
    respondEn:'Port inspection, identity verification, enforcement', respondAr:'تفتيش المنافذ، التحقق من الهوية، الإنفاذ',
    deliverEn:'Trade integrity, identity assurance, port security', deliverAr:'سلامة التجارة، توثيق الهوية، أمن المنافذ' }
];

const AGENTS = {
  en: [
    { name:'CrimeWatch',     domain:'Federal Criminal Police',           desc:'Cross-correlates incident patterns, flags clearance-rate dips, recommends patrol reallocation.' },
    { name:'TrafficGuard',   domain:'Traffic Coordination',              desc:'Identifies black spots, predicts congestion, surfaces fatalities trend against target.' },
    { name:'BorderSense',    domain:'GDRFA & ICP',                       desc:'Watches throughput, biometric flags, visa anomalies, and Golden Visa pipeline health.' },
    { name:'EmergencyEye',   domain:'Civil Defense',                     desc:'Monitors Hassantuk sensors, response time SLA, fires prevented vs. quarterly target.' },
    { name:'CyberSentinel',  domain:'Smart Services & Digital Security', desc:'Tracks RZAM autonomous defense, threat patterns, ITU ranking maintenance.' },
    { name:'ServicePulse',   domain:'Community Police',                  desc:'Reads citizen satisfaction shifts, Smart Police Station throughput, happiness index.' },
    { name:'StrategyMind',   domain:'Strategy & Performance',            desc:'Watches KPI deviations, budget variance, audit triggers, national agenda alignment.' },
    { name:'FacilityWatch',  domain:'Punitive & Correctional',           desc:'Monitors capacity, rehabilitation outcomes, recidivism, facility safety incidents.' },
    { name:'NarcWatch',      domain:'Anti-Narcotics (Criminal Police)',  desc:'Tracks seizures, network disruptions, prosecution rate, cross-emirate intelligence.' },
    { name:'NetTracer',      domain:'Anti-Trafficking (Criminal Police)',desc:'Maps network detection signals, victim rescues, conviction outcomes.' }
  ],
  ar: [
    { name:'CrimeWatch',    domain:'الشرطة الجنائية الاتحادية', desc:'يربط أنماط الحوادث، يرصد تراجع معدلات الحل، يوصي بإعادة توزيع الدوريات.' },
    { name:'TrafficGuard',  domain:'التنسيق المروري',           desc:'يحدد النقاط السوداء، يتنبأ بالاختناقات، يُبرز اتجاه الوفيات مقابل الهدف.' },
    { name:'BorderSense',   domain:'الإقامة والمنافذ',          desc:'يراقب الإنتاجية، إشارات البصمة، مفارقات التأشيرات، صحة خط التأشيرات الذهبية.' },
    { name:'EmergencyEye',  domain:'الدفاع المدني',             desc:'يراقب مستشعرات حصنتك، اتفاقية زمن الاستجابة، الحرائق المحبطة مقابل الهدف الفصلي.' },
    { name:'CyberSentinel', domain:'الخدمات الذكية والأمن الرقمي', desc:'يتتبع دفاع RZAM المستقل، أنماط التهديدات، صون تصنيف ITU.' },
    { name:'ServicePulse',  domain:'الشرطة المجتمعية',          desc:'يقرأ تحولات رضا المواطن، إنتاجية مراكز الشرطة الذكية، مؤشر السعادة.' },
    { name:'StrategyMind',  domain:'الاستراتيجية وتطوير الأداء', desc:'يراقب انحرافات المؤشرات، انحراف الميزانية، محفزات التدقيق، اتساق الأجندة الوطنية.' },
    { name:'FacilityWatch', domain:'المؤسسات العقابية والإصلاحية', desc:'يراقب السعة، نتائج التأهيل، العود، حوادث سلامة المنشآت.' },
    { name:'NarcWatch',     domain:'مكافحة المخدرات',           desc:'يتتبع الضبطيات، تعطيل الشبكات، معدل الملاحقة، الاستخبارات بين الإمارات.' },
    { name:'NetTracer',     domain:'مكافحة الاتجار بالبشر',     desc:'يرسم إشارات كشف الشبكات، إنقاذ الضحايا، نتائج الإدانة.' }
  ]
};

const SCORE_DIMS = {
  en: [
    { num:'30', label:'Severity',                desc:'How critical is the underlying incident? A fatality scores 30, a parking violation scores 1.' },
    { num:'25', label:'Deviation',               desc:'How far from baseline? A 15% drop in clearance rate scores 20. A 0.1% change scores 1.' },
    { num:'25', label:'Cross-Department Impact', desc:'A multi-agency event (Traffic + Civil Defense + Crime) scores 25. An isolated event scores 5.' },
    { num:'20', label:'Leadership Relevance',    desc:'Does it affect international ranking, policy, or end up in a ministerial briefing?' }
  ],
  ar: [
    { num:'٣٠', label:'الخطورة',                desc:'كم هو حرج الحادث في جوهره؟ الوفاة ٣٠ نقطة، ومخالفة وقوف نقطةٌ واحدة.' },
    { num:'٢٥', label:'الانحراف',               desc:'كم بَعُد عن المعدل؟ تراجع ١٥٪ في معدل الحل ٢٠ نقطة. تغير ٠٫١٪ نقطةٌ واحدة.' },
    { num:'٢٥', label:'الأثر بين الإدارات',     desc:'حدثٌ متعدد الجهات (مرور + دفاع مدني + جريمة) ٢٥ نقطة. حدثٌ منعزل ٥ نقاط.' },
    { num:'٢٠', label:'الأهمية القيادية',       desc:'هل يؤثر على التصنيف الدولي، أو السياسات، أو ينتهي في إحاطةٍ وزارية؟' }
  ]
};

const VOICE_EXAMPLES = {
  en: [
    { query:'"Show me the highest-risk corridor in the last 24 hours"',
      response:'Map flies to the E311 corridor. The corridor highlights with a soft orange glow. Traffic, Federal Criminal Police, and Smart Services cards expand. AI insight bar answers: "E311 between Sharjah and Ajman: 3.4× normal incident density. AI radars caught 12,400 violations today. TrafficGuard recommends increased patrol presence between 16:00–20:00."' },
    { query:`"What's driving the clearance rate drop in Dubai?"`,
      response:'Map flies to Dubai. The Federal Criminal Police card expands. AI insight bar answers: "Al Quoz triage backlog at 2.3× normal. Correlates with a 15% staffing drop on night shifts. CrimeWatch recommends reallocation from Marina district which is over-resourced by 2.1×."' },
    { query:'"How is Hassantuk performing this quarter?"',
      response:'Map zooms to show Hassantuk-connected zones across the seven emirates. Civil Defense card expands. EmergencyEye answers: "401 fires prevented to date — programme tracking 18% above target. Average response time 6.07 minutes. 50,000+ residential connections protected."' },
    { query:'اعرض لي التهديدات السيبرانية النشطة', queryArabic:true, queryTranslation:'Show me active cyber threats',
      response:'Map dims. Smart Services & Digital Security card expands to fill the right zone. CyberSentinel answers in Arabic: "RZAM blocked 247,000 threats autonomously today. Phishing pattern shift detected against government domains. New signatures deployed."' }
  ],
  ar: [
    { query:'"اعرض لي أخطر ممر طُرقي خلال آخر ٢٤ ساعة"',
      response:'تطير الخريطة إلى ممر E311. يتوهج الممر بإضاءةٍ برتقاليةٍ خفيفة. تتوسّع بطاقات المرور والشرطة الجنائية والخدمات الذكية. يجيب شريط الرؤى: "E311 بين الشارقة وعجمان: كثافة حوادث ٣٫٤× عن المعدل. أمسكت الرادارات الذكية ١٢٫٤٠٠ مخالفة اليوم. توصي TrafficGuard بزيادة حضور الدوريات بين ١٦:٠٠ و٢٠:٠٠."' },
    { query:'"ما الذي يدفع تراجع معدل الحل في دبي؟"',
      response:'تطير الخريطة إلى دبي. تتوسع بطاقة الشرطة الجنائية الاتحادية. يجيب شريط الرؤى: "تراكم فرز القوز عند ٢٫٣× المعدل. يرتبط بتراجع ١٥٪ في الكوادر بنوبات الليل. توصي CrimeWatch بإعادة توزيع من منطقة المارينا التي تزيد مواردها ٢٫١×."' },
    { query:'"كيف أداء حصنتك هذا الفصل؟"',
      response:'تكبّر الخريطة لعرض المناطق المتصلة بحصنتك عبر الإمارات السبع. تتوسع بطاقة الدفاع المدني. يجيب EmergencyEye: "تم إحباط ٤٠١ حريقٍ حتى الآن — البرنامج يتفوق ١٨٪ على الهدف. متوسط زمن الاستجابة ٦٫٠٧ دقيقة. أكثر من ٥٠٫٠٠٠ توصيلة سكنية محمية."' },
    { query:'"Show me active cyber threats"', queryArabic:false, queryTranslation:'اعرض لي التهديدات السيبرانية النشطة',
      response:'تخفت الخريطة. تتوسع بطاقة الخدمات الذكية والأمن الرقمي لتملأ المنطقة اليمنى. يجيب CyberSentinel بالإنجليزية: "حجبت RZAM ٢٤٧٫٠٠٠ تهديدٍ تلقائياً اليوم. كُشف تحولٌ في نمط التصيد ضد النطاقات الحكومية. تم نشر بصماتٍ جديدة."' }
  ]
};

const MAP_FEATURES = {
  en: [
    { num:'01', title:'Ambient Mode — Cinematic circulation',
      body:'Every 8–10 seconds, the camera flies to a different operational center: Abu Dhabi Corniche, Dubai Marina, Sharjah, Al Ain, Fujairah Port, RAK, Ajman. Each fly-to uses a 6-second smooth easing curve. The map feels alive without anyone touching it.' },
    { num:'02', title:'Native Mapbox Layers — Smooth at any zoom',
      body:'Markers are not DOM overlays — they are native Mapbox circle, symbol, and label layers. Pan, zoom, and pitch the camera and the markers stay perfectly anchored to the geography, with no jitter or lag.' },
    { num:'03', title:'Voice Targeting — Speak, the camera moves',
      body:'When a voice query references a location ("the E311 corridor", "Al Quoz", "Fujairah port"), the map immediately interrupts ambient mode and flies to the requested area. A radar pulse rings the destination 1 second before arrival.' },
    { num:'04', title:'Crisis Lock — The map stops circulating',
      body:"In Crisis Mode, ambient fly-tos suspend. The camera locks on the active incident. Non-critical layers dim. The wall's full attention focuses on what matters most until leadership signals the situation is contained." }
  ],
  ar: [
    { num:'٠١', title:'الوضع البيئي — تنقّل سينمائي',
      body:'كل ٨–١٠ ثوانٍ، تطير الكاميرا إلى مركز عملياتٍ مختلف: كورنيش أبوظبي، مارينا دبي، الشارقة، العين، ميناء الفجيرة، رأس الخيمة، عجمان. كل طيرانٍ يستخدم منحنى تنقّلٍ سلساً مدته ٦ ثوانٍ. تبدو الخريطة حيّةً دون أن يلمسها أحد.' },
    { num:'٠٢', title:'طبقات Mapbox الأصلية — سلاسةٌ عند أي تكبير',
      body:'العلامات ليست طبقاتٍ على DOM — بل طبقاتٌ أصلية من Mapbox: دوائر ورموزٌ ووسوم. حرّك الكاميرا أو كبّر أو غيّر الميل، تبقى العلامات مرتبطةً تماماً بالجغرافيا دون اهتزازٍ أو تأخر.' },
    { num:'٠٣', title:'استهداف صوتي — تتحدث، فتتحرك الكاميرا',
      body:'حين يشير سؤالٌ صوتي إلى موقع ("ممر E311"، "القوز"، "ميناء الفجيرة")، تقاطع الخريطة فوراً الوضع البيئي وتطير إلى المنطقة المطلوبة. تطوّق نبضةٌ رادارية الوجهة قبل الوصول بثانية.' },
    { num:'٠٤', title:'قفل الأزمات — تتوقف الخريطة عن التنقل',
      body:'في وضع الأزمات، تتوقف الطيرانات البيئية. تُقفل الكاميرا على الحادث النشط. تخفت الطبقات غير الحرجة. ينصبّ كل انتباه الجدار على ما يهم أكثر حتى تشير القيادة إلى احتواء الوضع.' }
  ]
};

const ANATOMY = {
  en: [
    { zone:'TOP STRIP', items:[
      { name:'MOI emblem',                     tells:'Custodian — this is a Ministry of Interior surface.' },
      { name:'Bilingual ministry lockup',      tells:'Same surface in Arabic and English. Toggle on the right.' },
      { name:'Live status pulse',              tells:'Data is flowing. The wall is connected.' },
      { name:'National Threat Level',          tells:'Headline risk indicator. Color is the tell.' },
      { name:'Ask MANARA · voice affordance',  tells:'You may speak. The wall will reorganize.' },
      { name:'Clock + Hijri date',             tells:'Cultural and operational time stamping.' },
      { name:'EN / عربي toggle',                tells:'Full surface in either language.' }
    ]},
    { zone:'DETECT COLUMN (left)', items:[
      { name:'Phase chip — DETECT',            tells:'Everything below this is upstream of action.' },
      { name:'Anomalies headline',             tells:"What the AI thinks deserves leadership's attention right now." },
      { name:'10 directorate rows',            tells:'Coverage is comprehensive — every directorate has a pulse here.' },
      { name:'Expanded directorate cards',     tells:'These three are the highest-relevance signals at this moment.' }
    ]},
    { zone:'DELIVER COLUMN (right)', items:[
      { name:'Phase chip — DELIVER',           tells:'Everything below this is outcome and impact.' },
      { name:'Strategic KPIs hero',            tells:'How the Ministry is tracking against national goals.' },
      { name:'Delivery cards by directorate',  tells:'Quantified outcomes per directorate, in citizen-impact terms.' }
    ]},
    { zone:'CENTER MAP', items:[
      { name:'Cinematic Mapbox view',          tells:'Operational reality across the seven emirates.' },
      { name:'P1/P2/P3 incident markers',      tells:'What is happening, where, and how serious.' },
      { name:'Patrol chevrons',                tells:'Who is in the field, heading where.' },
      { name:'Operational center halos',       tells:'Where command-and-control nodes are anchored.' },
      { name:'Map priority legend',            tells:'How to read every dot you see on the map.' }
    ]},
    { zone:'RESPOND BAND (bottom)', items:[
      { name:'Phase chip — RESPOND',           tells:'Everything in this band is action in flight.' },
      { name:'Total active hero number',       tells:'How much of the country is being responded to right now.' },
      { name:'Triage / Assigned / Active mini-pipeline', tells:'How smoothly response is flowing.' },
      { name:'Coordinating directorates list', tells:'Which units are touching the active operation.' }
    ]},
    { zone:'PIPELINE STRIP', items:[
      { name:'7 stages, color-coded by phase', tells:'Where load is, where the bottlenecks are.' }
    ]},
    { zone:'AI INSIGHT BAR (footer)', items:[
      { name:'Wonderful agent badge',          tells:'Which AI agent is talking right now.' },
      { name:'Severity stripe + badge',        tells:'Critical / Warning / Info / Positive.' },
      { name:'Typewriter narrative',           tells:'A single sentence of operational truth, in plain language.' }
    ]}
  ],
  ar: [
    { zone:'الشريط العلوي', items:[
      { name:'شعار وزارة الداخلية',            tells:'الراعي — هذا سطحٌ تابعٌ لوزارة الداخلية.' },
      { name:'هوية الوزارة ثنائية اللغة',      tells:'السطح ذاته بالعربية والإنجليزية. التبديل على اليمين.' },
      { name:'نبضة حالة مباشرة',                tells:'البيانات تتدفق. الجدار متصل.' },
      { name:'مستوى التهديد الوطني',           tells:'مؤشر الخطر الأبرز. اللون هو الدليل.' },
      { name:'اسأل منارة · أداة صوتية',         tells:'تستطيع أن تتحدث. سيُعيد الجدار ترتيبه.' },
      { name:'الساعة + التاريخ الهجري',         tells:'توقيتٌ ثقافي وتشغيلي.' },
      { name:'مفتاح EN / عربي',                 tells:'السطح كاملاً بأي من اللغتين.' }
    ]},
    { zone:'عمود الكشف (اليسار)', items:[
      { name:'شارة المرحلة — كشف',              tells:'كل ما تحت هذا في طور ما قبل الفعل.' },
      { name:'عنوان المفارقات',                tells:'ما يرى الذكاء الاصطناعي أنه يستحق انتباه القيادة الآن.' },
      { name:'عشرة صفوف للإدارات',              tells:'التغطية شاملة — كل إدارةٍ لها نبضٌ هنا.' },
      { name:'بطاقات إدارات موسَّعة',           tells:'هذه الثلاثة هي أعلى الإشارات أهميةً في هذه اللحظة.' }
    ]},
    { zone:'عمود الإنجاز (اليمين)', items:[
      { name:'شارة المرحلة — إنجاز',            tells:'كل ما تحت هذا نتيجةٌ وأثر.' },
      { name:'المؤشرات الاستراتيجية',          tells:'كيف تسير الوزارة مقابل الأهداف الوطنية.' },
      { name:'بطاقات الإنجاز لكل إدارة',        tells:'نتائج كميّة لكل إدارة، بلغة الأثر على المواطن.' }
    ]},
    { zone:'الخريطة المركزية', items:[
      { name:'عرض Mapbox سينمائي',              tells:'الواقع التشغيلي عبر الإمارات السبع.' },
      { name:'علامات حوادث P1/P2/P3',            tells:'ما يحدث، أين، وما خطورته.' },
      { name:'إشارات الدوريات',                tells:'من في الميدان، ووجهته.' },
      { name:'هالات مراكز العمليات',           tells:'حيث تترسّخ عُقد القيادة والتحكم.' },
      { name:'مفتاح أولوية الخريطة',            tells:'كيف تقرأ كل نقطةٍ ترى على الخريطة.' }
    ]},
    { zone:'شريط الاستجابة (الأسفل)', items:[
      { name:'شارة المرحلة — استجابة',          tells:'كل ما في هذا الشريط فعلٌ جارٍ.' },
      { name:'إجمالي الحوادث النشطة',          tells:'كم نسبة الدولة قيد الاستجابة الآن.' },
      { name:'فرز / إسناد / نشط — خط فرعي',     tells:'مدى انسيابية الاستجابة.' },
      { name:'قائمة الإدارات المنسّقة',        tells:'أي الوحدات تلامس العملية النشطة.' }
    ]},
    { zone:'شريط خط الأنابيب', items:[
      { name:'٧ مراحل ملوَّنةٌ حسب المرحلة',    tells:'أين الحِمل، وأين أعناق الزجاجة.' }
    ]},
    { zone:'شريط رؤى الذكاء الاصطناعي (التذييل)', items:[
      { name:'شارة عميل Wonderful',             tells:'أي عميل ذكاءٍ اصطناعي يتحدث الآن.' },
      { name:'شريط الخطورة + الشارة',          tells:'حرج / تنبيه / معلومة / إيجابي.' },
      { name:'سرديةٌ آلة كاتبة',                tells:'جملةٌ واحدة من الحقيقة التشغيلية، بلغةٍ مفهومة.' }
    ]}
  ]
};

const PRACTICES = {
  en: [
    { num:'01', title:'No clicks, no menus',
      body:"Leadership reads the wall, never operates it. Every interaction the wall offers is voice or ambient. Menus, tabs, and breadcrumbs would imply someone has to drive — and at the executive level, that someone doesn't exist." },
    { num:'02', title:'AI decides what surfaces',
      body:"With the entire Ministry on one wall, raw breadth would be noise. Wonderful agents continuously score every signal and only the items that cross a relevance threshold appear in expanded form. Everything else stays compact, so leadership knows monitoring is comprehensive." },
    { num:'03', title:'Positive events are first-class',
      body:'A wall that only shows alerts feels alarmist. The same scoring model surfaces achievements: prevention milestones, KPI wins, programme outperformance. Confidence and vigilance share the surface in equal measure.' },
    { num:'04', title:'One pipeline, ten directorates',
      body:"Every directorate's work — fire, traffic, crime, cyber, residency — is forced through the same seven-stage lifecycle. This makes cross-department comparison possible for the first time and turns silos into a single river." },
    { num:'05', title:'Bilingual by default',
      body:'Every word, label, chip, and badge has an Arabic and English form. The toggle is one click. RTL is not a translation; it is a layout reflow. Cultural fidelity is non-negotiable.' },
    { num:'06', title:'Density discipline',
      body:'Information density is high — but every glyph earns its place. No filler stats, no decorative icons, no redundant labels. If an element does not change leadership behaviour, it does not belong on the wall.' },
    { num:'07', title:'Map as truth',
      body:"The country is not a chart. It is geography. Every operational reality has a place on the map, and every voice query that references a place flies the camera there. The map is the wall's center because the country is." },
    { num:'08', title:'Speed of trust',
      body:'Numbers update in real time, but never flicker. Transitions are calm. Animations are deliberate. The wall must feel like a senior chief of staff briefing a minister — composed, grounded, never frantic.' },
    { num:'09', title:'No filing required',
      body:'The wall must answer "what is happening" and "what is being done about it" without anyone having had to file a report or open a ticket. If leadership has to ask for it in writing, the wall has failed.' },
    { num:'10', title:'Built to be ambient',
      body:'The wall lives in the Operations Room. It runs 24/7. It must hold attention without demanding it. Ambient mode — fly-tos, gentle pulses, rotating insights — is what keeps the wall alive between briefings.' }
  ],
  ar: [
    { num:'٠١', title:'بلا نقرات، بلا قوائم',
      body:'القيادة تقرأ الجدار، ولا تشغّله. كل تفاعلٍ يتيحه الجدار صوتيٌّ أو بيئي. القوائم وعلامات التبويب تعني أن أحداً يجب أن يقود — وعلى المستوى التنفيذي، ذلك الشخص غير موجود.' },
    { num:'٠٢', title:'الذكاء الاصطناعي يقرر ما يظهر',
      body:'بوجود الوزارة كلها على جدارٍ واحد، فإن الاتساع الخام ضجيج. عملاء Wonderful يقيّمون كل إشارةٍ باستمرار، ولا يظهر بصورته الموسَّعة سوى ما يتجاوز عتبة الأهمية. ما عدا ذلك يبقى مكثَّفاً ليرى المسؤولون أن الرقابة شاملة.' },
    { num:'٠٣', title:'الإنجازات الإيجابية أولوية',
      body:'جدارٌ يعرض التنبيهات فقط يبدو منذراً بالفزع. النموذج ذاته يُبرز الإنجازات: مراحل الوقاية، انتصارات المؤشرات، تفوق البرامج. الثقة واليقظة يتشاركان السطح بالتساوي.' },
    { num:'٠٤', title:'خطٌّ واحد، عشر إدارات',
      body:'عمل كل إدارة — حريق، مرور، جريمة، سيبراني، إقامة — يُمرَّر عبر دورة الحياة ذاتها من سبع مراحل. وهذا يتيح المقارنة بين الإدارات لأول مرة، ويحوّل الصوامع إلى نهرٍ واحد.' },
    { num:'٠٥', title:'ثنائي اللغة بشكلٍ افتراضي',
      body:'كل كلمة وشارة وعنوان لها صيغةٌ عربيةٌ وإنجليزية. التبديل بنقرةٍ واحدة. RTL ليست ترجمة، بل تدفقٌ تخطيطي. الإخلاص الثقافي غير قابلٍ للتفاوض.' },
    { num:'٠٦', title:'انضباط الكثافة',
      body:'كثافة المعلومات عالية — لكن كل عنصرٍ يستحق مكانه. لا إحصاءات حشو، لا أيقونات زينة، لا تسمياتٍ مكررة. إن لم يغيّر العنصر سلوك القيادة، فلا مكان له على الجدار.' },
    { num:'٠٧', title:'الخريطة هي الحقيقة',
      body:'الدولة ليست رسماً بيانياً، بل جغرافيا. لكل واقعٍ تشغيلي مكانٌ على الخريطة، وكل سؤالٍ صوتي يشير إلى مكانٍ يطير الكاميرا إليه. الخريطة في وسط الجدار لأن الدولة في مركزه.' },
    { num:'٠٨', title:'سرعة الثقة',
      body:'الأرقام تتحدث في الزمن الفعلي، لكنها لا ترتجف. الانتقالات هادئة. الحركة متعمَّدة. يجب أن يبدو الجدار كرئيس ديوانٍ يحيط وزيراً — رصينٌ، متماسك، لا متلهّف.' },
    { num:'٠٩', title:'لا حاجة إلى تقارير',
      body:'يجب أن يجيب الجدار عن "ماذا يحدث" و"ما الذي يُفعل تجاهه" دون أن يحتاج أحدٌ إلى رفع تقريرٍ أو فتح تذكرة. إن كان على القيادة أن تطلبه كتابةً، فالجدار قد أخفق.' },
    { num:'١٠', title:'مبنيٌّ ليكون بيئياً',
      body:'الجدار يعيش في غرفة العمليات. يعمل ٢٤/٧. يجب أن يحفظ الانتباه دون أن يطلبه. الوضع البيئي — الطيرانات، النبضات اللطيفة، الرؤى الدوّارة — هو ما يبقي الجدار حياً بين الإحاطات.' }
  ]
};

const TIMELINE = {
  en: [
    { time:'14:23:07', phase:'DETECT',  color:'#8B5CF6',
      title:'Multi-vehicle collision flagged on E11 northbound',
      body:'Traffic radar detects deceleration anomaly. Hassantuk-adjacent sensors register impact vibration. CCTV behavior analytics confirms collision visually. Three departments contribute simultaneously to Detection.' },
    { time:'14:23:12', phase:'AI SCORING', color:'#D4AF37',
      title:'Wonderful agents score the event in 5 seconds',
      body:'Severity: 28 (multi-vehicle, fatality risk). Deviation: 22 (incident type far above baseline for E11 segment). Cross-department impact: 25 (Traffic + Civil Defense + Criminal Police + Central Operations). Leadership relevance: 18 (federal highway, peak commute). Total score: 93. Surfaces immediately.' },
    { time:'14:23:14', phase:'WALL RESPONSE', color:'#00E5CC',
      title:'The map flies. Four department cards expand. The AI briefing types out.',
      body:'Map cinematically zooms to E11 km 47. Critical-event aura pulses red around the location. Traffic, Civil Defense, Federal Criminal Police, and Central Operations cards all expand from compact mode. AI briefing types: "Multi-vehicle collision E11 northbound. Vehicle fire. Civil Defense and ambulances dispatched. ETA 4 min. Traffic redirected via E311."' },
    { time:'14:23:30', phase:'RESPOND', color:'#F97316',
      title:'Pipeline strip updates: Triage +3, Assigned +5, Active Ops +5',
      body:'Four patrol chevrons converge on the location on the map. The pipeline strip shows particles flowing from Detect through Triage and Assignment into Active Response. Average triage-to-assignment time updates in real time.' },
    { time:'14:48:00', phase:'DELIVER', color:'#22C55E',
      title:'Resolution. Outcome metrics update.',
      body:'Highway cleared. Casualties handled. The DELIVER zone updates: Federal Criminal Police clearance count +1, Civil Defense response time entered the average, Central Operations coordination time logged. AI briefing types: "E11 collision resolved in 25 minutes. 2 minor injuries, no fatalities. All four agencies coordinated within SLA."' }
  ],
  ar: [
    { time:'١٤:٢٣:٠٧', phase:'كشف', color:'#8B5CF6',
      title:'تصادمٌ متعدد المركبات على E11 شمالاً',
      body:'يكشف الرادار المروري شذوذاً في التباطؤ. تسجل المستشعرات المجاورة لحصنتك اهتزاز الاصطدام. تؤكد تحليلات سلوك CCTV التصادم بصرياً. ثلاث إدارات تساهم في الكشف في الوقت ذاته.' },
    { time:'١٤:٢٣:١٢', phase:'تقييم آلي', color:'#D4AF37',
      title:'يقيّم عملاء Wonderful الحدث في خمس ثوانٍ',
      body:'الخطورة: ٢٨ (متعدد المركبات، خطر وفاة). الانحراف: ٢٢ (نوع الحادث يفوق المعدل بكثير على هذا الجزء من E11). الأثر بين الإدارات: ٢٥ (مرور + دفاع مدني + جنائية اتحادية + عمليات مركزية). الأهمية القيادية: ١٨ (طريق اتحادي، ذروة تنقل). المجموع: ٩٣. يُبرَز فوراً.' },
    { time:'١٤:٢٣:١٤', phase:'استجابة الجدار', color:'#00E5CC',
      title:'تطير الخريطة. تتوسع أربع بطاقات إدارات. يكتب الذكاء الاصطناعي إحاطته.',
      body:'تكبّر الخريطة سينمائياً إلى E11 كم ٤٧. تنبض هالة الحدث الحرج باللون الأحمر حول الموقع. تتوسع بطاقات المرور والدفاع المدني والجنائية الاتحادية والعمليات المركزية من الوضع المكثَّف. يكتب الذكاء الاصطناعي: "تصادمٌ متعدد المركبات على E11 شمالاً. حريق مركبة. تم إرسال الدفاع المدني وسيارات الإسعاف. الوصول خلال ٤ دقائق. تحويل المرور عبر E311."' },
    { time:'١٤:٢٣:٣٠', phase:'استجابة', color:'#F97316',
      title:'يتحدث شريط الأنابيب: فرز +٣، إسناد +٥، عمليات نشطة +٥',
      body:'تتقارب أربع إشاراتٍ للدوريات على الموقع. يُظهر شريط الأنابيب جسيمات تتدفق من الكشف عبر الفرز والإسناد إلى الاستجابة النشطة. يتحدث متوسط زمن الفرز إلى الإسناد في الوقت الفعلي.' },
    { time:'١٤:٤٨:٠٠', phase:'إنجاز', color:'#22C55E',
      title:'الحل. تتحدث مؤشرات النتيجة.',
      body:'الطريق مفتوح. الإصابات معالجة. تتحدث منطقة الإنجاز: عدد الحلول للجنائية +١، زمن استجابة الدفاع المدني انضم إلى المتوسط، زمن تنسيق العمليات المركزية مسجَّل. يكتب الذكاء الاصطناعي: "حلّ تصادم E11 في ٢٥ دقيقة. إصابتان طفيفتان، بلا وفيات. تنسيق الجهات الأربع ضمن اتفاقية المستوى."' }
  ]
};

/* ============================================================
   MAIN OVERLAY
   ============================================================ */
function HelpOverlay({ onClose, locale }) {
  const isAr = locale === 'ar';
  const tt = HELP_T[locale];

  useEffectHelp(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  return (
    <div className={`help-overlay ${isAr ? 'help-overlay--rtl' : ''}`} role="dialog" aria-label="How MANARA Works" dir={isAr ? 'rtl' : 'ltr'}>
      <div className="help-overlay__bg" />
      <div className="help-overlay__grid" />
      <button className="help-overlay__close" onClick={onClose} aria-label={isAr ? 'إغلاق' : 'Close'}>✕</button>

      <div className="help-scroll">
        <div className="help-doc">
          <Section1Hero tt={tt} isAr={isAr} />
          <SectionProblem tt={tt} isAr={isAr} />
          <Section2Architecture tt={tt} isAr={isAr} locale={locale} />
          <Section3Pipeline tt={tt} isAr={isAr} locale={locale} />
          <Section4Departments tt={tt} isAr={isAr} locale={locale} />
          <Section5AI tt={tt} isAr={isAr} locale={locale} />
          <Section6Voice tt={tt} isAr={isAr} locale={locale} />
          <Section7Map tt={tt} isAr={isAr} locale={locale} />
          <SectionAnatomy tt={tt} isAr={isAr} locale={locale} />
          <SectionPractices tt={tt} isAr={isAr} locale={locale} />
          <Section8Together tt={tt} isAr={isAr} locale={locale} />
          <HelpFooter tt={tt} isAr={isAr} />
        </div>
      </div>
    </div>
  );
}

/* ===== Section 1 — Hero ===== */
function Section1Hero({ tt, isAr }) {
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowMission}</span>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 'clamp(18px, 2vw, 36px)', flexWrap: 'wrap' }}>
        <h1 className="help-title" style={{ whiteSpace: 'pre-line', fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.title1}</h1>
        <div className="help-arabic" style={{ marginBottom: 8 }}>{isAr ? '' : 'منارة'}</div>
      </div>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.lede1}</p>
      <div className="help-divider" />
    </section>
  );
}

/* ===== Section: Why MANARA Exists ===== */
function SectionProblem({ tt, isAr }) {
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowProblem}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleProblem}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeProblem}</p>
      <div className="problem-grid">
        {tt.problems.map(p => (
          <div key={p.num} className="problem-card">
            <span className="problem-card__num">{p.num}</span>
            <span className="problem-card__title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{p.title}</span>
            <span className="problem-card__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{p.body}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== Section 2 — Architecture ===== */
function Section2Architecture({ tt, isAr, locale }) {
  const phases = ARCH_PHASES[locale];
  const emirates = EMIRATES[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowArch}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleArch}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeArch}</p>

      <div className="help-card">
        <div className="arch-phase-row">
          {phases.map(phase => (
            <div key={phase.key} className="arch-phase-block" style={{ color: phase.color }}>
              <div className="arch-phase-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{phase.label}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {phase.stages.map(s => (
                  <span key={s.n} className="arch-stage-chip" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
                    <span className="arch-stage-chip__num" style={{ color: phase.color }}>{s.n} ·</span>
                    {s.name}
                  </span>
                ))}
              </div>
              <p style={{
                fontFamily: isAr ? 'Tajawal, sans-serif' : 'DM Sans, sans-serif',
                fontSize: 'clamp(12px, 0.85vw, 14px)', lineHeight: 1.5,
                color: 'var(--text-secondary)', marginTop: 6
              }}>{phase.desc}</p>
            </div>
          ))}
        </div>

        <div className="arch-divider" style={{ marginTop: 28 }}>
          <div className="arch-divider__line" />
          <span className="arch-divider__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.archFedBy}</span>
          <div className="arch-divider__line" />
        </div>

        <div className="arch-dept-grid" style={{ marginTop: 16 }}>
          {DEPT_BILINGUAL.map((d, i) => (
            <div key={i} className="arch-dept-cell">
              <span className="arch-dept-cell__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="arch-dept-cell__en" style={{ order: isAr ? 2 : 0 }}>{d.en}</span>
              <span className="arch-dept-cell__ar" style={{ order: isAr ? 0 : 2 }}>{d.ar}</span>
            </div>
          ))}
        </div>

        <div className="arch-divider" style={{ marginTop: 28 }}>
          <div className="arch-divider__line" />
          <span className="arch-divider__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.archAcross}</span>
          <div className="arch-divider__line" />
        </div>

        <div className="arch-emirate-row" style={{ marginTop: 16 }}>
          {emirates.map(e => (
            <span key={e} className="arch-emirate-pill" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{e}</span>
          ))}
        </div>
      </div>

      <div className="help-callout">
        <span className="help-callout__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.archCalloutLabel}</span>
        <p className="help-callout__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
          {tt.archCalloutBody}{' '}
          <strong style={{ color: 'var(--accent-teal)' }}>{tt.archCalloutKey}</strong>{' '}
          {tt.archCalloutTail}
        </p>
      </div>
    </section>
  );
}

/* ===== Section 3 — Pipeline ===== */
function Section3Pipeline({ tt, isAr, locale }) {
  const stages = PIPELINE_STAGES[locale];
  const b = PIPELINE_BOTTLENECK[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowPipeline}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titlePipeline}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledePipeline}</p>

      <div className="pipeline-stage-grid">
        {stages.map(s => (
          <div key={s.num} className="pipeline-stage-card" style={{ color: s.color }}>
            <span className="pipeline-stage-card__num" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{isAr ? `مرحلة ${s.num} · ${s.phase}` : `STAGE ${s.num} · ${s.phase}`}</span>
            <span className="pipeline-stage-card__name" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{s.name}</span>
            <span className="pipeline-stage-card__desc" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{s.desc}</span>
          </div>
        ))}
      </div>

      <div className="help-callout">
        <span className="help-callout__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.pipelineCalloutLabel}</span>
        <p className="help-callout__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
          {isAr ? 'إن كان ' : 'If '}
          <span className="kw-detect">{b.detect}</span>
          {isAr ? ' عالياً لكن ' : ' is high but '}
          <span className="kw-respond">{b.triage}</span>
          {isAr ? ' منخفضاً — ' : ' is low — '}
          {b.body}{' '}
          <span className="kw-respond">{b.active}</span>
          {' '}{b.body2}{' '}
          <span className="kw-deliver">{b.resolution}</span>
          {' '}{b.body3}
        </p>
      </div>
    </section>
  );
}

/* ===== Section 4 — Departments ===== */
function Section4Departments({ tt, isAr, locale }) {
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowDept}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleDept}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeDept}</p>

      <div className="dept-card-grid">
        {DEPT_FLOWS.map(d => (
          <div key={d.n.en} className="dept-card">
            <div className="dept-card__head">
              <span className="dept-card__num">{isAr ? d.n.ar : d.n.en}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span className="dept-card__en" style={{ order: isAr ? 2 : 0 }}>{d.en}</span>
                <span className="dept-card__ar" style={{ order: isAr ? 0 : 2 }}>{d.ar}</span>
              </div>
            </div>
            <div className="dept-card__flow">
              <div className="dept-flow-block" style={{ color: '#8B5CF6' }}>
                <span className="dept-flow-block__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.flowDetect}</span>
                <span className="dept-flow-block__text" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{isAr ? d.detectAr : d.detectEn}</span>
              </div>
              <div className="dept-flow-block" style={{ color: '#F97316' }}>
                <span className="dept-flow-block__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.flowRespond}</span>
                <span className="dept-flow-block__text" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{isAr ? d.respondAr : d.respondEn}</span>
              </div>
              <div className="dept-flow-block" style={{ color: '#22C55E' }}>
                <span className="dept-flow-block__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.flowDeliver}</span>
                <span className="dept-flow-block__text" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{isAr ? d.deliverAr : d.deliverEn}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== Section 5 — AI ===== */
function Section5AI({ tt, isAr, locale }) {
  const agents = AGENTS[locale];
  const dims = SCORE_DIMS[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowAi}</span>
      <h2 className="help-title" style={{ whiteSpace: 'pre-line', fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleAi}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeAi}</p>

      <div className="agent-grid">
        {agents.map(a => (
          <div key={a.name} className="agent-card">
            <span className="agent-card__name">{a.name}</span>
            <span className="agent-card__domain" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{a.domain}</span>
            <span className="agent-card__desc" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{a.desc}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 36 }}>
        <span className="help-eyebrow" style={{ color: 'var(--accent-gold)' }}>{tt.aiHowEyebrow}</span>
        <p className="help-lede" style={{ marginTop: 14, fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.aiHowLede}</p>
        <div className="score-row" style={{ marginTop: 22 }}>
          {dims.map(s => (
            <div key={s.label} className="score-card">
              <span className="score-card__num">{s.num}</span>
              <span className="score-card__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{s.label}</span>
              <span className="score-card__desc" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{s.desc}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="help-callout" style={{
        background: 'linear-gradient(90deg, rgba(212,175,55,0.1), rgba(212,175,55,0.02))',
        borderInlineStartColor: 'var(--accent-gold)'
      }}>
        <span className="help-callout__label" style={{ color: 'var(--accent-gold)', fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.aiPositiveLabel}</span>
        <p className="help-callout__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
          {tt.aiPositiveBody1}{' '}
          <strong style={{ color: 'var(--accent-gold)' }}>{tt.aiPositiveKey}</strong>{tt.aiPositiveBody2}
        </p>
      </div>
    </section>
  );
}

/* ===== Section 6 — Voice ===== */
function Section6Voice({ tt, isAr, locale }) {
  const examples = VOICE_EXAMPLES[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowVoice}</span>
      <h2 className="help-title" style={{ whiteSpace: 'pre-line', fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleVoice}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeVoice}</p>

      <div className="help-card" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(20px, 2vw, 40px)', padding: 'clamp(28px, 2.4vw, 48px)' }}>
        <div style={{
          width: 'clamp(70px, 6vw, 110px)', height: 'clamp(70px, 6vw, 110px)',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(0,229,204,0.4), rgba(0,229,204,0.1))',
          border: '2px solid var(--accent-teal)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative'
        }} className="radar-pulse">
          <svg width="50%" height="50%" viewBox="0 0 24 24" fill="none">
            <rect x="9" y="3" width="6" height="12" rx="3" fill="var(--accent-teal)" />
            <path d="M 5 11 C 5 15 8 18 12 18 C 16 18 19 15 19 11" stroke="var(--accent-teal)" strokeWidth="2" fill="none" strokeLinecap="round" />
            <line x1="12" y1="18" x2="12" y2="22" stroke="var(--accent-teal)" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <h3 style={{
            fontFamily: isAr ? 'Tajawal, sans-serif' : 'Outfit, sans-serif',
            fontSize: 'clamp(28px, 2.4vw, 44px)', fontWeight: 700, letterSpacing: '0.04em',
            color: 'var(--accent-teal)'
          }}>{tt.askMan}</h3>
          <p style={{
            fontFamily: isAr ? 'Tajawal, sans-serif' : 'DM Sans, sans-serif',
            fontSize: 'clamp(14px, 1vw, 18px)', color: 'var(--text-secondary)', lineHeight: 1.5
          }}>{tt.askManSub}</p>
        </div>
      </div>

      <div className="voice-example-grid">
        {examples.map((ex, i) => (
          <div key={i} className="voice-example">
            <div className="voice-query">
              <span className="voice-query__icon">{tt.voiceQueryIcon}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span className={`voice-query__text ${ex.queryArabic ? 'voice-query__text--ar' : ''}`}>
                  {ex.query}
                </span>
                {ex.queryTranslation && (
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--text-muted)', fontStyle: 'italic' }}>
                    ({ex.queryTranslation})
                  </span>
                )}
              </div>
            </div>
            <div>
              <span className="voice-response__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.voiceResponseLabel}</span>
              <p className="voice-response__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{ex.response}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== Section 7 — Map ===== */
function Section7Map({ tt, isAr, locale }) {
  const features = MAP_FEATURES[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowMap}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleMap}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeMap}</p>

      <div className="section7-grid">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {features.map(f => (
            <div key={f.num} className="feature-card">
              <span className="feature-card__num">{f.num}</span>
              <span className="feature-card__title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{f.title}</span>
              <span className="feature-card__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{f.body}</span>
            </div>
          ))}
        </div>
        <div>
          <MapMockSvg />
          <p className="map-mock__caption" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.mapCaption}</p>
        </div>
      </div>
    </section>
  );
}

function MapMockSvg() {
  // Real static Mapbox image of the UAE in dark style with markers overlaid
  const token = window.MAPBOX_TOKEN || (window.MANARA_DATA && window.MANARA_DATA.mapboxToken) || '';
  const w = 800, h = 560;
  // Static map of UAE — Mapbox Static Images API, dark-v11 style
  const overlays = [
    'pin-l-marker+ff4757(54.92,24.85)',     // P1 critical
    'pin-s-circle+ffb800(55.40,25.34)',     // P2 Sharjah
    'pin-s-circle+38bdf8(55.27,25.20)',     // P3 Dubai
    'pin-s-circle+38bdf8(54.40,24.45)',     // P3 Abu Dhabi
    'pin-s-circle+38bdf8(55.94,25.78)',     // P3 RAK
    'pin-s-circle+00e5cc(56.34,25.13)'      // op center Fujairah
  ].join(',');
  const src = token
    ? `https://api.mapbox.com/styles/v1/mapbox/dark-v11/static/${overlays}/54.5,24.5,6.2,0/${w}x${h}@2x?access_token=${token}&attribution=false&logo=false`
    : null;

  return (
    <div className="map-mock" style={{ position: 'relative', overflow: 'hidden' }}>
      {src ? (
        <img
          src={src}
          alt="UAE operational map preview"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'saturate(0.85) contrast(1.05)' }}
          onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling && (e.target.nextSibling.style.display = 'block'); }}
        />
      ) : null}
      {/* Fallback / overlay: original SVG schematic, hidden if image loads */}
      <svg
        viewBox="0 0 400 285"
        width="100%" height="100%"
        preserveAspectRatio="xMidYMid slice"
        style={{ display: src ? 'none' : 'block', position: src ? 'absolute' : 'static', inset: 0 }}
      >
        <defs>
          <radialGradient id="mockGlow" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#0d1830" />
            <stop offset="100%" stopColor="#050A12" />
          </radialGradient>
          <radialGradient id="mockCritical" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FF4757" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#FF4757" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="400" height="285" fill="url(#mockGlow)" />
        <g stroke="rgba(0,229,204,0.06)" strokeWidth="0.5">
          {[0,1,2,3,4,5,6,7].map(i => <line key={`h${i}`} x1="0" x2="400" y1={i*36} y2={i*36} />)}
          {[0,1,2,3,4,5,6,7,8,9,10].map(i => <line key={`v${i}`} x1={i*40} x2={i*40} y1="0" y2="285" />)}
        </g>
        <path d="M 80 90 L 130 70 L 180 65 L 230 75 L 280 90 L 320 110 L 340 140 L 335 175 L 305 200 L 260 220 L 210 225 L 160 215 L 120 195 L 95 165 L 80 130 Z"
              fill="rgba(0,229,204,0.05)" stroke="rgba(0,229,204,0.3)" strokeWidth="1" />
        <path d="M 200 90 L 195 165 L 220 200" fill="none" stroke="rgba(0,229,204,0.18)" strokeWidth="0.6" strokeDasharray="3 3" />
        <path d="M 250 105 L 245 185" fill="none" stroke="rgba(0,229,204,0.18)" strokeWidth="0.6" strokeDasharray="3 3" />
        <circle cx="115" cy="180" r="3" fill="#38BDF8" />
        <circle cx="115" cy="180" r="6" fill="#38BDF8" fillOpacity="0.2" />
        <circle cx="170" cy="135" r="3" fill="#38BDF8" />
        <circle cx="170" cy="135" r="6" fill="#38BDF8" fillOpacity="0.2" />
        <circle cx="290" cy="170" r="3" fill="#38BDF8" />
        <circle cx="290" cy="170" r="6" fill="#38BDF8" fillOpacity="0.2" />
        <circle cx="220" cy="115" r="3.5" fill="#FFB800" />
        <circle cx="220" cy="115" r="7" fill="#FFB800" fillOpacity="0.2" />
        <circle cx="155" cy="180" r="22" fill="url(#mockCritical)" />
        <circle cx="155" cy="180" r="14" fill="none" stroke="#FF4757" strokeOpacity="0.5" strokeWidth="1">
          <animate attributeName="r" values="6;18;6" dur="2.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="1;0;1" dur="2.4s" repeatCount="indefinite" />
        </circle>
        <circle cx="155" cy="180" r="4" fill="#FF4757" />
        <g transform="translate(245, 155)" fill="#00E5CC"><path d="M 0 -4 L 5 4 L 0 2 L -5 4 Z" /></g>
      </svg>
    </div>
  );
}

/* ===== Section: Anatomy =====
   Visual schematic of the wall with each zone highlighted as a card.
   ============================================================ */
function SectionAnatomy({ tt, isAr, locale }) {
  const data = ANATOMY[locale];

  // Map zone name → schematic position on the mini-wall preview
  // (positions are 0..1 in the preview grid; preview is laid out like the real wall)
  const zoneStyles = {
    en: {
      'TOP STRIP':                { area: 'top',    color: '#D4AF37', label: 'Top strip' },
      'DETECT COLUMN (left)':     { area: 'left',   color: '#38BDF8', label: 'Detect' },
      'DELIVER COLUMN (right)':   { area: 'right',  color: '#22C55E', label: 'Deliver' },
      'CENTER MAP':               { area: 'center', color: '#00E5CC', label: 'Map' },
      'RESPOND BAND (bottom)':    { area: 'band',   color: '#F97316', label: 'Respond' },
      'PIPELINE STRIP':           { area: 'pipe',   color: '#A855F7', label: 'Pipeline' },
      'AI INSIGHT BAR (footer)':  { area: 'foot',   color: '#E8C761', label: 'AI insight' }
    },
    ar: {
      'الشريط العلوي':                { area: 'top',    color: '#D4AF37', label: 'الشريط العلوي' },
      'عمود الكشف (اليسار)':           { area: 'left',   color: '#38BDF8', label: 'الكشف' },
      'عمود الإنجاز (اليمين)':         { area: 'right',  color: '#22C55E', label: 'الإنجاز' },
      'الخريطة المركزية':              { area: 'center', color: '#00E5CC', label: 'الخريطة' },
      'شريط الاستجابة (الأسفل)':       { area: 'band',   color: '#F97316', label: 'الاستجابة' },
      'شريط خط الأنابيب':              { area: 'pipe',   color: '#A855F7', label: 'خط الأنابيب' },
      'شريط رؤى الذكاء الاصطناعي (التذييل)': { area: 'foot', color: '#E8C761', label: 'رؤى الذكاء' }
    }
  }[locale];

  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowAnatomy}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleAnatomy}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeAnatomy}</p>

      {/* Wall schematic with color-coded zones */}
      <div className="anatomy-schematic">
        <div className="ana-zone ana-zone--top" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[0]]?.color || '#D4AF37' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[0]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--left" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[1]]?.color || '#38BDF8' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[1]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--center" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[3]]?.color || '#00E5CC' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[3]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--right" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[2]]?.color || '#22C55E' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[2]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--band" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[4]]?.color || '#F97316' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[4]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--pipe" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[5]]?.color || '#A855F7' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[5]]?.label}
          </span>
        </div>
        <div className="ana-zone ana-zone--foot" style={{ '--zc': zoneStyles[Object.keys(zoneStyles)[6]]?.color || '#E8C761' }}>
          <span className="ana-zone__label" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
            {zoneStyles[Object.keys(zoneStyles)[6]]?.label}
          </span>
        </div>
      </div>

      {/* Element breakdown — one big card per zone, numbered, color-coded */}
      <div className="anatomy-grid">
        {data.map((zone, zi) => {
          const zs = zoneStyles[zone.zone] || { color: '#00E5CC' };
          return (
            <div key={zone.zone} className="anatomy-zone" style={{ '--zc': zs.color }}>
              <div className="anatomy-zone__head">
                <span className="anatomy-zone__num">{String(zi + 1).padStart(2, '0')}</span>
                <h3 className="anatomy-zone__title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
                  {zone.zone}
                </h3>
              </div>
              <ul className="anatomy-zone__list">
                {zone.items.map((it, i) => (
                  <li key={i} className="anatomy-item">
                    <span className="anatomy-item__bullet" />
                    <div className="anatomy-item__text">
                      <span className="anatomy-item__name" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{it.name}</span>
                      <span className="anatomy-item__tells" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{it.tells}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ===== Section: Practices =====
   Big numbered cards, each with a glyph, in a 2-up grid for breathing room.
   ============================================================ */
function SectionPractices({ tt, isAr, locale }) {
  const data = PRACTICES[locale];
  const colors = ['#00E5CC', '#38BDF8', '#22C55E', '#F97316', '#A855F7', '#FFB800', '#E8C761', '#FF4757', '#D4AF37', '#7DD3FC'];
  const glyphs = [
    // 01 No clicks — speaker icon
    <svg key="g1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/></svg>,
    // 02 AI surfaces — circuit
    <svg key="g2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></svg>,
    // 03 Positive events — star
    <svg key="g3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l2.6 6.3 6.8.6-5.2 4.5 1.6 6.6L12 17.7l-5.8 3.3 1.6-6.6L2.6 9.9l6.8-.6z"/></svg>,
    // 04 One pipeline — arrow flow
    <svg key="g4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h6M3 6h12M3 18h12"/><path d="M21 12l-4-3v6z" fill="currentColor"/></svg>,
    // 05 Bilingual — globe
    <svg key="g5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>,
    // 06 Density — grid
    <svg key="g6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    // 07 Map as truth — pin
    <svg key="g7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
    // 08 Speed of trust — gauge
    <svg key="g8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 18a9 9 0 1118 0"/><path d="M12 18l5-7"/><circle cx="12" cy="18" r="1.5" fill="currentColor"/></svg>,
    // 09 No filing — paper crossed
    <svg key="g9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/><path d="M16 16l-6-6M10 16l6-6"/></svg>,
    // 10 Ambient — waveform
    <svg key="g10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M2 12h2M6 8v8M10 4v16M14 8v8M18 10v4M22 12h0"/></svg>
  ];

  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowPractice}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titlePractice}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledePractice}</p>
      <div className="practice-grid">
        {data.map((p, i) => {
          const c = colors[i % colors.length];
          return (
            <div key={p.num} className="practice-card" style={{ '--pc': c }}>
              <div className="practice-card__head">
                <span className="practice-card__num">{p.num}</span>
                <span className="practice-card__icon" aria-hidden style={{ color: c }}>
                  {glyphs[i % glyphs.length]}
                </span>
              </div>
              <h3 className="practice-card__title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{p.title}</h3>
              <p className="practice-card__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{p.body}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ===== Section 8 — Together ===== */
function Section8Together({ tt, isAr, locale }) {
  const data = TIMELINE[locale];
  return (
    <section className="help-section">
      <span className="help-eyebrow">{tt.eyebrowTimeline}</span>
      <h2 className="help-title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.titleTimeline}</h2>
      <p className="help-lede" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.ledeTimeline}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {data.map((t, i) => (
          <div key={i} className="timeline-card" style={{ borderInlineStart: `3px solid ${t.color}` }}>
            <div>
              <div className="timeline-card__time">{t.time}</div>
              <span className="timeline-card__phase" style={{ color: t.color, fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{t.phase}</span>
            </div>
            <div>
              <div className="timeline-card__title" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{t.title}</div>
              <p className="timeline-card__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{t.body}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="help-callout" style={{
        background: 'linear-gradient(90deg, rgba(212,175,55,0.1), rgba(212,175,55,0.02))',
        borderInlineStartColor: 'var(--accent-gold)', marginTop: 12
      }}>
        <span className="help-callout__label" style={{ color: 'var(--accent-gold)', fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>{tt.timelineCalloutLabel}</span>
        <p className="help-callout__body" style={{ fontFamily: isAr ? 'Tajawal, sans-serif' : undefined }}>
          {tt.timelineCalloutBody1}{' '}
          <strong style={{ color: 'var(--accent-gold)' }}>{tt.timelineCalloutKey}</strong>{' '}
          {tt.timelineCalloutBody2}
        </p>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
function HelpFooter({ tt, isAr }) {
  return (
    <footer style={{
      paddingTop: 32, borderTop: '1px solid var(--border-subtle)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, textAlign: 'center'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <img src="assets/moi-emblem.png" alt="" style={{ width: 32, height: 32, objectFit: 'contain', opacity: 0.85 }} />
        <span style={{
          fontFamily: 'Outfit, sans-serif', fontSize: 18, fontWeight: 700,
          color: 'var(--text-primary)', letterSpacing: '0.08em'
        }}>
          MANARA · <span style={{ fontFamily: 'Tajawal, sans-serif', color: 'var(--accent-gold)' }}>منارة</span>
        </span>
      </div>
      <p style={{
        fontFamily: isAr ? 'Tajawal, sans-serif' : 'JetBrains Mono, monospace',
        fontSize: 12, color: 'var(--text-muted)',
        letterSpacing: isAr ? '0.05em' : '0.18em',
        textTransform: isAr ? 'none' : 'uppercase'
      }}>{tt.footerMinistry}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
        <span style={{
          fontFamily: isAr ? 'Tajawal, sans-serif' : 'JetBrains Mono, monospace',
          fontSize: 11, color: 'var(--text-faint)',
          letterSpacing: isAr ? '0.05em' : '0.22em',
          textTransform: isAr ? 'none' : 'uppercase'
        }}>{tt.footerPowered}</span>
        <img src="assets/wonderful-logo.png" alt="Wonderful"
             style={{ height: 16, filter: 'invert(1) brightness(1.6) opacity(0.9)' }} />
        <span style={{
          fontFamily: isAr ? 'Tajawal, sans-serif' : 'JetBrains Mono, monospace',
          fontSize: 11, color: 'var(--text-faint)',
          letterSpacing: isAr ? '0' : '0.18em'
        }}>{tt.footerTail}</span>
      </div>
    </footer>
  );
}

window.HelpOverlay = HelpOverlay;