<!doctype html>
<html lang="en" dir="ltr" style="background:#0f172a !important;margin:0;padding:0">
  <head>
    <script>
      // معالج OAuth يدوي لـ Chrome Mobile - قبل أي شيء
      (function() {
        const hash = window.location.hash;
        if (hash && (hash.includes('access_token') || hash.includes('refresh_token'))) {
          try {
            const params = new URLSearchParams(hash.substring(1));
            const accessToken = params.get('access_token');
            const refreshToken = params.get('refresh_token');
            const expiresIn = params.get('expires_in');
            const tokenType = params.get('token_type');
            
            if (accessToken && refreshToken) {
              const expiresAt = Date.now() + (parseInt(expiresIn) || 3600) * 1000;
              const session = {
                access_token: accessToken,
                refresh_token: refreshToken,
                expires_in: parseInt(expiresIn) || 3600,
                expires_at: expiresAt,
                token_type: tokenType || 'bearer',
                user: null
              };
              
              // حفظ في كلا المفتاحين للتأكد
              const isMobile = /Android|iPhone|iPad|iPod/.test(navigator.userAgent);
              const storageKey = isMobile ? 'sb-mobile-auth-token' : 'sb-djlirquyvpccuvjdaueb-auth-token';
              
              localStorage.setItem(storageKey, JSON.stringify(session));
              localStorage.setItem('oauth_just_completed', 'true');
              
              // تنظيف URL من hash
              window.history.replaceState(null, '', window.location.pathname);
            }
          } catch (e) {
            // تجاهل الأخطاء
          }
        }
      })();
    </script>
    
    <script>
      // ✅ تطبيق الاتجاه فوراً قبل تحميل التطبيق (منع الوميض)
      (function() {
        try {
          const savedDirection = localStorage.getItem('app-direction');
          const savedLanguage = localStorage.getItem('app-language');
          let direction = 'ltr';
          if (savedDirection) {
            direction = savedDirection;
          } else if (savedLanguage === 'ar') {
            direction = 'rtl';
          }
          document.documentElement.dir = direction;
          document.documentElement.setAttribute('dir', direction);
          document.documentElement.lang = savedLanguage || 'en';
        } catch (e) {}
      })();
    </script>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-K7WZBK9S');</script>
    <!-- End Google Tag Manager -->
    <script>
      // التحسين: التحقق من البيئة (Localhost vs Production)
      // هذا يسمح لك كمطور برؤية جميع الأخطاء أثناء العمل، ويخفيها فقط عن المستخدم النهائي
      const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

      if (!isDev) {
        // إخفاء الرسائل غير المرغوبة فقط في البيئة الحية (Production)
        const _log = console.log;
        const _warn = console.warn;
        const _error = console.error;
        
        const blocked = [
          'SES', 'Removing', 'Cookie', 'Content-Security', 'tiktok', 'lockdown', 'i18next', 'AxiosError', 'ERR_NETWORK', 'SES_UNHANDLED',
          'Service Worker', 'استلام رسالة', 'طلب تحديث Badge', 'تم مسح Badge', 'تم تحديث Badge',
          'Badge', 'beforeinstallpromptevent', 'Banner not shown',
          'violates the following Content Security Policy', 'Connecting to',
          'Fetch API cannot load', 'Refused to connect', 'capig.madgicx.ai',
          'google-analytics.com', 'GoTrueClient', 'GoTrue', '#_', 'lock', 'session', 'storage key',
          'acquireLock', 'useSession', 'loadSession', 'getSession', 'notifyAllSubscribers',
          'recoverAndRefresh', 'onAuthStateChange', 'registered callback', 'auto refresh',
          '__cf_bm', 'has been rejected', 'invalid domain', 'wss://ws.binaryws.com', 'Firefox can\'t establish',
          'adsbygoogle', 'Tawk', 'i18next is not a function', 'intrinsics', 'Brevo Config', 'Subscription page check',
          'recaptcha', 'sodar', 'ep2.adtrafficquality', 'API Key exists', 'Template ID exists', 'Sender Email',
          'تم تسجيل الدخول', 'تحميل اللغة', 'The connection to wss', 'interrupted while the page',
          'notifications', 'HTTP/2 403', 'XHR', 'POST', 'rest/v1', 'djlirquyvpccuvjdaueb',
          'MapPrototype', 'WeakMapPrototype', 'DatePrototype', 'lockdown-install', 'realTimeDataService',
          'ws.binaryws.com', 'websocket', 'Removing intrinsics', 'getOrInsert', 'toTemporalInstant',
          'The stylesheet', 'was not loaded because its MIME type', 'text/html', 'text/css',
          'script-src-elem', 'sodar2.js', 'show_ads_impl_fy2021'
        ];
        
        const shouldBlock = (msg) => {
          const str = String(msg);
          return blocked.some(b => str.includes(b));
        };
        
        console.log = function(...a) { if (!a.some(shouldBlock)) _log.apply(console, a); };
        console.warn = function(...a) { if (!a.some(shouldBlock)) _warn.apply(console, a); };
        console.error = function(...a) { if (!a.some(shouldBlock)) _error.apply(console, a); };
        
        // حظر رسائل المتصفح الأصلية (Browser native messages)
        window.addEventListener('error', (e) => {
          const msg = String(e.message || '') + String(e.filename || '');
          if (blocked.some(b => msg.includes(b))) {
            e.preventDefault();
            return false;
          }
        }, true);
        
        // حظر رسائل unhandledrejection
        window.addEventListener('unhandledrejection', (e) => {
          const msg = String(e.reason || '') + String(e.promise || '');
          if (blocked.some(b => msg.includes(b))) {
            e.preventDefault();
            return false;
          }
        }, true);
      }
    </script>
    <meta charset="UTF-8" />
    <meta http-equiv="Cache-Control" content="no-store, max-age=0, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="google-site-verification" content="QaYl5pmSjpgHkzCV3ZOM82n8iIS_RI6shijhWo_b2kU" />
    <meta name="msvalidate.01" content="67DDB6625F76220579E016A897EC1670" />
    
    <!-- Canonical URL - تحديد الصفحة الأساسية -->
    <link rel="canonical" href="https://bootrading.com/" />
    
    <!-- Hreflang - تحديد اللغات والمناطق (الترتيب: en → fr → ar) -->
    <link rel="alternate" hreflang="en" href="https://bootrading.com/" />
    <link rel="alternate" hreflang="fr" href="https://bootrading.com/?lang=fr" />
    <link rel="alternate" hreflang="ar" href="https://bootrading.com/?lang=ar" />
    <link rel="alternate" hreflang="x-default" href="https://bootrading.com/" />
    
    <!-- Sitemap -->
    <link rel="sitemap" href="https://bootrading.com/sitemap.xml" type="application/xml" />
    
    <!-- Preconnect للموارد الخارجية -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://djlirquyvpccuvjdaueb.supabase.co" crossorigin />
    <link rel="preconnect" href="https://pagead2.googlesyndication.com" />
    <link rel="preconnect" href="https://challenges.cloudflare.com" crossorigin />
    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
    <link rel="dns-prefetch" href="https://connect.facebook.net" />
    <link rel="dns-prefetch" href="https://analytics.tiktok.com" />
    <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com" />
    <link rel="dns-prefetch" href="https://challenges.cloudflare.com" />
    
    <!-- Preload للملفات الحرجة -->
    <link rel="preload" href="/assets/react-vendor.*.js" as="script" />
    <link rel="preload" href="/assets/index.*.css" as="style" />
    
    <!-- Google AdSense -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7852521071436136"
     crossorigin="anonymous"></script>
    
    <!-- Content Security Policy - يتم تطبيقه من netlify.toml للإنتاج -->
    
    <!-- Critical CSS موسع للرسم الفوري -->
    <style>
      html{background:#0f172a !important;margin:0;padding:0}
      body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f172a !important;color:#fff;min-height:100vh}
      #root{min-height:100vh;display:flex;flex-direction:column;background:#0f172a !important}
      #initial-loader{position:fixed;inset:0;z-index:9999;background:linear-gradient(to bottom right, #0f172a, #1e3a8a, #0f172a) !important;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
      #initial-loader.hidden{opacity:0;pointer-events:none;visibility:hidden}
      .text-gray-300{color:#d1d5db}
      .text-sm{font-size:.875rem}
      .text-base{font-size:1rem}
      .text-lg{font-size:1.125rem}
      .mb-5{margin-bottom:1.25rem}
      .mb-6{margin-bottom:1.5rem}
      .max-w-2xl{max-width:42rem}
      .mx-auto{margin-left:auto;margin-right:auto}
      .text-center{text-align:center}
      .flex{display:flex}
      .items-center{align-items:center}
      .justify-center{justify-content:center}
      .min-h-screen{min-height:100vh}
      .p-5{padding:1.25rem}
      .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
      *{box-sizing:border-box}
    </style>
    
    <!-- Favicon - محسّن لـ Google Search -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/images/icon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/images/icon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/images/icon-96x96.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/images/icon-192x192.png" />
    <link rel="apple-touch-icon" href="/images/icon-96x96.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#0f172a" />
    <meta name="msapplication-TileColor" content="#0f172a" />
    <meta name="msapplication-TileImage" content="/images/icon-96x96.png" />
    
    <!-- SEO Meta Tags - سيتم تحديثها ديناميكياً -->
    <meta name="description" content="BooTrading - Smart automated trading platform for cryptocurrencies and forex. Get accurate recommendations, advanced analysis, and instant trading signals." id="meta-description" />
    <meta name="keywords" content="automated trading, trading bot, trading recommendations, technical analysis, cryptocurrency, forex, trading signals, BooTrading" id="meta-keywords" />
    <meta name="author" content="BooTrading" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    
    <!-- Open Graph / Facebook (محسّن للمشاركة والظهور في البحث) -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://bootrading.com/" />
    <meta property="og:title" content="BooTrading - Smart Automated Trading Platform" id="og-title" />
    <meta property="og:description" content="Get accurate trading recommendations and instant signals for cryptocurrencies and forex. Advanced analysis and professional tools." id="og-description" />
    <meta property="og:image" content="https://bootrading.com/images/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:alt" content="BooTrading - Smart Automated Trading Platform" />
    <meta property="og:locale" content="en_US" id="og-locale" />
    <meta property="og:locale:alternate" content="ar_SA" />
    <meta property="og:locale:alternate" content="fr_FR" />
    <meta property="og:site_name" content="BooTrading" />
    
    <!-- Twitter (محسّن للظهور في نتائج البحث) -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://bootrading.com/" />
    <meta name="twitter:title" content="BooTrading - Smart Automated Trading Platform" id="twitter-title" />
    <meta name="twitter:description" content="Get accurate trading recommendations and instant signals for cryptocurrencies and forex." id="twitter-description" />
    <meta name="twitter:image" content="https://bootrading.com/images/twitter-image.png" />
    <meta name="twitter:image:alt" content="BooTrading Trading Platform" />
    <meta name="twitter:creator" content="@bootrading" />
    
    <!-- Additional SEO -->
    <meta name="language" content="English" id="meta-language" />
    <meta name="revisit-after" content="7 days" />
    <meta name="rating" content="general" />
    <meta name="distribution" content="global" />
    
    <!-- Schema.org Structured Data - Organization (شامل بدون تكرار) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "BooTrading",
      "alternateName": "BooTrading",
      "url": "https://bootrading.com",
      "logo": {
        "@type": "ImageObject",
        "url": "https://bootrading.com/images/icon.png",
        "width": 512,
        "height": 512
      },
      "image": [
        "https://bootrading.com/images/icon.png",
        "https://bootrading.com/images/og-image.png",
        "https://bootrading.com/images/twitter-image.png"
      ],
      "sameAs": [
        "https://www.facebook.com/Bootradin",
        "https://twitter.com/bootrading"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "Customer Support",
        "url": "https://bootrading.com"
      },
      "description": "Smart automated trading platform for cryptocurrencies and forex. Get accurate recommendations and instant trading signals.",
      "offers": {
        "@type": "AggregateOffer",
        "priceCurrency": "USD",
        "lowPrice": "29.99",
        "highPrice": "647.99",
        "offerCount": "3"
      }
    }
    </script>
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    <!-- PWA Meta Tags محسنة للهاتف -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="BooTrading" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="BooTrading" />
    
    <!-- منع التكبير التلقائي في iOS -->
    <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
    
    <!-- Windows Tiles -->
    <meta name="msapplication-TileColor" content="#1c357c" />
    <meta name="msapplication-TileImage" content="/images/icon.png" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    
    <!-- Additional PWA Meta Tags -->
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-orientations" content="portrait" />
    
    <!-- iOS Splash Screens -->
    <link rel="apple-touch-startup-image" href="/images/logo.png" />
    
    <title>BooTrading - Smart Recommendations Platform</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet" media="print" onload="if(this.media!='all')this.media='all'">
    <!-- تحميل مسبوق للوغو -->
    <link rel="preload" href="/images/logo.png" as="image" type="image/png">
    
    
    <style>
      * {
        font-family: 'Cairo', sans-serif;
      }
      
      /* شاشة التحميل الأولية */
      #initial-loader {
        position: fixed !important;
        inset: 0 !important;
        background: linear-gradient(to bottom right, #0f172a, #1e3a8a, #0f172a) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
        transition: opacity 0.2s ease-out;
      }
      
      #initial-loader::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
        animation: pulse 3s ease-in-out infinite;
      }
      
      #initial-loader.hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        display: none !important;
      }
      
      .loader-content {
        text-align: center;
        position: relative;
        z-index: 10;
      }
      
      .loader-logo {
        width: 60px;
        height: 60px;
        margin: 0 auto 10px;
        opacity: 1 !important;
        display: block;
        filter: drop-shadow(0 10px 30px rgba(59, 130, 246, 0.5));
        -o-object-fit: contain;
           object-fit: contain;
        animation: none !important;
      }
      
      .loader-spinner {
        width: 80px;
        height: 80px;
        margin: 20px auto;
        position: relative;
      }
      
      /* خلفية متوهجة - مخففة */
      .loader-glow {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: linear-gradient(to right, #3b82f6, #a855f7);
        opacity: 0.1;
        animation: pulse 3s ease-in-out infinite;
      }
      
      /* دوائر دوارة - مجموعة 1 - مخففة */
      .loader-dots-1 {
        position: absolute;
        inset: 0;
        animation: spin-slow 4s linear infinite;
      }
      
      .loader-dots-1::before,
      .loader-dots-1::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      
      .loader-dots-1::before {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #3b82f6;
      }
      
      .loader-dots-1::after {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #a855f7;
      }
      
      /* دوائر دوارة - مجموعة 2 - مخففة */
      .loader-dots-2 {
        position: absolute;
        inset: 0;
        animation: spin-reverse 5s linear infinite;
      }
      
      .loader-dots-2::before,
      .loader-dots-2::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      
      .loader-dots-2::before {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #06b6d4;
      }
      
      .loader-dots-2::after {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #ec4899;
      }
      
      /* أيقونة البوت SVG */
      .loader-bot-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        animation: bounce-slow 2s ease-in-out infinite;
      }
      
      /* أيقونات إضافية */
      .loader-trend-icon,
      .loader-zap-icon {
        position: absolute;
        width: 12px;
        height: 12px;
      }
      
      .loader-trend-icon {
        top: -10%;
        right: -10%;
        animation: float-1 4s ease-in-out infinite;
        opacity: 0.7;
      }
      
      .loader-zap-icon {
        bottom: -10%;
        left: -10%;
        animation: float-2 4s ease-in-out infinite;
        animation-delay: 0.5s;
        opacity: 0.7;
      }
      
      @keyframes bounce-slow {
        0%, 100% { transform: translate(-50%, -50%) translateY(0); }
        50% { transform: translate(-50%, -50%) translateY(-10px); }
      }
      
      @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      
      @keyframes spin-reverse {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
      }
      
      @keyframes float-1 {
        0%, 100% { 
          transform: translate(0, 0) scale(1);
          opacity: 0.5;
        }
        50% { 
          transform: translate(5px, -5px) scale(1.1);
          opacity: 0.8;
        }
      }
      
      @keyframes float-2 {
        0%, 100% { 
          transform: translate(0, 0) scale(1);
          opacity: 0.5;
        }
        50% { 
          transform: translate(-5px, 5px) scale(1.1);
          opacity: 0.8;
        }
      }
      
      .loader-text {
        color: #e2e8f0;
        font-size: 18px;
        margin-top: 15px;
        font-weight: 600;
        letter-spacing: 1px;
        text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
        animation: fadeInOut 2s ease-in-out infinite;
      }
      
      @keyframes fadeInOut {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(0.95); }
      }
      
      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
      }
      
      /* إصلاحات CSS للهاتف المحمول */
      .keyboard-open {
        height: 50vh;
        overflow-y: auto;
      }
      
      .mobile-device input, .mobile-device select, .mobile-device textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        border-radius: 0;
      }
      
      /* تحسينات إضافية للهاتف المحمول */
      @media (max-width: 768px) {
        body {
          -webkit-text-size-adjust: 100%;
          -webkit-tap-highlight-color: transparent;
        }
        
        input, select, textarea, button {
          -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
          border-radius: 8px;
          -webkit-user-select: text;
          -moz-user-select: text;
               user-select: text;
        }
        
        /* منع التكبير عند focus */
        input[type="text"], input[type="email"], input[type="password"], 
        input[type="number"], input[type="tel"], textarea, select {
          font-size: 16px !important;
          transform: translateZ(0);
          -webkit-user-select: text;
          -moz-user-select: text;
               user-select: text;
        }
        
        /* منع الكتابة بأحرف كبيرة تلقائياً للبريد واسم المستخدم */
        input[type="email"], input[placeholder*="البريد"], 
        input[placeholder*="اسم المستخدم"], input[placeholder*="Username"],
        input[type="search"] {
          text-transform: none !important;
          -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
        }
      }
      
      /* إخفاء أيقونة Tawk.to */
      .tawk-min-container,
      #tawk-bubble-container,
      div[id*="tawk-bubble"],
      .tawk-chat-widget,
      iframe[src*="tawk.to"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
    </style>
    
    <script type="module" crossorigin src="/assets/index.DhHDCHZz.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor.ChIAAe2R.js">
    <link rel="modulepreload" crossorigin href="/assets/react-vendor.COb_il8k.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase.CCKZ--z2.js">
    <link rel="modulepreload" crossorigin href="/assets/services.Dl7t-CyB.js">
    <link rel="modulepreload" crossorigin href="/assets/admin.DC0GgvxC.js">
    <link rel="modulepreload" crossorigin href="/assets/subscription.Cthy0nuB.js">
    <link rel="modulepreload" crossorigin href="/assets/recommendations.BnkLF1g5.js">
    <link rel="stylesheet" crossorigin href="/assets/index.SDN-sInL.css">
  </head>
  <body style="background:#0f172a !important;margin:0;padding:0">
    <!-- SEO H1 Tag - مخفي بصرياً لكن مرئي لمحركات البحث -->
    <h1 class="sr-only">
      BooTrading - Smart Automated Trading Platform for Cryptocurrency and Forex with AI
    </h1>
    
    <!-- Meta Pixel Noscript -->
    <noscript>
      <img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=1327972468598136&ev=PageView&noscript=1"/>
    </noscript>
    
    <!-- شاشة التحميل الأولية -->
    <div id="initial-loader">
      <!-- خلفية متحركة -->
      <div style="position: absolute; inset: 0; opacity: 0.15; overflow: hidden;">
        <div style="position: absolute; top: 20%; left: 10%; width: 300px; height: 300px; background: #a855f7; border-radius: 50%; filter: blur(80px); animation: float 6s ease-in-out infinite;"></div>
        <div style="position: absolute; top: 60%; right: 15%; width: 250px; height: 250px; background: #06b6d4; border-radius: 50%; filter: blur(80px); animation: float 8s ease-in-out infinite; animation-delay: 2s;"></div>
        <div style="position: absolute; bottom: 20%; left: 40%; width: 200px; height: 200px; background: #ec4899; border-radius: 50%; filter: blur(80px); animation: float 7s ease-in-out infinite; animation-delay: 4s;"></div>
      </div>
      
      <div class="loader-content" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 30px;">
        <!-- اسم التطبيق في الأعلى -->
        <div style="text-align: center; margin-top: -100px;">
          <h1 id="app-name" style="color: #fbbf24; font-size: 32px; font-weight: 700; margin: 0; text-shadow: 0 0 30px rgba(251, 191, 36, 0.6); letter-spacing: 3px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">BooTrading</h1>
          <p id="subtitle-text" style="color: #60a5fa; font-size: 12px; margin: 8px 0 0 0; letter-spacing: 1px; opacity: 0.8; font-weight: 500;">Smart Trading Platform</p>
        </div>
        
        <!-- Container رئيسي للأنيميشن -->
        <div style="position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px;">
          <!-- الدائرة الخارجية -->
          <div class="loader-spinner">
            <!-- خلفية متوهجة -->
            <div class="loader-glow"></div>
            
            <!-- دوائر دوارة - مجموعة 1 -->
            <div class="loader-dots-1"></div>
            
            <!-- دوائر دوارة - مجموعة 2 -->
            <div class="loader-dots-2"></div>
            
            <!-- أيقونة البوت (Lucide Bot Icon) -->
            <svg class="loader-bot-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 8V4H8"/>
              <rect width="16" height="12" x="4" y="8" rx="2"/>
              <path d="M2 14h2"/>
              <path d="M20 14h2"/>
              <path d="M15 13v2"/>
              <path d="M9 13v2"/>
            </svg>
          </div>
          
          <!-- أيقونات التوصيات المتحركة -->
          <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;">
            <!-- أيقونة الترند (TrendingUp) -->
            <svg class="loader-trend-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
              <polyline points="16 7 22 7 22 13"/>
            </svg>
            
            <!-- أيقونة البرق (Zap) -->
            <svg class="loader-zap-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#facc15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
            </svg>
          </div>
        </div>
        
        <!-- نص التحميل -->
        <div style="text-align: center; margin-top: 20px;">
          <p class="loader-text" id="loading-text" style="color: #e5e7eb; font-size: 14px; margin: 0; font-weight: 500; letter-spacing: 0.5px;"></p>
        </div>
      </div>
      
      <script>
      // ✅ تطبيق الاتجاه فوراً عند التحميل الأولي
      (function() {
        const lang = localStorage.getItem('app-language') || localStorage.getItem('selectedLanguage') || 'en';
        const dir = lang === 'ar' ? 'rtl' : 'ltr';
        
        // تطبيق الاتجاه على الـ HTML element فوراً
        document.documentElement.dir = dir;
        document.documentElement.lang = lang;
        document.documentElement.setAttribute('dir', dir);
      })();

      // قاموس الترجمات
      const translations = {
        ar: {
          loading: 'جاري التحميل...',
          subtitle: 'منصة التداول الذكية'
        },
        en: {
          loading: 'Loading...',
          subtitle: 'Smart Trading Platform'
        },
        fr: {
          loading: 'Chargement...',
          subtitle: 'Plateforme de Trading Intelligente'
        }
      };

      // دالة تحديث نص التحميل
      function updateLoadingText() {
        const lang = localStorage.getItem('app-language') || localStorage.getItem('selectedLanguage') || 'en';
        const loadingText = document.getElementById('loading-text');
        const subtitleText = document.getElementById('subtitle-text');
        const loaderContent = document.querySelector('.loader-content');
        const dir = lang === 'ar' ? 'rtl' : 'ltr';
        
        // تطبيق الاتجاه على الـ HTML element
        document.documentElement.dir = dir;
        document.documentElement.lang = lang;
        document.documentElement.setAttribute('dir', dir);
        
        // تحديث نص التحميل
        if (loadingText) {
          loadingText.textContent = translations[lang]?.loading || translations['en'].loading;
        }
        
        // تحديث النص الفرعي (منصة التداول الذكية)
        if (subtitleText) {
          subtitleText.textContent = translations[lang]?.subtitle || translations['en'].subtitle;
        }
        
        // تطبيق الاتجاه على محتوى التحميل
        if (loaderContent) {
          loaderContent.style.direction = dir;
        }
      }

      // تطبيق الترجمة عند التحميل الأولي
      updateLoadingText();

      // الاستماع لتغييرات اللغة
      window.addEventListener('storage', function(e) {
        if (e.key === 'app-language' || e.key === 'selectedLanguage') {
          updateLoadingText();
        }
      });

      // تحديث النص عند تغيير اللغة من داخل التطبيق
      window.updateLoadingText = updateLoadingText;
    </script>
    </div>
    
    <div id="root" style="background:#0f172a !important;min-height:100vh"></div>
    
    <script>
      // دالة عامة لإخفاء شاشة التحميل
      function hideInitialLoader() {
        const loader = document.getElementById('initial-loader');
        if (loader && !loader.classList.contains('hidden')) {
          loader.classList.add('hidden');
        }
      }

      // إخفاء شاشة التحميل عند جاهزية React أو بعد مهلة قصوى
      window.addEventListener('DOMContentLoaded', function () {
        const root = document.getElementById('root');

        if (!root) {
          // احتياط: إخفاء بعد 8 ثواني إذا لم نجد root
          setTimeout(hideInitialLoader, 8000);
          return;
        }

        let checks = 0;
        const maxChecks = 40; // 40 * 250ms ≈ 10 ثواني كحد أقصى

        const interval = setInterval(function () {
          checks++;

          // إذا رسم React أي محتوى داخل #root
          if (root.children.length > 0) {
            clearInterval(interval);
            hideInitialLoader();
            return;
          }

          // إخفاء إجباري بعد المهلة القصوى
          if (checks >= maxChecks) {
            clearInterval(interval);
            hideInitialLoader();
          }
        }, 250);
      });

      // إتاحة الدالة لـ React (App.tsx يستدعي window.hideInitialLoader)
      window.hideInitialLoader = hideInitialLoader;
    </script>
    
    <!-- إصلاحات الهاتف المحمول - defer للأداء -->
    <script src="/mobile-fix.js" defer></script>
  </body>
</html>