feat(tactical): add tactical line of sight API, elevation engine, dynamic step resolution, weather module and executive showcase

apps/web/src/pages/ExecutiveShowcase.tsx

@@ -0,0 +1,611 @@
+import React, { useState } from 'react';
+import { 
+  Shield, 
+  Compass, 
+  Map as MapIcon, 
+  Activity, 
+  CheckCircle2, 
+  XCircle, 
+  Layers, 
+  Eye, 
+  Crosshair, 
+  Mountain, 
+  Cpu, 
+  Zap, 
+  Globe, 
+  Server, 
+  ArrowRight, 
+  Check, 
+  ChevronRight, 
+  Radio, 
+  Gauge, 
+  TrendingUp, 
+  FileText,
+  Flame,
+  Award
+} from 'lucide-react';
+
+export const ExecutiveShowcase: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'strategy' | 'tactical' | 'comparison' | 'roadmap'>('strategy');
+
+  return (
+    <div style={{
+      height: '100vh',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      background: 'radial-gradient(ellipse at top, #1e1b4b 0%, #0b0f19 50%, #030712 100%)',
+      color: '#f8fafc',
+      fontFamily: "'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif",
+      direction: 'rtl',
+      paddingTop: 48,
+      paddingBottom: 80,
+      scrollBehavior: 'smooth'
+    }}>
+      {/* Top Military & National Header */}
+      <header style={{
+        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+        background: 'rgba(11, 15, 25, 0.8)',
+        backdropFilter: 'blur(20px)',
+        position: 'sticky',
+        top: 0,
+        zIndex: 50,
+        padding: '16px 24px'
+      }}>
+        <div style={{
+          maxWidth: 1280,
+          margin: '0 auto',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 16
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+            <div style={{
+              width: 46,
+              height: 46,
+              borderRadius: 12,
+              background: 'linear-gradient(135deg, #4f46e5, #06b6d4)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              boxShadow: '0 4px 20px rgba(79, 70, 229, 0.4)',
+              border: '1px solid rgba(255, 255, 255, 0.2)'
+            }}>
+              <Shield size={24} color="#ffffff" />
+            </div>
+            <div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800, letterSpacing: '-0.02em', color: '#ffffff' }}>
+                  منظومة انطلاق للسيادة المكانية والخرائط التكتيكية
+                </h1>
+                <span style={{
+                  fontSize: '11px',
+                  background: 'rgba(34, 197, 94, 0.15)',
+                  color: '#4ade80',
+                  border: '1px solid rgba(34, 197, 94, 0.3)',
+                  padding: '2px 8px',
+                  borderRadius: 999,
+                  fontWeight: 700
+                }}>
+                  🇯🇴 سيادة أردنية 100%
+                </span>
+              </div>
+              <p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#94a3b8' }}>
+                عرض استراتيجي موجه للمركز الجغرافي الملكي الأردني والقيادة العامة | إعداد: المقدم م. حمزة الغويري
+              </p>
+            </div>
+          </div>
+
+          {/* Quick Action Navigation */}
+          <div style={{ display: 'flex', gap: 10 }}>
+            <a href="#map" style={{
+              textDecoration: 'none',
+              background: 'linear-gradient(135deg, #6366f1, #4f46e5)',
+              color: '#ffffff',
+              padding: '8px 18px',
+              borderRadius: 10,
+              fontSize: '0.85rem',
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              boxShadow: '0 4px 14px rgba(99, 102, 241, 0.35)'
+            }}>
+              <MapIcon size={16} /> فتح الخريطة التفاعلية
+            </a>
+            <a href="#review" style={{
+              textDecoration: 'none',
+              background: 'rgba(255, 255, 255, 0.06)',
+              border: '1px solid rgba(255, 255, 255, 0.12)',
+              color: '#cbd5e1',
+              padding: '8px 16px',
+              borderRadius: 10,
+              fontSize: '0.85rem',
+              fontWeight: 600,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}>
+              <Activity size={16} color="#38bdf8" /> لوحة تدقيق الشوارع
+            </a>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Container */}
+      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 24px' }}>
+
+        {/* Hero Section */}
+        <section style={{
+          textAlign: 'center',
+          padding: '40px 20px',
+          background: 'linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(15, 23, 42, 0) 100%)',
+          borderRadius: 24,
+          border: '1px solid rgba(255, 255, 255, 0.08)',
+          marginBottom: 40
+        }}>
+          <div style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+            background: 'rgba(99, 102, 241, 0.15)',
+            border: '1px solid rgba(99, 102, 241, 0.3)',
+            padding: '6px 16px',
+            borderRadius: 999,
+            color: '#a5b4fc',
+            fontSize: '0.85rem',
+            fontWeight: 700,
+            marginBottom: 20
+          }}>
+            <Cpu size={16} /> البديل السيادي الكامل لمنظومات إزري (ArcGIS) في الأردن
+          </div>
+
+          <h2 style={{
+            fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
+            fontWeight: 900,
+            lineHeight: 1.3,
+            margin: '0 auto 16px auto',
+            maxWidth: 900,
+            background: 'linear-gradient(135deg, #ffffff 30%, #94a3b8 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent'
+          }}>
+            منصة خرائط وطنية ذكية تتغذى ذاتياً وتولد الشوارع والبيانات المكانية من حركة الأساطيل
+          </h2>
+
+          <p style={{
+            fontSize: '1.05rem',
+            color: '#94a3b8',
+            maxWidth: 820,
+            margin: '0 auto 28px auto',
+            lineHeight: 1.8
+          }}>
+            استثمار استراتيجي مزدوج: تطبيق نقل وخدمات لوجستية ذكي في الواجهة، ومحرك خرائط تكتيكي سيادي في الخلفية، يكتشف الطرق والمعالم تلقائياً في أي دولة أو مسرح عمليات بدون الحاجة لرخص أجنبية أو مسح ميداني بطيء.
+          </p>
+
+          {/* Quick Metrics Bar */}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+            gap: 16,
+            maxWidth: 1000,
+            margin: '0 auto'
+          }}>
+            <div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+              <div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#38bdf8' }}>60 FPS</div>
+              <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>سرعة عرض المتجهات (Martin MVT)</div>
+            </div>
+            <div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+              <div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#4ade80' }}>100%</div>
+              <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>استقلالية تامة (Air-Gapped On-Premise)</div>
+            </div>
+            <div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+              <div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#fbbf24' }}>$0</div>
+              <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>تكلفة رخص سنوية أو رسوم لكل مستخدم</div>
+            </div>
+            <div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+              <div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#a78bfa' }}>3 دول</div>
+              <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>الأردن 🇯🇴 • سوريا 🇸🇾 • مصر 🇪🇬</div>
+            </div>
+          </div>
+        </section>
+
+        {/* Tab Navigation */}
+        <div style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 12,
+          marginBottom: 32,
+          flexWrap: 'wrap'
+        }}>
+          {[
+            { id: 'strategy', label: '1. الرؤية وحجر الأساس (توليد الخرائط)', icon: <TrendingUp size={16} /> },
+            { id: 'tactical', label: '2. الأدوات التكتيكية والعسكرية (LOS)', icon: <Crosshair size={16} /> },
+            { id: 'comparison', label: '3. المقارنة القاطعة مع إزري (Esri)', icon: <Layers size={16} /> },
+            { id: 'roadmap', label: '4. خطة الشراكة مع المركز الجغرافي', icon: <Award size={16} /> },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as any)}
+              style={{
+                background: activeTab === tab.id ? 'linear-gradient(135deg, #4f46e5, #6366f1)' : 'rgba(255, 255, 255, 0.05)',
+                border: activeTab === tab.id ? '1px solid #818cf8' : '1px solid rgba(255, 255, 255, 0.1)',
+                color: activeTab === tab.id ? '#ffffff' : '#94a3b8',
+                padding: '12px 22px',
+                borderRadius: 12,
+                fontSize: '0.9rem',
+                fontWeight: 700,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                transition: 'all 0.2s ease',
+                boxShadow: activeTab === tab.id ? '0 4px 16px rgba(79, 70, 229, 0.35)' : 'none'
+              }}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* TAB 1: STRATEGY & SELF-HEALING MAPS */}
+        {activeTab === 'strategy' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+            <div style={{
+              background: 'rgba(15, 23, 42, 0.6)',
+              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: 20,
+              padding: '32px',
+              backdropFilter: 'blur(16px)'
+            }}>
+              <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#38bdf8', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <TrendingUp size={24} /> حجر الأساس: كيف تحول حركة الأساطيل إلى خريطة سيادية حية؟
+              </h3>
+              <p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}>
+                النموذج التقليدي المتبع لدى إزري والشركات الأجنبية يعتمد على انتظار فرق المسح الميداني أو التقاط صور أقمار صناعية باهظة كل عدة أشهر أو سنوات. في المقابل، تتبنى منصتنا <strong>فلسفة الخريطة الحية ذاتية التغذية والتوليد (Autonomous Self-Healing Map Grid)</strong>:
+              </p>
+
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+                gap: 20,
+                marginTop: 24
+              }}>
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(56, 189, 248, 0.2)' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(56, 189, 248, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8', marginBottom: 12 }}>
+                    <Activity size={20} />
+                  </div>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>1. استيعاب التتبع اللحظي (Telemetry)</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}>
+                    المنصة تستوعب مئات آلاف نقاط الموقع من الآليات العسكرية أو أساطيل التوصيل والنقل كل 3 ثوانٍ وتعالجها مكانياً في محرك PostGIS فائق الأداء.
+                  </p>
+                </div>
+
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(168, 85, 247, 0.2)' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(168, 85, 247, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc', marginBottom: 12 }}>
+                    <Cpu size={20} />
+                  </div>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>2. خوارزمية اكتشاف الطرق الجديدة</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}>
+                    عندما تتحرك مركبات متعددة في مسار صحراوي أو حي جديد غير مرسوم على الخريطة، يقوم النظام بتوليد طريق مرشح (Candidate Road) وحساب طوله، سرعته، ومعدل الثقة به تلقائياً.
+                  </p>
+                </div>
+
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(34, 197, 94, 0.2)' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(34, 197, 94, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', marginBottom: 12 }}>
+                    <CheckCircle2 size={20} />
+                  </div>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>3. التدقيق والموافقة ونشر الملاحة فوراً</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}>
+                    يستعرض مهندسو المركز الجغرافي الشوارع المكتشفة في لوحة التدقيق (Review Dashboard) بجانب صور الأقمار الصناعية والخرائط السوفيتية، وبضغطة زر واحدة يُحقن الطريق في محرك الملاحة.
+                  </p>
+                </div>
+              </div>
+
+              {/* Military & Tactical Deployment Expansion */}
+              <div style={{
+                marginTop: 28,
+                padding: '20px',
+                background: 'rgba(99, 102, 241, 0.12)',
+                borderRadius: 14,
+                border: '1px solid rgba(99, 102, 241, 0.3)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 16
+              }}>
+                <Globe size={32} color="#818cf8" style={{ flexShrink: 0 }} />
+                <div>
+                  <div style={{ fontWeight: 800, fontSize: '1rem', color: '#ffffff' }}>
+                    الأثر العسكري والتوسعي: العمل في أي مسرح عمليات فورياً
+                  </div>
+                  <div style={{ fontSize: '0.88rem', color: '#cbd5e1', marginTop: 4, lineHeight: 1.7 }}>
+                    إذا تم نشر آليات القوات المسلحة أو الأجهزة الأمنية في أي منطقة حدودية أو دولة مجاورة (مثل جنوب سوريا، غرب العراق، صحراء سيناء)، يكفي تشغيل تطبيق التتبع لتبدأ المنصة فوراً برسم شبكة الطرق والممرات الوعرة ونشرها لباقي التشكيلات في الميدان دون انتظار أي طرف أجنبي!
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* TAB 2: TACTICAL & MILITARY TOOLS */}
+        {activeTab === 'tactical' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+            <div style={{
+              background: 'rgba(15, 23, 42, 0.6)',
+              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: 20,
+              padding: '32px',
+              backdropFilter: 'blur(16px)'
+            }}>
+              <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#f59e0b', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <Crosshair size={24} /> قدرات الميدان والتحليل التكتيكي العسكري
+              </h3>
+              <p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}>
+                تم تزويد المنصة بأدوات تحليل تضاريسي مخصصة لخدمة سلاح المدفعية، الاستطلاع، وغرف العمليات والسيطرة المشتركة:
+              </p>
+
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: 20,
+                marginTop: 24
+              }}>
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ padding: 8, borderRadius: 8, background: 'rgba(245, 158, 11, 0.2)', color: '#fbbf24' }}>
+                      <Eye size={20} />
+                    </div>
+                    <h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>تبادل الرؤية وخط النظر (Line of Sight)</h4>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>تحديد إمكانية الرؤية المباشرة بين نقطتين (راصد وهدف).</li>
+                    <li>كشف وتحديد القمم الجبلية والعوائق الحاجبة للرؤية بدقة المتر.</li>
+                    <li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> خلف الحواف.</li>
+                    <li>تصحيح انكسار الضوء الجوي التكتيكي وتقوس الأرض (Earth Curvature).</li>
+                  </ul>
+                </div>
+
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ padding: 8, borderRadius: 8, background: 'rgba(167, 139, 250, 0.2)', color: '#c084fc' }}>
+                      <Shield size={20} />
+                    </div>
+                    <h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>حسابات الرماية وزاوية الموقع (Mils)</h4>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>حساب زاوية الموقع (Angle of Site) بالميللي العسكري (Artillery Mils).</li>
+                    <li>حساب السمت والاتجاه البوصلّي الدقيق (Azimuth / Bearing).</li>
+                    <li>مقطع رأسي كامل للارتفاعات فوق مستوى سطح البحر (AMSL).</li>
+                    <li>تعديل ارتفاع عين الراصد وارتفاع الهدف حسب نوع الآلية أو البرج.</li>
+                  </ul>
+                </div>
+
+                <div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ padding: 8, borderRadius: 8, background: 'rgba(56, 189, 248, 0.2)', color: '#38bdf8' }}>
+                      <Radio size={20} />
+                    </div>
+                    <h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>التشغيل المعزول التام (Air-Gapped Offline)</h4>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>نظام كامل يعمل داخل خادم صغير أو جهاز لوحي عسكري داخل الآلية.</li>
+                    <li>توجيه وملاحة وحساب مسافات بدون الحاجة لأي اتصال بالإنترنت.</li>
+                    <li>حماية تامة من التشويش أو قطع الخدمات السحابية الأجنبية.</li>
+                    <li>تشفير مسارات وبيانات التحركات وفق معايير أمنية صارمة.</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* TAB 3: DIRECT COMPARISON WITH ESRI ARCGIS */}
+        {activeTab === 'comparison' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+            <div style={{
+              background: 'rgba(15, 23, 42, 0.6)',
+              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: 20,
+              padding: '32px',
+              backdropFilter: 'blur(16px)'
+            }}>
+              <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#ffffff', margin: '0 0 20px 0' }}>
+                مقارنة مباشرة: منصة انطلاق السيادية مقابل إزري (Esri ArcGIS)
+              </h3>
+
+              <div style={{ overflowX: 'auto' }}>
+                <table style={{
+                  width: '100%',
+                  borderCollapse: 'collapse',
+                  fontSize: '0.9rem',
+                  textAlign: 'right'
+                }}>
+                  <thead>
+                    <tr style={{ background: 'rgba(255, 255, 255, 0.06)', borderBottom: '2px solid rgba(255, 255, 255, 0.15)' }}>
+                      <th style={{ padding: '14px 18px', color: '#94a3b8' }}>المعيار</th>
+                      <th style={{ padding: '14px 18px', color: '#ef4444' }}>منظومة إزري (Esri ArcGIS)</th>
+                      <th style={{ padding: '14px 18px', color: '#4ade80', background: 'rgba(34, 197, 94, 0.08)' }}>منصة انطلاق السيادية (Intaleq)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {[
+                      {
+                        criteria: 'التكلفة والترخيص السنوي',
+                        esri: 'عشرات إلى مئات الآلاف $ سنوياً (تراخيص مستخدمين + استهلاك Credits)',
+                        intaleq: 'ملكية سيادية وطنية كاملة $0 رخص سنوية أو رسوم مستخدمين'
+                      },
+                      {
+                        criteria: 'السيادة وسرية البيانات',
+                        esri: 'تعتمد على سحابة إزري الأمريكية في البحث والتوجيه وتحديث البيانات',
+                        intaleq: 'سيرفرات داخلية 100% داخل المركز الجغرافي أو القيادة العامة (On-Premise)'
+                      },
+                      {
+                        criteria: 'سرعة عرض الخرائط التفاعلية',
+                        esri: 'ثقيلة وبطيئة على المتصفحات وتطبيقات الميدان (15-25 FPS)',
+                        intaleq: 'فائقة السرعة عبر Vector Tiles ورندرة بكرت الشاشة (60 FPS)'
+                      },
+                      {
+                        criteria: 'تحديث شبكة الطرق',
+                        esri: 'يتطلب مسحاً ميدانياً بطيئاً أو شراء مجموعات بيانات دورية باهظة',
+                        intaleq: 'تحديث تلقائي لحظي من بيانات تتبع حركة السائقين والآليات'
+                      },
+                      {
+                        criteria: 'البحث بالعربية والمسميات المحلية',
+                        esri: 'ضعيف في فهم اللهجة الشعبية، التقسيمات العشائرية والأخطاء الإملائية',
+                        intaleq: 'محرك بحث ذكي يفهم اللهجة الأردنية، الاستعلامات النسبية وبوابات المجمعات'
+                      },
+                      {
+                        criteria: 'التكامل مع تطبيقات الموبايل والميدان',
+                        esri: 'يحتاج مكتبات SDK ضخمة وتراخيص App Development مدفوعة',
+                        intaleq: 'واجهات REST APIs و MapLibre مفتوحة وسهلة الدمج مع أي تطبيق فلاتر أو أندرويد'
+                      },
+                      {
+                        criteria: 'الاستخدام في مسارح عمليات خارج الأردن',
+                        esri: 'شراء تراخيص خرائط منفصلة لكل دولة إضافية',
+                        intaleq: 'إضافة أي دولة (سوريا، مصر، العراق) بسكربت واحد خلال دقائق معدودة'
+                      }
+                    ].map((row, idx) => (
+                      <tr key={idx} style={{
+                        borderBottom: '1px solid rgba(255, 255, 255, 0.06)',
+                        background: idx % 2 === 0 ? 'transparent' : 'rgba(255, 255, 255, 0.02)'
+                      }}>
+                        <td style={{ padding: '14px 18px', fontWeight: 700, color: '#f8fafc' }}>{row.criteria}</td>
+                        <td style={{ padding: '14px 18px', color: '#fca5a5' }}>✕ {row.esri}</td>
+                        <td style={{ padding: '14px 18px', color: '#86efac', fontWeight: 600, background: 'rgba(34, 197, 94, 0.04)' }}>✓ {row.intaleq}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* TAB 4: ROADMAP WITH RJGC */}
+        {activeTab === 'roadmap' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+            <div style={{
+              background: 'rgba(15, 23, 42, 0.6)',
+              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: 20,
+              padding: '32px',
+              backdropFilter: 'blur(16px)'
+            }}>
+              <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#4ade80', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <Award size={24} /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي
+              </h3>
+              <p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}>
+                لا نطلب من المركز إلغاء ما لديه فجأة، بل نقترح مسار شراكة استراتيجي آمن يبدأ بإثبات الجدارة:
+              </p>
+
+              <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 16,
+                marginTop: 24
+              }}>
+                {[
+                  {
+                    phase: 'المرحلة الأولى: إثبات المفهوم (POC) لمدة 30 يوماً',
+                    duration: 'الشهر الأول',
+                    desc: 'تنصيب نسخة سريعة داخل خوادم المركز الجغرافي لعرض خرائط المملكة وبلاطات المتجهات ومقارنة سرعتها وأدائها مع خوادم ArcGIS الحالية دون أي التزام مالي.'
+                  },
+                  {
+                    phase: 'المرحلة الثانية: ربط أساطيل التتبع وتفعيل التحديث التلقائي',
+                    duration: 'الشهر الثاني - الثالث',
+                    desc: 'ربط بيانات تتبع آليات حكومية أو تجارية لبدء اكتشاف الطرق الجديدة تلقائياً وتزويد مهندسي المركز بلوحة مراجعة واعتماد الشوارع.'
+                  },
+                  {
+                    phase: 'المرحلة الثالثة: دمج الأدوات التكتيكية مع القيادة العامة وسلاح المدفعية',
+                    duration: 'الشهر الرابع فصاعداً',
+                    desc: 'تخصيص محرك تبادل الرؤية (LOS) ومقاطع التضاريس والخرائط غير المتصلة (Offline) ليتم تعميمها على الأجهزة اللوحية الميدانية في القوات المسلحة.'
+                  }
+                ].map((item, idx) => (
+                  <div key={idx} style={{
+                    background: 'rgba(255, 255, 255, 0.03)',
+                    border: '1px solid rgba(255, 255, 255, 0.08)',
+                    borderRadius: 14,
+                    padding: '20px',
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 16
+                  }}>
+                    <div style={{
+                      width: 36,
+                      height: 36,
+                      borderRadius: 10,
+                      background: 'rgba(79, 70, 229, 0.2)',
+                      border: '1px solid rgba(79, 70, 229, 0.4)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: '#a5b4fc',
+                      fontWeight: 800,
+                      flexShrink: 0
+                    }}>
+                      {idx + 1}
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
+                        <h4 style={{ margin: 0, fontSize: '1.05rem', color: '#ffffff' }}>{item.phase}</h4>
+                        <span style={{ fontSize: '0.8rem', color: '#38bdf8', background: 'rgba(56, 189, 248, 0.1)', padding: '2px 10px', borderRadius: 999 }}>
+                          {item.duration}
+                        </span>
+                      </div>
+                      <p style={{ margin: '8px 0 0 0', fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}>
+                        {item.desc}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Live Demo Launcher Banner */}
+        <section style={{
+          marginTop: 40,
+          background: 'linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(6, 182, 212, 0.15) 100%)',
+          border: '1px solid rgba(99, 102, 241, 0.4)',
+          borderRadius: 20,
+          padding: '28px 32px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 20
+        }}>
+          <div>
+            <h3 style={{ margin: '0 0 6px 0', fontSize: '1.3rem', fontWeight: 800, color: '#ffffff' }}>
+              هل ترغب في استعراض النظام عملياً الآن؟
+            </h3>
+            <p style={{ margin: 0, color: '#cbd5e1', fontSize: '0.9rem' }}>
+              الخريطة الحية وأدوات التوجيه وتبادل الرؤية والطقس جاهزة وتعمل بالكامل داخل المتصفح.
+            </p>
+          </div>
+          <div style={{ display: 'flex', gap: 12 }}>
+            <a href="#map" style={{
+              textDecoration: 'none',
+              background: '#ffffff',
+              color: '#0f172a',
+              padding: '10px 22px',
+              borderRadius: 10,
+              fontSize: '0.9rem',
+              fontWeight: 800,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              boxShadow: '0 4px 14px rgba(255, 255, 255, 0.25)'
+            }}>
+              بدء الديمو التفاعلي <ArrowRight size={16} />
+            </a>
+          </div>
+        </section>
+
+      </main>
+    </div>
+  );
+};

apps/web/src/pages/IntelligenceDashboard.tsx

@@ -225,9 +225,9 @@ const IntelligenceDashboard: React.FC = () => {
       closesRef.current = safeCloses;
       pushMapData();
       setNeedsAuth(false);
-    } catch (e: any) {
+    } catch (e: unknown) {
       console.error(e);
-      setMsg(e.message || 'Error loading dashboard');
+      setMsg((e as any)?.message || 'Error loading dashboard');
     }
     setLoading(false);
   };
@@ -484,7 +484,7 @@ const IntelligenceDashboard: React.FC = () => {
       setMsg('Road submitted for intelligence analysis!');
       cancelDrawing();
       load();
-    } catch (e: any) { setMsg(e.message || 'Error submitting'); }
+    } catch (e: unknown) { setMsg((e as any)?.message || 'Error submitting'); }
     setTimeout(() => setMsg(''), 5000);
   };
 
@@ -495,7 +495,7 @@ const IntelligenceDashboard: React.FC = () => {
       const r = await fetch(`${API}/maps/sync-routes`, { method: 'POST', headers: { 'x-api-key': apiKey } });
       if (!r.ok) throw new Error('Failed');
       setMsg('✅ Routing sync requested! Check back in 5-10 min.');
-    } catch (e: any) { setMsg(e.message || 'Error'); }
+    } catch (e: unknown) { setMsg((e as any)?.message || 'Error'); }
     setTimeout(() => setMsg(''), 5000);
   };