<!DOCTYPE html>
<html lang="ar" dir="rtl" class="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- تحسين الضغط والأداء -->
    <meta http-equiv="Accept-Encoding" content="gzip, deflate, br" />
    <meta http-equiv="Content-Encoding" content="gzip" />
    
    <!-- سياسة أمان المحتوى المُحسّنة للعمل في بيئتي التطوير والإنتاج -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://connect.facebook.net https://www.googletagmanager.com https://www.google-analytics.com https://analytics.tiktok.com https://ads.tiktok.com https://www.facebook.com https://player.vimeo.com https://vimeo.com https://api.vadoo.tv https://vadoo.tv blob:; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://connect.facebook.net https://www.googletagmanager.com https://www.google-analytics.com https://analytics.tiktok.com https://ads.tiktok.com https://www.facebook.com https://player.vimeo.com https://vimeo.com https://api.vadoo.tv https://vadoo.tv; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; connect-src 'self' https://api.vercel.com https://*.vercel.com https://*.supabase.co https://*.supabase.in wss://*.supabase.co https://api.yalidine.app https://procolis.com https://*.ecotrack.dz https://api.ecotrack.dz https://*.vercel.app https://*.sentry.io https://www.facebook.com https://graph.facebook.com https://www.google-analytics.com https://analytics.google.com https://ads.tiktok.com https://analytics.tiktok.com https://fonts.googleapis.com https://fonts.gstatic.com https://images.unsplash.com https://www.gravatar.com https://secure.gravatar.com https://api.ipify.org https://player.vimeo.com https://vimeo.com https://api.vadoo.tv https://vadoo.tv ws://localhost:* wss://localhost:* http://localhost:* http://127.0.0.1:* ws://127.0.0.1:*; img-src 'self' data: blob: https://*.supabase.co https://*.supabase.in https://cdn.jsdelivr.net https://images.unsplash.com https://*.unsplash.com https://maps.googleapis.com https://*.googleusercontent.com https://www.gravatar.com https://www.facebook.com https://t.co https://analytics.tiktok.com https://ads.tiktok.com https://api.qrserver.com https://bwipjs-api.metafloor.com https://cdn.salla.sa https://i.vimeocdn.com https://f.vimeocdn.com https://api.vadoo.tv https://vadoo.tv; frame-src https://www.facebook.com https://connect.facebook.net https://player.vimeo.com https://vimeo.com https://api.vadoo.tv https://vadoo.tv;" />

    <title>سطوكيها - منصة إدارة المتاجر الذكية</title>
    <meta name="description" content="سطوكيها - منصة إدارة المتاجر الذكية لإنشاء متجرك الإلكتروني وإدارة المبيعات والمخزون بكل سهولة" />
    <meta name="author" content="سطوكيها" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/logo-new.webp">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/logo-new.webp">
    
    <!-- 🚀 Preconnect للخطوط - يقلل render blocking بنسبة كبيرة -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 🔤 تحميل خطوط بـ font-display: swap لمنع FOIT -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    
    <!-- إضافة سكريبت للتعامل مع وضع الإضاءة -->
    <script>
      // حاول تطبيق الوضع المحفوظ قبل تحميل الصفحة لمنع وميض الشاشة
      const storedTheme = localStorage.getItem('theme') || 'light';
      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      const initialTheme = storedTheme === 'system' ? systemTheme : storedTheme;
      document.documentElement.classList.add(initialTheme);
      document.documentElement.style.colorScheme = initialTheme;
    </script>
    
    <!-- 🚀 DNS prefetch للموارد الخارجية -->
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    
    <!-- Polyfill for process -->
    <script>
      window.process = window.process || { env: {} };
      window.global = window.global || window;
      
      // تعريف module و require لمنع أخطاء في الملفات المجمعة
      if (typeof window !== 'undefined' && typeof module === 'undefined') {
        window.module = { exports: {} };
      }
      if (typeof window !== 'undefined' && typeof exports === 'undefined') {
        window.exports = window.module.exports;
      }
      if (typeof window !== 'undefined' && typeof require === 'undefined') {
        window.require = function(name) { return {}; };
        window.require.main = window.module;
      }
      
      // 🔧 React Polyfill لحل مشكلة __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
      window.React = window.React || {};
      if (typeof window.React === 'object' && !window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
        window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
          ReactCurrentDispatcher: { current: null },
          ReactCurrentBatchConfig: { transition: null },
          ReactCurrentOwner: { current: null },
          ReactDebugCurrentFrame: { getCurrentStack: null },
          ReactCurrentFiber: { current: null },
          ReactCurrentActQueue: { current: null, isBatchingLegacy: false, didScheduleLegacyUpdate: false },
        };

      }
    </script>
    
    <!-- 🚀 PERFORMANCE OPTIMIZATION: Resource Hints -->
    <link rel="dns-prefetch" href="//api.vercel.com">
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 🎯 Preload Critical Resources لتقليل طلبات HTTP -->
    <link rel="preload" href="/fonts/tajawal-regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/fonts/tajawal-medium.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/fonts/tajawal-bold.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- 🚀 Critical CSS will be loaded via React imports -->
    
    <!-- 🚀 CRITICAL CSS INLINE for instant FCP -->
    <style>
      /* Critical layout styles optimized for speed */
      html { 
        font-family: 'TajawalForced', 'Tajawal', 'Arial Unicode MS', 'Tahoma', 'Arial', sans-serif !important;
      }
      body {
        font-family: 'TajawalForced', 'Tajawal', 'Arial Unicode MS', 'Tahoma', 'Arial', sans-serif !important;
        margin: 0;
        padding: 0;
        direction: rtl;
        text-align: right;
        background-color: #ffffff;
        color: #000000;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      /* 🚀 Optimized loading screen - minimal styles */
      #root { min-height: 100vh; }
      
      .loading-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
      }
      
      .loading-spinner {
        width: 32px;
        height: 32px;
        border: 2px solid #f0f0f0;
        border-top: 2px solid #6b21a8;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      /* Dark mode support */
      .dark body {
        background-color: #0a0a0a;
        color: #ffffff;
      }
      
      .dark .loading-container {
        background-color: #0a0a0a;
      }
      
      /* Performance optimization: will-change for animated elements */
      .loading-spinner {
        will-change: transform;
      }
    </style>

    <meta property="og:title" content="سطوكيها - منصة إدارة المتاجر الذكية" />
    <meta property="og:description" content="منصة إدارة المتاجر الذكية لإنشاء متجرك الإلكتروني وإدارة المبيعات والمخزون بكل سهولة" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/images/logo-new.webp" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@stockiha" />
    <meta name="twitter:image" content="/images/logo-new.webp" />
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#6b21a8">
    
    <!-- مخصص لـ Vercel و SPA -->
    <meta name="vercel-deployment" content="true">
    <meta name="format-detection" content="telephone=no">
    <script type="module" crossorigin src="/assets/vendor-core-NRN1EQl-.js"></script>
    <script type="module" crossorigin src="/assets/vendor-utils-B3RT5ugJ.js"></script>
    <script type="module" crossorigin src="/assets/ui-material-BQBdbykU.js"></script>
    <script type="module" crossorigin src="/assets/ui-core-ByfTF_h4.js"></script>
    <script type="module" crossorigin src="/assets/ui-essentials-DxueOomz.js"></script>
    <script type="module" crossorigin src="/assets/ui-forms-CFO5j-KX.js"></script>
    <script type="module" crossorigin src="/assets/ui-advanced-EmMg67YV.js"></script>
    <script type="module" crossorigin src="/assets/ui-feedback-C1YSoSYX.js"></script>
    <script type="module" crossorigin src="/assets/animation-core-B6QepTlx.js"></script>
    <script type="module" crossorigin src="/assets/ui-layout---XymIn2.js"></script>
    <script type="module" crossorigin src="/assets/pos-module-b6EBVM6f.js"></script>
    <script type="module" crossorigin src="/assets/dashboard-module-CbLmPnpt.js"></script>
    <script type="module" crossorigin src="/assets/charts-core-BBg-ZjmH.js"></script>
    <script type="module" crossorigin src="/assets/charts-advanced-RtXYM_3Z.js"></script>
    <script type="module" crossorigin src="/assets/store-editor-iJ9Fg14p.js"></script>
    <script type="module" crossorigin src="/assets/index-BdciSvZh.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/css/style-hlK67m2u.css">
  </head>

  <body>
    <div id="root">
      <!-- PERFORMANCE OPTIMIZATION: Loading screen for better perceived performance -->
      <div class="loading-container" id="initial-loading">
        <div class="loading-spinner"></div>
      </div>
    </div>
    
    <!-- Remove loading screen when React loads -->
    <script>
      // 🚀 دالة عامة لإزالة شاشة التحميل - سيتم استدعاؤها من React
      window.removeInitialLoading = function() {
        const loadingScreen = document.getElementById('initial-loading');
        if (loadingScreen) {
          loadingScreen.style.opacity = '0';
          loadingScreen.style.transition = 'opacity 0.3s ease';
          setTimeout(() => {
            if (loadingScreen.parentNode) {
              loadingScreen.remove();
            }
          }, 300);
        }
      };
    </script>


  </body>
</html>
