<!-- TL-DEPLOY
  LOCAL : D:\tangleon\trendlens\app\apps\web\public\index.html
  SERVER: /var/www/trendlens/apps/web/public/index.html
-->

<!--
================================================================================
    TRENDLENS - SPECIFICATIONS DOCUMENT (Country & Locale Logic)
    ============================================================
    وثيقة مواصفات رسمية: قواعد عمل ترند لينس للمستخدم النهائي
    ============================================================
    
    📋 1) التعريفات الأساسية
    -------------------------
    
    1. country / السوق
       - بلد المستخدم (MG، SA، US…)
       - يستخرج من: IP أو بيانات الحساب المسجلة
    
    2. locale / اللغة
       - لغة الواجهة: `ar` أو `en`
       - اللغة لا تساوي الدولة
       - مثال: مستخدم من مدغشقر (country=MG) لغته إنجليزي (locale=en)
    
    3. ترند لينس تدعم:
       - الترند المحلي (local): إذا عندنا مصادر بيانات لهذه الدولة
       - الترند العالمي (global): موجود للجميع ويستخدم كاحتياط
    
    
    📋 2) منطق فتح المنصة لأول مرة (Homepage Auto Mode)
    ----------------------------------------------------
    
    عند دخول المستخدم للرئيسية بدون ما يغيّر الفلاتر يدويًا:
    
    1. تحدد:
       - detected_country
       - detected_locale
    
    2. تسأل الباكند: هل هذه الدولة عندها بيانات محلية؟
       - has_local = true | false
    
    3. القاعدة:
       
       * إذا has_local = true:
         - التبويب الافتراضي = الترند المحلي
         - API: /api/trends/homepage?scope=local&country={detected_country}&locale={detected_locale}&period=last_7d
       
       * إذا has_local = false:
         - ننتقل تلقائيًا إلى الترند العالمي
         - API: /api/trends/homepage?scope=global&country={detected_country}&locale={detected_locale}&period=last_7d
         - تظهر رسالة تنبيه: لا توجد بيانات محلية
    
    4. إذا كان عند المستخدم تفضيل محفوظ (localStorage أو إعدادات الحساب):
       - نستخدم التفضيل بدل الكشف التلقائي
    
    
    📋 3) قائمة الأسواق (Market Dropdown)
    --------------------------------------
    
    - ديناميكية من API: GET /api/markets/list
    - Response format:
      [
        { "code": "US", "name_ar": "أمريكا", "name_en": "United States", "has_local": true },
        { "code": "SA", "name_ar": "السعودية", "name_en": "Saudi Arabia", "has_local": true },
        { "code": "MG", "name_ar": "مدغشقر", "name_en": "Madagascar", "has_local": false }
      ]
    
    - أول خيار: "كل الأسواق (عالمي)" / "All markets (Global)"
      - يرسل country="" أو country=ALL
    
    - بقية الخيارات تُبنى من JSON:
      - locale=ar → name_ar
      - locale=en → name_en
    
    
    📋 4) القواعد عند تغيير الفلاتر
    --------------------------------
    
    القيم: selected_country, selected_period, selected_scope (local/global), locale
    
    4.1 إذا has_local = true:
       - scope=local → /api/trends/homepage?scope=local&country={selected_country}&period={selected_period}&locale={locale}
       - scope=global → /api/trends/homepage?scope=global&country={selected_country}&period={selected_period}&locale={locale}
    
    4.2 إذا has_local = false:
       - scope=global → يعمل بشكل طبيعي
       - scope=local → الباكند يعمل Fallback تلقائيًا إلى Global ولا يرجع خطأ
    
    
    📋 5) شكل رد الـ API المطلوب
    -----------------------------
    
    {
      "requested_scope": "local",
      "requested_country": "MG",
      "used_scope": "global",
      "local_available": false,
      "fallback_reason": "no_local_sources",
      "items": [ ... ]
    }
    
    المعاني:
    - requested_scope: القيمة اللي طلبها الفرونت
    - used_scope: اللي الباكند فعليًا اشتغل عليه
    - local_available: هل فيه بيانات محلية متاحة؟
    - fallback_reason: سبب التحويل
    
    
    📋 6) الرسائل التي تظهر للمستخدم
    ---------------------------------
    
    6.1 حالة: ما فيه بيانات محلية وتم التحويل للعالمي
    
    شرط: requested_scope="local" AND used_scope="global" AND local_available=false
    
    عربي:
    ⚠ لا توجد بيانات ترند محلي لهذا السوق حاليًا، نعرض لك الترند العالمي بدلاً من ذلك.
    
    إنجليزي:
    ⚠ No local trend data is available for this market yet. We're showing you the global trend instead.
    
    6.2 حالة: لا توجد بيانات لا محلية ولا عالمية
    
    شرط: items=[] AND fallback_reason="no_data"
    
    عربي:
    ⚠ لا توجد بيانات كافية لعرض الترند في هذا السوق والفترة المختارة حاليًا.
    
    إنجليزي:
    ⚠ There is not enough data to display trends for this market and period yet.
    
    
    📋 7) توحيد المنطق في كل أقسام المنصة
    --------------------------------------
    
    نفس منطق (country + scope + fallback) يطبّق على:
    - المنتجات المنفجرة
    - الترند اليومي / الأسبوعي
    - بيانات الشحن
    - بيانات الإعلانات
    - AI Insights
    
    المستخدم من أي دولة (حتى لو ما عندنا لها بيانات محلية) لا يشعر أن المنصة فاضية:
    - يا يأخذ ترند محلي حقيقي
    - يا يأخذ ترند عالمي مع توضيح صريح أنه Fallback
    
    
    📋 8) قاعدة API
    ---------------
    
    - استخدام: const API_BASE = '/api';
    - ثم: fetch(`${API_BASE}/trends/explosions...`)
    - عدم استخدام: /trendlens/api/... في الكود الجديد
    
    
    📋 9) قواعد الفلاتر والترند (تحديث نهائي)
    -------------------------------------------
    
    9.1 المنصّة عالمية - قائمة الأسواق ديناميكية:
       - ممنوع Hard-coded للدول في <select>
       - استخدام API: GET /api/markets/list
       - الرد يحتوي: code, name_ar, name_en, has_local
       - أول خيار: "كل الأسواق (عالمي)" / "All markets (Global)"
       - باقي الخيارات تُبنى من JSON حسب locale
    
    9.2 ترتيب الفلاتر في الواجهة:
       - سطر أول: أزرار الترند المحلي/العالمي
       - سطر ثاني: Dropdown السوق + Dropdown الفترة
       - الفلاتر تتحكم في:
         * قسم الترند المحلي/العالمي (Homepage Trends)
         * قسم المنتجات المنفجرة
         * أقسام الشحن، الإعلانات، AI Insights (لاحقاً)
    
    9.3 منطق Fallback للدول بدون بيانات محلية:
       - API يرجع: requested_scope, used_scope, local_available, fallback_reason
       - Frontend يعرض Banner عند fallback:
         * عربي: "⚠ لا توجد بيانات ترند محلي لهذا السوق حاليًا..."
         * إنجليزي: "⚠ No local trend data is available for this market yet..."
    
    9.4 الدخول الأول للمنصة:
       - تحديد detected_country و detected_locale
       - فحص has_local
       - إذا has_local=true → الترند المحلي
       - إذا has_local=false → الترند العالمي + Banner
    
    9.5 فصل country عن locale:
       - country = الدولة (MG, SA, US...)
       - locale = اللغة (ar, en)
       - المستخدم من مدغشقر (MG) يمكن أن يستخدم الإنجليزية (en)
    
================================================================================
-->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // CRITICAL: Apply theme and language IMMEDIATELY before any rendering
        (function() {
            try {
                // Get saved preferences
                const savedTheme = localStorage.getItem('trendlens-theme');
                const savedLang = localStorage.getItem('lang') || localStorage.getItem('tl_lang');
                const browserLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
                const defaultLang = browserLang.startsWith('ar') ? 'ar' : 'en';
                
                // Apply theme
                if (savedTheme === 'light' || savedTheme === 'dark') {
                    document.documentElement.setAttribute('data-theme', savedTheme);
                } else {
                    // Default to dark if no preference
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('trendlens-theme', 'dark');
                }
                
                // Apply language
                const langToUse = (savedLang === 'ar' || savedLang === 'en') ? savedLang : defaultLang;
                document.documentElement.lang = langToUse;
                document.documentElement.dir = langToUse === 'ar' ? 'rtl' : 'ltr';
                if (!savedLang) {
                    localStorage.setItem('lang', langToUse);
                    localStorage.setItem('tl_lang', langToUse);
                }
            } catch (e) {
                // Fallback if localStorage is not available
                const browserLang = (navigator.language || 'en').toLowerCase();
                const defaultLang = browserLang.startsWith('ar') ? 'ar' : 'en';
                document.documentElement.setAttribute('data-theme', 'dark');
                document.documentElement.lang = defaultLang;
                document.documentElement.dir = defaultLang === 'ar' ? 'rtl' : 'ltr';
            }
        })();
    </script>

    <script>
      const featureConfigs = {
        trends: {
          icon: 'fa-chart-line',
          title: 'لوحة الترند',
          subtitle: 'نظرة عميقة على حركة الترند في الدول والفئات الأكثر أهمية لك.',
          products: '3,241',
          productsSub: 'منتج تم تحليله خلال آخر ٢٤ ساعة',
          countries: '19',
          countriesSub: 'مسارات ودول نشطة الآن',
          trendPower: 78,
          confidence: 0.86,
          chartTitle: 'نمو الطلب خلال آخر ٧ أيام',
          chartSubtitle: 'سلوك الاهتمام بالمنتجات المختارة يوميًا.',
          chartLiveLabel: 'عينة من بيانات ترند لينس',
          chartBars: [35, 52, 60, 80, 72, 68, 90],
          sideTitle: 'أعلى ٣ فئات نشاطًا',
          sideItems: [
            'منتجات المكتب والمنزل – نمو ثابت مع ذروة نهاية الأسبوع.',
            'إكسسوارات إلكترونية – انفجارات سريعة ثم استقرار.',
            'منتجات تنظيم المنزل – ارتفاع هادئ لكن مستمر.'
          ],
          aiText:
            'بيانات الأسبوع الحالي تشير إلى انتقال الإنفاق من الكماليات الصغيرة إلى منتجات تحسّن الراحة اليومية في المنزل. لو عندك ميزانية اختبار محدودة، ابدأ بمنتج واحد مكتبي أو منزلي، مع إعلان قبل/بعد بسيط موجه لسوق واحد قوي بدل التشتت بين دول متعددة.'
        },
        explosions: {
          icon: 'fa-rocket',
          title: 'انفجارات المنتجات',
          subtitle: 'تركيز على المنتجات التي قفزت فعليًا في الطلب خلال فترة قصيرة.',
          products: '57',
          productsSub: 'منتج مصنّف كـ “منفجر” خلال آخر ٧ أيام',
          countries: '7',
          countriesSub: 'أسواق يظهر فيها الانفجار بوضوح',
          trendPower: 92,
          confidence: 0.89,
          chartTitle: 'تسارع انفجار الطلب',
          chartSubtitle: 'كيف تحوّل الطلب من عادي إلى انفجار خلال الأيام الماضية.',
          chartLiveLabel: 'محاكاة لانفجار حقيقي',
          chartBars: [10, 18, 32, 55, 80, 96, 100],
          sideTitle: '٣ أنماط انفجار شائعة',
          sideItems: [
            'منتج كان ضعيف ثم فجأة ارتفع ×4 بسبب محتوى في تيكتوك.',
            'منتج موسمي يرتفع دائمًا قبل موسم معيّن ثم يبرد سريعًا.',
            'منتج جديد في فئة مشبعة لكن بفكرة عرض مختلفة جذبت الانتباه.'
          ],
          aiText:
            'المنتجات المنفجرة مناسبة للتجار السريعين فقط. لو دخلت متأخر، تشتري المخزون بسعر أعلى وتتزاحم في الإعلانات. استخدم هذا القسم لاختيار منتج واحد واختبار سريع خلال ٣–٥ أيام، ثم قرر الاستمرار أو الانتقال للمنتج التالي.'
        },
        ai: {
          icon: 'fa-brain',
          title: 'مساعد الذكاء Trend AI',
          subtitle: 'إجابات مدعومة ببيانات ترند لينس، وليست مجرد دردشة عامة.',
          products: '87',
          productsSub: 'استشارة ذكاء صناعي أُعطيت اليوم',
          countries: '4',
          countriesSub: 'أسواق تم تحليلها في آخر الجلسات',
          trendPower: 71,
          confidence: 0.93,
          chartTitle: 'نوعية الأسئلة التي يجيب عليها Trend AI',
          chartSubtitle: 'توزيع بين: اختيار منتج، اختيار دولة، أفكار إعلانات.',
          chartLiveLabel: 'أمثلة من أسئلة حقيقية',
          chartBars: [65, 40, 55, 70, 60, 50, 80],
          sideTitle: 'أكثر ٣ أسئلة يكررها التجار',
          sideItems: [
            '“أعطني منتج واحد يناسب السوق السعودي قبل الشتاء مع فكرة إعلان قصيرة.”',
            '“حلّل لي أهم الترندات الحالية في السوق الأمريكي خلال آخر ٧ أيام.”',
            '“هل أستمر على هذا المنتج أم أوقفه وأنتقل لبديل أفضل؟”'
          ],
          aiText:
            'أفضل طريقة لاستخدام Trend AI هي أن تعطيه سياقك الحقيقي: ميزانيتك، منصتك، دولتك، ونوع منتجاتك. كلما زاد السياق، صار الرد أقرب لخطة شريك ذكي، وليس مجرد نصائح عامة.'
        },
        social: {
          icon: 'fa-mobile-alt',
          title: 'إشارات السوشيال والإعلانات',
          subtitle: 'تجميع إشارات من المحتوى المدفوع والعضوي لفهم ما يعمل الآن.',
          products: '142',
          productsSub: 'منتج تمت ملاحظة نشاط دعائي حوله',
          countries: '9',
          countriesSub: 'أسواق نشطة على السوشيال',
          trendPower: 64,
          confidence: 0.81,
          chartTitle: 'زخم المحتوى الإعلاني',
          chartSubtitle: 'كمية المحتوى المرتبط بمنتجات التجارة خلال آخر ٧ أيام.',
          chartLiveLabel: 'مؤشرات من حملات نشطة',
          chartBars: [30, 45, 50, 60, 55, 62, 70],
          sideTitle: '٣ أنماط محتوى ناجح',
          sideItems: [
            'مراجعات قصيرة وصادقة من زاوية تجربة شخصية حقيقية.',
            'محتوى قبل/بعد مع نتيجة واضحة في أقل من ٨ ثواني.',
            'لقطات شاشة للأرقام (قبل وبعد) مع شرح بسيط وسريع.'
          ],
          aiText:
            'بدل ما تقلّد العروض حرفيًا، ركّز على الفكرة الرئيسية في المحتوى الناجح: زاوية المشكلة، نوع الوعد، وطريقة العرض. استخدم بيانات TrendLens لاختيار المنتج، ثم استلهم من نمط المحتوى هنا لبناء نسختك الخاصة.'
        }
      };

      function openFeatureExpand(key) {
        const cfg = featureConfigs[key];
        if (!cfg) return;

        const overlay = document.getElementById('featureExpandOverlay');
        overlay.classList.remove('hidden');

        document.getElementById('featureExpandIcon').innerHTML = `<i class="fas ${cfg.icon}"></i>`;
        document.getElementById('featureExpandTitle').textContent = cfg.title;
        document.getElementById('featureExpandSubtitle').textContent = cfg.subtitle;

        document.getElementById('kpiProducts').textContent = cfg.products;
        document.getElementById('kpiProductsSub').textContent = cfg.productsSub;
        document.getElementById('kpiCountries').textContent = cfg.countries;
        document.getElementById('kpiCountriesSub').textContent = cfg.countriesSub;

        document.getElementById('kpiTrendPower').textContent = cfg.trendPower + '/100';
        document.getElementById('kpiConfidence').textContent = (cfg.confidence * 100).toFixed(0) + '%';

        document.getElementById('kpiTrendBar').style.width = cfg.trendPower + '%';
        document.getElementById('kpiConfidenceBar').style.width = (cfg.confidence * 100) + '%';

        document.getElementById('chartMainTitle').textContent = cfg.chartTitle;
        document.getElementById('chartMainSubtitle').textContent = cfg.chartSubtitle;
        document.getElementById('chartLiveLabel').textContent = cfg.chartLiveLabel;

        const chartContainer = document.getElementById('miniLineChart');
        chartContainer.innerHTML = '';
        const maxVal = Math.max(...cfg.chartBars);
        cfg.chartBars.forEach(v => {
          const bar = document.createElement('div');
          bar.className = 'mini-line-chart-bar';
          bar.style.height = '10%';
          chartContainer.appendChild(bar);
          requestAnimationFrame(() => {
            bar.style.height = (15 + (v / maxVal) * 80) + '%';
          });
        });

        document.getElementById('chartLegendRight').textContent = 'أعلى يوم: ' + Math.max(...cfg.chartBars).toString() + '% (محاكاة)';

        const sideListTitle = document.getElementById('sideListTitle');
        const sideList = document.getElementById('sideList');
        sideListTitle.textContent = cfg.sideTitle;
        sideList.innerHTML = '';
        cfg.sideItems.forEach(text => {
          const li = document.createElement('li');
          li.textContent = text;
          sideList.appendChild(li);
        });

        document.getElementById('aiInsightText').textContent = cfg.aiText;

        document.documentElement.style.overflow = 'hidden';
      }

      function closeFeatureExpand() {
        const overlay = document.getElementById('featureExpandOverlay');
        overlay.classList.add('hidden');
        document.documentElement.style.overflow = '';
      }
    </script>
    <title id="pageTitle">TrendLens</title>
    <link rel="icon" href="/trendlens/assets/brand/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/trendlens/assets/brand/logo.svg">
    <link rel="apple-touch-icon" href="/trendlens/assets/brand/apple-touch-icon.png">
    <link rel="manifest" href="/trendlens/site.webmanifest">
    <meta name="theme-color" content="#feba04">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Google Sign-In SDK -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <!-- Apple Sign-In SDK -->
    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"SoftwareApplication",
      "name":"TrendLens",
      "applicationCategory":"BusinessApplication",
      "operatingSystem":"Web",
      "offers":{"@type":"Offer","price":"29.99","priceCurrency":"USD"},
      "aggregateRating":{"@type":"AggregateRating","ratingValue":"4.8","reviewCount":"137"},
      "description":"منصة ذكاء تشغيلي لتحليل المنتجات والموردين والشحن والسوشيال مع تقارير فورية مدعومة بالذكاء الاصطناعي."
    }
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <!-- i18n Translation System -->
    <script src="/trendlens/js/i18n.js" defer></script>
    <!-- Theme Management -->
    <script src="/trendlens/js/theme.js" defer></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#feba04',
                        secondary: '#ff6b35',
                        dark: '#0a2018',
                        success: '#28a745',
                        danger: '#dc3545',
                        warning: '#ffc107',
                        info: '#17a2b8'
                    },
                    fontFamily: {
                        'cairo': ['Cairo', 'sans-serif'],
                        'roboto': ['Roboto', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <script>
        // Load analytics overview snapshot for homepage
        window.addEventListener("DOMContentLoaded", () => {
            const statusEl = document.getElementById("analyticsStatusText");
            const totalEl = document.getElementById("analyticsTotalEvents");
            const productsEl = document.getElementById("analyticsProductsCount");
            const shippingEl = document.getElementById("analyticsShippingCount");
            const adsEl = document.getElementById("analyticsAdsCount");

            if (!statusEl || !totalEl || !productsEl || !shippingEl || !adsEl) {
                return;
            }

            const lang = (window.currentLang || document.documentElement.lang || "ar").toLowerCase();

            const tKey = (key, fallback) => {
                try {
                    if (window.t) return window.t(key);
                } catch (e) {}
                return fallback;
            };

            statusEl.textContent = tKey("analytics.overview.loading", lang === "ar" ? "جاري تحميل التحليلات…" : "Loading analytics…");

            fetch("/trendlens/api/analytics/overview?user_id=1")
                .then((resp) => resp.json())
                .then((data) => {
                    if (!data || data.ok === false) {
                        statusEl.textContent = tKey(
                            "analytics.overview.error",
                            lang === "ar" ? "تعذر تحميل ملخص التحليلات." : "Could not load analytics overview."
                        );
                        statusEl.classList.remove("text-emerald-400");
                        statusEl.classList.add("text-red-400");
                        return;
                    }

                    const ov = data.overview || {};
                    const cards = ov.cards || {};

                    totalEl.textContent = ov.total_events != null ? ov.total_events : 0;

                    const exploding = cards.exploding_products || {};
                    const shipping = cards.shipping_signals || {};
                    const ads = cards.ads_signals || {};

                    productsEl.textContent = exploding.value != null ? exploding.value : 0;
                    shippingEl.textContent = shipping.value != null ? shipping.value : 0;
                    adsEl.textContent = ads.value != null ? ads.value : 0;

                    statusEl.textContent = "";
                })
                .catch(() => {
                    statusEl.textContent = tKey(
                        "analytics.overview.error",
                        lang === "ar" ? "تعذر تحميل ملخص التحليلات." : "Could not load analytics overview."
                    );
                    statusEl.classList.remove("text-emerald-400");
                    statusEl.classList.add("text-red-400");
                });
        });
    </script>
    <style>
        /* إجبار Chrome على استخدام الأرقام اللاتينية (0-9) بدلاً من الأرقام العربية الهندية (٠-٩) */
        * {
            font-variant-numeric: normal !important;
            -webkit-font-feature-settings: "lnum" !important;
            font-feature-settings: "lnum" !important;
        }
        
        /* إجبار حقول الإدخال الرقمية على استخدام الأرقام اللاتينية */
        input[type="number"],
        input[type="text"][inputmode="decimal"],
        input[type="text"][inputmode="numeric"] {
            font-variant-numeric: normal !important;
            -webkit-font-feature-settings: "lnum" !important;
            font-feature-settings: "lnum" !important;
            direction: ltr !important;
        }
        
        :root {
            /* Dark Mode (Default) - نفس Dashboard */
            --primary: #feba04;
            --secondary: #ff6b35;
            --dark: #0a2018;
            --bg-main: #050608;
            --bg-alt: #0d0f13;
            --card-bg: rgba(19, 22, 30, 0.95);
            --card-bg-soft: rgba(20, 25, 35, 0.9);
            --accent: #ffb347;
            --accent-soft: rgba(255, 179, 71, 0.25);
            --text-main: #f9fafb;
            --text-muted: #b8c5d1;
            --border-subtle: rgba(254, 186, 4, 0.3);
            --gradient-bg: linear-gradient(135deg, #0a2018 0%, #1a3a2a 50%, #2a5a3a 100%);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(254, 186, 4, 0.3);
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --info: #3b82f6;
            --hover-bg: rgba(254, 186, 4, 0.15);
            --danger: #f97373;
            --radius-lg: 16px;
            --radius-xl: 22px;
            --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
            --transition-fast: 0.2s ease-out;
        }
        
        [data-theme="light"] {
            /* Light Mode - نفس Dashboard */
            --bg-main: #f8fafc;
            --bg-alt: #ffffff;
            --card-bg: #ffffff;
            --card-bg-soft: #f1f5f9;
            --accent: #f97316;
            --accent-soft: rgba(249, 115, 22, 0.2);
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-subtle: rgba(254, 186, 4, 0.4);
            --gradient-bg: linear-gradient(135deg, #fef3c7 0%, #ffffff 50%, #f8fafc 100%);
            --glass-bg: rgba(255, 255, 255, 0.95);
            --glass-border: rgba(254, 186, 4, 0.5);
            --success: #059669;
            --warning: #d97706;
            --error: #dc2626;
            --info: #2563eb;
            --hover-bg: rgba(254, 186, 4, 0.2);
            --danger: #dc2626;
            --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
        }

        /* جعل الرمادي أوضح في الثيم الفاتح */
        [data-theme="light"] .text-gray-400,
        [data-theme="light"] .text-gray-300 {
            color: #4b5563 !important;
        }
        
        /* ضمان أن text-white يظهر في الوضع الداكن */
        [data-theme="dark"] .text-white {
            color: var(--text-main) !important;
        }
        
        /* ضمان أن text-gray-300 و text-gray-400 واضحة في الوضع الداكن */
        [data-theme="dark"] .text-gray-300 {
            color: rgba(248, 250, 252, 0.8) !important;
        }
        
        [data-theme="dark"] .text-gray-400 {
            color: var(--text-muted) !important;
        }

        /* Auth modal should feel like a dedicated screen, especially on phones */
        #authModal {
            padding: 0;
            overflow-y: auto;
        }

        #authModal .auth-modal-panel {
            width: 100%;
            max-width: none;
            min-height: 100vh;
            border-radius: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            padding: 1.5rem 1.25rem !important;
        }

        #authModal .auth-modal-scroll {
            overflow-y: auto;
            padding-bottom: 1.5rem;
        }

        #authModal input,
        #authModal select,
        #authModal button {
            font-size: 1rem;
        }

        #authModal label {
            font-size: 0.95rem;
        }

        @media (max-width: 640px) {
            #authModal .auth-modal-scroll {
                padding-bottom: 1rem;
            }

            #authModal h3 {
                font-size: 1.4rem;
            }

            #authModal input,
            #authModal select {
                padding: 0.65rem 0.9rem;
                font-size: 0.95rem;
            }

            #authModal button {
                padding-top: 0.7rem;
                padding-bottom: 0.7rem;
            }

            #authModal .space-y-4 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 0.75rem;
            }
        }

        #authModal .auth-form {
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }

        .register-two-col {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .register-two-col .register-field {
            flex: 1;
        }

        @media (min-width: 420px) {
            .register-two-col {
                flex-direction: row;
            }
        }

        @media (min-width: 768px) {
            #authModal .auth-form {
                max-width: 720px;
            }
        }

        @media (min-width: 768px) {
            #authModal {
                padding: 2rem;
            }

            #authModal .auth-modal-panel {
                max-width: 960px;
                margin: auto;
                min-height: calc(100vh - 4rem);
                border-radius: 24px;
                padding: 2rem 2.5rem !important;
            }

            #authModal .auth-modal-scroll {
                padding-bottom: 0;
            }
        }
        
        .gradient-bg {
            background: var(--gradient-bg);
            transition: background 0.3s ease;
            color: var(--text-main) !important;
        }
        
        .glass-effect {
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 2px solid var(--glass-border);
            transition: background 0.3s ease, border-color 0.3s ease;
            color: var(--text-main) !important;
        }
        
        /* ضمان وضوح النصوص في جميع العناصر */
        [data-theme="dark"] .main-container-new,
        [data-theme="dark"] .main-container-new *:not([class*="bg-primary"]):not([style*="background"][style*="primary"]) {
            color: var(--text-main) !important;
        }
        
        [data-theme="dark"] .hero-compact,
        [data-theme="dark"] .hero-compact *:not([class*="bg-primary"]):not([style*="background"][style*="primary"]) {
            color: var(--text-main) !important;
        }
        
        [data-theme="dark"] .intelligence-tabs-container,
        [data-theme="dark"] .intelligence-tabs-container *:not([class*="bg-primary"]):not([style*="background"][style*="primary"]) {
            color: var(--text-main) !important;
        }
        
        html {
            background: var(--bg-main);
            transition: background-color 0.3s ease;
        }
        
        html {
            background: var(--bg-main);
            transition: background-color 0.3s ease;
        }
        
        body {
            background: var(--bg-main);
            color: var(--text-main) !important;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        /* إصلاح ألوان النصوص في الوضع الداكن - منع النصوص السوداء */
        [data-theme="dark"] {
            color: var(--text-main);
        }
        
        /* إصلاح النصوص السوداء في الوضع الداكن - إلا على خلفية primary */
        [data-theme="dark"] .text-black:not(.bg-primary):not([class*="bg-primary"]):not([style*="background"]),
        [data-theme="dark"] .text-gray-900:not(.bg-primary):not([class*="bg-primary"]):not([style*="background"]),
        [data-theme="dark"] .text-gray-800:not(.bg-primary):not([class*="bg-primary"]):not([style*="background"]),
        [data-theme="dark"] .text-gray-700:not(.bg-primary):not([class*="bg-primary"]):not([style*="background"]) {
            color: var(--text-main) !important;
        }
        
        [data-theme="dark"] .text-gray-600:not(.bg-primary):not([class*="bg-primary"]):not([style*="background"]) {
            color: var(--text-muted) !important;
        }
        
        /* إصلاح جميع العناصر التي ليس لها لون محدد */
        [data-theme="dark"] p:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] span:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] div:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h1:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h2:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h3:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h4:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h5:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] h6:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] a:not([class*="text-"]):not([style*="color"]) {
            color: var(--text-main) !important;
        }
        
        /* إصلاح النصوص في glass-effect و cards */
        [data-theme="dark"] .glass-effect,
        [data-theme="dark"] .glass-effect *:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] .dashboard-card,
        [data-theme="dark"] .dashboard-card *:not([class*="text-"]):not([style*="color"]),
        [data-theme="dark"] .dashboard-stat-card,
        [data-theme="dark"] .dashboard-stat-card *:not([class*="text-"]):not([style*="color"]) {
            color: var(--text-main) !important;
        }
        
        /* استثناء العناصر على خلفية primary */
        [data-theme="dark"] .bg-primary,
        [data-theme="dark"] [class*="bg-primary"],
        [data-theme="dark"] [style*="background"][style*="primary"] {
            color: #000 !important;
        }
        
        /* Override Tailwind text colors for light theme */
        [data-theme="light"] .text-white,
        [data-theme="light"] .text-gray-100,
        [data-theme="light"] .text-gray-200,
        [data-theme="light"] .text-gray-300 {
            color: var(--text-main) !important;
        }
        
        [data-theme="light"] .text-gray-400,
        [data-theme="light"] .text-gray-500 {
            color: var(--text-muted) !important;
        }
        
        [data-theme="light"] .text-gray-600,
        [data-theme="light"] .text-gray-700 {
            color: var(--text-main) !important;
        }
        
        /* Override Tailwind background colors for light theme */
        [data-theme="light"] .bg-gray-900,
        [data-theme="light"] .bg-gray-800,
        [data-theme="light"] .bg-gray-700,
        [data-theme="light"] .bg-gray-600 {
            background-color: var(--bg-alt) !important;
        }
        
        /* Toggle Switch - Make it more visible in light theme */
        /* Override the general rule for toggle switches specifically */
        [data-theme="light"] #billingToggleRow label .peer.bg-gray-600 {
            background-color: #d1d5db !important; /* gray-300 - more visible on white */
            border: 1px solid #9ca3af !important; /* gray-400 - adds definition */
        }
        
        [data-theme="light"] #billingToggleRow label .peer.peer-checked {
            background-color: var(--primary) !important;
        }
        
        [data-theme="light"] #billingToggleRow label .peer::after {
            background-color: #ffffff !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Add shadow for better visibility */
        }
        
        [data-theme="light"] .bg-white\/5,
        [data-theme="light"] .bg-white\/10,
        [data-theme="light"] .bg-white\/20 {
            background-color: var(--card-bg-soft) !important;
        }
        
        /* Override borders for light theme */
        [data-theme="light"] .border-white\/10,
        [data-theme="light"] .border-white\/20,
        [data-theme="light"] .border-gray-700,
        [data-theme="light"] .border-gray-600 {
            border-color: var(--border-subtle) !important;
        }
        
        /* Update glass effects */
        [data-theme="light"] .glass-effect,
        [data-theme="light"] .glass {
            background: var(--glass-bg) !important;
            border-color: var(--glass-border) !important;
        }
        
        /* Update all text elements */
        [data-theme="light"] main,
        [data-theme="light"] section,
        [data-theme="light"] article,
        [data-theme="light"] div,
        [data-theme="light"] p,
        [data-theme="light"] span,
        [data-theme="light"] li {
            color: inherit;
        }
        
        [data-theme="light"] h1,
        [data-theme="light"] h2,
        [data-theme="light"] h3,
        [data-theme="light"] h4,
        [data-theme="light"] h5,
        [data-theme="light"] h6 {
            color: var(--text-main) !important;
        }
        
        /* Update cards and containers */
        [data-theme="light"] .feature-card-locked,
        [data-theme="light"] .stat-card,
        [data-theme="light"] .card {
            background: var(--card-bg) !important;
            color: var(--text-main) !important;
        }
        
        /* Update intro screen */
        [data-theme="light"] #intro-screen {
            background: var(--gradient-bg) !important;
        }
        
        /* Update visitor float */
        [data-theme="light"] .visitor-float {
            background: var(--card-bg) !important;
            color: var(--text-main) !important;
        }
        
        /* Update feature cards */
        [data-theme="light"] .feature-card-locked {
            background: var(--card-bg) !important;
            border-color: var(--border-subtle) !important;
        }
        
        [data-theme="light"] .feature-title {
            color: var(--accent) !important;
        }
        
        [data-theme="light"] .feature-title-en {
            color: var(--text-muted) !important;
        }
        
        /* إخفاء جميع النصوص الإنجليزية في الواجهة العربية */
        [dir="rtl"] .feature-title-en,
        [dir="rtl"] [data-i18n*="_en"],
        [dir="rtl"] [data-i18n="hero_subtitle_en"],
        [dir="rtl"] [data-i18n="step1_title_en"],
        [dir="rtl"] [data-i18n="step2_title_en"],
        [dir="rtl"] [data-i18n="step3_title_en"],
        [dir="rtl"] [data-i18n="persona1_title_en"],
        [dir="rtl"] [data-i18n="persona2_title_en"],
        [dir="rtl"] [data-i18n="persona3_title_en"],
        [dir="rtl"] [data-i18n="feature_trends_title_en"],
        [dir="rtl"] [data-i18n="feature_explosions_title_en"],
        [dir="rtl"] [data-i18n="feature_ai_title_en"],
        [dir="rtl"] [data-i18n="feature_social_title_en"],
        [dir="rtl"] p[data-i18n*="_en"],
        [dir="rtl"] div[data-i18n*="_en"],
        [dir="rtl"] span[data-i18n*="_en"],
        [dir="rtl"] h3[data-i18n*="_en"],
        [dir="rtl"] h4[data-i18n*="_en"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }
        
        /* إخفاء النصوص العربية في الواجهة الإنجليزية - فقط التي لها نسخة إنجليزية */
        [dir="ltr"] .feature-card-locked .feature-title:not([data-i18n*="_en"]),
        [dir="ltr"] .how-it-works-step h3[data-i18n]:not([data-i18n*="_en"]):not([data-i18n="step1_title"]):not([data-i18n="step2_title"]):not([data-i18n="step3_title"]),
        [dir="ltr"] h3[data-i18n*="persona"]:not([data-i18n*="_en"]):not([data-i18n="persona1_title"]):not([data-i18n="persona2_title"]):not([data-i18n="persona3_title"]) {
            display: none !important;
        }
        
        /* إظهار النصوص الإنجليزية في الواجهة الإنجليزية - كعنوان رئيسي في كروت الميزات */
        [dir="ltr"] .feature-card-locked .feature-title-en,
        [dir="ltr"] [data-i18n*="_en"] {
            display: block !important;
        }
        
        [dir="ltr"] .feature-card-locked .feature-title-en {
            font-size: 1.25rem !important;
            font-weight: 700 !important;
            color: var(--text-main) !important;
            margin-bottom: 0.5rem !important;
        }
        
        /* إظهار النصوص العربية في الواجهة العربية */
        [dir="rtl"] .feature-card-locked .feature-title {
            display: block !important;
        }
        
        /* إخفاء النصوص الإنجليزية في الواجهة العربية */
        [dir="rtl"] [data-i18n*="_en"] {
            display: none !important;
        }
        
        /* إظهار النصوص الإنجليزية كعناوين رئيسية في الواجهة الإنجليزية */
        [dir="ltr"] .how-it-works-step .feature-title-en,
        [dir="ltr"] .feature-title-en[data-i18n*="step"],
        [dir="ltr"] .feature-title-en[data-i18n*="persona"],
        [dir="ltr"] [data-i18n="step1_title_en"],
        [dir="ltr"] [data-i18n="step2_title_en"],
        [dir="ltr"] [data-i18n="step3_title_en"],
        [dir="ltr"] [data-i18n="persona1_title_en"],
        [dir="ltr"] [data-i18n="persona2_title_en"],
        [dir="ltr"] [data-i18n="persona3_title_en"] {
            display: block !important;
            font-size: 1.25rem !important;
            font-weight: 700 !important;
            color: var(--text-main) !important;
            margin-bottom: 0.5rem !important;
        }
        
        /* Update snapshot card */
        [data-theme="light"] .snapshot-card {
            background: var(--card-bg) !important;
        }
        
        [data-theme="light"] .snapshot-card-inner {
            color: var(--text-main) !important;
            opacity: 0.85;
            filter: blur(2px);
        }
        
        
        /* Update hero search */
        [data-theme="light"] .hero-search-input {
            color: var(--text-main) !important;
        }
        
        [data-theme="light"] .hero-search-input::placeholder {
            color: var(--text-muted) !important;
        }
        
        /* Update how it works */
        [data-theme="light"] .how-it-works-step {
            color: var(--text-main) !important;
        }
        
        /* Update all inputs and selects */
        [data-theme="light"] input,
        [data-theme="light"] select,
        [data-theme="light"] textarea {
            background: var(--bg-alt) !important;
            color: var(--text-main) !important;
            border-color: var(--border-subtle) !important;
        }
        
        [data-theme="light"] input::placeholder,
        [data-theme="light"] textarea::placeholder {
            color: var(--text-muted) !important;
        }
        
        .hero-highlight {
            background: linear-gradient(90deg, #facc6b, #fb923c, #f97316);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        /* تحسينات جمالية - أزرار مع ظل */
        .btn {
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            padding: 7px 14px;
            font-size: 12px;
            cursor: pointer;
            background: transparent;
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background var(--transition-fast), border-color var(--transition-fast),
                transform 0.12s ease-out, box-shadow 0.12s ease-out;
            font-family: inherit;
        }
        
        .btn:hover {
            border-color: var(--accent);
            background: rgba(15, 23, 42, 0.9);
            transform: translateY(-1px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #facc6b, #fb923c 40%, #f97316 100%);
            color: #111827;
            border-color: transparent;
            box-shadow: 0 0 22px rgba(249, 115, 22, 0.6);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #fed7aa, #fb923c);
            box-shadow: 0 10px 25px rgba(254, 186, 4, 0.3);
            transform: translateY(-2px);
        }
        
        .btn-primary:disabled {
            opacity: 0.75;
            cursor: not-allowed;
        }
        
        /* زر التحليل العام */
        #runGlobalAI {
            background: linear-gradient(to right, #ff6b35, #feba04);
            transition: all 0.3s ease;
        }
        #runGlobalAI:hover:not(:disabled) {
            background: linear-gradient(to right, #feba04, #ffd54f);
            box-shadow: 0 15px 35px rgba(254, 186, 4, 0.4);
            transform: translateY(-3px) scale(1.02);
        }
        #runGlobalAI:active:not(:disabled) {
            transform: translateY(-1px) scale(0.98);
        }
        
        /* شريط الإجراءات السريعة */
        .action-bar {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        
        .action-bar button {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        /* تحسينات جمالية - عناوين مع تدرج */
        .gradient-text {
            background: linear-gradient(to right, #feba04, #ffd54f);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block; /* يسمح بحشو سفلي لعزل النقاط عن أي خط أسفل */
        }
        
        /* ===== Hero spacing & typography ===== */
        .hero { display: grid; gap: 16px; }
        .hero-title { margin: 0 0 12px; line-height: 1.25; font-size: clamp(26px, 6vw, 44px); font-weight: 800; letter-spacing: .1px; padding-bottom: 6px; }
        .hero-subtitle { margin: 8px 0 0; line-height: 1.6; font-size: clamp(14px, 3.8vw, 18px); }

        .hero-upgraded {
            gap: 2.5rem;
        }

        .hero-eyebrow {
            font-size: 0.9rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .hero-cta-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        .hero-cta-grid .hero-cta {
            font-size: 1rem;
            font-weight: 600;
            padding: 0.85rem 1.8rem;
        }

        .hero-cta-grid .hero-ghost {
            border-radius: 0.9rem;
            border: 1px solid var(--border-subtle);
            padding: 0.85rem 1.8rem;
            font-weight: 600;
            background: transparent;
            color: var(--text-main);
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .hero-cta-grid .hero-ghost:hover {
            border-color: var(--primary);
            background: var(--accent-soft);
        }

        .model-switcher {
            border: 1px solid var(--border-subtle);
        }

        .model-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.9rem;
        }

        .model-card {
            border-radius: 1rem;
            border: 1px solid var(--border-subtle);
            padding: 1rem;
            text-align: start;
            background: rgba(255,255,255,0.02);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            position: relative;
        }

        .model-card .model-badge {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--text-muted);
        }

        .model-card h5 {
            font-size: 1.05rem;
            font-weight: 700;
        }

        .model-card p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .model-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .model-card.active {
            border-color: var(--primary);
            background: rgba(254,186,4,0.08);
            box-shadow: 0 12px 30px rgba(254,186,4,0.18);
        }

        .model-status-chip {
            background: rgba(34,197,94,0.15);
            color: #86efac;
            padding: 0.45rem 0.9rem;
            border-radius: 999px;
            font-size: 0.85rem;
        }

        [data-theme="light"] .model-card {
            background: var(--card-bg-soft);
        }

        .hero-console {
            border: 1px solid var(--border-subtle);
        }

        .hero-console-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .hero-console-eyebrow {
            font-size: 0.75rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .hero-console-desc {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        .hero-console-cta {
            border-radius: 0.75rem;
            border: 1px solid var(--border-subtle);
            padding: 0.6rem 1.4rem;
            font-weight: 600;
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .hero-console-cta:hover {
            border-color: var(--primary);
            background: var(--accent-soft);
        }

        .hero-console-hint {
            font-size: 0.85rem;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .hero-usage-panel {
            border: 1px solid var(--border-subtle);
            border-radius: 1.5rem;
        }

        .hero-usage-panel ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .hero-usage-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .hero-usage-row h5 {
            font-size: 1rem;
            margin-bottom: 0.2rem;
        }

        .hero-usage-row p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: 0;
        }

        .usage-status {
            border-radius: 999px;
            padding: 0.35rem 0.9rem;
            font-size: 0.8rem;
            border: 1px solid var(--border-subtle);
        }

        .usage-status.active {
            border-color: rgba(34,197,94,0.35);
            color: #86efac;
        }

        .usage-status.experimental {
            border-color: rgba(248,113,113,0.35);
            color: #fca5a5;
        }

        @media (max-width: 768px) {
            .hero-cta-grid {
                flex-direction: column;
            }
            .model-card-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Fixed spacing on mobile + prevent overlaps */
        @media (max-width: 600px){
            .hero { gap: 14px; }
            .hero-title { margin-bottom: 14px; padding-bottom: 8px; }
            .hero-subtitle { margin-top: 12px; }
            .floating, .sticky-widgets, .side-rail { 
                position: static !important; inset: auto !important; transform: none !important; 
                margin: 8px 0 !important; z-index: auto !important;
            }
        }
        
        /* Horizontal safe padding for small screens */
        .container { padding-inline: 16px; }
        @media (min-width: 641px){ .container { padding-inline: 0; } }

        /* ===== Global mobile layout polish ===== */
        html, body { overflow-x: hidden; }
        img { max-width: 100%; height: auto; }
        
        /* توحيد تمركز المحتوى في اللغتين ومنع الالتصاق */
        main, header, footer { max-width: 1200px; margin-inline: auto; }
        
        /* ===== Language-specific styles ===== */
        [dir="rtl"] {
            font-family: 'Cairo', sans-serif !important;
        }
        
        [dir="ltr"] {
            font-family: 'Roboto', sans-serif !important;
        }
        
        [dir="rtl"] body,
        [dir="rtl"] *:not([class*="fa"]):not([class*="icon"]) {
            font-family: 'Cairo', sans-serif !important;
        }
        
        [dir="ltr"] body,
        [dir="ltr"] *:not([class*="fa"]):not([class*="icon"]) {
            font-family: 'Roboto', sans-serif !important;
        }
        
        /* التأكد من أن Font Awesome يعمل بشكل صحيح */
        .fas, .far, .fab, .fa, [class*="fa-"] {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
            font-weight: 900;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .far {
            font-weight: 400;
        }
        
        .fab {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400;
        }
        
        /* معالجة خروج الأزرار والنصوص عن الكروت على الجوال */
        @media (max-width: 640px){
            .glass-effect { margin-inline: 8px; }
            .glass-effect .flex { flex-wrap: wrap; gap: 8px; }
            .glass-effect button, .glass-effect a.button, .btn-primary, .smart-assistant-btn {
                width: 100%;
                max-width: 100%;
                white-space: normal;
            }
            .glass-effect .text-right, .glass-effect .text-left { text-align: start; }
            h1, h2, h3 { word-break: break-word; }
            
            /* تحسين Header على الموبايل */
            header {
                padding: 12px !important;
                margin: 8px !important;
            }
            
            header .flex {
                flex-direction: column;
                gap: 12px;
            }
            
            header .flex.items-center.gap-4 {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.75rem;
            }
            
            /* تحسين زر التبديل في header على الموبايل */
            header .theme-toggle-btn {
                order: -1;
                align-self: flex-start;
                margin-bottom: 0.5rem;
            }
            
            /* تحسين أزرار اللغة على الموبايل */
            .lang-switcher {
                width: 100%;
                justify-content: center;
            }
            
            .lang-btn {
                flex: 1;
                min-width: 80px;
            }
            
            /* تحسين الأزرار الرئيسية */
            #loginBtn, #registerBtn, #partnerApplyBtn {
                width: 100%;
                margin-top: 8px;
            }
            
            /* تحسين العنوان الرئيسي */
            h1.text-3xl {
                font-size: 1.5rem !important;
            }
            
            /* تحسين الكروت */
            .glass-effect {
                padding: 16px !important;
            }
            
            /* تحسين الجداول */
            table {
                font-size: 0.875rem;
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            /* تحسين النماذج */
            input, textarea, select {
                font-size: 16px !important; /* يمنع zoom على iOS */
                width: 100%;
            }
            
            /* تحسين الأزرار العائمة */
            .visitor-float {
                position: fixed;
                top: 12px !important;
                bottom: auto !important;
                right: 8px;
                left: auto;
                z-index: 1000;
                padding: 5px 8px;
                font-size: 0.65rem;
                width: auto !important;
                max-width: 180px !important;
                display: inline-flex !important;
            }
            
            [dir="rtl"] .visitor-float {
                right: auto !important;
                left: 8px !important;
            }
        }
        
        /* معالجة تداخل الحروف للعناوين بالعربية والإنجليزية */
        h1, h2, h3 {
            line-height: 1.2;
            letter-spacing: 0;
            text-rendering: optimizeLegibility;
        }
        
        /* تحسينات إضافية للشاشات الصغيرة جداً */
        @media (max-width: 480px) {
            /* منع الخروج عن المساحة بشكل صارم */
            * {
                max-width: 100vw !important;
                box-sizing: border-box !important;
            }
            
            body {
                overflow-x: hidden !important;
                width: 100vw !important;
            }
            
            .hero-title {
                font-size: 1.3rem !important;
                line-height: 1.3;
                word-break: break-word;
            }
            
            .hero-subtitle {
                font-size: 0.8rem !important;
                word-break: break-word;
            }
            
            .container {
                padding-inline: 8px !important;
                max-width: 100vw !important;
            }
            
            .glass-effect {
                margin-inline: 4px !important;
                padding: 10px !important;
                max-width: calc(100vw - 16px) !important;
            }
            
            button, .btn {
                font-size: 0.8rem !important;
                padding: 8px 12px !important;
                white-space: normal !important;
                word-break: break-word;
            }
            
            /* تحسين header على الشاشات الصغيرة جداً */
            header {
                padding: 8px !important;
                max-width: 100vw !important;
            }
            
            header .flex.items-center.gap-4 {
                gap: 0.5rem;
                flex-wrap: wrap;
            }
            
            /* إخفاء بعض الأزرار على الشاشات الصغيرة جداً */
            header #partnerApplyBtn {
                display: none;
            }
            
            /* تحسين زر التبديل */
            header .theme-toggle-btn {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }
            
            /* تحسين كروت المنتجات */
            #explodingList > div,
            .bg-black.bg-opacity-30 {
                padding: 8px !important;
                margin: 4px 0 !important;
                max-width: 100% !important;
            }
            
            /* تحسين النصوص */
            .text-sm {
                font-size: 0.8rem !important;
            }
            
            .text-xs {
                font-size: 0.7rem !important;
            }
            
            /* تحسين العناوين */
            h2 {
                font-size: 1.1rem !important;
            }
            
            h3 {
                font-size: 1rem !important;
            }
        }
        
        /* تحسينات للشاشات المتوسطة */
        @media (min-width: 641px) and (max-width: 1024px) {
            .container {
                padding-inline: 24px;
            }
            
            header .flex {
                flex-wrap: wrap;
            }
        }

        /* تحسين عرض الجوال: أحجام وخطوط ومسافات وتخطيط */
        @media (max-width: 640px) {
            /* منع الخروج عن المساحة */
            * {
                max-width: 100%;
                box-sizing: border-box;
            }
            
            body, html {
                overflow-x: hidden;
                width: 100%;
            }
            
            .container {
                padding-left: 12px !important;
                padding-right: 12px !important;
                max-width: 100% !important;
            }
            
            /* عنوان الهيرو والوصف */
            h2[data-i18n="hero_title"] {
                font-size: clamp(24px, 7vw, 32px);
                line-height: 1.22;
                margin-bottom: 0.75rem;
                word-break: break-word;
            }
            p[data-i18n="hero_subtitle"] {
                font-size: 0.9rem;
                line-height: 1.6;
                margin-top: 1rem;
                margin-bottom: 2rem;
                padding-left: 0.25rem;
                padding-right: 0.25rem;
                word-break: break-word;
            }
            /* الأزرار الرئيسية في الهيرو بعرض كامل وتباعد مناسب */
            .action-bar button,
            #runGlobalAI,
            [data-i18n="cta_view_candles"],
            .btn-primary {
                width: 100%;
                max-width: 100%;
            }
            /* الكروت تتكدّس عموديًا مع مسافات داخلية مريحة */
            .glass-effect { 
                padding: 12px !important; 
                margin-left: 8px !important;
                margin-right: 8px !important;
                max-width: calc(100% - 16px) !important;
            }
            .rounded-2xl, .rounded-xl { border-radius: 1rem; }
            /* أي شبكات ذات أعمدة متعددة تصبح عمودًا واحدًا */
            .md\:grid-cols-2, .md\:grid-cols-3, .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4 {
                grid-template-columns: 1fr !important;
            }
            /* أزرار المساعد الذكي بعرض كامل */
            .smart-assistant-btn { width: 100%; }
            
            /* تحسين كروت المنتجات المنفجرة */
            #explodingList .bg-black,
            #explodingList > div,
            #explodingList .rounded-lg {
                padding: 10px !important;
                margin: 0 0 8px 0 !important;
                max-width: 100% !important;
                width: 100% !important;
                word-break: break-word;
                overflow-wrap: break-word;
                box-sizing: border-box !important;
            }
            
            /* تحسين النصوص داخل كروت المنتجات */
            #explodingList .text-white,
            #explodingList .text-gray-300,
            #explodingList .text-gray-400 {
                word-break: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
            }
            
            /* تحسين الأزرار في الكروت */
            #explodingList button,
            #explodingList .btn {
                width: 100% !important;
                max-width: 100% !important;
                white-space: normal !important;
                word-break: break-word;
            }
            
            /* تحسين النصوص في الكروت */
            .bg-black.bg-opacity-30 {
                padding: 10px !important;
                word-break: break-word;
                overflow-wrap: break-word;
            }
            
            /* تحسين العناوين */
            h2, h3, h4 {
                font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
                word-break: break-word;
                line-height: 1.3;
            }
            
            /* تحسين الأزرار */
            button, .btn {
                padding: 10px 16px !important;
                font-size: 0.875rem !important;
                white-space: normal;
                word-break: break-word;
            }
            
            /* تحسين الجداول */
            table {
                font-size: 0.75rem !important;
                width: 100% !important;
            }
            
            /* تحسين النصوص الطويلة */
            .text-sm, .text-xs {
                word-break: break-word;
                overflow-wrap: break-word;
            }
        }

        /* Visitor floating badge */
        .visitor-float {
            position: fixed; 
            top: 24px; 
            z-index: 40;
            background: var(--card-bg);
            border-radius: 12px; 
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-subtle);
            padding: 8px 12px; 
            display: inline-flex; 
            align-items: center; 
            gap: 6px;
            color: var(--text-main);
            font-size: 0.75rem;
            width: auto;
            max-width: none;
            flex-wrap: nowrap;
            white-space: nowrap;
            transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }
        
        .visitor-float .num { 
            font-weight: 700; 
            color: var(--accent);
            font-size: 0.75rem;
            white-space: nowrap;
        }
        
        .visitor-float .icon { 
            color: var(--accent);
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
            width: auto;
            height: auto;
            min-width: 0.875rem;
        }
        
        .visitor-float #visitor-label-float {
            font-size: 0.7rem;
            color: var(--text-muted);
            white-space: nowrap;
        }
        
        [dir="rtl"] .visitor-float { 
            left: 16px; 
            right: auto; 
        }
        
        [dir="ltr"] .visitor-float { 
            right: 16px; 
            left: auto; 
        }
        
        /* Mobile adjustments for visitor float */
        @media (max-width: 768px) {
            .visitor-float {
                top: 16px;
                padding: 6px 10px;
                gap: 5px;
                font-size: 0.7rem;
                width: auto !important;
                max-width: 200px !important;
                display: inline-flex !important;
            }
            
            .visitor-float .num {
                font-size: 0.7rem;
                flex-shrink: 0;
            }
            
            .visitor-float .icon {
                font-size: 0.7rem !important;
                min-width: 0.7rem;
                line-height: 1;
                flex-shrink: 0;
            }
            
            .visitor-float #visitor-label-float {
                font-size: 0.65rem;
                flex-shrink: 0;
            }
            
            [dir="rtl"] .visitor-float { 
                left: 12px; 
                right: auto !important;
            }
            
            [dir="ltr"] .visitor-float { 
                right: 12px; 
                left: auto !important;
            }
        }
        
        @media (max-width: 480px) {
            .visitor-float {
                top: 12px;
                padding: 5px 8px;
                gap: 4px;
                font-size: 0.65rem;
                border-radius: 10px;
                width: auto !important;
                max-width: 180px !important;
                display: inline-flex !important;
            }
            
            .visitor-float .num {
                font-size: 0.65rem;
                font-weight: 600;
                flex-shrink: 0;
            }
            
            .visitor-float .icon {
                font-size: 0.65rem !important;
                min-width: 0.65rem;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                flex-shrink: 0;
            }
            
            .visitor-float #visitor-label-float {
                font-size: 0.6rem;
                flex-shrink: 0;
            }
            
            [dir="rtl"] .visitor-float { 
                left: 8px; 
                right: auto !important;
            }
            
            [dir="ltr"] .visitor-float { 
                right: 8px; 
                left: auto !important;
            }
        }
        
        /* تحسين الأيقونة بشكل عام */
        .visitor-float .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
            min-width: 0.875rem;
        }
        
        /* منع التمدد */
        .visitor-float * {
            flex-shrink: 0;
        }
        
        .visitor-float .num,
        .visitor-float #visitor-label-float {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* iOS-like watery yellow glass (without green bleed) */
        .glass-gold {
            background: linear-gradient(180deg, rgba(255,247,200,0.92), rgba(255,240,170,0.86));
            border: 1px solid rgba(255, 213, 90, 0.65);
            box-shadow: 0 8px 24px rgba(255, 213, 90, 0.18), inset 0 1px 0 rgba(255,255,255,0.35);
            border-radius: 16px;
            color: #1a1a1a;
        }

        /* Brand logos strip - Animated slider */
        .brand-logos {
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            width: 100%;
        }
        .brand-logos-track {
            display: inline-flex;
            align-items: center;
            gap: 3rem;
            white-space: nowrap;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .brand-logos[dir="ltr"] .brand-logos-track {
            animation: brand-slide-ltr 30s linear infinite;
            will-change: transform;
        }
        .brand-logos[dir="rtl"] .brand-logos-track {
            animation: brand-slide-rtl 30s linear infinite;
            will-change: transform;
        }
        .brand-logos img { 
            height: 60px; 
            width: auto; 
            opacity: 0.9; 
            filter: grayscale(10%); 
            transition: all .3s ease; 
            background: transparent;
            padding: 10px 15px; 
            object-fit: contain;
            flex-shrink: 0;
        }
        /* تصغير شعار Zid 10% (من 154px إلى 139px) */
        .brand-logos img[alt="Zid"] {
            height: 139px !important;
            transform: scale(1);
        }
        /* تصغير شعار Otto 20% (من 60px إلى 48px) */
        .brand-logos img[alt="Otto"] {
            height: 48px !important;
        }
        /* تكبير شعار Amazon 20% (من 60px إلى 72px) */
        .brand-logos img[alt="Amazon"] {
            height: 72px !important;
        }
        /* تكبير شعار AliBaba 5% (من 60px إلى 63px) */
        .brand-logos img[alt="Alibaba"] {
            height: 63px !important;
        }
        /* تكبير شعار WooCommerce 10% (من 60px إلى 66px) */
        .brand-logos img[alt="WooCommerce"] {
            height: 66px !important;
        }
        .brand-logos img:hover { 
            opacity: 1; 
            filter: none; 
            transform: scale(1.1); 
        }
        @keyframes brand-slide-ltr {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-100% / 3)); }
        }
        @keyframes brand-slide-rtl {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(100% / 3)); }
        }

        /* Business Favorite badge (red in both languages, fixed overlap) */
        [data-i18n="badge_biz_favorite"], .badge-biz {
            background: #ef4444 !important; /* red-500 */
            color: #ffffff !important;
            border: 1px solid #ef4444 !important;
            display: inline-block;
            padding: 2px 8px;
            border-radius: 8px;
            line-height: 1.2;
            white-space: nowrap;
        }
        
        /* Logo Animation - نبض اللوقو */
        .trendlens-logo {
            animation: logoPulse 2s ease-in-out infinite;
        }
        
        .trendlens-logo img {
            filter: drop-shadow(0 10px 20px rgba(254, 186, 4, 0.3));
            transition: all 0.3s ease;
        }
        
        .trendlens-logo img:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 15px 30px rgba(254, 186, 4, 0.5));
        }
        
        @keyframes logoPulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 10px 20px rgba(254, 186, 4, 0.3));
            }
            50% {
                transform: scale(1.02);
                filter: drop-shadow(0 15px 25px rgba(254, 186, 4, 0.4));
            }
        }
        
        /* Logo Animation - نبض اللوقو الرئيسي مع خلفية ذهبية */
        .main-logo {
            animation: logoPulse 2s ease-in-out infinite;
            position: relative;
            filter: drop-shadow(0 10px 20px rgba(254, 186, 4, 0.3));
            transition: all 0.3s ease;
        }
        
        .main-logo::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(254, 186, 4, 0.25) 0%, rgba(254, 186, 4, 0.15) 40%, transparent 70%);
            border-radius: 50%;
            z-index: -1;
            animation: logoGlow 2s ease-in-out infinite;
        }
        
        .main-logo:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 15px 30px rgba(254, 186, 4, 0.5));
        }
        
        .main-logo:hover::before {
            background: radial-gradient(circle, rgba(254, 186, 4, 0.35) 0%, rgba(254, 186, 4, 0.2) 40%, transparent 70%);
        }
        
        @keyframes logoGlow {
            0%, 100% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.1);
            }
        }
        
        /* Feature Cards - Locked State */
        .feature-card-locked {
            position: relative;
            opacity: 0.85;
            transition: all 0.3s ease;
            cursor: pointer;
            background: var(--card-bg-soft);
            border-radius: var(--radius-lg);
            padding: 12px 12px 11px;
            border: 1px solid rgba(55, 65, 81, 0.85);
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.85);
        }
        
        .feature-card-locked::before {
            content: "";
            position: absolute;
            inset: -40%;
            background: radial-gradient(circle at top,
                rgba(251, 146, 60, 0.16),
                transparent 60%);
            opacity: 0;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
            transform: translate3d(0, 12px, 0);
        }
        
        .feature-card-locked:hover {
            opacity: 1;
            transform: translateY(-4px);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.95);
            border-color: rgba(249, 115, 22, 0.75);
            background: radial-gradient(circle at top left,
                rgba(249, 115, 22, 0.22),
                rgba(15, 23, 42, 0.98));
        }
        
        .feature-card-locked:hover::before {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        
        .feature-card-locked .lock-icon {
            position: absolute;
            top: 15px;
            font-size: 20px;
            color: #feba04;
            animation: lockPulse 2s ease-in-out infinite;
            z-index: 2;
        }
        
        /* القفل في الجهة اليسرى للعربية (RTL) - بعيد عن الشعار */
        [dir="rtl"] .feature-card-locked .lock-icon {
            left: 15px;
            right: auto;
        }
        
        /* القفل في الجهة اليمنى للإنجليزية (LTR) - بعيد عن الشعار */
        [dir="ltr"] .feature-card-locked .lock-icon {
            right: 15px;
            left: auto;
        }
        
        @keyframes lockPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: radial-gradient(circle at 20% 0, #facc6b, #fb923c 45%, #7c2d12 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 8px;
            color: #111827;
        }
        
        .feature-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #feba04;
            margin-bottom: 0.5rem;
        }
        
        .feature-desc {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }
        
        .chip-locked {
            border-radius: 999px;
            padding: 4px 8px;
            background: rgba(15, 23, 42, 0.98);
            border: 1px solid rgba(55, 65, 81, 0.9);
            color: rgba(252, 211, 77, 0.96);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
        }
        
        /* Fix chip-locked colors in light theme */
        [data-theme="light"] .chip-locked {
            background: rgba(249, 115, 22, 0.15) !important;
            border: 1px solid rgba(249, 115, 22, 0.4) !important;
            color: rgba(249, 115, 22, 1) !important;
        }
        
        /* Ensure all text inside chip-locked is visible in light theme */
        [data-theme="light"] .chip-locked span,
        [data-theme="light"] .chip-locked * {
            color: rgba(249, 115, 22, 1) !important;
        }
        
        /* Fix feature-cta text color in light theme */
        [data-theme="light"] .feature-cta,
        [data-theme="light"] .feature-cta.text-gray-400,
        [data-theme="light"] .feature-cta span {
            color: var(--text-main) !important;
        }
        
        /* Override Tailwind gray-400 in light theme for feature-cta */
        [data-theme="light"] .feature-cta.text-gray-400 {
            color: #111827 !important; /* Dark text for light theme */
        }
        
        /* Ensure feature-footer text is visible in light theme */
        [data-theme="light"] .feature-footer .text-gray-400 {
            color: var(--text-main) !important;
        }
        
        /* Make sure all feature card text is readable in light theme */
        [data-theme="light"] .feature-card-locked .text-gray-300,
        [data-theme="light"] .feature-card-locked .text-gray-400 {
            color: var(--text-muted) !important;
        }
        
        .chip-locked span.lock {
            font-size: 16px;
        }
        
        /* How It Works Section */
        .how-it-works-step {
            transition: all 0.3s ease;
        }
        
        .how-it-works-step:hover {
            transform: translateY(-5px);
        }
        
        .how-it-works-step .step-number {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #feba04, #ff6b35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #000;
            margin: 0 auto 1rem;
            box-shadow: 0 5px 15px rgba(254, 186, 4, 0.3);
        }
        
        /* Hero Search Bar */
        .hero-search-bar {
            max-width: 700px;
            margin: 2rem auto;
        }
        
        .hero-search-shell {
            background: var(--card-bg);
            border-radius: 999px;
            padding: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        
        .hero-search-bar input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            color: var(--text-main);
            font-size: 13px;
            padding: 8px 10px 8px 8px;
            transition: all 0.3s ease;
        }
        
        .hero-search-bar input::placeholder {
            color: rgba(148, 163, 184, 0.85);
        }
        
        .hero-search-bar input:focus {
            box-shadow: 0 0 0 3px rgba(254, 186, 4, 0.2);
        }
        
        /* Dashboard Snapshot Card */
        .dashboard-snapshot {
            margin: 3rem 0;
            direction: rtl;
            text-align: right;
        }
        
        .snapshot-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
            color: var(--text-main);
        }
        
        .snapshot-subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }
        
        .snapshot-card {
            position: relative;
            border-radius: 16px;
            padding: 1.5rem;
            background: radial-gradient(circle at top left, #1e293b, #020617);
            color: #fff;
            overflow: hidden;
            max-width: 420px;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
            transition: background 0.3s ease;
        }
        
        [data-theme="light"] .snapshot-card {
            background: var(--card-bg);
        }
        
        /* المحتوى الحقيقي – نعمل له blur */
        .snapshot-card-inner {
            filter: blur(2px);
            opacity: 0.85;
            pointer-events: none;
            user-select: none;
            visibility: visible;
        }
        
        /* الهيدر داخل البطاقة */
        .snapshot-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            gap: 0.5rem;
        }
        
        .snapshot-tag {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
            border-radius: 999px;
            background: rgba(34, 197, 94, 0.2);
            border: 1px solid rgba(34, 197, 94, 0.5);
        }
        
        .snapshot-label {
            font-size: 0.75rem;
            color: #cbd5f5;
            opacity: 0.8;
        }
        
        /* اسم المنتج */
        .snapshot-product {
            margin-bottom: 1rem;
        }
        
        .snapshot-product-name {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
        }
        
        .snapshot-product-meta {
            font-size: 0.8rem;
            color: #cbd5e1;
        }
        
        /* المقاييس */
        .snapshot-metrics {
            display: flex;
            gap: 1rem;
        }
        
        .metric {
            flex: 1;
        }
        
        .metric-label {
            font-size: 0.8rem;
            color: #cbd5e1;
            margin-bottom: 0.25rem;
        }
        
        .metric-value {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
        }
        
        .metric-value.positive {
            color: #4ade80;
        }
        
        /* تحسينات للوضع الفاتح */
        [data-theme="light"] .snapshot-product-name,
        [data-theme="light"] .snapshot-product-meta,
        [data-theme="light"] .metric-label,
        [data-theme="light"] .metric-value {
            color: var(--text-main);
        }
        
        [data-theme="light"] .metric-value.positive {
            color: #16a34a;
        }
        
        /* طبقة القفل */
        .snapshot-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
            background: linear-gradient(
                to bottom,
                rgba(15, 23, 42, 0.55),
                rgba(15, 23, 42, 0.78)
            );
            text-align: center;
            padding: 1.5rem;
        }
        
        /* تحسينات للوضع الفاتح */
        [data-theme="light"] .snapshot-overlay {
            background: linear-gradient(
                to bottom,
                rgba(248, 249, 250, 0.55),
                rgba(243, 244, 246, 0.78)
            );
        }
        
        .overlay-lock {
            width: 54px;
            height: 54px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
            background: radial-gradient(circle at top, rgba(248, 250, 252, 0.12), transparent);
        }
        
        .lock-icon {
            font-size: 1.5rem;
        }
        
        .overlay-text {
            font-size: 0.9rem;
            line-height: 1.7;
            color: #f9fafb;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        }
        
        .overlay-text span {
            font-size: 0.8rem;
            color: #d1d5db;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        }
        
        /* تحسينات للوضع الفاتح */
        [data-theme="light"] .overlay-text {
            color: #1f2937;
            text-shadow: 0 2px 6px rgba(255, 255, 255, 0.8);
        }
        
        [data-theme="light"] .overlay-text span {
            color: #4b5563;
            text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
        }
        
        .pill {
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 10px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            color: var(--text-muted);
        }
        
        .badge-soft {
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 10px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            color: var(--text-muted);
            background: rgba(15, 23, 42, 0.75);
        }
        
        @media (max-width: 900px) {
            .dashboard-snapshot {
                margin-top: 2rem;
            }
            
            .snapshot-card {
                max-width: 100%;
            }
        }
        
        /* Fade In Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }
        
        /* Cinematic Loader - Enhanced */
        #intro-screen {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: radial-gradient(circle at center, #111827 0, #020308 60%, #000 100%);
            opacity: 1;
            visibility: visible;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out;
        }
        
        #intro-screen.hidden {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.02);
            pointer-events: none;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out;
        }
        
        .loader-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 20px;
        }
        
        .loader-logo-container {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.8) rotate(-10deg);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .loader-logo-container.visible {
            opacity: 1;
            transform: scale(1) rotate(0deg);
            animation: logoPulse 2s ease-in-out infinite;
        }
        
        @keyframes logoPulse {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.05) rotate(2deg);
            }
        }
        
        .loader-logo-svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 15px rgba(254, 186, 4, 0.5));
        }
        
        .loader-logo-main {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--primary);
            text-shadow: 0 0 20px rgba(254, 186, 4, 0.6);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .loader-logo-main.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .loader-text {
            font-size: 16px;
            color: var(--text-main);
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            margin-top: 8px;
            text-align: center;
        }
        
        .loader-text.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .loader-text[dir="ltr"] {
            font-size: 15px;
        }
        
        /* Live Market Feed Section - Compact & Beautiful */
        #live-market-feed-section {
            position: relative;
        }
        
        #live-market-feed-section .glass-effect {
            backdrop-filter: blur(20px);
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
            border: 1px solid rgba(254, 186, 4, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(254, 186, 4, 0.1) inset;
            transition: all 0.3s ease;
        }
        
        #live-market-feed-section .glass-effect:hover {
            border-color: rgba(254, 186, 4, 0.4);
            box-shadow: 0 12px 40px rgba(254, 186, 4, 0.15), 0 0 0 1px rgba(254, 186, 4, 0.2) inset;
            transform: translateY(-2px);
        }
        
        /* Beautiful Platform Pills */
        #live-market-feed-section .inline-flex {
            transition: all 0.2s ease;
        }
        
        #live-market-feed-section .inline-flex:hover {
            transform: scale(1.08);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* Sparkline Charts in Market Feed Items - مثل الصورة */
        .market-feed-item-sparkline {
            width: 100%;
            height: 32px;
            background: linear-gradient(180deg, rgba(254, 186, 4, 0.08) 0%, rgba(254, 186, 4, 0.02) 50%, transparent 100%);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(254, 186, 4, 0.1);
        }
        
        .market-feed-item-sparkline canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        /* Market Feed Card - Compact & Beautiful */
        .market-feed-card {
            transition: all 0.2s ease;
            backdrop-filter: blur(10px);
        }
        
        .market-feed-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(254, 186, 4, 0.15);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .market-feed-card {
                padding: 0.5rem !important;
            }
            
            .market-feed-item-sparkline {
                height: 28px;
            }
        }
        
        /* Live Teaser Bar - Enhanced */
        .live-teaser-bar {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 12px 16px;
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 26px;
            transition: background 0.3s ease, border-color 0.3s ease;
            position: relative;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Header row with dot and label - centered */
        .live-teaser-bar-header {
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }
        
        /* Pills container - single item display - centered */
        .live-teaser-bar-pills {
            position: relative;
            width: 100%;
            min-height: 36px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .live-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
            flex-shrink: 0;
        }
        
        .live-label {
            font-size: 13px;
            font-weight: 700;
            color: #22c55e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            margin-inline-end: 10px;
        }
        
        .teaser-items {
            display: flex;
            gap: 3rem;
            animation: teaserScroll 30s linear infinite;
            white-space: nowrap;
        }
        
        .teaser-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-main);
            font-size: 0.95rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        /* Hide all pills by default */
        .live-pill {
            position: absolute;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease, background var(--transition-fast), box-shadow 0.12s ease-out;
            pointer-events: none;
            left: 50%;
            top: 0;
            transform: translateX(-50%) translateY(10px);
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 500;
            background: radial-gradient(circle at top, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.95));
            border: 1px solid rgba(75, 85, 99, 0.9);
            color: #e5e7eb;
            white-space: nowrap;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            width: auto;
            min-height: 32px;
            max-width: 95%;
        }

        /* More compact, colored pills for homepage trends */
        .homepage-trend-pill {
            background: linear-gradient(90deg, rgba(59,130,246,0.15), rgba(16,185,129,0.12));
            border-color: rgba(96,165,250,0.9);
            font-size: 12px;
            padding-inline: 12px;
        }

        .homepage-trend-pill .trend-name {
            font-weight: 600;
        }

        .homepage-trend-pill .trend-meta {
            font-size: 10px;
            opacity: 0.8;
        }
        
        /* Show active pill */
        .live-pill.active {
            position: relative;
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
            display: inline-flex;
            left: auto;
            transition: opacity 0.3s ease, transform 0.3s ease, background var(--transition-fast), box-shadow 0.12s ease-out;
        }
        
        .live-pill:hover {
            background: rgba(17, 24, 39, 0.98);
            transform: translateY(-1px);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.9);
        }
        
        /* Fix live-pill colors in light theme */
        [data-theme="light"] .live-pill {
            background: rgba(249, 115, 22, 0.12) !important;
            border: 1px solid rgba(249, 115, 22, 0.3) !important;
            color: rgba(249, 115, 22, 1) !important;
        }
        
        [data-theme="light"] .live-pill:hover {
            background: rgba(249, 115, 22, 0.2) !important;
            border-color: rgba(249, 115, 22, 0.5) !important;
            color: rgba(249, 115, 22, 1) !important;
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2) !important;
        }
        
        /* Ensure icons and text inside live-pill are visible in light theme */
        [data-theme="light"] .live-pill i,
        [data-theme="light"] .live-pill span {
            color: rgba(249, 115, 22, 1) !important;
        }
        
        .teaser-item:hover {
            color: var(--primary);
        }
        
        @keyframes teaserScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        /* Page Transition Overlay */
        #page-transition-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            background: transparent;
            z-index: 9999;
            opacity: 0;
        }
        
        body.page-transitioning #page-transition-overlay {
            opacity: 1;
            background: radial-gradient(circle at center,
                rgba(254, 186, 4, 0.25),
                rgba(0, 0, 0, 0.95)
            );
            animation: tl-scene-cut 0.35s ease-in-out forwards;
            pointer-events: all;
        }
        
        @keyframes tl-scene-cut {
            0% {
                transform: scaleX(0.1) skewX(-12deg);
                opacity: 0;
            }
            40% {
                transform: scaleX(1.1) skewX(-5deg);
                opacity: 1;
            }
            100% {
                transform: scaleX(1.5) skewX(0deg);
                opacity: 0;
            }
        }
        
        /* Feature Card Overlay */
        .feature-card-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        
        .feature-card-locked:hover .feature-card-overlay {
            opacity: 1;
            pointer-events: all;
        }
        
        .feature-card-overlay-text {
            color: white;
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }
        
        /* Chat Widget Styles */
        #chatWidget {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        #chatWindow {
            animation: slideUp 0.3s ease-out;
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #chatMessages::-webkit-scrollbar {
            width: 4px;
        }
        
        #chatMessages::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }
        
        #chatMessages::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }
        
        #chatMessages::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        .search-input:focus {
            box-shadow: 0 0 0 3px rgba(254, 186, 4, 0.2);
        }
        
        /* Ticker Animation Styles */
        .tl-ticker-wrap {
            overflow: hidden;
            white-space: nowrap;
        }
        .tl-ticker-track {
            display: inline-block;
            will-change: transform;
            animation: tl-marquee var(--speed, 40s) linear infinite;
        }
        .tl-ticker-track[dir="rtl"] {
            animation: tl-marquee-rtl var(--speed, 40s) linear infinite;
        }
        @keyframes tl-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @keyframes tl-marquee-rtl {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }
        .tl-ticker-item {
            display: inline-flex;
            gap: 0.5rem;
            align-items: center;
            margin-inline: 1.25rem;
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }
        
        /* Language Switcher */
        .lang-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .lang-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.2s ease;
            background: transparent;
            color: var(--text-main);
        }
        .lang-btn:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .lang-btn.active {
            background: var(--primary);
            color: #000;
            border-color: var(--primary);
        }
        
        /* Theme Toggle Button */
        .theme-toggle-btn {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 50%;
            background: var(--glass-bg);
            border: 2px solid var(--glass-border);
            color: var(--text-main);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            flex-shrink: 0;
            padding: 0;
            margin: 0;
        }
        
        .theme-toggle-btn:hover {
            background: var(--accent-soft);
            border-color: var(--accent);
            transform: scale(1.05);
        }
        
        .theme-toggle-btn:active {
            transform: scale(0.95);
        }
        
        .theme-toggle-btn i {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
            line-height: 1;
        }
        
        [data-theme="light"] .theme-toggle-btn i.fa-moon {
            display: none;
        }
        
        [data-theme="light"] .theme-toggle-btn i.fa-sun {
            display: inline-block;
        }
        
        .theme-toggle-btn i.fa-sun {
            display: none;
        }
        
        [data-theme="dark"] .theme-toggle-btn i.fa-moon {
            display: inline-block;
        }
        
        /* Mobile adjustments for theme toggle */
        @media (max-width: 768px) {
            .theme-toggle-btn {
                width: 42px;
                height: 42px;
                min-width: 42px;
                min-height: 42px;
            }
            
            .theme-toggle-btn i {
                font-size: 1.1rem;
            }
        }
        
        @media (max-width: 480px) {
            .theme-toggle-btn {
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
            }
            
            .theme-toggle-btn i {
                font-size: 1rem;
            }
        }
        
        /* تحسين القوائم المنسدلة - خلفية داكنة للنص الأبيض */
        select {
            background: rgba(10, 32, 24, 0.8) !important;
            color: #fff !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
        }
        
        select option {
            background: rgba(10, 32, 24, 0.95) !important;
            color: #fff !important;
            padding: 8px 12px;
        }
        
        select:hover {
            border-color: rgba(254, 186, 4, 0.5) !important;
        }
        
        select:focus {
            outline: none !important;
            border-color: #feba04 !important;
            box-shadow: 0 0 0 2px rgba(254, 186, 4, 0.2) !important;
        }

        /* Feature Expand Overlay */
        .feature-expand-overlay.hidden {
            display: none;
        }

        .feature-expand-overlay {
            position: fixed;
            inset: 0;
            z-index: 80;
        }

        .feature-expand-backdrop {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top, rgba(15,23,42,0.96), rgba(3,7,18,0.96));
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 5vh 1rem;
            overflow-y: auto;
        }

        .feature-expand-modal {
            width: 100%;
            max-width: 1100px;
            border-radius: 24px;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            padding: 1.5rem;
        }

        @media (min-width: 768px) {
            .feature-expand-modal {
                padding: 2rem;
            }
        }

        .kpi-card {
            background: var(--card-bg-soft);
            border-radius: 18px;
            border: 1px solid var(--border-subtle);
            padding: 0.85rem 0.9rem;
        }

        .kpi-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-bottom: 0.2rem;
        }

        .kpi-value {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--text-main);
        }

        .kpi-sub {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
        }

        .kpi-bar-wrapper {
            margin-top: 0.4rem;
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: rgba(148,163,184,0.25);
            overflow: hidden;
        }

        .kpi-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, #f97316, #facc15);
            transition: width 0.6s ease-out;
        }

        .chart-card {
            background: var(--card-bg-soft);
            border-radius: 18px;
            border: 1px solid var(--border-subtle);
            padding: 0.9rem 1rem;
        }

        .chart-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .chart-subtitle {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .chip-live {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            background: rgba(34,197,94,0.12);
            font-size: 0.7rem;
            color: #bbf7d0;
        }

        .chip-live .live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34,197,94,0.9);
        }

        .mini-line-chart {
            margin: 0.75rem 0;
            height: 120px;
            border-radius: 14px;
            background: radial-gradient(circle at top, rgba(15,23,42,0.95), rgba(15,23,42,0.9));
            padding: 0.7rem 0.6rem;
            display: flex;
            align-items: flex-end;
            gap: 0.3rem;
        }

        .mini-line-chart-bar {
            flex: 1;
            border-radius: 999px;
            background: linear-gradient(to top, rgba(248,113,113,0.15), rgba(251,146,60,0.85));
            height: 20%;
            transition: height 0.6s ease-out;
        }

        .chart-legend {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .chart-legend .legend-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(90deg, #f97316, #facc15);
            margin-left: 0.25rem;
        }

        .ai-insight-card {
            margin-top: 0.5rem;
            background: linear-gradient(90deg, rgba(249,115,22,0.12), rgba(59,130,246,0.08));
            border-radius: 18px;
            border: 1px solid rgba(249,115,22,0.35);
            padding: 0.9rem 1rem;
        }

        /* موضع ثابت لليبل الكتب الإلكترونية مع دعم كل المتصفحات (بدون inset-inline-start) */
        .ebook-badge {
            position: absolute;
            top: 0.5rem;
            z-index: 5;
        }
        /* يسار في الواجهات العربية (RTL) */
        html[dir="rtl"] .ebook-badge {
            left: 0.5rem;
            right: auto;
        }
        /* يمين في الواجهات الإنجليزية (LTR) */
        html[dir="ltr"] .ebook-badge {
            right: 0.5rem;
            left: auto;
        }

        /* شارة Best Selling / Fastest Growing / Business Favorite على الغلاف */
        .book-flag {
            position: absolute;
            top: 0.5rem;
            z-index: 5;
        }
        /* في العربي تكون يمين (مقابلة لليبل E-book) */
        html[dir="rtl"] .book-flag {
            right: 0.5rem;
            left: auto;
        }
        /* في الإنجليزي تكون يسار */
        html[dir="ltr"] .book-flag {
            left: 0.5rem;
            right: auto;
        }

        /* ===== NEW HOMEPAGE STRUCTURE STYLES ===== */
        /* Section 0: Top Navigation - Compact */
        .top-nav-compact {
            position: sticky;
            top: 0;
            z-index: 100;
            max-height: 70px;
            padding: 0.75rem 1.5rem;
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: var(--card-bg) !important;
        }
        
        /* تحسين ألوان الشريط الداكن */
        [data-theme="dark"] .top-nav-compact {
            background: rgba(19, 22, 30, 0.98) !important;
        }
        
        [data-theme="dark"] .top-nav-compact .nav-link {
            color: #f9fafb !important;
        }
        
        [data-theme="dark"] .top-nav-compact .nav-link:hover {
            color: var(--primary) !important;
        }

        .top-nav-compact .nav-logo-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .top-nav-compact .nav-link {
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
            color: var(--text-main);
            transition: color 0.2s;
            font-weight: 500;
        }
        
        /* تحسين وضوح النصوص في الشريط */
        [data-theme="dark"] .top-nav-compact h1,
        [data-theme="dark"] .top-nav-compact .gradient-text {
            color: #f9fafb !important;
        }

        .top-nav-compact .nav-link:hover {
            color: var(--primary);
        }

        /* Main Container - Centered with max-width */
        .main-container-new {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Section 1: Hero - Compact Two Columns */
        .hero-compact {
            min-height: 50vh;
            max-height: 60vh;
            padding: 3rem 0;
        }

        .hero-compact-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-compact-title {
            font-size: clamp(2rem, 5vw, 3rem);
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .hero-compact-subtitle {
            font-size: 1rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }

        .hero-cta-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .hero-cta-btn {
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.2s;
        }

        .hero-mini-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .hero-snapshot-box {
            background: var(--card-bg);
            border-radius: 0.75rem;
            padding: 1.5rem;
            border: 1px solid var(--border-subtle);
            color: var(--text-main) !important;
        }
        
        /* تحسين Live Snapshot ليكون أوضح */
        .hero-snapshot-box .text-gray-400 {
            color: var(--text-muted) !important;
        }
        
        .hero-snapshot-box .text-gray-300 {
            color: var(--text-main) !important;
        }
        
        .hero-snapshot-box .bg-black\/50 {
            background: var(--card-bg-soft) !important;
            border: 1px solid var(--border-subtle) !important;
        }

        /* Full Width Tabs Bar */
        .full-width-tabs-bar {
            position: sticky !important;
            top: 0 !important;
            z-index: 100 !important;
            background: rgba(15, 23, 42, 0.98) !important;
            backdrop-filter: blur(20px) !important;
            border-bottom: 2px solid rgba(254, 186, 4, 0.2) !important;
            padding: 1rem 0 !important;
            margin: 0 !important;
            width: 100% !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .tab-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-muted);
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            cursor: pointer;
        }

        .tab-btn:hover {
            background: rgba(254, 186, 4, 0.1);
            border-color: rgba(254, 186, 4, 0.3);
            color: var(--primary);
            transform: translateY(-2px);
        }

        .tab-btn.active {
            background: linear-gradient(135deg, rgba(254, 186, 4, 0.2), rgba(254, 186, 4, 0.1));
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: 0 4px 12px rgba(254, 186, 4, 0.2);
        }

        .main-tab-content {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .main-tab-content.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
            animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        /* Market Feed Card Styles */
        .market-feed-card {
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.2s ease;
        }

        .market-feed-card:hover {
            border-color: rgba(254, 186, 4, 0.3);
            background: rgba(254, 186, 4, 0.05);
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .full-width-tabs-bar {
                padding: 0.75rem 0;
            }
            
            .tab-btn {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }
            
            .tab-btn i {
                font-size: 0.875rem;
            }
            
            .main-tab-content {
                padding: 0 0.5rem;
            }
            
            .main-container-new {
                padding: 0 1rem;
            }
        }

        @media (max-width: 640px) {
            .tab-btn span {
                display: none;
            }
            
            .tab-btn {
                padding: 0.75rem;
                min-width: 48px;
            }
        }

        /* Section 2: Main Intelligence Tabs (Legacy - Hidden) */
        .intelligence-tabs-container {
            display: none !important;
        }

        .intelligence-tabs {
            display: none !important;
        }

        /* Trending Products Cards Grid - FORCE GRID DISPLAY */
        #exploding-products-grid,
        #exploding-products-grid.tl-cards-grid,
        #exploding-products-grid.grid,
        .tl-cards-grid,
        .tl-cards-grid.grid,
        div#exploding-products-grid,
        div#exploding-products-grid.tl-cards-grid,
        #trending-cards-section .tl-cards-grid,
        #trending-cards-section #exploding-products-grid,
        .glass-effect .tl-cards-grid,
        .glass-effect #exploding-products-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
            gap: 1rem !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Ensure Tailwind grid classes work with exploding-products-grid */
        @media (min-width: 768px) {
            #exploding-products-grid.grid,
            #exploding-products-grid.tl-cards-grid.grid,
            .tl-cards-grid.grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        
        @media (min-width: 1024px) {
            #exploding-products-grid.grid,
            #exploding-products-grid.tl-cards-grid.grid,
            .tl-cards-grid.grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }
        
        @media (min-width: 1280px) {
            #exploding-products-grid.grid,
            #exploding-products-grid.tl-cards-grid.grid,
            .tl-cards-grid.grid {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }
        }

        /* Trending Cards - FORCE VISIBILITY */
        .tl-card,
        .tl-card--trend,
        div.tl-card,
        div.tl-card--trend,
        .tl-card.tl-card--trend,
        #exploding-products-grid .tl-card,
        #exploding-products-grid .tl-card--trend,
        .tl-cards-grid .tl-card,
        .tl-cards-grid .tl-card--trend,
        #trending-cards-section .tl-card,
        #trending-cards-section .tl-card--trend,
        .glass-effect .tl-card,
        .glass-effect .tl-card--trend {
            background: rgba(15, 23, 42, 0.9) !important;
            border-radius: 12px !important;
            padding: 0.75rem 1rem !important;
            border: 1px solid rgba(148, 163, 184, 0.3) !important;
            cursor: pointer !important;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            visibility: visible !important;
            opacity: 1 !important;
            min-height: 200px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            position: relative !important;
            color: rgba(255, 255, 255, 0.9) !important;
            overflow: visible !important;
            white-space: normal !important;
            word-wrap: break-word !important;
        }
        
        /* Force display for all card children */
        #exploding-products-grid .tl-card > *,
        .tl-cards-grid .tl-card > * {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .tl-card--trend:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.56);
            border-color: rgba(94, 234, 212, 0.7);
        }

        /* Filters Bar Styles */
        .tl-section--filters {
            margin-bottom: 1.25rem;
        }

        .tl-filters-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            justify-content: flex-start;
        }

        .tl-filter {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .tl-filter__label {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        .tl-select {
            min-width: 150px;
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(55, 65, 81, 0.9);
            color: #e5e7eb;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tl-select:hover {
            border-color: rgba(94, 234, 212, 0.5);
        }

        .tl-select:focus {
            outline: none;
            border-color: #5eead4;
            box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
        }

        [data-theme="light"] .tl-select {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(100, 116, 139, 0.35);
            color: #111827;
        }

        [data-theme="light"] .tl-filter__label {
            color: #4b5563;
        }
        
        /* Force all card elements to be visible and properly displayed */
        #exploding-products-grid .tl-card *,
        .tl-cards-grid .tl-card * {
            display: revert !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Ensure text elements are properly displayed */
        #exploding-products-grid .tl-card span,
        #exploding-products-grid .tl-card div,
        #exploding-products-grid .tl-card h4,
        #exploding-products-grid .tl-card button {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        #exploding-products-grid .tl-card .tl-card-header,
        #exploding-products-grid .tl-card .tl-card-body,
        #exploding-products-grid .tl-card .tl-card-footer {
            display: block !important;
        }

        .tl-card-header {
            display: flex !important;
            flex-direction: column !important;
            gap: 0.35rem !important;
            margin-bottom: 0.35rem !important;
            width: 100% !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .tl-card-title {
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            margin-bottom: 0 !important;
        }

        .tl-card-title h4 {
            font-size: 0.95rem !important;
            font-weight: 600 !important;
            color: rgba(255, 255, 255, 0.9) !important;
            margin: 0 !important;
            display: block !important;
            line-height: 1.4 !important;
        }

        .tl-badge {
            padding: 0.25rem 0.5rem !important;
            border-radius: 4px !important;
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            display: inline-block !important;
            white-space: nowrap !important;
        }

        .tl-badge--hot {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
        }

        .tl-card-meta {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0.35rem !important;
            margin-top: 0 !important;
        }

        .tl-chip {
            padding: 0.25rem 0.5rem !important;
            border-radius: 4px !important;
            font-size: 0.7rem !important;
            background: rgba(255, 255, 255, 0.05) !important;
            color: rgba(148, 163, 184, 0.9) !important;
            display: inline-block !important;
            white-space: nowrap !important;
        }

        .tl-card-body {
            display: flex !important;
            flex-direction: column !important;
            gap: 0.35rem !important;
            margin-top: 0.35rem !important;
            margin-bottom: 0.35rem !important;
            flex: 1 !important;
            width: 100% !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .tl-metric {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 0 !important;
        }

        .tl-metric-label {
            font-size: 0.75rem !important;
            color: rgba(148, 163, 184, 0.9) !important;
            display: block !important;
        }

        .tl-metric-value {
            font-size: 0.875rem !important;
            font-weight: 600 !important;
            color: rgba(255, 255, 255, 0.9) !important;
            display: block !important;
        }

        .tl-metric-value--high {
            color: #34d399;
        }

        .tl-metric-value--medium {
            color: #fbbf24;
        }

        .tl-metric-value--low {
            color: #f87171;
        }

        .tl-sparkline-wrapper {
            margin-top: 0.5rem !important;
            height: 40px !important;
            width: 100% !important;
        }

        .tl-sparkline {
            width: 100%;
            height: 40px;
        }

        .tl-sparkline-line {
            stroke-width: 2;
            stroke: #5eead4;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .tl-card-footer {
            margin-top: 0.25rem !important;
            display: flex !important;
            justify-content: flex-end !important;
            padding-top: 0 !important;
            border-top: none !important;
            width: 100% !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .tl-link-button {
            width: auto !important;
            padding: 0.3rem 0.6rem !important;
            border-radius: 999px !important;
            font-size: 0.8rem !important;
            font-weight: 500 !important;
            background: transparent !important;
            color: rgba(148, 163, 184, 0.9) !important;
            border: 1px solid rgba(148, 163, 184, 0.4) !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
        }

        .tl-link-button:hover {
            background: rgba(94, 234, 212, 0.2);
            border-color: rgba(94, 234, 212, 0.5);
        }

        [data-theme="light"] .tl-card--trend {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .tl-card--trend:hover {
            border-color: rgba(94, 234, 212, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .intelligence-tab {
            padding: 0.6rem 1.1rem;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 500;
            color: rgba(248, 250, 252, 0.85);
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(148, 163, 184, 0.4);
            cursor: pointer;
            transition: all 0.18s ease-out;
            white-space: nowrap;
        }

        .intelligence-tab:hover {
            background: rgba(30, 64, 175, 0.6);
            border-color: rgba(129, 140, 248, 0.9);
            color: #f9fafb;
        }

        .intelligence-tab.active {
            background: linear-gradient(90deg, #f97316, #facc15);
            color: #111827;
            font-weight: 600;
            border-color: rgba(250, 204, 21, 1);
        }

        .intelligence-tab-content {
            display: none;
            padding: 2rem 0;
        }

        .intelligence-tab-content.active {
            display: block;
        }

        .intelligence-grid {
            display: grid;
            grid-template-columns: 70% 30%;
            gap: 1.5rem;
        }

        @media (max-width: 1024px) {
            .intelligence-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Section 3: Live Signals Strip */
        .signals-strip {
            background: rgba(0, 0, 0, 0.2);
            padding: 0.75rem 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .signals-strip-content {
            display: inline-flex;
            gap: 2rem;
            animation: scrollSignals 30s linear infinite;
        }

        @keyframes scrollSignals {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .signal-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Slim homepage trends scope strip (local / global) */
        .homepage-trends-slim {
            max-width: 1320px;
            margin: 1.5rem auto 2rem auto;
            padding: 0.75rem 1rem;
        }

        .homepage-trends-slim .scope-label {
            font-size: 0.7rem;
        }

        .homepage-trends-slim .scope-buttons button {
            font-size: 0.7rem;
            padding: 0.25rem 0.9rem;
        }

        .homepage-trends-slim .live-teaser-bar-pills {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }

        /* Section 4: AI Brain */
        .ai-brain-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            padding: 3rem 0;
        }

        /* Mobile Improvements - جمع العناصر وتحسينها بصرياً */
        @media (max-width: 768px) {
            /* جمع العناصر في الموبايل */
            .main-container-new {
                padding: 1rem !important;
                gap: 1rem !important;
            }
            
            .dashboard-card {
                margin-bottom: 1rem !important;
                padding: 1rem !important;
            }
            
            .dashboard-card-header {
                flex-direction: column !important;
                gap: 0.75rem !important;
                align-items: flex-start !important;
            }
            
            /* جمع كروت الفيديو */
            #video-signals .dashboard-card {
                padding: 0.75rem !important;
            }
            
            #videoSignalsBody {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
            }
            
            /* جمع CTA section */
            .dashboard-card .grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
            }
            
            /* جمع Hero Snapshot */
            .hero-snapshot-box {
                padding: 1rem !important;
                margin-top: 1rem !important;
            }
            
            /* جمع Exploding Products */
            #exploding-products-grid,
            .tl-cards-grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
            }
            
            /* تحسين المسافات */
            .dashboard-card-title {
                font-size: 1rem !important;
            }
            
            .dashboard-card canvas,
            .dashboard-chart {
                min-height: 120px !important;
                max-height: 140px !important;
            }
            
            /* منع التمرير الأفقي */
            body {
                overflow-x: hidden !important;
            }
            
            .main-container-new,
            .dashboard-card {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .ai-brain-section {
                grid-template-columns: 1fr;
            }
        }

        .ai-chat-snapshot {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 0.75rem;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Section 5: Data Sources Grid */
        .sources-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            padding: 2rem 0;
        }

        @media (max-width: 768px) {
            .sources-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .source-logo-box {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Section 6: Small Footer */
        .footer-compact {
            padding: 1.5rem 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.875rem;
        }

        .footer-compact .footer-links {
            display: flex;
            gap: 1rem;
        }

        .footer-compact .footer-links a {
            color: var(--text-muted);
            transition: color 0.2s;
        }

        .footer-compact .footer-links a:hover {
            color: var(--primary);
        }

        /* Temporary: Hide old sections while building new structure */
        .old-hero-section,
        .old-feature-cards,
        .old-trends-section {
            display: none !important;
        }

        /* ===== NEW DASHBOARD DESIGN - Similar to E-commerce Dashboard ===== */
        .dashboard-layout {
            display: flex;
            min-height: calc(100vh - 80px);
            background: var(--bg-main);
        }

        .dashboard-sidebar {
            width: 260px;
            background: var(--card-bg);
            border-left: 1px solid var(--border-subtle);
            padding: 1.5rem 0;
            position: sticky;
            top: 80px;
            height: calc(100vh - 80px);
            overflow-y: auto;
        }

        .dashboard-sidebar-logo {
            padding: 0 1.5rem 1.5rem;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 1rem;
        }

        .dashboard-sidebar-logo img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }

        .dashboard-sidebar-nav {
            padding: 0 1rem;
        }

        .dashboard-nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            margin-bottom: 0.25rem;
            border-radius: 10px;
            color: var(--text-muted);
            transition: all 0.2s;
            cursor: pointer;
        }

        .dashboard-nav-item:hover {
            background: var(--hover-bg);
            color: var(--text-main);
        }

        .dashboard-nav-item.active {
            background: var(--primary);
            color: #000;
            font-weight: 600;
        }

        .dashboard-nav-item i {
            width: 20px;
            text-align: center;
        }

        .dashboard-main {
            flex: 1;
            padding: 2rem;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .dashboard-header h1 {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .dashboard-header-search {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .dashboard-search-box {
            position: relative;
            width: 300px;
        }

        .dashboard-search-box input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            color: var(--text-main);
        }

        .dashboard-search-box i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        .dashboard-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .dashboard-stat-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid var(--border-subtle);
        }

        .dashboard-stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .dashboard-stat-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: #000;
        }

        .dashboard-stat-card-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 0.5rem;
        }

        .dashboard-stat-card-label {
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .dashboard-stat-card-trend {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        .dashboard-stat-card-trend.positive {
            color: #10b981;
        }

        .dashboard-stat-card-trend.negative {
            color: #ef4444;
        }

        .dashboard-content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        /* Prevent chart movement on resize */
        .dashboard-content-grid .dashboard-card {
            min-width: 0;
            overflow: visible;
        }
        
        .dashboard-content-grid .dashboard-card canvas {
            width: 100% !important;
            max-width: 100% !important;
        }

        .dashboard-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid var(--border-subtle);
        }

        .dashboard-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .dashboard-card-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .exploding-products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }

        .exploding-product-card {
            background: var(--card-bg-soft);
            border-radius: 12px;
            padding: 1rem;
            border: 1px solid var(--border-subtle);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .exploding-product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(254, 186, 4, 0.2);
        }

        .exploding-product-card-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 0.75rem;
        }

        .exploding-product-card-title {
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
        }

        .exploding-product-card-growth {
            color: var(--primary);
            font-weight: 700;
            font-size: 1.125rem;
        }

        .social-audit-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid var(--border-subtle);
        }

        .social-audit-input-group {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .social-audit-input {
            flex: 1;
            padding: 0.75rem 1rem;
            background: var(--card-bg-soft);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            color: var(--text-main);
        }

        .social-audit-btn {
            padding: 0.75rem 1.5rem;
            background: var(--primary);
            color: #000;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .social-audit-btn:hover {
            background: var(--accent);
        }

        .social-audit-results {
            margin-top: 1.5rem;
        }

        .social-audit-result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: var(--card-bg-soft);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }

        .ebooks-marketplace-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
        }

        .ebook-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            transition: transform 0.2s;
        }

        .ebook-card:hover {
            transform: translateY(-4px);
        }

        .ebook-card-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .ebook-card-body {
            padding: 1rem;
        }

        .ebook-card-title {
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .ebook-card-download {
            width: 100%;
            padding: 0.5rem;
            background: var(--primary);
            color: #000;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 0.5rem;
        }

        /* Chart Container - Fixed and Stable */
        .dashboard-card canvas,
        .dashboard-chart {
            position: relative !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 150px;
            max-height: 175px;
            margin-top: 1rem;
            display: block;
        }
        
        .dashboard-chart-large {
            min-height: 175px;
            max-height: 200px;
        }
        
        .dashboard-chart-medium {
            min-height: 140px;
            max-height: 160px;
        }
        
        /* Monthly Target Chart Specific Styles - Perfect Circle */
        #targetGaugeChart {
            width: 140px !important;
            height: 140px !important;
            max-width: 140px !important;
            max-height: 140px !important;
            min-width: 140px !important;
            min-height: 140px !important;
            aspect-ratio: 1 / 1 !important;
            display: block !important;
            margin: 0 auto !important;
            flex-shrink: 0 !important;
        }
        
        /* Container wrapper to ensure circle stays round */
        #targetGaugeChart {
            object-fit: contain !important;
        }
        
        #targetPercentage {
            font-size: 2rem;
            line-height: 1;
            font-weight: 700;
        }
        
        [data-theme="light"] #targetPercentage {
            color: #0f172a !important;
        }
        
        [data-theme="dark"] #targetPercentage {
            color: #f9fafb !important;
        }
        
        /* Chart Wrapper - Prevent Movement */
        .dashboard-card {
            position: relative;
            overflow: hidden;
        }
        
        .dashboard-card canvas {
            position: relative;
            width: 100% !important;
            height: auto !important;
        }

        @media (max-width: 1024px) {
            .dashboard-sidebar {
                width: 80px;
            }

            .dashboard-nav-item span {
                display: none;
            }

            .dashboard-content-grid {
                grid-template-columns: 1fr;
            }
            
            .dashboard-chart,
            .dashboard-chart-large,
            .dashboard-chart-medium {
                max-height: 150px !important;
                min-height: 125px !important;
            }
            
            .dashboard-card canvas {
                max-height: 150px !important;
            }
            
            #targetGaugeChart {
                width: 120px !important;
                height: 120px !important;
                max-width: 120px !important;
                max-height: 120px !important;
                aspect-ratio: 1 / 1 !important;
            }
            
            /* Fix mobile overlapping issues */
            .dashboard-content-grid {
                gap: 1rem !important;
            }
            
            .dashboard-card {
                margin-bottom: 1rem !important;
            }
            
            .dashboard-stat-card {
                margin-bottom: 1rem !important;
            }
        }

        @media (max-width: 768px) {
            .dashboard-layout {
                flex-direction: column;
            }

            .dashboard-sidebar {
                width: 100%;
                height: auto;
                position: relative;
                top: 0;
                display: flex;
                overflow-x: auto;
                padding: 0.75rem 0 !important;
            }

            .dashboard-sidebar-nav {
                display: flex;
                gap: 0.5rem;
                padding: 0 0.5rem !important;
            }

            .dashboard-nav-item {
                white-space: nowrap;
                padding: 0.5rem 0.75rem !important;
            }

            .dashboard-main {
                padding: 1rem !important;
            }

            .dashboard-stats-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
                margin-bottom: 1.5rem !important;
            }

            .dashboard-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1rem !important;
                margin-bottom: 1.5rem !important;
            }

            .dashboard-header-search {
                flex-direction: column;
                width: 100%;
                gap: 0.5rem !important;
            }

            .dashboard-search-box {
                width: 100% !important;
            }
            
            /* منع التداخل في الموبايل */
            .dashboard-card {
                margin-bottom: 1.5rem !important;
                padding: 1rem !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .dashboard-content-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
                margin-bottom: 1.5rem !important;
            }
            
            .dashboard-stat-card {
                padding: 1rem !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            /* تحسين الشريط في الموبايل */
            .top-nav-compact {
                padding: 0.5rem 1rem !important;
                max-height: none !important;
            }
            
            .top-nav-compact .nav-link {
                font-size: 0.75rem !important;
                padding: 0.4rem 0.5rem !important;
            }
            
            /* منع overflow في الموبايل */
            .dashboard-main {
                overflow-x: hidden !important;
            }
            
            .dashboard-card canvas {
                max-width: 100% !important;
            }
        }
    </style>
<script src="/trendlens/assets/js/tl-loader.js" defer></script></head>
<body class="gradient-bg min-h-screen font-cairo" style="color: var(--text-main);">
    <!-- Cinematic Loader -->
    <div id="intro-screen">
        <div class="loader-content">
            <div class="loader-logo-container">
                <img src="/trendlens/assets/brand/logo.svg" alt="TrendLens" class="loader-logo-svg" id="loader-logo-svg" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.png'">
            </div>
            <div class="loader-logo-main" id="loader-logo-main">
                TRENDLENS
            </div>
            <div class="loader-text" id="loader-text">
                تهيئة غرفة التحكّم في الترندات…
            </div>
        </div>
    </div>
    
    <!-- Fallback for no JavaScript -->
    <noscript>
        <style>
            #intro-screen {
                display: none !important;
            }
        </style>
    </noscript>
    
    <!-- Page Transition Overlay -->
    <div id="page-transition-overlay"></div>
    
    <!-- Section 0: Top Navigation (Compact) -->
    <header class="top-nav-compact glass-effect">
        <div class="main-container-new">
            <div class="flex items-center justify-between">
                <!-- Left: Logo + Label -->
                <div class="flex items-center gap-3">
                    <div class="trendlens-logo">
                        <img src="/trendlens/assets/brand/logo.svg" alt="TrendLens" class="h-8 w-8" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.png'">
                    </div>
                    <div>
                        <h1 class="text-lg font-bold gradient-text">TrendLens</h1>
                        <div class="nav-logo-label" data-i18n="nav_subtitle">Global Commerce Intelligence</div>
                    </div>
                </div>
                <!-- Right: Links + Buttons + Controls -->
                <div class="flex items-center gap-4">
                    <!-- Navigation Links -->
                    <div class="hidden md:flex items-center gap-2">
                        <a href="/trendlens/dashboard.html" class="nav-link" data-i18n="nav_dashboard">Dashboard</a>
                        <a href="#" class="nav-link" data-i18n="nav_sources">Data Sources</a>
                        <a href="#" class="nav-link" data-i18n="nav_pricing">Pricing</a>
                    </div>
                    <!-- Auth Buttons -->
                    <div id="welcomeArea" class="flex items-center gap-2">
                        <button id="loginBtn" onclick="openAuthModal('login')" class="nav-link text-sm" data-i18n="btn_login">Sign in</button>
                        <button id="registerBtn" onclick="openAuthModal('register')" class="hero-cta-btn bg-primary text-black text-sm px-4 py-1.5" data-i18n="btn_register">Start Free</button>
                        <button id="partnerApplyBtn" class="hidden md:block nav-link text-sm">
                            <i class="fas fa-handshake me-1"></i><span data-i18n="partner_apply">Partner</span>
                        </button>
                        <button id="logoutHeaderBtn" onclick="handleLogout()" class="hidden nav-link text-sm">
                            <i class="fas fa-sign-out-alt me-1"></i><span data-i18n="logout">Logout</span>
                        </button>
                    </div>
                    <!-- Theme Toggle -->
                    <button id="themeToggle" onclick="toggleTheme()" class="theme-toggle-btn" aria-label="تبديل الوضع" title="تبديل الوضع">
                        <i class="fas fa-moon" id="themeIcon"></i>
                    </button>
                    <!-- Language Switcher -->
                    <div class="flex items-center gap-1">
                        <button onclick="switchLang('ar')" class="lang-btn text-xs px-2 py-1" id="lang-ar">AR</button>
                        <button onclick="switchLang('en')" class="lang-btn text-xs px-2 py-1" id="lang-en">EN</button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Floating Visitors Badge -->
    <div class="visitor-float" id="visitorFloat">
        <i class="fas fa-users icon"></i>
        <span id="visitor-label-float" data-i18n="visitor_label">زائر</span>
        <span class="num" id="total-visitors">—</span>
    </div>

    <!-- AI Quota Card (Compact) -->
    <div class="container mx-auto px-4 py-3">
        <div class="glass-effect rounded-xl p-3 border-l-4 border-primary mb-4 hidden" id="aiQuotaCardContainer">
            <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-3 flex-1">
                    <div class="bg-primary bg-opacity-20 p-2 rounded-lg">
                        <i class="fas fa-brain text-primary text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between gap-2 mb-1">
                            <h4 class="text-sm font-semibold text-primary truncate">رصيد الذكاء الاصطناعي</h4>
                            <span class="text-xs text-gray-400 whitespace-nowrap" id="resetsAt">—</span>
                        </div>
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-xs text-gray-300" id="quotaLabel">— متبقية من —</span>
                            <div class="flex-1 bg-black bg-opacity-30 rounded-full h-1.5 min-w-[60px]">
                                <div class="bg-primary h-1.5 rounded-full transition-all" id="quotaProgress" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="upgradeQuotaBtn" class="px-3 py-1.5 rounded bg-primary text-black text-xs font-semibold hover:bg-yellow-400 transition whitespace-nowrap hidden">
                    <i class="fas fa-arrow-up ml-1"></i>ترقية
                </button>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <!-- Try TrendLens Now -->
        <section id="try-trendlens" class="glass-effect rounded-2xl p-6 mt-12">
            <h3 class="text-xl font-bold mb-3" data-i18n="try_title">جرّب ترند لينس الآن</h3>
            <p class="text-sm text-gray-400 mb-4" data-i18n="try_subtitle">أدخل منتج / كلمة / حساب سوشيال وشاهد تقريرًا مصغّرًا فورًا.</p>
            <div class="grid gap-3 sm:grid-cols-[1fr_auto]">
                <input id="tryInput" class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 focus:outline-none" data-i18n-placeholder="try_placeholder" placeholder="مثال: سيراميك مطفي / @brand / gaming chair" />
                <button id="tryBtn" class="px-6 py-3 rounded-xl bg-primary text-black font-bold" data-i18n="try_btn">ابدأ التحليل</button>
            </div>
            <div id="tryResult" class="mt-6 hidden">
                <div class="grid gap-3 md:grid-cols-4">
                    <div class="p-4 rounded-xl bg-white/5 border border-white/10">
                        <div class="text-xs text-gray-400">الطلب المتوقع (7 أيام)</div>
                        <div id="r-demand" class="text-2xl font-extrabold mt-1">—</div>
                    </div>
                    <div class="p-4 rounded-xl bg-white/5 border border-white/10">
                        <div class="text-xs text-gray-400">الموردون المرشحون</div>
                        <div id="r-suppliers" class="text-2xl font-extrabold mt-1">—</div>
                    </div>
                    <div class="p-4 rounded-xl bg-white/5 border border-white/10">
                        <div class="text-xs text-gray-400">نبض الشحن</div>
                        <div id="r-logistics" class="text-2xl font-extrabold mt-1">—</div>
                    </div>
                    <div class="p-4 rounded-xl bg-white/5 border border-white/10">
                        <div class="text-xs text-gray-400">إعلانات السوق الآن</div>
                        <div id="r-ads" class="text-2xl font-extrabold mt-1">—</div>
                    </div>
                </div>
                <div class="mt-4 p-4 rounded-xl bg-white/5 border border-white/10 text-sm text-gray-200">
                    <strong class="text-primary">توصية الذكاء:</strong>
                    <span id="r-ai">—</span>
                </div>
            </div>
        </section>
        <!-- Hero Section (OLD - Hidden) -->
        <section class="mb-16 hero hero-upgraded fade-in-up old-hero-section" id="hero" style="display: none;">
            <div class="grid lg:grid-cols-2 gap-10 items-start">
                <!-- Hero Main Content -->
                <div class="space-y-6">
                    <p class="hero-eyebrow" data-i18n="hero_eyebrow">٣ نماذج ذكاء تعمل لصالحك الآن</p>
                    <h2 class="text-5xl font-bold gradient-text hero-title" data-i18n="hero_title">منصة <span class="hero-highlight">TrendLens</span> تجمع البحث والمساعدات الذكية في واجهة واحدة</h2>
                    <p class="hero-subtitle text-lg text-gray-300" data-i18n="hero_subtitle">
                        اربط متاجرك وحساباتك ومصادر بياناتك، ودع الذكاء التشغيلي في TrendLens يحلل الترندات، الانفجارات، الشحن، وسلوك المنافسين… ثم يعطيك توصيات جاهزة للتنفيذ.
                    </p>

                    <div class="hero-cta-grid">
                        <button id="heroPrimaryCta" class="btn btn-primary hero-cta" data-i18n="hero_primary_cta" onclick="openAuthModal('register')">
                            ابدأ الذكاء التشغيلي
                        </button>
                        <button id="heroSecondaryCta" class="hero-ghost hero-cta" data-i18n="hero_secondary_cta" onclick="window.location.href='/trendlens/dashboard.html'">
                            دخول لوحة التحكم
                        </button>
                    </div>

                    <!-- Model Switcher -->
                    <div class="model-switcher glass-effect rounded-2xl p-5">
                        <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                            <div>
                                <p class="text-xs uppercase tracking-[0.45em] text-gray-400" data-i18n="hero_models_label">اختر نمط التحليل</p>
                                <h4 class="text-xl font-semibold" data-i18n="hero_models_title">لوحة النماذج الذكية</h4>
                            </div>
                            <div id="heroModelStatus" class="model-status-chip">
                                النموذج الأساسي مفعل الآن
                            </div>
                        </div>
                        <div class="model-card-grid">
                            <button type="button" class="model-card active" data-hero-model="core">
                                <span class="model-badge" data-i18n="hero_model_core_badge">النموذج الأساسي</span>
                                <div>
                                    <h5 data-i18n="hero_model_core_title">محرك تقييم المنتجات</h5>
                                    <p data-i18n="hero_model_core_desc">تحليل فوري لأي منتج أو حساب سوشيال مع توصيات الشراء والتسويق.</p>
                                </div>
                                <div class="model-card-footer">
                                    <span data-i18n="hero_model_core_status">نشط دائمًا</span>
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </button>
                            <button type="button" class="model-card" data-hero-model="assistant">
                                <span class="model-badge" data-i18n="hero_model_assist_badge">ذكاء مساعد</span>
                                <div>
                                    <h5 data-i18n="hero_model_assist_title">المساعد الذكي</h5>
                                    <p data-i18n="hero_model_assist_desc">حوّل بياناتك إلى خطط تنفيذية، واستخرج إجابات فورية من سياق عملك.</p>
                                </div>
                                <div class="model-card-footer">
                                    <span data-i18n="hero_model_assist_status">وضع تجريبي</span>
                                    <i class="fas fa-flask"></i>
                                </div>
                            </button>
                            <button type="button" class="model-card" data-hero-model="trend">
                                <span class="model-badge" data-i18n="hero_model_trend_badge">Trend AI</span>
                                <div>
                                    <h5 data-i18n="hero_model_trend_title">مساعد الترندات</h5>
                                    <p data-i18n="hero_model_trend_desc">راقب الانفجارات قبل الجميع واكتشف الدول والفئات ذات الطلب الأعلى.</p>
                                </div>
                                <div class="model-card-footer">
                                    <span data-i18n="hero_model_trend_status">تجريبي محدود</span>
                                    <i class="fas fa-rocket"></i>
                                </div>
                            </button>
                        </div>
                    </div>

                    <!-- Unified Console -->
                    <div class="hero-console glass-effect rounded-2xl p-5 space-y-4">
                        <div class="hero-console-header">
                            <div>
                                <p class="hero-console-eyebrow" id="heroConsoleBadge" data-i18n="hero_console_label">لوحة الأوامر</p>
                                <h4 class="text-2xl font-semibold" id="heroConsoleTitle">محرك تقييم المنتجات</h4>
                            </div>
                            <button class="hero-console-cta" onclick="openAuthModal('register')" data-i18n="hero_console_cta">سجل مجانًا</button>
                        </div>
                        <p class="hero-console-desc" id="heroConsoleDesc">أدخل منتجًا أو حسابًا اجتماعيًا لنعرض لك مؤشرات الطلب، الموردين، والشحن في أقل من 10 ثوانٍ.</p>
                        <div class="hero-search-shell">
                            <input 
                                type="text" 
                                id="heroSearchInput"
                                class="hero-search-input"
                                data-i18n-placeholder="hero_search_placeholder"
                                placeholder="اكتب اسم منتج، فئة، أو حساب إنستغرام / تيك توك لتحليل احتمالية نجاحه…"
                                onkeypress="if(event.key === 'Enter') handleHeroSearch()"
                            >
                            <button 
                                onclick="handleHeroSearch()"
                                class="btn btn-primary"
                                data-i18n="hero_search_btn"
                            >
                                أرِني ماذا يرى الذكاء
                            </button>
                        </div>
                        <div class="hero-console-hint">
                            <span id="heroConsoleHint">النموذج الأساسي يعطيك قراءة سوقية + توصية ذكاء واحدة فورًا.</span>
                            <span class="text-xs text-gray-400" data-i18n="hero_search_example">مثال: كرسي مكتبي، ساعة ذكية، @brand_ksa</span>
                            <span class="text-xs text-gray-500" data-i18n="hero_first_free_analysis">أول تحليل مجاني بعد التسجيل</span>
                        </div>
                    </div>
                </div>
                
                <!-- Hero Preview Column -->
                <div class="space-y-6">
                    <section class="dashboard-snapshot">
                        <h3 class="snapshot-title" data-i18n="snapshot_title">لقطة من غرفة التحكم</h3>
                        <p class="snapshot-subtitle" data-i18n="snapshot_subtitle">معاينة تجريبية – Demo Preview</p>

                        <div class="snapshot-card">
                            <div class="snapshot-card-inner">
                                <div class="snapshot-header">
                                    <span class="snapshot-tag">منتج صاعد – آخر ٧ أيام</span>
                                    <span class="snapshot-label">Trend Example</span>
                                </div>

                                <div class="snapshot-product">
                                    <span class="snapshot-product-name">Office Chair Model X</span>
                                    <span class="snapshot-product-meta">فئة: أثاث مكتبي</span>
                                </div>

                                <div class="snapshot-metrics">
                                    <div class="metric">
                                        <div class="metric-label">نمو آخر ٧ أيام</div>
                                        <div class="metric-value positive">+82%</div>
                                    </div>
                                    <div class="metric">
                                        <div class="metric-label">ثقة النمو</div>
                                        <div class="metric-value">0.85</div>
                                    </div>
                                </div>
                            </div>

                            <div class="snapshot-overlay">
                                <div class="overlay-lock">
                                    <span class="lock-icon">🔒</span>
                                </div>
                                <p class="overlay-text">
                                    <span data-i18n="snapshot_overlay_text">التفاصيل الكاملة متاحة بعد تسجيل الدخول.</span><br>
                                    <span data-i18n="snapshot_overlay_note">هذه مجرد لقطة تمويهية من داخل غرفة التحكم.</span>
                                </p>
                            </div>
                        </div>
                    </section>

                    <div class="hero-usage-panel glass-effect p-5">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-semibold" data-i18n="hero_usage_title">حالة النماذج الآن</h4>
                            <span class="text-xs text-gray-400" data-i18n="hero_usage_sync">آخر مزامنة قبل ٢ دقيقة</span>
                        </div>
                        <ul>
                            <li class="hero-usage-row">
                                <div>
                                    <h5 data-i18n="hero_model_core_title">محرك تقييم المنتجات</h5>
                                    <p data-i18n="hero_usage_core_desc">يشغّل البحث الفوري + يحجز ذكاء أساسي يوميًا.</p>
                                </div>
                                <span class="usage-status active" data-i18n="hero_usage_status_active">نشط</span>
                            </li>
                            <li class="hero-usage-row">
                                <div>
                                    <h5 data-i18n="hero_model_assist_title">المساعد الذكي</h5>
                                    <p data-i18n="hero_usage_assist_desc">مفعّل لعدد محدود من المستخدمين كتجربة مغلقة.</p>
                                </div>
                                <span class="usage-status experimental" data-i18n="hero_usage_status_beta">تجريبي</span>
                            </li>
                            <li class="hero-usage-row">
                                <div>
                                    <h5 data-i18n="hero_model_trend_title">مساعد الترندات</h5>
                                    <p data-i18n="hero_usage_trend_desc">يراقب ترندات الدول ويعطي تنبيهات عاجلة للانفجارات.</p>
                                </div>
                                <span class="usage-status experimental" data-i18n="hero_usage_status_labs">Trend Labs</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Live Teaser Bar (OLD - Hidden) -->
        <div style="display: none;">
        <div class="live-teaser-bar mb-12">
            <div class="live-teaser-bar-header">
                <div class="live-dot"></div>
                <span class="live-label" data-i18n="happening_now">يحدث الآن</span>
            </div>
            <div class="live-teaser-bar-pills">
                <div class="live-pill" onclick="openAuthModal('register')">
                    <i class="fas fa-chart-line mr-2"></i>
                    <span data-i18n="live_pill_1">تم تحليل 3,241 منتج خلال آخر ٢٤ ساعة</span>
                </div>
                <div class="live-pill" onclick="openAuthModal('register')">
                    <i class="fas fa-ship mr-2"></i>
                    <span data-i18n="live_pill_2">تتم متابعة 19 مسار شحن من آسيا إلى الخليج الآن</span>
                </div>
                <div class="live-pill" onclick="openAuthModal('register')">
                    <i class="fas fa-brain mr-2"></i>
                    <span data-i18n="live_pill_3">87 استشارة ذكاء صناعي أُعطيت للتجار اليوم</span>
                </div>
                <div class="live-pill" onclick="openAuthModal('register')">
                    <i class="fas fa-search mr-2"></i>
                    <span data-i18n="live_pill_4">آخر انفجار منتجات تم اكتشافه منذ 3 ساعات فقط</span>
                </div>
            </div>
        </div>
        </div>

        <!-- Filters Bar (أعلى الترند المحلي/العالمي) -->
        <section class="tl-section tl-section--filters main-container-new mb-6">
            <div class="tl-filters-bar">
                <div class="tl-filter">
                    <label for="tlMarketFilter" class="tl-filter__label">السوق</label>
                    <select id="tlMarketFilter" class="tl-select">
                        <option value="">كل الأسواق</option>
                        <!-- سيتم ملء القائمة ديناميكياً من API /api/markets/list -->
                        <option value="" disabled>جاري تحميل الأسواق...</option>
                    </select>
                </div>

                <div class="tl-filter">
                    <label for="tlPeriodFilter" class="tl-filter__label">الفترة</label>
                    <select id="tlPeriodFilter" class="tl-select">
                        <option value="last_7d">آخر 7 أيام</option>
                        <option value="last_14d">آخر 14 يوم</option>
                        <option value="last_30d">آخر 30 يوم</option>
                    </select>
                </div>
            </div>
        </section>

        <!-- Homepage Trends Scope Switch (Local / Global) - تحت الفلاتر -->
        <section id="homepage-trends-section" class="homepage-trends-slim glass-effect rounded-2xl main-container-new mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-2">
                <div class="scope-label text-xs md:text-sm text-gray-300">
                    <span id="homepageTrendsScopeLabel" data-i18n="trends.scope.global_title">الترند العالمي</span>
                </div>
                <div class="scope-buttons inline-flex rounded-full bg-black/40 border border-white/10 p-1 text-xs md:text-sm">
                    <button
                        id="homepageScopeLocalBtn"
                        type="button"
                        class="px-3 py-1 rounded-full text-gray-300 hover:text-white focus:outline-none"
                        data-i18n="trends.scope.local_tab">
                        الترند المحلي
                    </button>
                    <button
                        id="homepageScopeGlobalBtn"
                        type="button"
                        class="px-3 py-1 rounded-full text-gray-300 hover:text-white focus:outline-none"
                        data-i18n="trends.scope.global_tab">
                        الترند العالمي
                    </button>
                </div>
            </div>
            <div id="homepageTrendsList" class="live-teaser-bar-pills" style="overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;">
                <div class="text-center py-4 text-gray-400">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span data-i18n="generic.loading">جاري التحميل...</span>
                </div>
            </div>
        </section>

        <!-- Live Market Feed Section - Compact & Beautiful -->
        <section id="live-market-feed-section" class="main-container-new mb-6 mt-6">
            <div class="glass-effect rounded-xl p-3 md:p-4 bg-gradient-to-br from-black/40 via-black/30 to-black/40 border border-primary/20 shadow-lg hover:shadow-primary/20 transition-all duration-300">
                <!-- Compact Header -->
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2 flex-1 min-w-0">
                        <h3 class="text-sm md:text-base font-bold bg-gradient-to-r from-primary via-yellow-400 to-primary bg-clip-text text-transparent" data-i18n="market_feed.title" id="market-feed-title">
                            مبيعات حقيقية مباشرة من:
                        </h3>
                        <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-gradient-to-r from-red-500/30 to-pink-500/30 text-red-300 border border-red-400/50 shadow-[0_0_8px_rgba(239,68,68,0.4)] animate-pulse flex-shrink-0" id="live-indicator">
                            <span class="w-1 h-1 rounded-full bg-red-400 animate-pulse shadow-[0_0_4px_rgba(239,68,68,0.8)]"></span>
                            <span>LIVE</span>
                        </span>
                    </div>
                    <div class="flex items-center gap-1.5 flex-shrink-0">
                        <span class="text-[9px] text-gray-400" id="market-feed-last-update">--:--</span>
                        <button onclick="refreshMarketFeed()" class="p-1 rounded-md border border-white/10 hover:border-primary/60 hover:bg-primary/10 transition-all duration-200 hover:scale-110" title="تحديث البيانات">
                            <i class="fas fa-sync-alt text-[10px] text-gray-400 hover:text-primary transition-colors"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Beautiful Platform Pills with Icons -->
                <div class="flex flex-wrap items-center gap-1.5 mb-3">
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-blue-500/15 to-blue-600/15 text-blue-300 border border-blue-400/30 hover:border-blue-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fab fa-temu text-[10px]"></i>
                        <span>Temu</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-orange-500/15 to-orange-600/15 text-orange-300 border border-orange-400/30 hover:border-orange-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fab fa-amazon text-[10px]"></i>
                        <span>Amazon</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-cyan-500/15 to-cyan-600/15 text-cyan-300 border border-cyan-400/30 hover:border-cyan-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fas fa-store text-[10px]"></i>
                        <span>Walmart</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-pink-500/15 to-pink-600/15 text-pink-300 border border-pink-400/30 hover:border-pink-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fas fa-shopping-bag text-[10px]"></i>
                        <span>Shein</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-blue-400/15 to-blue-500/15 text-blue-300 border border-blue-400/30 hover:border-blue-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fab fa-ebay text-[10px]"></i>
                        <span>eBay</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-black/20 to-gray-700/20 text-gray-300 border border-gray-500/30 hover:border-gray-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fab fa-tiktok text-[10px]"></i>
                        <span>TikTok</span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-purple-500/15 to-purple-600/15 text-purple-300 border border-purple-400/30 hover:border-purple-400/60 hover:scale-105 transition-all duration-200">
                        <i class="fas fa-globe text-[10px]"></i>
                        <span data-i18n="market_feed.external_stores">متاجر خارجية</span>
                    </span>
                </div>
                
                <!-- Market Feed Vertical Scroll Container - Compact -->
                <div id="market-feed-container" class="max-h-[400px] md:max-h-[450px] overflow-y-auto scrollbar-thin scrollbar-thumb-primary/40 scrollbar-track-transparent space-y-2 pr-1" style="scrollbar-width: thin;">
                    <div class="text-center py-6 text-gray-400">
                        <i class="fas fa-spinner fa-spin text-lg mb-2 text-primary"></i>
                        <div class="text-xs" data-i18n="generic.loading">جاري التحميل...</div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Research Hub Section -->
        <section id="research-hub" class="mt-8 sm:mt-12 lg:mt-16 main-container-new">
            <div class="glass-effect rounded-2xl p-4 sm:p-6 lg:p-8 border border-white/10 shadow-xl bg-black/30">
                
                <!-- Header -->
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-500/10 text-yellow-400 border border-yellow-500/40">
                                <i class="fas fa-flask text-[11px]"></i>
                                <span>Research Hub</span>
                            </span>
                        </div>
                        <h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold gradient-text mb-2">
                            غرفة الأبحاث الموحدة في ترند لينس
                        </h2>
                        <p class="text-xs sm:text-sm lg:text-base text-gray-400 max-w-2xl">
                            مكان واحد يجمّع لك إشارات أمازون، Pinterest، يوتيوب، الشحن، والذكاء الاصطناعي، عشان تختار منتج واحد بقرار واثق بدل التخمين.
                        </p>
                    </div>
                    <!-- Snapshot (Real Data Ready) -->
                    <div class="w-full lg:w-auto lg:flex-shrink-0">
                        <div class="glass-effect snapshot-card rounded-xl px-3 py-2.5 sm:px-4 sm:py-3 lg:px-5 lg:py-4 border border-white/10 min-w-[200px] sm:min-w-[220px]">
                            <div class="flex items-center justify-between gap-2 sm:gap-3 mb-1.5">
                                <div class="flex items-center gap-1.5 sm:gap-2">
                                    <div class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-yellow-400/10 flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-bolt text-yellow-400 text-xs sm:text-sm"></i>
                                    </div>
                                    <span class="text-[10px] sm:text-xs font-semibold text-gray-300">
                                        ملخص حي لآخر ٢٤ ساعة
                                    </span>
                                </div>
                                <span id="researchHubSnapshotStatus" class="text-[10px] sm:text-[11px] text-emerald-400 whitespace-nowrap">
                                    جاري التحميل…
                                </span>
                            </div>
                            <div class="grid grid-cols-3 gap-2 sm:gap-3 text-xs">
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-[10px] sm:text-[11px] text-gray-400">أدوات فعّالة</span>
                                    <span id="snapshotToolsCount" class="text-sm sm:text-base font-bold text-white">–</span>
                                </div>
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-[10px] sm:text-[11px] text-gray-400">مصادر بيانات</span>
                                    <span id="snapshotSourcesCount" class="text-sm sm:text-base font-bold text-white">–</span>
                                </div>
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-[10px] sm:text-[11px] text-gray-400">إشارات مسجّلة</span>
                                    <span id="snapshotSignalsCount" class="text-sm sm:text-base font-bold text-white">–</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabs / Filters -->
                <div class="flex flex-wrap items-center gap-2 mb-5 overflow-x-auto pb-2 -mx-2 px-2 sm:mx-0 sm:px-0 sm:pb-0">
                    <button
                        class="rh-tab-btn px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold border border-yellow-500/70 bg-yellow-500/15 text-yellow-300 whitespace-nowrap"
                        data-cluster="all"
                    >
                        كل الأدوات
                    </button>
                    <button
                        class="rh-tab-btn px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold border border-white/10 text-gray-300 hover:border-yellow-500/60 hover:text-yellow-200 transition whitespace-nowrap"
                        data-cluster="discovery"
                    >
                        اكتشاف الترند
                    </button>
                    <button
                        class="rh-tab-btn px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold border border-white/10 text-gray-300 hover:border-yellow-500/60 hover:text-yellow-200 transition whitespace-nowrap"
                        data-cluster="market"
                    >
                        السوق والمنتجات
                    </button>
                    <button
                        class="rh-tab-btn px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold border border-white/10 text-gray-300 hover:border-yellow-500/60 hover:text-yellow-200 transition whitespace-nowrap"
                        data-cluster="ai"
                    >
                        الذكاء والقرارات
                    </button>
                </div>

                <!-- Tools Grid - 3 أعمدة على الديسكتوب -->
                <div id="researchHubToolsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-4">
                    <!-- تمتلئ ديناميكياً من السكربت -->
                </div>
            </div>
        </section>

        <!-- Video Signals (Top 5 per platform) - Improved with Charts -->
        <section id="video-signals" class="main-container-new mt-8 sm:mt-10 lg:mt-12">
            <div class="dashboard-card">
                <div class="dashboard-card-header">
                <div>
                        <h2 class="dashboard-card-title" data-i18n="video_signals_title">إشارات الفيديو (TikTok / YouTube)</h2>
                        <p class="text-xs mt-1" style="color: var(--text-muted);">
                            أعلى 5 فيديوات لكل منصة – ثم المزيد في الداشبورد التفصيلي.
                    </p>
                </div>
                <!-- Tabs -->
                <div class="flex items-center gap-2 text-xs">
                    <button
                        type="button"
                            class="vs-tab px-3 py-1 rounded-full border border-white/20 bg-white/10 text-white font-medium hover:bg-primary hover:text-black transition-colors"
                        data-source="tiktok"
                    >
                        TikTok
                    </button>
                        <button
                            type="button"
                            class="vs-tab px-3 py-1 rounded-full border border-white/20 bg-transparent text-gray-400 font-medium hover:bg-white/10 hover:text-white transition-colors"
                            data-source="youtube"
                        >
                            YouTube
                        </button>
                </div>
            </div>

                <!-- Video Cards Grid (Mobile Friendly) -->
                <div id="videoSignalsBody" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
                    <!-- Will be populated by JS -->
                    <div class="text-center py-8" style="color: var(--text-muted);">
                        <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                        <div id="videoSignalsStatus">جاري تحميل بيانات TikTok…</div>
                </div>
            </div>

            <!-- Footer -->
                <div class="flex items-center justify-between mt-4 text-xs">
                    <div id="videoSignalsStatusText" class="text-gray-400"></div>
                <button
                    type="button"
                    id="videoSignalsMoreBtn"
                        onclick="window.location.href='/trendlens/dashboard.html'"
                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full border border-primary/60 text-primary text-xs hover:bg-primary/10 transition-colors"
                >
                        <span data-i18n="more_in_dashboard">المزيد في الداشبورد</span>
                    <i class="fas fa-arrow-left text-[10px]"></i>
                </button>
                </div>
            </div>
        </section>

        <!-- Mini chart CSS (لضمان ظهور الأعمدة) -->
        <style>
            #video-signals .vs-mini-chart {
                display: flex;
                align-items: flex-end;
                gap: 2px;
                height: 32px;
            }
            #video-signals .vs-mini-chart .mini-line-chart-bar {
                flex: 1;
                border-radius: 999px 999px 0 0;
                opacity: 0.9;
                transition: height 0.35s ease-out;
            }
        </style>
        
        <!-- Feature Cards - Locked (OLD - Hidden) -->
        <div style="display: none;">
        <div class="mb-16 fade-in-up">
            <h2 class="text-3xl font-bold text-center mb-8 text-white" data-i18n="features_title">الميزات المتاحة</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Feature 1: لوحة الترند -->
                <article class="feature-card-locked glass-effect relative" onclick="openFeatureExpand('trends')" data-locked="true">
                    <div class="lock-icon">🔒</div>
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="feature-title" data-i18n="feature_trends_title">لوحة الترند</div>
                    <div class="feature-title-en text-xs text-gray-400 mb-2" data-i18n="feature_trends_title_en">Operational Trends</div>
                    <div class="feature-desc text-sm text-gray-300 mb-4" data-i18n="feature_trends_desc">تحليل الترندات في الوقت الفعلي</div>
                    <div class="feature-footer flex items-center justify-between gap-2 text-xs">
                        <span class="chip-locked">
                            <span class="lock">🔒</span>
                            <span data-i18n="feature_locked_subscription">مقفل – افتح مع الاشتراك</span>
                        </span>
                        <span class="feature-cta text-gray-400">
                            <span data-i18n="feature_try_now">جرّب الآن</span> →
                        </span>
                    </div>
                    <!-- Overlay on Hover -->
                    <div class="feature-card-overlay">
                        <p class="feature-card-overlay-text" data-i18n="feature_overlay_text">شاهد مثال حي لتحليل هذه الأداة</p>
                        <button class="btn btn-primary" onclick="event.stopPropagation(); openAuthModal('register');">
                            <span data-i18n="feature_try_now">جرّب الآن</span>
                        </button>
                    </div>
                </article>
                
                <!-- Feature 2: انفجارات المنتجات -->
                <article class="feature-card-locked glass-effect relative" onclick="openFeatureExpand('explosions')" data-locked="true">
                    <div class="lock-icon">🔒</div>
                    <div class="feature-icon">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <div class="feature-title" data-i18n="feature_explosions_title">انفجارات المنتجات</div>
                    <div class="feature-title-en text-xs text-gray-400 mb-2" data-i18n="feature_explosions_title_en">Product Explosions</div>
                    <div class="feature-desc text-sm text-gray-300 mb-4" data-i18n="feature_explosions_desc">
                        اكتشاف مبكر للمنتجات التي تقفز فجأة في الطلب قبل أن تزدحم فيها المنافسة – مع نسبة نمو وثقة لكل منتج.
                    </div>
                    <div class="feature-footer flex items-center justify-between gap-2 text-xs">
                        <span class="chip-locked">
                            <span class="lock">🔒</span>
                            <span data-i18n="feature_preview_new_user">معاينة جزئية للمستخدم الجديد</span>
                        </span>
                        <span class="feature-cta text-gray-400">
                            <span data-i18n="feature_try_explosion">جرّب لقطة انفجار واحدة</span> →
                        </span>
                    </div>
                    <!-- Overlay on Hover -->
                    <div class="feature-card-overlay">
                        <p class="feature-card-overlay-text" data-i18n="feature_overlay_text">شاهد مثال حي لتحليل هذه الأداة</p>
                        <button class="btn btn-primary" onclick="event.stopPropagation(); openAuthModal('register');">
                            <span data-i18n="feature_try_now">جرّب الآن</span>
                        </button>
                    </div>
                </article>
                
                <!-- Feature 3: ذكاء صناعي -->
                <article class="feature-card-locked glass-effect relative" onclick="openFeatureExpand('ai')" data-locked="true">
                    <div class="lock-icon">🔒</div>
                    <div class="feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="feature-title" data-i18n="feature_ai_title">مساعد الذكاء Trend AI</div>
                    <div class="feature-title-en text-xs text-gray-400 mb-2" data-i18n="feature_ai_title_en">Trend AI Assistant</div>
                    <div class="feature-desc text-sm text-gray-300 mb-4" data-i18n="feature_ai_desc">
                        اسأل الذكاء عن أفضل منتج، أفضل دولة، أو أفضل سيناريو إعلان… ويحصل على توصية مبنية على بيانات المنصة الفعلية.
                    </div>
                    <div class="feature-footer flex items-center justify-between gap-2 text-xs">
                        <span class="chip-locked">
                            <span class="lock">🔒</span>
                            <span data-i18n="feature_requires_ai_credit">يتطلب رصيد ذكاء صناعي</span>
                        </span>
                        <span class="feature-cta text-gray-400">
                            <span data-i18n="feature_see_vague_answer">شاهد إجابة تجريبية مبهمة</span> →
                        </span>
                    </div>
                    <!-- Overlay on Hover -->
                    <div class="feature-card-overlay">
                        <p class="feature-card-overlay-text" data-i18n="feature_overlay_text">شاهد مثال حي لتحليل هذه الأداة</p>
                        <button class="btn btn-primary" onclick="event.stopPropagation(); openAuthModal('register');">
                            <span data-i18n="feature_try_now">جرّب الآن</span>
                        </button>
                    </div>
                </article>
                
                <!-- Feature 4: فحص حسابات السوشيال -->
                <article class="feature-card-locked glass-effect relative" onclick="openFeatureExpand('social')" data-locked="true">
                    <div class="lock-icon">🔒</div>
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <div class="feature-title" data-i18n="feature_social_title">فحص حسابات السوشيال</div>
                    <div class="feature-title-en text-xs text-gray-400 mb-2" data-i18n="feature_social_title_en">Social Scan</div>
                    <div class="feature-desc text-sm text-gray-300 mb-4" data-i18n="feature_social_desc">
                        تحليل حسابات إنستغرام / تيك توك / منصات أخرى لمعرفة سلوك الجمهور، أفضل المحتوى، وأوقات النشر المثالية.
                    </div>
                    <div class="feature-footer flex items-center justify-between gap-2 text-xs">
                        <span class="chip-locked">
                            <span class="lock">🔒</span>
                            <span data-i18n="feature_continuous_monitoring">مراقبة مستمرة مع الخطة المدفوعة</span>
                        </span>
                        <span class="feature-cta text-gray-400">
                            <span data-i18n="feature_try_one_scan">جرّب فحص حساب واحد بعد التسجيل</span> →
                        </span>
                    </div>
                    <!-- Overlay on Hover -->
                    <div class="feature-card-overlay">
                        <p class="feature-card-overlay-text" data-i18n="feature_overlay_text">شاهد مثال حي لتحليل هذه الأداة</p>
                        <button class="btn btn-primary" onclick="event.stopPropagation(); openAuthModal('register');">
                            <span data-i18n="feature_try_now">جرّب الآن</span>
                        </button>
                    </div>
                </article>
            </div>
        </div>
        
        <!-- How It Works Section -->
        <div class="glass-effect rounded-3xl p-8 mb-16 fade-in-up">
            <h2 class="text-3xl font-bold text-center mb-12 text-primary" data-i18n="how_it_works_title">كيف تعمل المنصة؟</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Step 1 -->
                <div class="how-it-works-step text-center">
                    <div class="step-number">
                        <i class="fas fa-link text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white" data-i18n="step1_title">اربط مصادر بياناتك</h3>
                    <p class="text-gray-300 mb-2 text-sm feature-title-en" data-i18n="step1_title_en">Connect Your Data Sources</p>
                    <p class="text-sm text-gray-400" data-i18n="step1_desc">متاجر، حسابات سوشيال، مورّدين، شحن</p>
                </div>
                
                <!-- Step 2 -->
                <div class="how-it-works-step text-center">
                    <div class="step-number">
                        <i class="fas fa-brain text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white" data-i18n="step2_title">دع TrendLens يحلل</h3>
                    <p class="text-gray-300 mb-2 text-sm feature-title-en" data-i18n="step2_title_en">Let TrendLens Analyze</p>
                    <p class="text-sm text-gray-400" data-i18n="step2_desc">ترندات، انفجارات، منافسين</p>
                </div>
                
                <!-- Step 3 -->
                <div class="how-it-works-step text-center">
                    <div class="step-number">
                        <i class="fas fa-rocket text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white" data-i18n="step3_title">نفّذ قرارات أذكى</h3>
                    <p class="text-gray-300 mb-2 text-sm feature-title-en" data-i18n="step3_title_en">Make Smarter Decisions</p>
                    <p class="text-sm text-gray-400" data-i18n="step3_desc">اختيار المنتج، حملات الإعلانات، المورد، خط الشحن</p>
                </div>
            </div>
        </div>
        
        <!-- Who Is This For Section - Personas -->
        <div class="glass-effect rounded-3xl p-8 mb-16 fade-in-up">
            <h2 class="text-3xl font-bold text-center mb-12 text-primary" data-i18n="who_is_this_for_title">لمن هذه المنصة؟</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Persona 1 -->
                <div class="glass-effect rounded-2xl p-6 text-center hover:transform hover:scale-105 transition-transform">
                    <div class="text-4xl mb-4">
                        <i class="fas fa-store text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white" data-i18n="persona1_title">تاجر Amazon / eBay / Etsy</h3>
                    <p class="text-sm text-gray-400 mb-2" data-i18n="persona1_title_en">Amazon / eBay / Etsy Seller</p>
                    <p class="text-sm text-gray-300" data-i18n="persona1_desc">اكتشف المنتجات الرابحة قبل المنافسين وزد مبيعاتك بنسبة 300%</p>
                </div>
                
                <!-- Persona 2 -->
                <div class="glass-effect rounded-2xl p-6 text-center hover:transform hover:scale-105 transition-transform">
                    <div class="text-4xl mb-4">
                        <i class="fas fa-shopping-cart text-success"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white" data-i18n="persona2_title">تاجر متجر مستقل</h3>
                    <p class="text-sm text-gray-400 mb-2 feature-title-en" data-i18n="persona2_title_en">Independent Store Owner</p>
                    <p class="text-sm text-gray-300" data-i18n="persona2_desc">Shopify / WooCommerce – اربط متجرك بذكاء TrendLens وزد أرباحك</p>
                </div>
                
                <!-- Persona 3 -->
                <div class="glass-effect rounded-2xl p-6 text-center hover:transform hover:scale-105 transition-transform">
                    <div class="text-4xl mb-4">
                        <i class="fas fa-bullhorn text-info"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white" data-i18n="persona3_title">وكالة تسويق أو مسوّق سوشيال</h3>
                    <p class="text-sm text-gray-400 mb-2 feature-title-en" data-i18n="persona3_title_en">Marketing Agency / Social Media Marketer</p>
                    <p class="text-sm text-gray-300" data-i18n="persona3_desc">قدم لزبائنك تحليلات احترافية وزيّن قيمة خدماتك</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Full Width Tabs Bar - Unified Dashboard (Outside Main) -->
    <div class="full-width-tabs-bar glass-effect sticky top-0 z-50 mb-6" id="mainTabsBar" style="display: block !important; visibility: visible !important; opacity: 1 !important;">
        <div class="container mx-auto px-4">
            <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
                <button class="tab-btn active" data-tab="overview" onclick="switchMainTab('overview')">
                    <i class="fas fa-chart-line"></i>
                    <span data-i18n="tab_overview">نظرة عامة</span>
                </button>
                <button class="tab-btn" data-tab="exploding" onclick="switchMainTab('exploding')">
                    <i class="fas fa-rocket"></i>
                    <span data-i18n="tab_exploding">المنتجات المنفجرة</span>
                </button>
                <button class="tab-btn" data-tab="shipping" onclick="switchMainTab('shipping')">
                    <i class="fas fa-ship"></i>
                    <span data-i18n="tab_shipping">نبض الشحن</span>
                </button>
                <button class="tab-btn" data-tab="markets" onclick="switchMainTab('markets')">
                    <i class="fas fa-store"></i>
                    <span data-i18n="tab_markets">شريط المتاجر</span>
                </button>
                <button class="tab-btn" data-tab="ebooks" onclick="switchMainTab('ebooks')">
                    <i class="fas fa-book"></i>
                    <span data-i18n="tab_ebooks">الكتب الإلكترونية</span>
                </button>
                <button class="tab-btn" data-tab="analytics" onclick="switchMainTab('analytics')">
                    <i class="fas fa-chart-bar"></i>
                    <span data-i18n="tab_analytics">التحليلات</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Main Content Tabs -->
    <main class="container mx-auto px-4 py-6">
        <!-- Overview Tab (Default) -->
        <div id="mainTab-overview" class="main-tab-content active">
                <!-- Charts Section at Top -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                    <!-- Revenue Chart -->
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <h3 class="text-lg font-bold mb-4 text-primary" data-i18n="revenue_analytics">تحليلات الإيرادات</h3>
                        <canvas id="mainRevenueChart" style="max-height: 250px;"></canvas>
                    </div>
                    <!-- Categories Chart -->
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <h3 class="text-lg font-bold mb-4 text-primary" data-i18n="top_categories">أعلى الفئات</h3>
                        <canvas id="mainCategoriesChart" style="max-height: 250px;"></canvas>
                    </div>
                    <!-- Target Gauge -->
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <h3 class="text-lg font-bold mb-4 text-primary" data-i18n="monthly_target">الهدف الشهري</h3>
                        <div class="relative flex items-center justify-center" style="min-height: 200px;">
                            <canvas id="mainTargetGauge" style="width: 140px !important; height: 140px !important;"></canvas>
                            <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                                <div class="text-3xl font-bold mb-1 text-primary" id="mainTargetPercentage">85%</div>
                                <div class="text-xs text-gray-400"><span data-i18n="from_last_month">من الشهر الماضي</span> <span class="text-emerald-400">+8.02%</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stats Cards -->
                <div class="grid md:grid-cols-3 gap-6 mb-6">
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_sales">إجمالي المبيعات</span>
                            <i class="fas fa-dollar-sign text-primary"></i>
                        </div>
                        <div class="text-3xl font-bold text-primary mb-2" id="mainTotalSales">$983,410</div>
                        <div class="text-sm text-emerald-400">
                            <i class="fas fa-arrow-up"></i> +3.34% <span data-i18n="vs_last_week">مقارنة بالأسبوع الماضي</span>
                        </div>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_orders">إجمالي الطلبات</span>
                            <i class="fas fa-shopping-cart text-success"></i>
                        </div>
                        <div class="text-3xl font-bold text-success mb-2" id="mainTotalOrders">58,375</div>
                        <div class="text-sm text-red-400">
                            <i class="fas fa-arrow-down"></i> -2.89% <span data-i18n="vs_last_week">مقارنة بالأسبوع الماضي</span>
                        </div>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_visitors">إجمالي الزوار</span>
                            <i class="fas fa-eye text-info"></i>
                        </div>
                        <div class="text-3xl font-bold text-info mb-2" id="mainTotalVisitors">237,782</div>
                        <div class="text-sm text-gray-400">آخر تحديث: الآن</div>
                    </div>
                </div>

                <!-- Operational Ticker -->
                <div class="glass-effect rounded-2xl p-4 mb-6" id="opTicker">
                    <div class="flex items-center gap-3 mb-3">
                        <i class="fas fa-broadcast-tower text-primary text-xl"></i>
                        <h3 class="text-lg font-bold text-primary" data-i18n="ticker_title">الترند التشغيلي</h3>
                    </div>
                    <div class="tl-ticker-wrap">
                        <div class="tl-ticker-track" id="tickerTrack" style="--speed: 40s"></div>
                    </div>
                </div>

                <!-- Shipping Signals Strip -->
                <div class="signals-strip mb-6">
                    <div class="signals-strip-content">
                        <div class="signal-item">
                            <i class="fas fa-ship"></i>
                            <span data-i18n="signal_jeddah">ميناء جدة — الازدحام: منخفض — التأخير: +٤ ساعات</span>
                        </div>
                        <div class="signal-item">
                            <i class="fas fa-ship"></i>
                            <span data-i18n="signal_shanghai">ميناء شنغهاي — الازدحام: عالٍ — التأخير: +٢١ ساعة</span>
                        </div>
                        <div class="signal-item">
                            <i class="fas fa-satellite"></i>
                            <span data-i18n="signal_global">مؤشر الشحن العالمي: مستقر</span>
                        </div>
                    </div>
                </div>

                <!-- Grid "وش قاعد يصير الآن؟" -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            <!-- Product Explosions Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="products">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-success bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-rocket text-success text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_products_title">انفجارات المنتجات</h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="text-primary hover:text-yellow-400 text-sm" onclick="loadProductExplosions()" title="تحديث البيانات">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <!-- فورم البحث -->
                <div class="mb-4 pb-4 border-b border-white border-opacity-20">
                    <form id="productsSearchForm" class="space-y-2" onsubmit="searchProducts(event)">
                        <input type="text" id="productQuery" data-i18n-placeholder="product_keyword_placeholder" placeholder="Keyword or niche (e.g., beauty products)" class="w-full bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                        <div class="grid grid-cols-2 gap-2">
                            <input type="text" id="productCategory" data-i18n-placeholder="product_category_placeholder" placeholder="Category (optional)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                            <input type="text" id="productCountry" data-i18n-placeholder="product_country_placeholder" placeholder="Country code (optional)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                        </div>
                        <button type="submit" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm">
                            <i class="fas fa-search me-2"></i><span data-i18n="search">بحث</span>
                        </button>
                    </form>
                </div>
                
                <!-- Block 1: قائمة المنتجات المنفجرة -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-rocket text-primary"></i>
                        <span data-i18n="exploding_products">المنتجات المنفجرة</span>
                    </h4>
                    <div id="explodingList" class="space-y-2 max-h-64 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 2: المنصات/الدول الأكثر سخونة -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-globe text-primary"></i>
                        <span data-i18n="hottest_platforms">المنصات/الدول الأكثر سخونة</span>
                    </h4>
                    <div id="explodingPlatforms" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 3: التوقع الزمني -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-calendar-alt text-primary"></i>
                        <span data-i18n="forecast">توقع مدة الانفجار</span>
                    </h4>
                    <div id="explodingForecast" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <div id="explodingMeta" class="mt-3 text-xs text-gray-400 border-t border-white border-opacity-10 pt-3">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-info-circle"></i>
                        <span data-i18n="data_status_placeholder">سيتم عرض حالة البيانات بعد التحميل...</span>
                    </div>
                </div>
                
                <button class="w-full mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors smart-assistant-btn" data-card="products" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                <!-- Smart Assistant Panel -->
                <div class="smart-assistant-panel mt-4 hidden" data-card="products">
                    <div class="glass-effect rounded-xl p-4 border border-primary border-opacity-30">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-brain text-blue-400"></i>
                                <span class="text-sm font-semibold text-gray-300" data-i18n="smart_assistant_products">مساعد الذكاء الصناعي — تحليل المنتجات</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="smart-assistant-refresh text-blue-400 hover:text-blue-300 text-sm" data-card="products" title="تحديث التحليل">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="smart-assistant-toggle text-blue-400 hover:text-blue-300 text-sm" data-card="products">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="smart-assistant-content text-sm text-gray-300 leading-relaxed">
                            <!-- <span data-i18n="analysis_placeholder">سيتم ملؤها بالتحليل</span> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Campaign Lifeguard Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="lifeguard">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-life-ring text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_lifeguard_title">منقذ الحملات</h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="/trendlens/dashboard.html#lifeguard" class="text-primary hover:text-yellow-400 text-sm" title="افتح لوحة التحكم الكاملة">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <div class="bg-primary text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="new">جديد</div>
                    </div>
                </div>
                
                <!-- Campaign Health Score Preview -->
                <div class="mb-4 pb-4 border-b border-white border-opacity-20">
                    <div class="flex items-center gap-4 mb-3">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-primary mb-1">78</div>
                            <div class="text-xs text-gray-400">/ 100</div>
                        </div>
                        <div class="flex-1">
                            <div class="w-full bg-gray-700 rounded-full h-3 mb-2">
                                <div class="bg-yellow-500 h-3 rounded-full transition-all duration-500" style="width: 78%"></div>
                            </div>
                            <p class="text-xs text-gray-300" data-i18n="lifeguard_preview_desc">صحة الحملة: تحتاج انتباه - تكلفة النقرة ترتفع</p>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Stats -->
                <div class="grid grid-cols-2 gap-3 mb-4">
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1" data-i18n="lifeguard_metric_roas">ROAS</div>
                        <div class="text-lg font-bold text-primary">2.1</div>
                    </div>
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1" data-i18n="lifeguard_metric_cpc">CPC</div>
                        <div class="text-lg font-bold text-red-400">+18%</div>
                    </div>
                </div>
                
                <!-- AI Insight Preview -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2">
                        <i class="fas fa-brain text-primary"></i>
                        <span data-i18n="lifeguard_ai_preview_title">خلاصة الذكاء</span>
                    </h4>
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 text-sm text-gray-300 line-clamp-2" data-i18n="lifeguard_ai_preview_text">
                        CPC يرتفع 23% خلال آخر 7 أيام. التوصية: انقل 20% من الميزانية لأفضل كرييتف.
                    </div>
                </div>
                
                <a href="/trendlens/dashboard.html#lifeguard" class="w-full block mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-center" data-i18n="btn_open_lifeguard">
                    افتح منقذ الحملات الكامل
                </a>
            </div>

            <!-- AI Insights Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="ai-insights">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-brain text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_ai_insights_title">رؤى الذكاء الاصطناعي</h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="text-primary hover:text-yellow-400 text-sm" onclick="loadAIInsights()" title="تحديث البيانات">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-primary text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <!-- فورم اختيار الرمز والنوع والعمق -->
                <div class="mb-4 pb-4 border-b border-white border-opacity-20">
                    <form id="aiInsightsForm" class="space-y-2" onsubmit="searchAIInsights(event)">
                        <input type="text" id="insightSymbol" data-i18n-placeholder="insight_symbol_placeholder" placeholder="الكلمة المفتاحية أو الرمز (مثل: BTCUSDT أو Ceramic Tiles)" class="w-full bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                        <div class="grid grid-cols-2 gap-2">
                            <select id="insightScope" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white">
                                <option value="market" data-i18n="option_market">سوق</option>
                                <option value="product" data-i18n="option_product">منتج</option>
                                <option value="social" data-i18n="option_social">سوشيال</option>
                            </select>
                            <select id="insightDepth" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white">
                                <option value="short" data-i18n="option_short">سريع</option>
                                <option value="medium" data-i18n="option_medium">متوسط</option>
                                <option value="deep" data-i18n="option_deep">عميق</option>
                            </select>
                        </div>
                        <button type="submit" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm">
                            <i class="fas fa-brain me-2"></i><span data-i18n="btn_get_insight">احصل على الرؤية</span>
                        </button>
                    </form>
                </div>
                
                <!-- Block 1: النص الذكي -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-brain text-primary"></i>
                        <span data-i18n="ai_insight_text">الرؤية الذكية</span>
                    </h4>
                    <div id="aiInsightText" class="bg-black bg-opacity-30 rounded-lg p-4 min-h-48 max-h-96 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 2: المؤشرات -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-chart-bar text-primary"></i>
                        <span data-i18n="ai_insights_metrics">المؤشرات</span>
                    </h4>
                    <div id="aiInsightsMetrics" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 3: التنبيه القانوني -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-primary"></i>
                        <span data-i18n="ai_insights_disclaimer">التنبيه القانوني</span>
                    </h4>
                    <div id="aiInsightsDisclaimer" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <button class="w-full mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors smart-assistant-btn" data-card="ai-insights" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                <!-- Smart Assistant Panel -->
                <div class="smart-assistant-panel mt-4 hidden" data-card="ai-insights">
                    <div class="glass-effect rounded-xl p-4 border border-primary border-opacity-30">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-brain text-blue-400"></i>
                                <span class="text-sm font-semibold text-gray-300" data-i18n="smart_assistant_insights">مساعد الذكاء الصناعي — تحليل الرؤى</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="smart-assistant-refresh text-blue-400 hover:text-blue-300 text-sm" data-card="ai-insights" title="تحديث التحليل">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="smart-assistant-toggle text-blue-400 hover:text-blue-300 text-sm" data-card="ai-insights">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="smart-assistant-content text-sm text-gray-300 leading-relaxed">
                            <!-- <span data-i18n="analysis_placeholder">سيتم ملؤها بالتحليل</span> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Suppliers Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="suppliers">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-info bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-industry text-info text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_suppliers_title">أفضل الموردين</h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="text-primary hover:text-yellow-400 text-sm" onclick="loadBestSuppliers()" title="تحديث البيانات">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <!-- فورم البحث -->
                <div class="mb-4 pb-4 border-b border-white border-opacity-20">
                    <form id="suppliersSearchForm" class="space-y-2" onsubmit="searchSuppliers(event)">
                        <input type="text" id="supplierProduct" data-i18n-placeholder="supplier_product_placeholder" placeholder="Product name (e.g., steel components)" class="w-full bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                        <div class="grid grid-cols-2 gap-2">
                            <input type="text" id="supplierHSCode" data-i18n-placeholder="supplier_hs_code_placeholder" placeholder="HS Code (optional)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                            <input type="text" id="supplierCountry" data-i18n-placeholder="supplier_country_placeholder" placeholder="Country code (optional)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400">
                        </div>
                        <button type="submit" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm">
                            <i class="fas fa-search me-2"></i><span data-i18n="search">بحث</span>
                        </button>
                    </form>
                </div>
                
                <!-- Block 1: أفضل الموردين -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-industry text-primary"></i>
                        <span data-i18n="best_suppliers">أفضل الموردين</span>
                    </h4>
                    <div id="suppliersList" class="space-y-2 max-h-64 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 2: الدول الأهم -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-globe text-primary"></i>
                        <span data-i18n="top_exporting_countries">الدول الأهم لهذا المنتج</span>
                    </h4>
                    <div id="suppliersMarkets" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 3: مصادر البيانات -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-database text-primary"></i>
                        <span data-i18n="data_sources">مصادر البيانات</span>
                    </h4>
                    <div id="suppliersSources" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <button class="w-full mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors smart-assistant-btn" data-card="suppliers" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                <!-- Smart Assistant Panel -->
                <div class="smart-assistant-panel mt-4 hidden" data-card="suppliers">
                    <div class="glass-effect rounded-xl p-4 border border-primary border-opacity-30">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-brain text-blue-400"></i>
                                <span class="text-sm font-semibold text-gray-300" data-i18n="smart_assistant_suppliers">مساعد الذكاء الصناعي — تحليل الموردين</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="smart-assistant-refresh text-blue-400 hover:text-blue-300 text-sm" data-card="suppliers" title="تحديث التحليل">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="smart-assistant-toggle text-blue-400 hover:text-blue-300 text-sm" data-card="suppliers">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="smart-assistant-content text-sm text-gray-300 leading-relaxed">
                            <!-- <span data-i18n="analysis_placeholder">سيتم ملؤها بالتحليل</span> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shipping Pulse Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="shipping">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-warning bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-ship text-warning text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_shipping_title">نبض الشحن</h3>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="text-primary hover:text-yellow-400 text-sm" onclick="loadShippingPulse()" title="تحديث البيانات">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <!-- Block 1: حركة السفن -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-ship text-primary"></i>
                        <span data-i18n="shipping_vessels">حركة السفن</span>
                    </h4>
                    <div id="shippingVessels" class="space-y-2 max-h-48 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 2: الموانئ -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-anchor text-primary"></i>
                        <span data-i18n="shipping_ports">الموانئ</span>
                    </h4>
                    <div id="shippingPorts" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 3: أسعار الشحن -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-dollar-sign text-primary"></i>
                        <span data-i18n="shipping_rates">أسعار الشحن</span>
                    </h4>
                    <div id="shippingRates" class="space-y-2 max-h-48 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- تتبع حركة السفن -->
                <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-ship text-primary"></i>
                        <span data-i18n="track_vessels">تتبع حركة السفن</span>
                    </h4>
                    <form id="trackVesselForm" class="space-y-3" onsubmit="trackVessel(event)">
                        <input 
                            type="text" 
                            id="vesselIdInput" 
                            placeholder="مثال: 123456789 (MMSI) أو 9876543 (IMO)" 
                            value="123456789"
                            class="w-full bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400" 
                            required
                        >
                        <p class="text-xs text-gray-400">
                            <i class="fas fa-info-circle ml-1"></i>
                            <strong>متطلبات البحث:</strong> أدخل رقم MMSI (9 أرقام) أو رقم IMO (7 أرقام) للسفينة. يمكنك الحصول على هذه الأرقام من وثائق الشحن أو من شركة الشحن.
                        </p>
                        <button type="submit" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm">
                            <i class="fas fa-search me-2"></i><span>تتبع السفينة</span>
                        </button>
                    </form>
                    <!-- نتائج التتبع -->
                    <div id="vesselTrackingResult" class="mt-4 hidden animate-fadeIn">
                        <div class="relative overflow-hidden dark:bg-gradient-to-br dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 bg-gradient-to-br bg-white from-gray-50 to-white rounded-2xl p-6 dark:border-gray-700/50 border border-gray-200 shadow-2xl">
                            <!-- خلفية متوهجة خفيفة -->
                            <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-0"></div>
                            
                            <!-- الهيدر -->
                            <div class="relative z-10 flex items-center justify-between mb-6 pb-4 dark:border-b-gray-700/50 border-b border-gray-200">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-xl bg-primary/20 dark:bg-primary/20 border border-primary/30 flex items-center justify-center">
                                        <i class="fas fa-ship text-primary text-xl"></i>
                                    </div>
                                    <div>
                                        <h5 class="text-xl font-bold dark:text-white text-gray-900 mb-1" id="trackedVesselName">-</h5>
                                        <p class="text-xs dark:text-gray-500 text-gray-600 flex items-center gap-1">
                                            <i class="fas fa-info-circle"></i>
                                            <span id="trackedVesselType">Container Ship</span>
                                        </p>
                                    </div>
                                </div>
                                <button onclick="document.getElementById('vesselTrackingResult').classList.add('hidden')" class="w-8 h-8 rounded-lg dark:bg-gray-800/50 bg-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:text-gray-400 text-gray-600 hover:text-gray-900 dark:hover:text-white flex items-center justify-center transition-all duration-200 dark:border-gray-700/50 border border-gray-200">
                                    <i class="fas fa-times text-sm"></i>
                                </button>
                            </div>
                            
                            <!-- البطاقات -->
                            <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- الموقع الحالي -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-gray-700/30 border border-gray-200 hover:border-gray-300 dark:hover:border-gray-600/50 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg bg-blue-500/10 dark:bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
                                            <i class="fas fa-map-marker-alt text-blue-500 dark:text-blue-400"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">الموقع الحالي</span>
                                    </div>
                                    <p class="text-lg font-bold dark:text-gray-100 text-gray-900" id="trackedCurrentLocation">-</p>
                                </div>
                                
                                <!-- الميناء الهدف -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-gray-700/30 border border-gray-200 hover:border-gray-300 dark:hover:border-gray-600/50 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg bg-cyan-500/10 dark:bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center">
                                            <i class="fas fa-anchor text-cyan-600 dark:text-cyan-400"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">الميناء الهدف</span>
                                    </div>
                                    <p class="text-lg font-bold dark:text-gray-100 text-gray-900" id="trackedDestination">-</p>
                                </div>
                                
                                <!-- الوقت المتبقي -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-primary/40 border border-primary/30 hover:border-primary/50 dark:hover:border-primary/60 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg bg-primary/20 dark:bg-primary/20 border border-primary/30 flex items-center justify-center">
                                            <i class="fas fa-clock text-primary"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">الوقت المتبقي</span>
                                    </div>
                                    <p class="text-2xl font-extrabold text-primary" id="trackedTimeRemaining">-</p>
                                </div>
                                
                                <!-- السرعة -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-gray-700/30 border border-gray-200 hover:border-gray-300 dark:hover:border-gray-600/50 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg bg-emerald-500/10 dark:bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
                                            <i class="fas fa-tachometer-alt text-emerald-600 dark:text-emerald-400"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">السرعة</span>
                                    </div>
                                    <p class="text-lg font-bold dark:text-gray-100 text-gray-900 flex items-center gap-2" id="trackedSpeed">-</p>
                                </div>
                                
                                <!-- آخر تحديث -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-gray-700/30 border border-gray-200 hover:border-gray-300 dark:hover:border-gray-600/50 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg dark:bg-gray-700/20 bg-gray-200/50 border dark:border-gray-600/30 border-gray-300 flex items-center justify-center">
                                            <i class="fas fa-sync-alt dark:text-gray-400 text-gray-600"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">آخر تحديث</span>
                                    </div>
                                    <p class="text-sm font-medium dark:text-gray-300 text-gray-700" id="trackedLastUpdate">-</p>
                                </div>
                                
                                <!-- الحالة -->
                                <div class="group dark:bg-gray-900/50 bg-gray-50 rounded-xl p-4 dark:border-gray-700/30 border border-gray-200 hover:border-gray-300 dark:hover:border-gray-600/50 transition-all duration-300">
                                    <div class="flex items-center gap-3 mb-2">
                                        <div class="w-10 h-10 rounded-lg bg-amber-500/10 dark:bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
                                            <i class="fas fa-info-circle text-amber-600 dark:text-amber-400"></i>
                                        </div>
                                        <span class="text-xs font-semibold dark:text-gray-500 text-gray-600 uppercase tracking-wide">الحالة</span>
                                    </div>
                                    <p class="text-sm font-bold dark:text-gray-100 text-gray-900" id="trackedStatus">-</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- فورم الشحن السريع (DHL/UPS/FedEx) -->
                <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-rocket text-primary"></i>
                        <span data-i18n="express_shipping">الشحن السريع</span>
                    </h4>
                    <form id="expressShippingForm" class="space-y-3" onsubmit="getExpressRates(event)">
                        <div class="grid grid-cols-2 gap-2">
                            <input type="text" id="expressOrigin" data-i18n-placeholder="express_origin_placeholder" placeholder="From (country code)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400" required>
                            <input type="text" id="expressDest" data-i18n-placeholder="express_dest_placeholder" placeholder="To (country code)" class="bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400" required>
                        </div>
                        <input type="number" id="expressWeight" data-i18n-placeholder="express_weight_placeholder" placeholder="Weight (kg)" step="0.1" min="0.1" lang="en" inputmode="decimal" class="w-full bg-black bg-opacity-30 border border-white border-opacity-20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-400" required>
                        <button type="submit" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm">
                            <i class="fas fa-calculator me-2"></i><span data-i18n="btn_calculate_price">حساب السعر</span>
                        </button>
                    </form>
                    <!-- ملاحظة: نتائج DHL/UPS/FedEx تُعرض داخل #shippingRates (البلوك الثالث) -->
                </div>
                
                <button class="w-full mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors smart-assistant-btn" data-card="shipping" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                <!-- Smart Assistant Panel -->
                <div class="smart-assistant-panel mt-4 hidden" data-card="shipping">
                    <div class="glass-effect rounded-xl p-4 border border-primary border-opacity-30">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-brain text-blue-400"></i>
                                <span class="text-sm font-semibold text-gray-300" data-i18n="smart_assistant_shipping">مساعد الذكاء الصناعي — تحليل حالة الموانئ</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="smart-assistant-refresh text-blue-400 hover:text-blue-300 text-sm" data-card="shipping" title="تحديث التحليل">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="smart-assistant-toggle text-blue-400 hover:text-blue-300 text-sm" data-card="shipping">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="smart-assistant-content text-sm text-gray-300 leading-relaxed">
                            <!-- <span data-i18n="analysis_placeholder">سيتم ملؤها بالتحليل</span> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Market Ads Now Card -->
            <div class="glass-effect rounded-2xl p-6" data-card="ads">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-bullhorn text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" data-i18n="card_ads_title">🧠 إعلانات السوق الآن</h3>
                    </div>
                    <div class="bg-primary text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="hot">حار</div>
                </div>
                
                <div class="flex items-center gap-2 mb-4">
                    <button class="text-primary hover:text-yellow-400 text-sm" onclick="loadMarketAds()" title="تحديث البيانات">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <div class="bg-primary text-black px-3 py-1 rounded-full text-sm font-semibold" data-i18n="updated">محدث</div>
                </div>
                
                <p class="text-sm text-gray-300 leading-relaxed mb-4" data-i18n="ads_description">
                    شاهد أحدث الإعلانات حول العالم، وتعلّم منها كيف تُصمم حملتك القادمة.
                </p>
                
                <!-- Block 1: الإعلانات النشطة -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-bullhorn text-primary"></i>
                        <span data-i18n="active_ads">الإعلانات النشطة</span>
                    </h4>
                    <div id="adsList" class="space-y-2 max-h-64 overflow-y-auto">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 2: المنصات الأكثر نشاطاً -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-chart-bar text-primary"></i>
                        <span data-i18n="top_platforms">المنصات الأكثر نشاطاً</span>
                    </h4>
                    <div id="adsPlatforms" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Block 3: الإحصائيات -->
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
                        <i class="fas fa-chart-line text-primary"></i>
                        <span data-i18n="ads_stats">الإحصائيات</span>
                    </h4>
                    <div id="adsStats" class="space-y-2">
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span>
                        </div>
                    </div>
                </div>
                
                <button class="w-full mt-4 bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors smart-assistant-btn" data-card="ads" data-i18n="btn_open_analysis">
                    <i class="fas fa-chart-line ms-2"></i><span data-i18n="btn_open_analysis">افتح التحليل</span>
                </button>
                <!-- Smart Assistant Panel -->
                <div class="smart-assistant-panel mt-4 hidden" data-card="ads">
                    <div class="glass-effect rounded-xl p-4 border border-primary border-opacity-30">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-brain text-blue-400"></i>
                                <span class="text-sm font-semibold text-gray-300" data-i18n="smart_assistant_ads">مساعد الذكاء الصناعي — تحليل إعلانات السوق</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="smart-assistant-refresh text-blue-400 hover:text-blue-300 text-sm" data-card="ads" title="تحديث التحليل">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="smart-assistant-toggle text-blue-400 hover:text-blue-300 text-sm" data-card="ads">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="smart-assistant-content text-sm text-gray-300 leading-relaxed">
                            <!-- <span data-i18n="analysis_placeholder">سيتم ملؤها بالتحليل</span> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Trend AI Assistant Widget -->
            <div class="glass-effect rounded-2xl p-6" id="trend-ai-widget" data-locale="ar">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary bg-opacity-20 p-3 rounded-xl">
                            <i class="fas fa-brain text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-bold" id="trend-ai-title" data-i18n="trend_ai_title">مساعد الترندات الذكي (Trend AI Assistant)</h3>
                    </div>
                </div>
                
                <p class="text-sm text-gray-400 mb-4" id="trend-ai-subtitle" data-i18n="trend_ai_subtitle">اطلب من الذكاء الاصطناعي تحليل بيانات الترندات والانفجارات في TrendLens.</p>
                
                <div class="space-y-3">
                    <textarea id="trend-ai-input" rows="3" class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 focus:outline-none text-white placeholder-gray-400 resize-none" data-i18n-placeholder="trend_ai_placeholder" placeholder="اكتب سؤالك عن الترندات هنا..."></textarea>
                    
                    <button id="trend-ai-btn" class="w-full px-6 py-3 rounded-xl bg-primary text-black font-bold hover:bg-yellow-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fas fa-paper-plane me-2"></i><span data-i18n="trend_ai_button">اسأل Trend AI</span>
                    </button>
                    
                    <div id="trend-ai-output" class="bg-black/50 rounded-xl p-4 min-h-24 border border-white/10 hidden">
                        <pre class="text-sm text-gray-200 whitespace-pre-wrap font-cairo" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
                    </div>
                </div>
            </div>

        </div>

                <!-- Other charts (hidden by default) -->
                <div id="volumeChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold">الحجم والسعر مقابل الوقت</h4>
                    </div>
                    <div class="bg-black bg-opacity-50 rounded-lg p-4 h-80 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-chart-bar text-4xl text-primary mb-4"></i>
                            <p class="text-gray-300" data-i18n="volume_chart_placeholder">Volume chart</p>
                        </div>
                    </div>
                </div>

                <div id="shippingChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold">تكلفة الشحن مقابل الوقت</h4>
                    </div>
                    <div class="bg-black bg-opacity-50 rounded-lg p-4 h-80 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-ship text-4xl text-primary mb-4"></i>
                            <p class="text-gray-300" data-i18n="shipping_chart_placeholder">Shipping prices chart</p>
                        </div>
                    </div>
                </div>

                <div id="suppliersChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold">مقارنة أسعار الموردين</h4>
                    </div>
                    <div class="bg-black bg-opacity-50 rounded-lg p-4 h-80 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-industry text-4xl text-primary mb-4"></i>
                            <p class="text-gray-300" data-i18n="suppliers_chart_placeholder">Suppliers comparison chart</p>
                        </div>
                    </div>
                </div>

                <!-- Global Trends Chart -->
                <div id="global-trendsChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold" data-i18n="global_trends_title">اتجاهات البيع العالمية</h4>
                        <button onclick="loadGlobalTrends()" class="bg-primary text-black px-4 py-2 rounded-lg text-sm hover:bg-yellow-400 transition-colors">
                            <i class="fas fa-sync-alt mr-2"></i><span data-i18n="refresh">تحديث</span>
                        </button>
                    </div>
                    <div id="globalTrendsContent" class="bg-black bg-opacity-50 rounded-lg p-4 min-h-80">
                        <div class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i>
                            <p class="text-gray-300" data-i18n="loading">جاري التحميل...</p>
                        </div>
                    </div>
                </div>

                <!-- Image Search Chart -->
                <div id="image-searchChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold" data-i18n="image_search_title">بحث بالصور</h4>
                    </div>
                    <div class="bg-black bg-opacity-50 rounded-lg p-4 min-h-80">
                        <!-- Image Search Input -->
                        <div class="mb-4">
                            <label class="block text-white mb-2" data-i18n="upload_image">ارفع صورة للبحث</label>
                            <div class="flex gap-4 items-center">
                                <input type="file" id="imgSearchInput" accept="image/*" class="hidden" onchange="handleImageSelect(event)">
                                <label for="imgSearchInput" class="bg-primary text-black px-6 py-3 rounded-lg font-semibold cursor-pointer hover:bg-yellow-400 transition-colors">
                                    <i class="fas fa-image mr-2"></i><span data-i18n="choose_image">اختر صورة</span>
                                </label>
                                <button id="imgSearchBtn" onclick="uploadImage()" class="bg-secondary text-white px-6 py-3 rounded-lg font-semibold hover:bg-orange-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                    <i class="fas fa-search mr-2"></i><span data-i18n="search">بحث</span>
                                </button>
                            </div>
                            <div id="imgPreview" class="mt-4 hidden">
                                <img id="imgPreviewImg" src="" alt="Preview" class="max-w-xs rounded-lg border-2 border-primary">
                            </div>
                        </div>
                        <!-- Results -->
                        <div id="imgSearchResults" class="mt-4">
                            <div class="text-center py-8 text-gray-400">
                                <i class="fas fa-image text-4xl mb-4"></i>
                                <p data-i18n="image_search_placeholder">ارفع صورة للبحث عن منتجات مشابهة</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="adsChart" class="chart-panel hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="text-lg font-bold" data-i18n="card_ads_title">Market Ads Now</h4>
                    </div>
                    <div class="bg-black bg-opacity-50 rounded-lg p-4 h-80 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-bullhorn text-4xl text-primary mb-4"></i>
                            <p class="text-gray-300" data-i18n="ads_chart_placeholder">Market Ads chart</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>

            <!-- Exploding Products Tab -->
            <div id="mainTab-exploding" class="main-tab-content">
                <div class="glass-effect rounded-2xl p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-primary" data-i18n="exploding_products_title">المنتجات المنفجرة</h2>
                    <div id="mainExplodingProducts" class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div class="text-center py-8 col-span-full">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                            <p class="text-gray-400 mt-4" data-i18n="generic.loading">جاري التحميل...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shipping Tab -->
            <div id="mainTab-shipping" class="main-tab-content">
                <div class="glass-effect rounded-2xl p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-primary" data-i18n="shipping.title">نبض الشحن</h2>
                    <div class="signals-strip mb-6">
                        <div class="signals-strip-content">
                            <div class="signal-item">
                                <i class="fas fa-ship"></i>
                                <span data-i18n="signal_jeddah">ميناء جدة — الازدحام: منخفض — التأخير: +٤ ساعات</span>
                            </div>
                            <div class="signal-item">
                                <i class="fas fa-ship"></i>
                                <span data-i18n="signal_shanghai">ميناء شنغهاي — الازدحام: عالٍ — التأخير: +٢١ ساعة</span>
                            </div>
                            <div class="signal-item">
                                <i class="fas fa-satellite"></i>
                                <span data-i18n="signal_global">مؤشر الشحن العالمي: مستقر</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid md:grid-cols-3 gap-4" id="mainShippingData">
                        <div class="bg-black/40 rounded-xl p-4">
                            <h3 class="text-sm font-semibold mb-2 text-gray-300">الموانئ</h3>
                            <div id="mainPortsList" class="space-y-2">
                                <div class="text-center py-4">
                                    <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-black/40 rounded-xl p-4">
                            <h3 class="text-sm font-semibold mb-2 text-gray-300">السفن</h3>
                            <div id="mainVesselsList" class="space-y-2">
                                <div class="text-center py-4">
                                    <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-black/40 rounded-xl p-4">
                            <h3 class="text-sm font-semibold mb-2 text-gray-300">الأسعار</h3>
                            <div id="mainRatesList" class="space-y-2">
                                <div class="text-center py-4">
                                    <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Markets Ticker Tab -->
            <div id="mainTab-markets" class="main-tab-content">
                <div class="glass-effect rounded-2xl p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-primary" data-i18n="ticker_title">الترند التشغيلي</h2>
                    <div class="glass-effect rounded-xl p-4 mb-6">
                        <div class="tl-ticker-wrap">
                            <div class="tl-ticker-track" id="mainMarketTickerTrack" style="--speed: 40s"></div>
                        </div>
                    </div>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-black/40 rounded-xl p-4">
                            <div class="text-sm text-gray-400 mb-2">المتاجر النشطة</div>
                            <div class="text-2xl font-bold text-primary" id="mainActiveMarkets">--</div>
                        </div>
                        <div class="bg-black/40 rounded-xl p-4">
                            <div class="text-sm text-gray-400 mb-2">المنتجات الجديدة</div>
                            <div class="text-2xl font-bold text-emerald-400" id="mainNewProducts">--</div>
                        </div>
                        <div class="bg-black/40 rounded-xl p-4">
                            <div class="text-sm text-gray-400 mb-2">التحديثات اليوم</div>
                            <div class="text-2xl font-bold text-blue-400" id="mainTodayUpdates">--</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- E-books Tab -->
            <div id="mainTab-ebooks" class="main-tab-content">
                <div class="glass-effect rounded-2xl p-6 mb-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-2xl font-bold text-primary" data-i18n="ebooks_marketplace_title">سوق الكتب الإلكترونية</h2>
                        <a href="/trendlens/books.html" class="text-primary text-sm hover:underline" data-i18n="view_all">عرض الكل</a>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="mainEbooksGrid">
                        <div class="text-center py-8 col-span-full">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                            <p class="text-gray-400 mt-4" data-i18n="generic.loading">جاري التحميل...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Analytics Tab -->
            <div id="mainTab-analytics" class="main-tab-content">
                <div class="mb-6">
                    <h1 class="text-3xl font-bold text-primary mb-2" data-i18n="revenue_analytics">تحليلات الإيرادات</h1>
                    <p class="text-gray-400">تحليلات متقدمة مع Charts تفاعلية</p>
                </div>
                
                <!-- Stats Cards -->
                <div class="grid md:grid-cols-3 gap-6 mb-6">
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_sales">إجمالي المبيعات</span>
                            <i class="fas fa-dollar-sign text-primary"></i>
                        </div>
                        <div class="text-3xl font-bold text-primary mb-2">$983,410</div>
                        <div class="text-sm text-emerald-400">
                            <i class="fas fa-arrow-up"></i> +3.34% <span data-i18n="vs_last_week">مقارنة بالأسبوع الماضي</span>
                        </div>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_orders">إجمالي الطلبات</span>
                            <i class="fas fa-shopping-cart text-success"></i>
                        </div>
                        <div class="text-3xl font-bold text-success mb-2">58,375</div>
                        <div class="text-sm text-red-400">
                            <i class="fas fa-arrow-down"></i> -2.89% <span data-i18n="vs_last_week">مقارنة بالأسبوع الماضي</span>
                        </div>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_visitors">إجمالي الزوار</span>
                            <i class="fas fa-eye text-info"></i>
                        </div>
                        <div class="text-3xl font-bold text-info mb-2">237,782</div>
                        <div class="text-sm text-gray-400">آخر تحديث: الآن</div>
                    </div>
                </div>
                
                <!-- Charts Row -->
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-primary" data-i18n="revenue_analytics">تحليلات الإيرادات</h2>
                            <select class="text-sm bg-transparent border border-white/20 rounded px-2 py-1 text-white">
                                <option data-i18n="last_8_days">آخر 8 أيام</option>
                                <option data-i18n="last_30_days">آخر 30 يوم</option>
                            </select>
                        </div>
                        <canvas id="mainAnalyticsRevenueChart" class="w-full" style="max-height: 300px;"></canvas>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-primary" data-i18n="conversion_rate">معدل التحويل</h2>
                            <select class="text-sm bg-transparent border border-white/20 rounded px-2 py-1 text-white">
                                <option data-i18n="this_week">هذا الأسبوع</option>
                                <option data-i18n="this_month">هذا الشهر</option>
                            </select>
                        </div>
                        <canvas id="mainAnalyticsConversionChart" class="w-full" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Final CTA Section (Compact, بدون دعاية مبالغ فيها) -->
        <!-- CTA Section - Improved & More Useful -->
        <div class="dashboard-card mb-10 fade-in-up">
            <div class="dashboard-card-header">
                <div>
                    <h2 class="dashboard-card-title" data-i18n="cta_successful_stores">
                        المتاجر الناجحة لا تنتظر السوق… وإنما تسبقه
                    </h2>
                    <p class="text-sm mt-2" style="color: var(--text-muted);" data-i18n="cta_start_now_subtitle">
                        اربط حسابك في ترند لينس وابدأ برؤية مؤشرات الذكاء على المنتجات والحسابات التي تهمك.
                    </p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <div class="text-center p-4 rounded-lg border border-primary/20 bg-primary/5">
                    <i class="fas fa-chart-line text-2xl text-primary mb-2"></i>
                    <div class="text-sm font-semibold mb-1" style="color: var(--text-main);">تحليل المنتجات</div>
                    <div class="text-xs" style="color: var(--text-muted);">اكتشف المنتجات الصاعدة قبل المنافسين</div>
                </div>
                <div class="text-center p-4 rounded-lg border border-primary/20 bg-primary/5">
                    <i class="fas fa-users text-2xl text-primary mb-2"></i>
                    <div class="text-sm font-semibold mb-1" style="color: var(--text-main);">فحص الحسابات</div>
                    <div class="text-xs" style="color: var(--text-muted);">تحليل جودة حسابات السوشيال ميديا</div>
                </div>
                <div class="text-center p-4 rounded-lg border border-primary/20 bg-primary/5">
                    <i class="fas fa-book text-2xl text-primary mb-2"></i>
                    <div class="text-sm font-semibold mb-1" style="color: var(--text-main);">كتب إلكترونية</div>
                    <div class="text-xs" style="color: var(--text-muted);">مكتبة شاملة من الأدلة والاستراتيجيات</div>
                </div>
            </div>
            <div class="mt-4 text-center">
                    <button 
                        onclick="openAuthModal('register')"
                    class="bg-primary text-black px-6 py-2.5 rounded-lg font-semibold text-sm hover:bg-yellow-500 transition-colors"
                        data-i18n="cta_start_now_button"
                    >
                        متابعة التسجيل
                    </button>
            </div>
        </div>

        <!-- Pricing Plans Section -->
        <div class="glass-effect rounded-3xl p-8 mb-12">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold text-primary mb-4" data-i18n="pricing_title">خطط الاشتراك</h2>
                <p class="text-gray-300 text-lg" data-i18n="pricing_subtitle">اختر الخطة المناسبة لك واستمتع بخصم يصل إلى 20% عند الاشتراك السنوي</p>
                
                <!-- Billing Toggle -->
                <div id="billingToggleRow" class="flex items-center justify-center gap-4 mt-8">
                    <span class="text-gray-300" data-i18n="monthly">شهري</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="billingToggle" class="sr-only peer" onchange="toggleBilling()">
                        <div class="w-14 h-7 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                    <span class="text-gray-300" data-i18n="yearly">سنوي</span>
                    <span id="yearlyDiscount" class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold transition-all duration-300" data-i18n="save_20">وفر 20%</span>
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Basic Plan -->
                <div class="glass-effect rounded-2xl p-8 relative">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-primary mb-2" data-i18n="plan_basic">أساسي</h3>
                        <p class="text-gray-300" data-i18n="plan_basic_desc">مثالي للاستخدام الشخصي</p>
                    </div>
                    
                    <div class="text-center mb-6">
                        <div class="flex items-center justify-center gap-2">
                            <span class="text-4xl font-bold text-white transition-colors duration-300" id="basicPrice">$29.99</span>
                            <span class="text-gray-400 transition-opacity duration-300" id="basicPeriod" data-i18n="per_month">/شهر</span>
                        </div>
                        <div id="basicYearlyPrice" class="text-lg text-red-500 hidden transition-all duration-300" data-i18n="yearly_price">$287.99/سنة</div>
                        <div id="basicSavings" class="text-sm text-red-500 hidden transition-all duration-300" data-i18n="you_save">وفر $72.89</div>
                    </div>
                    
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_ai_quota_basic">10 تحليلات ذكاء صناعي/شهر</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_social_checks_basic">5 فحوصات حسابات سوشيال/شهر</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_search_basic">100 بحث شهري</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_email_support">دعم البريد الإلكتروني</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-times text-danger"></i>
                            <span class="text-gray-500" data-i18n="feature_no_api">لا يوجد وصول API</span>
                        </li>
                    </ul>
                    
                    <button onclick="goToPayment('basic')" class="w-full bg-transparent border border-primary text-primary py-3 rounded-lg font-semibold hover:bg-primary hover:text-black transition-colors">
                        <span data-i18n="choose_plan">اختر الخطة</span>
                    </button>
                </div>
                
                <!-- Pro Plan -->
                <div class="glass-effect rounded-2xl p-8 relative border-2 border-primary">
                    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                        <span class="bg-primary text-black px-4 py-1 rounded-full text-sm font-semibold" data-i18n="most_popular">الأكثر شعبية</span>
                    </div>
                    
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-primary mb-2" data-i18n="plan_pro">احترافي</h3>
                        <p class="text-gray-300" data-i18n="plan_pro_desc">للاستخدام المتقدم</p>
                    </div>
                    
                    <div class="text-center mb-6">
                        <div class="flex items-center justify-center gap-2">
                            <span class="text-4xl font-bold text-white transition-colors duration-300" id="proPrice">$59.99</span>
                            <span class="text-gray-400 transition-opacity duration-300" id="proPeriod" data-i18n="per_month">/شهر</span>
                        </div>
                        <div id="proYearlyPrice" class="text-lg text-red-500 hidden transition-all duration-300" data-i18n="yearly_price">$575.99/سنة</div>
                        <div id="proSavings" class="text-sm text-red-500 hidden transition-all duration-300" data-i18n="you_save">وفر $143.89</div>
                    </div>
                    
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_ai_quota_pro">50 تحليل ذكاء صناعي/شهر</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_social_checks_pro">20 فحص حساب سوشيال/شهر</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_search_pro">500 بحث شهري</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_priority_support">دعم أولوية</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_api_access">وصول API</span>
                        </li>
                    </ul>
                    
                    <button onclick="goToPayment('pro')" class="w-full bg-primary text-black py-3 rounded-lg font-semibold hover:bg-yellow-500 transition-colors">
                        <span data-i18n="choose_plan">اختر الخطة</span>
                    </button>
                </div>
                
                <!-- Enterprise Plan -->
                <div class="glass-effect rounded-2xl p-8 relative">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-primary mb-2" data-i18n="plan_enterprise">مؤسسي</h3>
                        <p class="text-gray-300" data-i18n="plan_enterprise_desc">للمؤسسات والشركات</p>
                    </div>
                    
                    <div class="text-center mb-6">
                        <div class="flex items-center justify-center gap-2">
                            <span class="text-4xl font-bold text-white transition-colors duration-300" id="enterprisePrice">$199.99</span>
                            <span class="text-gray-400 transition-opacity duration-300" id="enterprisePeriod" data-i18n="per_month">/شهر</span>
                        </div>
                        <div id="enterpriseYearlyPrice" class="text-lg text-red-500 hidden transition-all duration-300" data-i18n="yearly_price">$1,919.99/سنة</div>
                        <div id="enterpriseSavings" class="text-sm text-red-500 hidden transition-all duration-300" data-i18n="you_save">وفر $479.89</div>
                    </div>
                    
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_ai_quota_enterprise">تحليلات ذكاء صناعي غير محدودة</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_social_checks_enterprise">فحوصات حسابات سوشيال غير محدودة</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_search_unlimited">بحث غير محدود</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_dedicated_support">دعم مخصص</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fas fa-check text-success"></i>
                            <span class="text-gray-300" data-i18n="feature_white_label">علامة بيضاء</span>
                        </li>
                    </ul>
                    
                    <button onclick="goToPayment('enterprise')" class="w-full bg-transparent border border-primary text-primary py-3 rounded-lg font-semibold hover:bg-primary hover:text-black transition-colors">
                        <span data-i18n="choose_plan">اختر الخطة</span>
                    </button>
                </div>
            </div>
            
            <!-- Additional Info -->
            <div class="text-center mt-12">
                <p class="text-gray-400 mb-4" data-i18n="pricing_note">جميع الخطط تشمل ضمان استرداد الأموال لمدة 30 يوماً</p>
                <div class="flex items-center justify-center gap-6 text-sm text-gray-400">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-shield-alt text-success"></i>
                        <span data-i18n="secure_payment">دفع آمن</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-sync-alt text-success"></i>
                        <span data-i18n="cancel_anytime">إلغاء في أي وقت</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-headset text-success"></i>
                        <span data-i18n="support_24_7">دعم 24/7</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Social Scanner Section (Compact Strength Check for Social Accounts) -->
        <div class="glass-effect rounded-3xl p-6 mb-10" data-feature="social_scanner">
            <div class="max-w-md mx-auto">
                <h3 class="text-2xl font-bold mb-3 text-primary text-center" data-i18n="social_scanner_title">جودة حسابات السوشل ميديا</h3>
                <p class="text-xs text-gray-400 mb-5 text-center" data-i18n="social_scanner_subtitle">
                    تحليل قوة الحساب ونسبة التفاعل وكشف أنماط الفيك
                </p>
                
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-semibold mb-1.5" data-i18n="platform">منصة</label>
                        <select id="socialPlatform" class="w-full border border-white rounded-lg px-3 py-2.5 text-sm text-white bg-transparent">
                            <option value="tiktok">TikTok</option>
                            <option value="instagram">Instagram</option>
                            <option value="linkedin">LinkedIn</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold mb-1.5" data-i18n="account_url">رابط الحساب</label>
                        <input type="text" id="socialAccountUrl" placeholder="https://tiktok.com/@username" class="w-full bg-transparent border border-white rounded-lg px-3 py-2.5 text-sm text-white placeholder-gray-400">
                    </div>
                    
                    <div class="bg-primary bg-opacity-10 border border-primary/70 rounded-lg p-3 text-center">
                        <div class="flex items-center justify-center gap-2 mb-1">
                            <span class="text-xs text-gray-300" data-i18n="price">السعر:</span>
                            <span class="text-2xl font-bold text-primary">$2.99</span>
                        </div>
                        <p class="text-[10px] text-gray-400" data-i18n="comprehensive_analysis">
                            تحليل شامل + تقرير PDF
                        </p>
                    </div>
                    
                    <button onclick="startSocialScan()" class="w-full bg-primary text-black py-3 rounded-lg font-semibold text-sm hover:bg-yellow-500 transition-colors" data-i18n="btn_start_scan">
                        <i class="fas fa-search me-2"></i><span data-i18n="btn_start_scan">ابدأ الفحص</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Social Proof -->
        <section id="social-proof" class="mt-16">
            <p class="text-center text-gray-400 mb-6" data-i18n="proof_title">يستخدم ترند لينس مسوّقون وتُجّار ومبدعون حول العالم</p>
            <!-- Brand strip - Animated slider -->
            <div class="brand-logos mb-8" id="brandLogosStrip">
                <div class="brand-logos-track">
                    <img src="/trendlens/logos/shopify.svg" alt="Shopify" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTVhNGFmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TaG9waWZ5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/amazon.svg" alt="Amazon" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmY5OTAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BbWF6b248L3RleHQ+PC9zdmc+';">
                    <img src="/trendlens/logos/ebay.svg" alt="eBay" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjMDA2NGRmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5lQmF5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/etsy.svg" alt="Etsy" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZjYyMjE3IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FdHN5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/woocommerce.svg" alt="WooCommerce" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTY1ODg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Xb29Db21tZXJjZTwvdGV4dD48L3N2Zz4=';">
                    <img src="/trendlens/logos/salla.svg" alt="Salla">
                    <img src="/trendlens/logos/walmart.svg" alt="Walmart">
                    <img src="/trendlens/logos/aliexpress.svg" alt="AliExpress">
                    <img src="/trendlens/logos/alibaba.svg" alt="Alibaba">
                    <img src="/trendlens/logos/otto.svg" alt="Otto">
                    <img src="/trendlens/logos/zid.svg" alt="Zid">
                    <img src="/trendlens/logos/target.svg" alt="Target">
                    <!-- Duplicate for seamless loop -->
                    <img src="/trendlens/logos/shopify.svg" alt="Shopify" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTVhNGFmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TaG9waWZ5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/amazon.svg" alt="Amazon" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmY5OTAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BbWF6b248L3RleHQ+PC9zdmc+';">
                    <img src="/trendlens/logos/ebay.svg" alt="eBay" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjMDA2NGRmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5lQmF5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/etsy.svg" alt="Etsy" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZjYyMjE3IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FdHN5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/woocommerce.svg" alt="WooCommerce" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTY1ODg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Xb29Db21tZXJjZTwvdGV4dD48L3N2Zz4=';">
                    <img src="/trendlens/logos/salla.svg" alt="Salla">
                    <img src="/trendlens/logos/walmart.svg" alt="Walmart">
                    <img src="/trendlens/logos/aliexpress.svg" alt="AliExpress">
                    <img src="/trendlens/logos/alibaba.svg" alt="Alibaba">
                    <img src="/trendlens/logos/otto.svg" alt="Otto">
                    <img src="/trendlens/logos/zid.svg" alt="Zid">
                    <img src="/trendlens/logos/target.svg" alt="Target">
                    <!-- Third copy for ultra-smooth seamless loop -->
                    <img src="/trendlens/logos/shopify.svg" alt="Shopify" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTVhNGFmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TaG9waWZ5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/amazon.svg" alt="Amazon" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmY5OTAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BbWF6b248L3RleHQ+PC9zdmc+';">
                    <img src="/trendlens/logos/ebay.svg" alt="eBay" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjMDA2NGRmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5lQmF5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/etsy.svg" alt="Etsy" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZjYyMjE3IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FdHN5PC90ZXh0Pjwvc3ZnPg==';">
                    <img src="/trendlens/logos/woocommerce.svg" alt="WooCommerce" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTY1ODg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Xb29Db21tZXJjZTwvdGV4dD48L3N2Zz4=';">
                    <img src="/trendlens/logos/salla.svg" alt="Salla">
                    <img src="/trendlens/logos/walmart.svg" alt="Walmart">
                    <img src="/trendlens/logos/aliexpress.svg" alt="AliExpress">
                    <img src="/trendlens/logos/alibaba.svg" alt="Alibaba">
                    <img src="/trendlens/logos/otto.svg" alt="Otto">
                    <img src="/trendlens/logos/zid.svg" alt="Zid">
                    <img src="/trendlens/logos/target.svg" alt="Target">
                </div>
            </div>
            <!-- Rotating testimonial -->
            <div class="max-w-3xl mx-auto">
                <figure class="p-5 rounded-2xl glass-gold text-black text-center" id="testimonialCard">
                    <blockquote class="text-sm md:text-base font-semibold" id="testimonialText">“ساعدتني TrendLens على توقع الترند قبل السوق بأسبوع.”</blockquote>
                    <figcaption class="mt-2 text-xs md:text-sm opacity-80" id="testimonialAuthor">— مدير تسويق، تجارة إلكترونية</figcaption>
                </figure>
            </div>
        </section>

        
        <!-- Books Mini-Shelf (Home) -->
        <section id="booksShelf" class="glass-effect rounded-3xl p-8 mb-12">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-primary" data-i18n="books_title">الكتب الإلكترونية</h3>
                <a href="/trendlens/books.html" class="text-sm underline hover:opacity-80" data-i18n="books_view_all">عرض كل الكتب</a>
            </div>

            <div id="booksShelfTrack" class="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Static fallback samples (will be replaced by JS when available) -->
                <div class="glass-effect rounded-2xl overflow-hidden flex flex-col relative">
                    <span class="ebook-badge bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="ebook_badge">E-book</span>
                    <div class="book-flag">
                        <span class="bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="badge_best_selling">Best Selling</span>
                    </div>
                    <div>
                        <img src="https://picsum.photos/seed/fb1/600/360" alt="كتاب عينة 1" class="w-full h-48 object-cover" onerror="this.onerror=null;this.src='https://picsum.photos/seed/ebook-fallback/600/360';">
                    </div>
                    <div class="p-4 flex-1 flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold line-clamp-2">كتاب عينة 1</h4>
                            <div class="text-xs"></div>
                        </div>
                        <div class="text-sm text-gray-300"><span data-i18n="by_seller">البائع:</span> Demo</div>
                        <p class="text-sm text-gray-300 line-clamp-2">وصف مختصر</p>
                        <div class="mt-auto flex items-center justify-between">
                            <div class="text-primary font-bold">$19.99</div>
                            <a href="/trendlens/books.html#fb-1" class="underline text-sm" data-i18n="view_more">المزيد</a>
                        </div>
                    </div>
                </div>
                <div class="glass-effect rounded-2xl overflow-hidden flex flex-col relative">
                    <span class="ebook-badge bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="ebook_badge">E-book</span>
                    <div class="book-flag">
                        <span class="bg-success text-white text-xs font-semibold px-2 py-0.5 rounded" data-i18n="badge_fast_growing">Fastest Growing</span>
                    </div>
                    <div>
                        <img src="https://picsum.photos/seed/fb2/600/360" alt="كتاب عينة 2" class="w-full h-48 object-cover" onerror="this.onerror=null;this.src='https://picsum.photos/seed/ebook-fallback/600/360';">
                    </div>
                    <div class="p-4 flex-1 flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold line-clamp-2">كتاب عينة 2</h4>
                            <div class="text-xs"></div>
                        </div>
                        <div class="text-sm text-gray-300"><span data-i18n="by_seller">البائع:</span> Demo</div>
                        <p class="text-sm text-gray-300 line-clamp-2">وصف مختصر</p>
                        <div class="mt-auto flex items-center justify-between">
                            <div class="text-primary font-bold">$24.99</div>
                            <a href="/trendlens/books.html#fb-2" class="underline text-sm" data-i18n="view_more">المزيد</a>
                        </div>
                    </div>
                </div>
                <div class="glass-effect rounded-2xl overflow-hidden flex flex-col relative">
                    <span class="ebook-badge bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="ebook_badge">E-book</span>
                    <div class="book-flag">
                        <span class="text-warning text-xs font-semibold px-2 py-0.5 rounded badge-biz" data-i18n="badge_biz_favorite">Business Favorite</span>
                    </div>
                    <div>
                        <img src="https://picsum.photos/seed/fb3/600/360" alt="كتاب عينة 3" class="w-full h-48 object-cover" onerror="this.onerror=null;this.src='https://picsum.photos/seed/ebook-fallback/600/360';">
                    </div>
                    <div class="p-4 flex-1 flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold line-clamp-2">كتاب عينة 3</h4>
                            <div class="text-xs"></div>
                        </div>
                        <div class="text-sm text-gray-300"><span data-i18n="by_seller">البائع:</span> Demo</div>
                        <p class="text-sm text-gray-300 line-clamp-2">وصف مختصر</p>
                        <div class="mt-auto flex items-center justify-between">
                            <div class="text-primary font-bold">$14.5</div>
                            <a href="/trendlens/books.html#fb-3" class="underline text-sm" data-i18n="view_more">المزيد</a>
                        </div>
                    </div>
                </div>
                <div class="glass-effect rounded-2xl overflow-hidden flex flex-col relative">
                    <span class="ebook-badge bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="ebook_badge">E-book</span>
                    <div>
                        <img src="https://picsum.photos/seed/fb4/600/360" alt="كتاب عينة 4" class="w-full h-48 object-cover" onerror="this.onerror=null;this.src='https://picsum.photos/seed/ebook-fallback/600/360';">
                    </div>
                    <div class="p-4 flex-1 flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold line-clamp-2">كتاب عينة 4</h4>
                            <div class="text-xs"></div>
                        </div>
                        <div class="text-sm text-gray-300"><span data-i18n="by_seller">البائع:</span> Demo</div>
                        <p class="text-sm text-gray-300 line-clamp-2">وصف مختصر</p>
                        <div class="mt-auto flex items-center justify-between">
                            <div class="text-primary font-bold">$29</div>
                            <a href="/trendlens/books.html#fb-4" class="underline text-sm" data-i18n="view_more">المزيد</a>
                        </div>
                    </div>
                </div>
                <!-- End static fallback samples -->
            </div>
        </section>

        <!-- AI Assistant (Unified Infer) -->
        <section class="glass-effect rounded-3xl p-8 mb-12" id="aiAssistant">
            <!-- طبقة العنوان -->
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-primary mb-2" data-i18n="ai_assistant_title">المساعد الذكي</h3>
                <p class="text-gray-300" data-i18n="ai_assistant_subtitle">اختر الوكيل الذكي الذي تحتاجه</p>
            </div>
            
            <!-- طبقة اختيار الوكيل -->
            <div class="mb-6">
                <select id="aiIntent" class="w-full border border-white rounded-lg px-4 py-3 text-white bg-black bg-opacity-30 mb-4">
                    <option value="trend_al" data-i18n="agent_trend_al_label">ذكاء الاتجاهات (Trend-Al)</option>
                    <option value="insight_al" data-i18n="agent_insight_al_label">ذكاء الرؤى التحليلية (Insight-Al)</option>
                    <option value="seller_al" data-i18n="agent_seller_al_label">ذكاء البائعين (Seller-Al)</option>
                    <option value="copy_al" data-i18n="agent_copy_al_label">ذكاء المحتوى التسويقي (Copy-Al)</option>
                    <option value="alert_al" data-i18n="agent_alert_al_label">ذكاء التنبيهات (Alert-Al)</option>
                    <option value="price_al" data-i18n="agent_price_al_label">ذكاء التسعير (Price-Al)</option>
                    <option value="pixel_al" data-i18n="agent_pixel_al_label">ذكاء الإعلانات (Pixel-Al)</option>
                    <option value="fraud_al" data-i18n="agent_fraud_al_label">ذكاء مكافحة الاحتيال (Fraud-Al)</option>
                    <option value="support_al" data-i18n="agent_support_al_label">ذكاء الدعم (Support-Al)</option>
                </select>
                
                <!-- Agent Info Card - تظهر فقط بعد اختيار الوكيل -->
                <div id="agentInfoCard" class="glass-effect rounded-xl p-4 border border-primary border-opacity-30 hidden">
                    <div class="flex items-start justify-between mb-2">
                        <div class="flex-1">
                            <h4 id="agentInfoLabel" class="text-lg font-bold text-primary mb-2"></h4>
                            <p id="agentInfoShort" class="text-sm text-gray-300 mb-3"></p>
                            <p id="agentInfoDescription" class="text-sm text-gray-400 leading-relaxed"></p>
                        </div>
                        <button id="closeAgentInfo" class="text-gray-400 hover:text-white ms-4">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- طبقة التنفيذ -->
            <div class="space-y-4">
                <div class="relative">
                    <textarea id="aiText" rows="4" class="w-full bg-transparent border-2 border-white rounded-2xl px-4 py-3 pr-12" data-i18n-placeholder="ai_prompt_placeholder" placeholder="اكتب سؤالك أو طلبك..."></textarea>
                    <button 
                        type="button" 
                        id="openImageFromText" 
                        title="رفع صورة" 
                        aria-label="رفع صورة" 
                        class="absolute bottom-3 left-3 rounded-full bg-gradient-to-br from-amber-400 via-orange-500 to-amber-500 hover:from-orange-500 hover:to-amber-600 shadow-xl ring-2 ring-amber-200/50 flex items-center justify-center transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-200/60 text-white"
                        style="width: 26px; height: 26px;"
                    >
                        <i class="fas fa-image text-white" style="font-size: 13px;"></i>
                    </button>
                    <input type="file" id="hiddenImageInput" accept="image/*" class="hidden" />
                </div>
                <button id="aiRunBtn" class="w-full bg-primary text-black px-6 py-3 rounded-xl font-semibold hover:bg-yellow-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" data-i18n="run">تشغيل</button>
            </div>
            
            <!-- قسم عرض رد الذكاء الصناعي -->
            <div id="aiResponseContainer" class="mt-6 hidden">
                <div class="glass-effect rounded-xl p-6 border border-primary border-opacity-30">
                    <div class="flex items-start justify-between mb-4">
                        <h4 class="text-lg font-bold text-primary">
                            <i class="fas fa-brain me-2"></i>رد الذكاء الصناعي
                        </h4>
                        <button id="closeAIResponse" class="text-gray-400 hover:text-white">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div id="aiResponseContent" class="text-gray-300 whitespace-pre-wrap leading-relaxed"></div>
                    <div id="aiResponseError" class="mt-4 hidden text-danger text-sm"></div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <div class="grid md:grid-cols-3 gap-8 mt-16">
            <div class="glass-effect rounded-2xl p-6 text-center">
                <div class="text-4xl text-primary mb-4">
                    <i class="fas fa-search"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 gradient-text" data-i18n="smart_analysis_title">تحليل شامل ذكي</h3>
                <p class="text-gray-300" data-i18n="smart_analysis_desc">شغّل جميع المساعدين الذكيين في ضغطة واحدة للحصول على تحليل شامل</p>
            </div>
            <div class="glass-effect rounded-2xl p-6 text-center">
                <div class="text-4xl text-primary mb-4">
                    <i class="fas fa-brain"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 gradient-text" data-i18n="private_ai">ذكاء اصطناعي خاص</h3>
                <p class="text-gray-300" data-i18n="private_ai_desc">رؤى وتحليلات مبنية على بيانات المنصة مع مصادر وثقة واضحة</p>
            </div>
            <div class="glass-effect rounded-2xl p-6 text-center">
                <div class="text-4xl text-primary mb-4">
                    <i class="fas fa-chart-bar"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 gradient-text" data-i18n="advanced_charts">رسوم بيانية متقدمة</h3>
                <p class="text-gray-300" data-i18n="advanced_charts_desc">شموع مالية وتكلفة شحن ومقارنة موردين ورسوم سوشيال</p>
            </div>
        </div>

    </main>

    <!-- ===== NEW HOMEPAGE STRUCTURE ===== -->
    <!-- Section 1: Hero Compact (Two Columns) -->
    <section class="hero-compact main-container-new">
        <div class="grid lg:grid-cols-2 gap-8 items-center">
            <!-- Left Column: Text + CTAs -->
            <div class="hero-compact-left">
                <h1 class="hero-compact-title gradient-text" data-i18n="hero_new_title">
                    TrendLens AI<br>
                    ذكاء التجارة العالمية في صفحة واحدة
                </h1>
                <p class="hero-compact-subtitle" data-i18n="hero_new_subtitle">
                    اكتشف المنتجات المنفجرة، إشارات الشحن، وإعلانات السوق في لوحة واحدة مدعومة بالذكاء الاصطناعي.
                </p>
                <div class="hero-cta-buttons">
                    <button onclick="openAuthModal('register')" class="hero-cta-btn bg-primary text-black" data-i18n="hero_cta_explore">
                        🔍 Explore Global Trends
                    </button>
                    <button onclick="window.location.href='/trendlens/product-analysis.html'" class="hero-cta-btn border border-primary text-primary hover:bg-primary hover:text-black" data-i18n="hero_cta_exploding">
                        🚀 View Exploding Products
                    </button>
                    <button onclick="openAuthModal('register')" class="hero-cta-btn border border-primary text-primary hover:bg-primary hover:text-black" data-i18n="hero_cta_ai">
                        🤖 Ask TrendLens AI
                    </button>
                </div>
                <div class="hero-mini-badges">
                    <span>✅ Live data from Google Trends, Shipping, Market Ads</span>
                    <span>✅ Supports Arabic & English</span>
                </div>
            </div>
            <!-- Right Column: Snapshot Box - Improved -->
            <div class="hero-snapshot-box">
                <div class="flex items-center justify-between mb-3">
                    <div class="text-sm font-semibold" style="color: var(--text-main);" data-i18n="hero_snapshot_label">Live Snapshot</div>
                    <button onclick="toggleDashboardView()" class="text-xs px-2 py-1 rounded bg-primary/20 text-primary hover:bg-primary hover:text-black transition-colors" data-i18n="toggle_dashboard">Dashboard</button>
                </div>
                <div class="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-4 mb-3 border border-primary/20">
                    <div class="text-center space-y-2">
                        <div class="text-lg font-bold" style="color: var(--text-main);" id="snapshotCategory" data-i18n="home_kitchen">Home & Kitchen</div>
                        <div class="text-2xl font-bold text-primary" id="snapshotGrowth">+82%</div>
                        <div class="text-xs" style="color: var(--text-muted);" id="snapshotRegion" data-i18n="hero_snapshot_region">Region: KSA • Last 7 days</div>
                    </div>
                </div>
                <div class="text-xs space-y-1" style="color: var(--text-muted);">
                    <div class="flex items-center justify-between">
                        <span data-i18n="top_market">Top Market:</span>
                        <span class="font-semibold" style="color: var(--text-main);">Saudi Arabia</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span data-i18n="active_products">Active Products:</span>
                        <span class="font-semibold text-primary">1,234</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== NEW DASHBOARD LAYOUT (Similar to E-commerce Dashboard) ===== -->
    <div class="dashboard-layout" id="newDashboardLayout" style="display: none !important;">
        <!-- Sidebar -->
        <aside class="dashboard-sidebar">
            <div class="dashboard-sidebar-logo">
                <img src="/trendlens/assets/brand/logo.svg" alt="TrendLens" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.png'">
            </div>
            <nav class="dashboard-sidebar-nav">
                <div class="dashboard-nav-item active" onclick="switchDashboardTab('dashboard')">
                    <i class="fas fa-home"></i>
                    <span data-i18n="nav_dashboard">Dashboard</span>
        </div>
                <div class="dashboard-nav-item" onclick="switchDashboardTab('exploding')">
                    <i class="fas fa-rocket"></i>
                    <span data-i18n="nav_exploding">Exploding Products</span>
    </div>
                <div class="dashboard-nav-item" onclick="switchDashboardTab('social')">
                    <i class="fas fa-check-circle"></i>
                    <span data-i18n="nav_social_audit">Social Audit</span>
                </div>
                <div class="dashboard-nav-item" onclick="switchDashboardTab('ebooks')">
                    <i class="fas fa-book"></i>
                    <span data-i18n="nav_ebooks">E-books</span>
                </div>
                <div class="dashboard-nav-item" onclick="switchDashboardTab('analytics')">
                    <i class="fas fa-chart-line"></i>
                    <span data-i18n="nav_analytics">Analytics</span>
                </div>
                <div class="dashboard-nav-item" onclick="window.location.href='/trendlens/dashboard.html'">
                    <i class="fas fa-cog"></i>
                    <span data-i18n="nav_settings">Settings</span>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="dashboard-main">
            <!-- Header -->
            <div class="dashboard-header">
                <h1 data-i18n="dashboard_title">Dashboard</h1>
                <div class="dashboard-header-search">
                    <div class="dashboard-search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="Search stock, order, etc" data-i18n-placeholder="search_placeholder">
                            </div>
                    <button class="dashboard-nav-item" style="padding: 0.5rem 1rem; margin: 0;">
                        <i class="fas fa-bell"></i>
                    </button>
                    <button class="dashboard-nav-item" style="padding: 0.5rem 1rem; margin: 0;">
                        <i class="fas fa-user-circle"></i>
                    </button>
                            </div>
                            </div>

            <!-- Stats Cards -->
            <div class="dashboard-stats-grid">
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-card-header">
                        <div class="dashboard-stat-card-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                    </div>
                    <div class="dashboard-stat-card-value" id="statTotalSales">$983,410</div>
                    <div class="dashboard-stat-card-label" data-i18n="stat_total_sales">Total Sales</div>
                    <div class="dashboard-stat-card-trend positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+3.34% <span data-i18n="vs_last_week">vs last week</span></span>
                                </div>
                            </div>
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-card-header">
                        <div class="dashboard-stat-card-icon">
                            <i class="fas fa-shopping-cart"></i>
                                </div>
                            </div>
                    <div class="dashboard-stat-card-value" id="statTotalOrders">58,375</div>
                    <div class="dashboard-stat-card-label" data-i18n="stat_total_orders">Total Orders</div>
                    <div class="dashboard-stat-card-trend negative">
                        <i class="fas fa-arrow-down"></i>
                        <span>-2.89% <span data-i18n="vs_last_week">vs last week</span></span>
                                </div>
                            </div>
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-card-header">
                        <div class="dashboard-stat-card-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                    </div>
                    <div class="dashboard-stat-card-value" id="statTotalVisitors">237,782</div>
                    <div class="dashboard-stat-card-label" data-i18n="stat_total_visitors">Total Visitors</div>
                            </div>
                        </div>

            <!-- Dashboard Tab Content -->
            <div id="dashboardTabContent">
                <!-- Exploding Products Tab -->
                <div id="dashboardTabExploding" class="dashboard-tab-content" style="display: none;">
                    <div class="dashboard-card">
                        <div class="dashboard-card-header">
                            <h2 class="dashboard-card-title" data-i18n="exploding_products_title">المنتجات المنفجرة</h2>
                    </div>
                        <div class="exploding-products-grid" id="dashboardExplodingProducts">
                            <div class="text-center py-8" style="color: var(--text-muted);">
                                <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                                <div data-i18n="generic.loading">جاري التحميل...</div>
                </div>
                        </div>
                    </div>
                </div>

                <!-- Social Audit Tab -->
                <div id="dashboardTabSocial" class="dashboard-tab-content" style="display: none;">
                    <div class="social-audit-card">
                        <div class="dashboard-card-header">
                            <h2 class="dashboard-card-title" data-i18n="social_audit_title">فحص حسابات السوشيال</h2>
                        </div>
                        <div class="social-audit-input-group">
                            <input type="text" class="social-audit-input" id="socialAuditInput" placeholder="رابط الحساب أو اسم المستخدم..." data-i18n-placeholder="social_audit_placeholder">
                            <button class="social-audit-btn" onclick="performSocialAudit()" data-i18n="social_audit_btn">فحص</button>
                        </div>
                        <div class="social-audit-results" id="socialAuditResults">
                            <h3 class="text-lg font-bold mb-4" data-i18n="social_audit_results">آخر الفحوصات</h3>
                            <div id="socialAuditHistory">
                                <p class="text-center py-4" style="color: var(--text-muted);" data-i18n="no_audits">لا توجد فحوصات سابقة. ابدأ بفحص حسابك الآن.</p>
                    </div>
                </div>
            </div>
        </div>

                <!-- E-books Marketplace Tab -->
                <div id="dashboardTabEbooks" class="dashboard-tab-content" style="display: none;">
                    <div class="dashboard-card">
                        <div class="dashboard-card-header">
                            <h2 class="dashboard-card-title" data-i18n="ebooks_marketplace_title">سوق الكتب الإلكترونية</h2>
                            <a href="/trendlens/books.html" class="text-primary text-sm" data-i18n="view_all">عرض الكل</a>
                        </div>
                        <div class="ebooks-marketplace-grid" id="dashboardEbooksGrid">
                            <div class="text-center py-8" style="color: var(--text-muted);">
                                <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                                <div data-i18n="generic.loading">جاري التحميل...</div>
                    </div>
                        </div>
                    </div>
                </div>

                <!-- Analytics Tab -->
                <div id="dashboardTabAnalytics" class="dashboard-tab-content" style="display: none;">
                    <div class="dashboard-content-grid">
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="revenue_analytics">Revenue Analytics</h2>
                                <select class="text-sm bg-transparent border border-white/20 rounded px-2 py-1">
                                    <option data-i18n="last_8_days">Last 8 Days</option>
                                </select>
                    </div>
                            <canvas id="revenueChart" class="dashboard-chart"></canvas>
                </div>
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="top_categories">Top Categories</h2>
                                <a href="#" class="text-primary text-sm" data-i18n="see_all">See All</a>
                            </div>
                            <canvas id="categoriesChart" class="dashboard-chart"></canvas>
                        </div>
            </div>
        </div>

                <!-- Default Dashboard Tab -->
                <div id="dashboardTabDashboard" class="dashboard-tab-content">
                    <!-- Charts Row 1: Revenue Analytics -->
                    <div class="dashboard-card mb-6">
                        <div class="dashboard-card-header">
                            <h2 class="dashboard-card-title" data-i18n="revenue_analytics">Revenue Analytics</h2>
                            <select class="text-sm bg-transparent border border-white/20 rounded px-2 py-1 text-white" id="revenuePeriodSelect">
                                <option data-i18n="last_8_days">Last 8 Days</option>
                                <option data-i18n="last_30_days">Last 30 Days</option>
                                <option data-i18n="last_90_days">Last 90 Days</option>
                            </select>
            </div>
                        <canvas id="revenueChartMain" class="dashboard-chart-large"></canvas>
        </div>

                    <!-- Charts Row 2: Multiple Charts -->
                    <div class="dashboard-content-grid mb-6">
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="top_categories">Top Categories</h2>
                                <a href="#" class="text-primary text-sm" data-i18n="see_all">See All</a>
                            </div>
                            <canvas id="categoriesChartMain" class="dashboard-chart-medium"></canvas>
                        </div>
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="monthly_target">Monthly Target</h2>
                            </div>
                            <div class="relative" style="min-height: 190px;">
                                <!-- Gauge Chart Container -->
                                <div class="relative w-full flex items-center justify-center" style="height: 140px; margin-bottom: 1rem; position: relative;">
                                    <canvas id="targetGaugeChart" style="width: 140px !important; height: 140px !important; max-width: 140px !important; max-height: 140px !important; aspect-ratio: 1 / 1 !important; display: block !important; margin: 0 auto !important;"></canvas>
                                    <!-- Percentage Text Overlay - Centered in donut -->
                                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                        <div class="text-3xl font-bold mb-1" style="color: var(--text-main);" id="targetPercentage">85%</div>
                                        <div class="text-xs" style="color: var(--text-muted);"><span data-i18n="from_last_month">from last month</span> <span style="color: var(--success);">+8.02%</span></div>
                                    </div>
                                </div>
                                <!-- Target and Revenue Info - Target on left, Revenue on right -->
                                <div class="grid grid-cols-2 gap-4 mt-4">
                                    <div class="text-center">
                                        <div class="text-xs mb-1" style="color: var(--text-muted);" data-i18n="target">Target</div>
                                        <div class="text-lg font-bold" style="color: var(--text-main);">$600,000</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-xs mb-1" style="color: var(--text-muted);" data-i18n="revenue">Revenue</div>
                                        <div class="text-lg font-bold" style="color: var(--text-main);">$510,000</div>
                                    </div>
                                </div>
                            </div>
            </div>
        </div>

                    <!-- Charts Row 3: Conversion & Traffic -->
                    <div class="dashboard-content-grid mb-6">
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="conversion_rate">Conversion Rate</h2>
                                <select class="text-sm bg-transparent border border-white/20 rounded px-2 py-1 text-white">
                                    <option data-i18n="this_week">This Week</option>
                                    <option data-i18n="this_month">This Month</option>
                                </select>
            </div>
                            <canvas id="conversionChart" class="dashboard-chart-medium"></canvas>
        </div>
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="traffic_sources">Traffic Sources</h2>
                            </div>
                            <canvas id="trafficChart" class="dashboard-chart-medium"></canvas>
                        </div>
                    </div>
                    
                    <!-- Content Row: Products & Social -->
                    <div class="dashboard-content-grid mb-6">
                        <div class="dashboard-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="exploding_products_title">Exploding Products</h2>
                            </div>
                            <div class="exploding-products-grid" id="dashboardExplodingProductsMain">
                                <!-- Will be populated by JS -->
                            </div>
                        </div>
                        <div class="social-audit-card">
                            <div class="dashboard-card-header">
                                <h2 class="dashboard-card-title" data-i18n="social_audit_title">Social Audit</h2>
                            </div>
                            <div class="social-audit-input-group">
                                <input type="text" class="social-audit-input" id="socialAuditInputMain" placeholder="رابط الحساب أو اسم المستخدم..." data-i18n-placeholder="social_audit_placeholder">
                                <button class="social-audit-btn" onclick="performSocialAudit('main')" data-i18n="social_audit_btn">فحص</button>
                            </div>
                            <div class="social-audit-results" id="socialAuditResultsMain" style="margin-top: 1rem;">
                                <div id="socialAuditHistoryMain">
                                    <p class="text-gray-400 text-sm" data-i18n="no_audits">لا توجد فحوصات سابقة</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- E-books Row -->
                    <div class="dashboard-card">
                        <div class="dashboard-card-header">
                            <h2 class="dashboard-card-title" data-i18n="ebooks_marketplace_title">E-books Marketplace</h2>
                            <a href="/trendlens/books.html" class="text-primary text-sm" data-i18n="view_all">See All</a>
                        </div>
                        <div class="ebooks-marketplace-grid" id="dashboardEbooksGridMain">
                            <!-- Will be populated by JS -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>


    <!-- Section 3: Live Signals Strip -->
    <section class="signals-strip">
        <div class="signals-strip-content">
            <div class="signal-item">
                <i class="fas fa-ship"></i>
                <span data-i18n="signal_jeddah">Port of Jeddah — Congestion: Low — Delay: +4h</span>
            </div>
            <div class="signal-item">
                <i class="fas fa-ship"></i>
                <span data-i18n="signal_shanghai">Port of Shanghai — Congestion: High — Delay: +21h</span>
            </div>
            <div class="signal-item">
                <i class="fas fa-satellite"></i>
                <span data-i18n="signal_global">Global Shipping Index: Stable</span>
            </div>
        </div>
    </section>

    <!-- Section 4: Analytics Snapshot (Homepage) -->
    <section class="main-container-new mb-10">
        <div class="grid md:grid-cols-2 gap-4 items-stretch">
            <!-- Left: Metrics -->
            <div class="bg-black/40 border border-white/10 rounded-2xl p-4 md:p-5">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h2 class="text-lg md:text-xl font-semibold mb-1" data-i18n="analytics.overview.title">
                            لقطة تحليلات سريعة
                        </h2>
                        <p class="text-xs md:text-sm text-gray-400" data-i18n="analytics.overview.subtitle">
                            نظرة خاطفة على الإشارات التي يتتبعها ترندلينس لحسابك.
                        </p>
                    </div>
                    <div class="text-[11px] md:text-xs text-emerald-400" id="analyticsStatusText" data-i18n="analytics.overview.loading">
                        جاري تحميل التحليلات…
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-3 mt-4 text-xs md:text-sm">
                    <div class="bg-black/40 rounded-xl p-3 border border-white/5">
                        <div class="text-[11px] md:text-xs text-gray-400 mb-1" data-i18n="analytics.overview.total">
                            إجمالي أحداث التحليل
                        </div>
                        <div class="text-lg md:text-2xl font-bold text-primary" id="analyticsTotalEvents">0</div>
                    </div>
                    <div class="bg-black/40 rounded-xl p-3 border border-white/5">
                        <div class="text-[11px] md:text-xs text-gray-400 mb-1" data-i18n="analytics.overview.products">
                            إشارات المنتجات المنفجرة
                        </div>
                        <div class="text-lg md:text-2xl font-bold text-emerald-400" id="analyticsProductsCount">0</div>
                    </div>
                    <div class="bg-black/40 rounded-xl p-3 border border-white/5">
                        <div class="text-[11px] md:text-xs text-gray-400 mb-1">
                            <span data-i18n="analytics.overview.shipping">إشارات الشحن</span>
                            <span class="mx-1 text-gray-600">/</span>
                            <span data-i18n="analytics.overview.ads">إشارات الإعلانات</span>
                        </div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-lg md:text-2xl font-bold text-sky-400" id="analyticsShippingCount">0</span>
                            <span class="text-sm md:text-base text-gray-500">/</span>
                            <span class="text-lg md:text-2xl font-bold text-amber-300" id="analyticsAdsCount">0</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Right: How to read it -->
            <div class="bg-black/30 border border-white/10 rounded-2xl p-4 md:p-5 flex flex-col justify-between">
                <div>
                    <h3 class="text-sm md:text-base font-semibold mb-2" data-i18n="analytics.overview.hint_title">
                        كيف تستخدم هذه اللقطة؟
                    </h3>
                    <ul class="list-disc list-inside text-xs md:text-sm text-gray-300 space-y-1">
                        <li data-i18n="analytics.overview.hint_line1">
                            استخدم إشارات المنتجات المنفجرة لاختيار منتج واحد يستحق ميزانية الاختبار القادمة.
                        </li>
                        <li data-i18n="analytics.overview.hint_line2">
                            إشارات الشحن والإعلانات تساعدك تتجنب إطلاق منتج في سوق مزدحم أو لوجستيك معطّل.
                        </li>
                    </ul>
                </div>
                <div class="mt-3 text-[11px] md:text-xs text-gray-500">
                    <span>TrendLens Analytics •</span>
                    <span class="ml-1">Sample dashboard snapshot</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Section 5: AI Brain & Automations -->
    <section class="main-container-new ai-brain-section">
        <div>
            <h2 class="text-2xl font-bold mb-3" data-i18n="ai_brain_title">TrendLens AI Brain</h2>
            <p class="text-gray-300 mb-4" data-i18n="ai_brain_desc">مساعد تحليلي يعطيك خطوات تنفيذية وليست مجرد أرقام.</p>
            <ul class="space-y-2 mb-6 text-gray-300">
                <li>• تحليل المنتجات</li>
                <li>• بناء استراتيجيات</li>
                <li>• تقييم المخاطر</li>
            </ul>
            <button onclick="openAuthModal('register')" class="hero-cta-btn bg-primary text-black" data-i18n="ai_brain_cta">Launch AI Assistant</button>
        </div>
        <div class="ai-chat-snapshot">
            <div class="mb-3">
                <div class="text-sm text-gray-400 mb-1" data-i18n="chat_user">User:</div>
                <div class="text-sm text-gray-200" data-i18n="chat_user_msg">ما أفضل منتج للسوق السعودي الآن؟</div>
            </div>
            <div class="mb-3">
                <div class="text-sm text-gray-400 mb-1" data-i18n="chat_ai">TrendLens AI:</div>
                <div class="text-sm text-gray-200" data-i18n="chat_ai_msg">بناءً على البيانات الحالية، أدوات المطبخ في السعودية تشهد نموًا قويًا (+82%). أنصح بمنتج واحد من هذه الفئة مع حملة إعلانية تجريبية 7 أيام.</div>
            </div>
            <div class="text-xs text-gray-500" data-i18n="chat_example">Real example based on your data</div>
        </div>
    </section>

    <!-- Section 6: Small Footer -->
    <footer class="main-container-new footer-compact">
        <div class="flex items-center justify-between">
            <div class="text-gray-400" data-i18n="footer_copyright">TrendLens © 2025 – Tangleon LLC</div>
            <div class="footer-links">
                <a href="#" data-i18n="footer_privacy">Privacy</a>
                <span class="text-gray-500">•</span>
                <a href="#" data-i18n="footer_terms">Terms</a>
                <span class="text-gray-500">•</span>
                <a href="#" data-i18n="footer_contact">Contact</a>
            </div>
        </div>
    </footer>

    <!-- SEO safe keywords (accessible) -->
    <div class="sr-only" aria-hidden="false">
        تحليلات الترند، ترندات المنتجات، توريد، أسعار الشحن، ذكاء تسويقي، تحليل حسابات السوشيال، توقع الطلب، Amazon FBA، Helium10 بديل، Keepa بديل، TikTok Insights، YouTube Trends، إدارة النمو، تقارير PDF، AI Insights، Forecast، Explain، Global Analysis، RTL، عربي/إنجليزي.
    </div>
    <style>
        .sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    </style>

    <!-- Chat Support Widget -->
    <div id="chatWidget" class="fixed bottom-6 right-6 z-50">
        <!-- Chat Toggle Button -->
        <button id="chatToggle" onclick="toggleChat()" class="bg-primary text-black p-4 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 hover:scale-110">
            <i class="fas fa-comments text-2xl"></i>
            <span id="chatBadge" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-6 w-6 flex items-center justify-center hidden">1</span>
        </button>
        
        <!-- Chat Window -->
        <div id="chatWindow" class="hidden absolute bottom-20 right-0 w-80 h-96 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
            <!-- Chat Header -->
            <div class="bg-primary text-black p-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-black rounded-full flex items-center justify-center">
                        <i class="fas fa-headset text-primary text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold" data-i18n="support_team">فريق الدعم</h3>
                        <p class="text-xs opacity-75" data-i18n="online_now">متصل الآن</p>
                    </div>
                </div>
                <button onclick="toggleChat()" class="text-black hover:text-gray-600 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Chat Messages -->
            <div id="chatMessages" class="h-64 overflow-y-auto p-4 space-y-3 bg-gray-50">
                <!-- Welcome Message -->
                <div class="flex items-start gap-2">
                    <div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-robot text-black text-xs"></i>
                    </div>
                    <div class="bg-white rounded-lg p-3 shadow-sm max-w-xs">
                        <p class="text-sm text-gray-800" data-i18n="welcome_message">مرحباً! كيف يمكنني مساعدتك اليوم؟</p>
                        <p class="text-xs text-gray-500 mt-1">الآن</p>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="flex flex-wrap gap-2 mt-3">
                    <button onclick="sendQuickMessage('billing')" class="bg-primary text-black px-3 py-1 rounded-full text-xs hover:bg-yellow-500 transition-colors" data-i18n="quick_billing">الفوترة</button>
                    <button onclick="sendQuickMessage('technical')" class="bg-primary text-black px-3 py-1 rounded-full text-xs hover:bg-yellow-500 transition-colors" data-i18n="quick_technical">مشاكل تقنية</button>
                    <button onclick="sendQuickMessage('feature')" class="bg-primary text-black px-3 py-1 rounded-full text-xs hover:bg-yellow-500 transition-colors" data-i18n="quick_feature">طلب ميزة</button>
                </div>
            </div>
            
            <!-- Chat Input -->
            <div class="p-4 border-t border-gray-200 bg-white">
                <div class="flex gap-2">
                    <input type="text" id="chatInput" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" data-i18n-placeholder="type_message">
                    <button onclick="sendMessage()" class="bg-primary text-black px-4 py-2 rounded-lg hover:bg-yellow-500 transition-colors">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-2" data-i18n="response_time">متوسط وقت الرد: أقل من دقيقة</p>
            </div>
        </div>
    </div>

    <!-- Auth Modal (Login/Register) -->
    <div id="authModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-stretch justify-center z-50 hidden">
        <div class="auth-modal-panel glass-effect rounded-2xl p-6 sm:p-8 w-full relative">
            <button onclick="closeAuthModal()" class="absolute top-4 left-4 text-gray-400 hover:text-white text-xl z-10">
                <i class="fas fa-times"></i>
            </button>

            <div class="auth-modal-scroll mt-10 sm:mt-0">
                <!-- Tabs -->
                <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mb-6">
                    <button id="authTabLogin" onclick="switchAuthTab('login')" class="flex-1 py-2 px-4 rounded-lg bg-primary text-black font-semibold" data-i18n="auth_login_tab">
                        تسجيل الدخول
                    </button>
                    <button id="authTabRegister" onclick="switchAuthTab('register')" class="flex-1 py-2 px-4 rounded-lg border border-primary text-primary hover:bg-primary hover:text-black transition-colors" data-i18n="auth_register_tab">
                        إنشاء حساب
                    </button>
                </div>

                <!-- Login Form -->
                <div id="loginForm" class="auth-form space-y-3 sm:space-y-4">
                    <h3 class="text-2xl font-bold text-primary mb-4" data-i18n="auth_login_title">تسجيل الدخول</h3>
                    
                    <!-- Social Login Buttons -->
                    <div id="socialLoginButtons" class="space-y-2">
                        <button id="googleLoginBtn" onclick="handleGoogleLogin()" class="w-full flex items-center justify-center gap-3 bg-white text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors" style="display: flex;">
                            <i class="fab fa-google text-red-500"></i>
                            <span data-i18n="auth_login_google">تسجيل الدخول بحساب Google</span>
                        </button>
                        <button id="appleLoginBtn" onclick="handleAppleLogin()" class="w-full flex items-center justify-center gap-3 bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition-colors" style="display: none;">
                            <i class="fab fa-apple"></i>
                            <span data-i18n="auth_login_apple">تسجيل الدخول بحساب Apple</span>
                        </button>
                    </div>
                    
                    <div id="socialLoginDivider" class="flex items-center gap-2 my-4">
                        <div class="flex-1 h-px bg-white/20"></div>
                        <span class="text-sm text-gray-400" data-i18n="auth_or">أو</span>
                        <div class="flex-1 h-px bg-white/20"></div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold mb-2" data-i18n="auth_email">البريد الإلكتروني</label>
                        <input type="email" id="loginEmail" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_email_placeholder" placeholder="example@email.com">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-2" data-i18n="auth_password">كلمة المرور</label>
                        <input type="password" id="loginPassword" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_password_placeholder" placeholder="••••••••">
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" id="rememberMe" class="rounded">
                            <span data-i18n="auth_remember">تذكرني</span>
                        </label>
                        <a href="#" class="text-primary text-sm hover:underline" data-i18n="auth_forgot">نسيت كلمة المرور؟</a>
                    </div>
                    <button onclick="handleLogin()" class="w-full bg-primary text-black py-3 rounded-lg font-semibold hover:bg-yellow-500 transition-colors">
                        <i class="fas fa-sign-in-alt ml-2"></i><span data-i18n="auth_login_btn">تسجيل الدخول</span>
                    </button>
                    <div id="loginError" class="hidden text-red-400 text-sm mt-2"></div>
                </div>

                <!-- Register Form -->
                <div id="registerForm" class="auth-form space-y-3 sm:space-y-4 hidden">
                    <h3 class="text-2xl font-bold text-primary mb-4" data-i18n="auth_register_title">إنشاء حساب جديد</h3>
                    
                    <!-- Social Register Buttons -->
                    <div id="socialRegisterButtons" class="space-y-2">
                        <button id="googleRegisterBtn" onclick="handleGoogleRegister()" class="w-full flex items-center justify-center gap-3 bg-white text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors" style="display: flex;">
                            <i class="fab fa-google text-red-500"></i>
                            <span data-i18n="auth_register_google">التسجيل بحساب Google</span>
                        </button>
                        <button id="appleRegisterBtn" onclick="handleAppleRegister()" class="w-full flex items-center justify-center gap-3 bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition-colors" style="display: none;">
                            <i class="fab fa-apple"></i>
                            <span data-i18n="auth_register_apple">التسجيل بحساب Apple</span>
                        </button>
                    </div>
                    
                    <div id="socialRegisterDivider" class="flex items-center gap-2 my-4">
                        <div class="flex-1 h-px bg-white/20"></div>
                        <span class="text-sm text-gray-400" data-i18n="auth_or">أو</span>
                        <div class="flex-1 h-px bg-white/20"></div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold mb-2" data-i18n="auth_full_name">الاسم الكامل</label>
                        <input type="text" id="registerName" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_full_name_placeholder" placeholder="الاسم الكامل">
                    </div>
                    <div class="register-two-col">
                        <div class="register-field">
                            <label class="block text-sm font-semibold mb-2" data-i18n="auth_email">البريد الإلكتروني</label>
                            <input type="email" id="registerEmail" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_email_placeholder" placeholder="example@email.com">
                        </div>
                        <div class="register-field">
                            <label class="block text-sm font-semibold mb-2" data-i18n="auth_phone">رقم الجوال <span class="text-gray-400 text-xs" data-i18n="auth_optional">(اختياري)</span></label>
                            <div class="flex flex-col sm:flex-row gap-2">
                                <select id="registerCountryCode" class="px-3 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary text-sm sm:min-w-[120px]">
                                    <!-- Country codes will be populated by JavaScript -->
                                </select>
                                <input type="tel" id="registerPhone" class="flex-1 px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_phone_placeholder" placeholder="501234567">
                            </div>
                        </div>
                    </div>
                    <div class="register-two-col">
                        <div class="register-field">
                            <label class="block text-sm font-semibold mb-2" data-i18n="auth_password">كلمة المرور</label>
                            <input type="password" id="registerPassword" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_password_placeholder" placeholder="••••••••">
                        </div>
                        <div class="register-field">
                            <label class="block text-sm font-semibold mb-2" data-i18n="auth_confirm_password">تأكيد كلمة المرور</label>
                            <input type="password" id="registerPasswordConfirm" class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" data-i18n-placeholder="auth_confirm_password_placeholder" placeholder="••••••••">
                        </div>
                    </div>
                    <div class="flex items-start gap-2">
                        <input type="checkbox" id="agreeTerms" class="mt-1 rounded">
                        <label for="agreeTerms" class="text-sm text-gray-300">
                            <span data-i18n="auth_agree">أوافق على</span> <a href="/trendlens/terms.html" target="_blank" class="text-primary hover:underline" data-i18n="auth_terms">الشروط والأحكام</a> <span data-i18n="auth_and">و</span> <a href="/trendlens/privacy.html" target="_blank" class="text-primary hover:underline" data-i18n="auth_privacy">سياسة الخصوصية</a>
                        </label>
                    </div>
                    <button onclick="handleRegister()" class="w-full bg-primary text-black py-3 rounded-lg font-semibold hover:bg-yellow-500 transition-colors">
                        <i class="fas fa-user-plus ml-2"></i><span data-i18n="auth_register_btn">أكمل التسجيل</span>
                    </button>
                    <div id="registerError" class="hidden text-red-400 text-sm mt-2"></div>
                    <div id="registerSuccess" class="hidden text-green-400 text-sm mt-2"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Partner Register Modal -->
    <div id="partnerRegisterModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 hidden">
        <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4 relative">
            <button onclick="closePartnerRegisterModal()" class="absolute top-4 left-4 text-gray-400 hover:text-white text-xl">
                <i class="fas fa-times"></i>
            </button>
            
            <h3 class="text-2xl font-bold text-primary mb-6" data-i18n="partner_register_title">تسجيل شريك جديد</h3>
            
            <form id="partnerRegisterForm" class="space-y-4" onsubmit="handlePartnerRegister(event)">
                <div>
                    <label class="block text-sm font-semibold mb-2" data-i18n="partner_full_name">الاسم الكامل</label>
                    <input type="text" id="partnerFullName" required class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" placeholder="الاسم الكامل">
                </div>
                
                <div>
                    <label class="block text-sm font-semibold mb-2" data-i18n="partner_email">البريد الإلكتروني</label>
                    <input type="email" id="partnerEmail" required class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" placeholder="example@email.com">
                </div>
                
                <div>
                    <label class="block text-sm font-semibold mb-2" data-i18n="partner_phone">رقم الهاتف</label>
                    <input type="tel" id="partnerPhone" required class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" placeholder="501234567">
                </div>
                
                <div>
                    <label class="block text-sm font-semibold mb-2" data-i18n="partner_business_type">نوع النشاط</label>
                    <select id="partnerBusinessType" required class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary">
                        <option value="">اختر نوع النشاط</option>
                        <option value="شريك">شريك</option>
                        <option value="بائع كتب الكترونية">بائع كتب إلكترونية</option>
                        <option value="الجميع">الجميع</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold mb-2" data-i18n="partner_password">كلمة المرور</label>
                    <input type="password" id="partnerPassword" required class="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" placeholder="••••••••">
                </div>
                
                <div class="flex items-start gap-2">
                    <input type="checkbox" id="partnerAgreeTerms" required class="mt-1 rounded">
                    <label for="partnerAgreeTerms" class="text-sm text-gray-300">
                        <span data-i18n="auth_agree">أوافق على</span> <a href="/trendlens/terms.html" target="_blank" class="text-primary hover:underline" data-i18n="auth_terms">الشروط والأحكام</a> <span data-i18n="auth_and">و</span> <a href="/trendlens/privacy.html" target="_blank" class="text-primary hover:underline" data-i18n="auth_privacy">سياسة الخصوصية</a>
                    </label>
                </div>
                
                <button type="submit" class="w-full bg-success text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition-colors">
                    <i class="fas fa-handshake ml-2"></i><span data-i18n="partner_register_btn">تسجيل كشريك</span>
                </button>
                
                <div id="partnerRegisterError" class="hidden text-red-400 text-sm mt-2"></div>
                <div id="partnerRegisterSuccess" class="hidden text-green-400 text-sm mt-2"></div>
            </form>
        </div>
    </div>


    <script>
        // API Base URL - استخدام المسار النسبي للإنتاج
        // API Base URL - استخدام المسار النسبي للإنتاج
        // إذا كان nginx يوجّه /trendlens/api → /api في الـ backend، استخدم '/trendlens/api'
        // إذا كان الـ API مباشر على /api، استخدم '/api'
        const API_BASE = '/api';
        
        // Global UI Configuration (auto-detect if not set)
        const savedLang = localStorage.getItem('tl_lang');
        const browserLang = ((navigator.language || '').toLowerCase().startsWith('en')) ? 'en' : 'ar';
        window.__UICFG = { ui: { locale: savedLang || browserLang || 'en' } };
        
        // دالة تحويل الأرقام من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (0-9)
        function toLatinDigits(input) {
            if (input === null || input === undefined) return input;
            const map = {
                '٠': '0', '١': '1', '٢': '2', '٣': '3', '٤': '4',
                '٥': '5', '٦': '6', '٧': '7', '٨': '8', '٩': '9'
            };
            return String(input).replace(/[٠-٩]/g, d => map[d] || d);
        }
        
        // دالة تنسيق الأرقام - استخدام الأرقام اللاتينية (0-9) دائماً
        function formatNumber(num, options = {}) {
            const lang = window.__UICFG?.ui?.locale || 'en';
            const locale = lang === 'ar' ? 'ar-SA-u-ca-gregory' : 'en-US';
            
            // استخدام الأرقام اللاتينية (0-9) دائماً
            const formatted = new Intl.NumberFormat(locale, {
                ...options,
                numberingSystem: 'latn'  // استخدام الأرقام اللاتينية (0-9)
            }).format(num);
            
            return toLatinDigits(formatted);
        }
        
        // دالة تنسيق التاريخ - استخدام الأرقام اللاتينية (0-9) دائماً
        function formatDate(date, options = {}) {
            const lang = window.__UICFG?.ui?.locale || 'en';
            const locale = lang === 'ar' ? 'ar-SA-u-ca-gregory' : 'en-US';
            
            // استخدام الأرقام اللاتينية (0-9) دائماً
            const formatted = new Date(date).toLocaleString(locale, {
                ...options,
                numberingSystem: 'latn'  // استخدام الأرقام اللاتينية (0-9)
            });
            
            return toLatinDigits(formatted);
        }
        
        // دالة تحويل الأرقام - للتوافق مع الكود القديم
        function toArabicNumerals(num) {
            // نحول الأرقام إلى الشكل اللاتيني (0-9) دائماً
            return toLatinDigits(num);
        }
        
        // Pricing (monthly/yearly) constants
        const PLAN_PRICES = {
            basic: { monthly: 29.99, yearly: 287.99 },
            pro: { monthly: 59.99, yearly: 575.99 },
            enterprise: { monthly: 199.99, yearly: 1919.99 }
        };
        
        // i18n external dictionaries cache
        const __PUBLIC_I18N__ = { ar: null, en: null };
        async function loadPublicDict(lang){
            if (__PUBLIC_I18N__[lang]) return __PUBLIC_I18N__[lang];
            try {
                const res = await fetch(`/i18n/public_${lang}.json`, { cache:'no-store' });
                if (res.ok) { __PUBLIC_I18N__[lang] = await res.json(); return __PUBLIC_I18N__[lang]; }
            } catch (_) {}
            __PUBLIC_I18N__[lang] = {}; return {};
        }

        // دالة تحويل جميع الأرقام في النص أو HTML
        function convertNumbersInText(text) {
            if (!text || typeof text !== 'string') return text;
            return toLatinDigits(text);
        }
        
        // ===== نظام موحد لتسجيل الأخطاء وعرضها =====
        function logAPIError(section, endpoint, error, response = null) {
            const timestamp = new Date().toISOString();
            const errorDetails = {
                timestamp,
                section,
                endpoint,
                error: error.message || String(error),
                status: response?.status || null,
                statusText: response?.statusText || null,
                url: response?.url || endpoint
            };
            
            // تسجيل مفصل في Console
            console.group(`❌ [${section}] API Error - ${timestamp}`);
            console.error('Endpoint:', endpoint);
            console.error('Error:', error);
            if (response) {
                console.error('Status:', response.status, response.statusText);
            }
            console.error('Full Details:', errorDetails);
            console.groupEnd();
            
            return errorDetails;
        }
        
        function showErrorToUser(containerId, message, isWarning = false) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            const errorClass = isWarning ? 'bg-warning/20 border-warning text-warning' : 'bg-danger/20 border-danger text-danger';
            const icon = isWarning ? 'fa-exclamation-triangle' : 'fa-exclamation-circle';
            
            container.innerHTML = `
                <div class="rounded-lg p-4 border ${errorClass}">
                    <div class="flex items-start">
                        <i class="fas ${icon} mt-1 ml-2"></i>
                        <div class="flex-1">
                            <div class="font-semibold mb-1">${isWarning ? 'تحذير' : 'خطأ في التحميل'}</div>
                            <div class="text-sm">${message}</div>
                            <div class="text-xs mt-2 opacity-75">تم استخدام بيانات تجريبية مؤقتاً</div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        function showLoadingState(containerId, message = 'جاري التحميل...') {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            container.innerHTML = `
                <div class="text-center py-6">
                    <i class="fas fa-spinner fa-spin text-primary text-2xl mb-2"></i>
                    <div class="text-gray-400 text-sm">${message}</div>
                </div>
            `;
        }
        
        function showSuccessState(containerId, message = 'تم التحميل بنجاح') {
            // يمكن استخدامها لإظهار رسالة نجاح مؤقتة
            const container = document.getElementById(containerId);
            if (!container) return;
            
            // إزالة رسالة النجاح بعد ثانيتين
            setTimeout(() => {
                if (container.querySelector('.success-message')) {
                    container.querySelector('.success-message').remove();
                }
            }, 2000);
        }
        
        // دالة تحويل الأرقام في عنصر HTML (نص أو HTML)
        function convertNumbersInElement(el) {
            if (!el) return;
            
            // تحويل textContent
            if (el.textContent) {
                const converted = toLatinDigits(el.textContent);
                if (converted !== el.textContent) {
                    el.textContent = converted;
                }
            }
            
            // تحويل placeholder
            if (el.placeholder) {
                const converted = toLatinDigits(el.placeholder);
                if (converted !== el.placeholder) {
                    el.placeholder = converted;
                }
            }
            
            // تحويل value
            if (el.value && el.tagName !== 'INPUT' || el.type === 'text' || el.type === 'number') {
                const converted = toLatinDigits(el.value);
                if (converted !== el.value) {
                    el.value = converted;
                }
            }
            
            // تحويل innerHTML (بحذر - فقط النصوص، ليس HTML tags)
            if (el.innerHTML && !el.innerHTML.match(/<[^>]+>/)) {
                const converted = toLatinDigits(el.innerHTML);
                if (converted !== el.innerHTML) {
                    el.innerHTML = converted;
                }
            }
        }
        
        // Apply i18n translations - Simple method like old page
        function applyI18n() {
            // الحصول على اللغة من مصادر متعددة
            const lang = window.__UICFG?.ui?.locale || 
                        localStorage.getItem('tl_lang') || 
                        localStorage.getItem('lang') || 
                        document.documentElement.lang || 
                        'ar';
            
            // تحديث window.__UICFG إذا لم يكن موجوداً
            if (!window.__UICFG) window.__UICFG = { ui: {} };
            window.__UICFG.ui.locale = lang;
            
            // تحميل القاموس العام إذا لم يكن محملاً
            (async function() {
                if (!__PUBLIC_I18N__[lang]) {
                    await loadPublicDict(lang);
                }
            })();
            
            const dict = { ...getTranslations(lang), ...(__PUBLIC_I18N__[lang]||{}) };
            const isRTL = (lang === 'ar' || lang === 'fa');
            
            // Apply text translations
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const k = el.getAttribute('data-i18n');
                
                // إخفاء النصوص الإنجليزية في الواجهة العربية
                if (isRTL && k && k.includes('_en')) {
                    el.style.display = 'none';
                    el.style.visibility = 'hidden';
                    el.style.opacity = '0';
                    el.style.height = '0';
                    el.style.margin = '0';
                    el.style.padding = '0';
                    return;
                }
                
                // في الواجهة الإنجليزية: استخدم النص الإنجليزي إذا كان متوفراً
                if (!isRTL && k && !k.includes('_en')) {
                    // إذا كان هناك ترجمة إنجليزية، استخدمها بدلاً من العربية
                    if (dict[k + '_en']) {
                        const translation = dict[k + '_en'];
                        if (translation.includes('<strong>') || translation.includes('<em>') || translation.includes('<span>') || translation.includes('<br>') || translation.includes('<a>')) {
                            el.innerHTML = convertNumbersInText(translation);
                        } else {
                            el.textContent = convertNumbersInText(translation);
                        }
                        convertNumbersInElement(el);
                        return;
                    }
                }
                
                if (dict[k]) {
                    // Check if the translation contains HTML tags
                    if (dict[k].includes('<strong>') || dict[k].includes('<em>') || dict[k].includes('<span>') || dict[k].includes('<br>') || dict[k].includes('<a>')) {
                        el.innerHTML = convertNumbersInText(dict[k]);
                    } else {
                        el.textContent = convertNumbersInText(dict[k]);
                    }
                    // تحويل الأرقام في العنصر بعد الترجمة
                    convertNumbersInElement(el);
                }
            });
            
            // تحديث خيارات select
            const intentSel = document.getElementById('aiIntent');
            if (intentSel) {
                Array.from(intentSel.options).forEach(option => {
                    const i18nKey = option.getAttribute('data-i18n');
                    if (i18nKey && dict[i18nKey]) {
                        option.textContent = convertNumbersInText(dict[i18nKey]);
                    }
                    // تحويل الأرقام في الخيار
                    convertNumbersInElement(option);
                });
            }
            
            // تحديث خيارات الفترة الزمنية للشموع المالية
            const candleIntervalSel = document.getElementById('candleInterval');
            if (candleIntervalSel) {
                Array.from(candleIntervalSel.options).forEach(option => {
                    const i18nKey = option.getAttribute('data-i18n');
                    if (i18nKey && dict[i18nKey]) {
                        option.textContent = convertNumbersInText(dict[i18nKey]);
                    }
                    // تحويل الأرقام في الخيار
                    convertNumbersInElement(option);
                });
            }
            
            // Update agent info card if it exists
            if (intentSel && typeof updateAgentInfo === 'function') {
                setTimeout(() => {
                    if (window.updateAgentInfo) window.updateAgentInfo();
                }, 100);
            }
            
            // Apply placeholders
            document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
                const k = el.getAttribute('data-i18n-placeholder');
                
                // إخفاء النصوص العربية في الواجهة الإنجليزية
                if (!isRTL && k && !k.includes('_en')) {
                    // إذا كان هناك ترجمة إنجليزية، استخدمها
                    if (dict[k + '_en']) {
                        el.placeholder = convertNumbersInText(dict[k + '_en']);
                        convertNumbersInElement(el);
                        return;
                    }
                }
                
                if (dict[k]) {
                    el.placeholder = convertNumbersInText(dict[k]);
                }
                // تحويل الأرقام في placeholder
                convertNumbersInElement(el);
            });
            
            // Set page direction and language
            document.documentElement.lang = lang;
            document.documentElement.dir = (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr';
            
            // إضافة lang="en" على العناصر التي تحتوي على أرقام لإجبار Chrome على استخدام الأرقام اللاتينية
            // هذا يساعد Chrome على عرض الأرقام بالشكل اللاتيني حتى لو كانت الصفحة عربية
            document.querySelectorAll('[data-i18n], [data-i18n-placeholder], input[type="number"], input[type="text"]').forEach(el => {
                // لا نضيف lang="en" على العناصر التي تحتوي على نص عربي فقط
                // لكن نضيفه على العناصر التي قد تحتوي على أرقام
                if (el.tagName === 'INPUT' && el.type === 'number') {
                    el.setAttribute('lang', 'en');
                }
            });
            
            // Set brand logos slider direction based on language
            const brandLogosStrip = document.getElementById('brandLogosStrip');
            if (brandLogosStrip) {
                brandLogosStrip.setAttribute('dir', (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr');
            }
            
                    // Title
                    const titleKey = 'page_title';
                    const title = dict[titleKey] || 'TrendLens';
                    document.title = title;
            
            // Adjust billing toggle labels order for Arabic
            const billingRow = document.getElementById('billingToggleRow');
            if (billingRow) {
                if (lang === 'ar') {
                    billingRow.classList.add('flex-row-reverse');
                    billingRow.classList.remove('flex-row');
                } else {
                    billingRow.classList.remove('flex-row-reverse');
                    billingRow.classList.add('flex-row');
                }
            }
        }
        
        // Get translations - Simple method like old page
        function getTranslations(lang) {
            if (lang === 'en') {
                return {
                    results_title: "Unified Search Results",
                            page_title: "TrendLens - Operational Intelligence Platform",
                            partner_dashboard: "Partner Dashboard",
                            candles_pair_label: "BTC/USDT Candles",
                            candles_chart_placeholder: "Candles chart",
                            candles_chart_note: "Will be connected to Chart.js or TradingView",
                            volume_chart_placeholder: "Volume chart",
                            shipping_chart_placeholder: "Shipping prices chart",
                            suppliers_chart_placeholder: "Suppliers comparison chart",
                            social_chart_placeholder: "Social chart",
                            status_completed: "Completed",
                            status_in_progress: "In progress",
                            books_title: "E-books",
                            books_view_all: "View all books",
                            view_more: "More",
                            ebook_badge: "E-book",
                            badge_best_selling: "Best Selling",
                            badge_fast_growing: "Fastest Growing",
                            badge_biz_favorite: "Business Favorite",
                            partner_summary: "Partner summary",
                            by_seller: "By:",
                            view_details: "Details",
                            add_to_favorites: "Add to Favorites",
                            added_to_favorites: "Added to favorites",
                            buy_now: "Buy Now",
                            ticker_title: "Operational Trends",
                            hero_title: "One console for all TrendLens intelligence",
                            hero_subtitle: "Connect stores, social accounts, and suppliers to let TrendLens AI surface trends, explosions, and logistics moves before they get crowded.",
                            hero_eyebrow: "Three AI models working for you",
                            hero_primary_cta: "Launch operational intelligence",
                            hero_secondary_cta: "Enter dashboard",
                            hero_models_label: "Choose analysis mode",
                            hero_models_title: "AI model board",
                            hero_model_core_badge: "Core model",
                            hero_model_core_title: "Product evaluation engine",
                            hero_model_core_desc: "Instantly rank any product or handle with supplier, demand, and logistics signals.",
                            hero_model_core_status: "Always on",
                            hero_model_assist_badge: "Smart aide",
                            hero_model_assist_title: "Smart assistant",
                            hero_model_assist_desc: "Turn your budget, markets, and platforms into ready-to-execute launch plans.",
                            hero_model_assist_status: "Beta access",
                            hero_model_trend_badge: "Trend AI",
                            hero_model_trend_title: "Trend AI assistant",
                            hero_model_trend_desc: "Monitor exploding markets and get alerts before the crowd notices.",
                            hero_model_trend_status: "Labs preview",
                            hero_console_label: "Command console",
                            hero_console_cta: "Register free",
                            hero_usage_title: "Model status",
                            hero_usage_sync: "Last sync 2 minutes ago",
                            hero_usage_core_desc: "Powers instant search and locks your daily AI quota.",
                            hero_usage_assist_desc: "Enabled for a limited closed beta.",
                            hero_usage_trend_desc: "Scans countries and fires urgent explosion alerts.",
                            hero_usage_status_active: "Active",
                            hero_usage_status_beta: "Beta",
                            hero_usage_status_labs: "Trend Labs",
                            happening_now: "Happening Now",
                            cta_try_search: "Try Global Search",
                            cta_view_candles: "View Candles Now",
                            btn_login: "Login",
                            btn_register: "Create Account",
                            partner_apply_en: "Join as Partner",
                            global_ai_analysis: "Open Global Analysis",
                            global_ai_analysis_loading: "Analyzing...",
                            global_ai_analysis_success: "Global analysis started — all smart assistants are now running.",
                            charts_title: "Candles & Charts",
                            tab_candles: "Candles (OHLC)",
                            tab_volume: "Volume & Price",
                            tab_shipping: "Shipping Cost",
                            tab_suppliers: "Supplier Prices",
                            tab_social: "Social Pulse",
                            card_products_title: "Product Explosions",
                            card_suppliers_title: "Top Suppliers",
                            card_shipping_title: "Shipping Pulse",
                            card_social_title: "Social Boosters",
                            card_market_title: "Market Candles",
                            card_ads_title: "🧠 Market Ads Now",
                            ads_description: "Watch the latest ads around the world, and learn from them how to design your next campaign.",
                            card_ai_title: "AI Insights",
                            card_ai_insights_title: "AI Insights",
                            loading_text: "Loading...",
                            data_status_placeholder: "Data status will be displayed after loading...",
                            visitor_label: "visitors",
                            btn_get_insight: "Get Insight",
                            btn_load: "Load",
                            btn_calculate_price: "Calculate Price",
                            smart_assistant_products: "AI Assistant — Product Analysis",
                            smart_assistant_candles: "AI Assistant — Candles Analysis",
                            smart_assistant_insights: "AI Assistant — Insights Analysis",
                            smart_assistant_suppliers: "AI Assistant — Suppliers Analysis",
                            smart_assistant_shipping: "AI Assistant — Port Status Analysis",
                            smart_assistant_ads: "AI Assistant — Market Ads Analysis",
                            smart_assistant_market: "AI Assistant — Stocks & Currencies Analysis",
                            ai_assistant_title: "AI Assistant",
                            ai_assistant_subtitle: "Choose the smart agent you need",
                            agent_trend_al_label: "Trend-Al",
                            agent_trend_al_short: "Detects rising products and market waves.",
                            agent_trend_al_description: "Analyzes TrendLens data to spot growing products, markets, or categories before they become crowded.",
                            agent_insight_al_label: "Insight-Al",
                            agent_insight_al_short: "Turns raw data into readable insights.",
                            agent_insight_al_description: "Combines shipping, suppliers, and financial candles to generate human-like explanations of what is happening.",
                            agent_seller_al_label: "Seller-Al",
                            agent_seller_al_short: "For sellers and merchants.",
                            agent_seller_al_description: "Helps merchants evaluate a product, estimate demand, and get suggestions for better listing and presentation.",
                            agent_copy_al_label: "Copy-Al",
                            agent_copy_al_short: "Creates marketing text.",
                            agent_copy_al_description: "Generates ad copies, product titles, and social captions in different tones for e-commerce.",
                            agent_alert_al_label: "Alert-Al",
                            agent_alert_al_short: "Monitors and alerts.",
                            agent_alert_al_description: "Watches key signals and sends an alert when there is an unusual spike, drop, or new opportunity.",
                            agent_price_al_label: "Price-Al",
                            agent_price_al_short: "Smart pricing.",
                            agent_price_al_description: "Suggests an optimal price range based on competition, demand signals, and supplier data.",
                            agent_pixel_al_label: "Pixel-Al",
                            agent_pixel_al_short: "Ad & pixel optimizer.",
                            agent_pixel_al_description: "Reads tracking pixels (Meta, TikTok, Google) and recommends fixing audiences, placements, or budgets.",
                            agent_fraud_al_label: "Fraud-Al",
                            agent_fraud_al_short: "Fraud monitoring.",
                            agent_fraud_al_description: "Detects suspicious or repeated actions and flags them for review to protect the platform.",
                            agent_support_al_label: "Support-Al",
                            agent_support_al_short: "Helps users.",
                            agent_support_al_description: "Answers common questions, guides users through the platform, and escalates issues to human support.",
                            btn_start_now: "Start Now",
                            ai_optional_image: "Image is optional for product analysis",
                            confidence_85: "Confidence 85%",
                            confidence_92: "Confidence 92%",
                            updated: "Updated",
                            hot: "Hot",
                            live: "Live",
                            ai: "AI",
                            btn_open_analysis: "Open Analysis",
                            btn_explain: "Explain to me",
                            // Feature titles and descriptions
                            feature_trends_title: "Operational Trends",
                            feature_trends_desc: "Real-time trend analysis",
                            feature_explosions_title: "Product Explosions",
                            feature_explosions_desc: "Early detection of products that suddenly spike in demand before competition gets crowded – with growth rate and confidence for each product.",
                            feature_ai_title: "Trend AI Assistant",
                            feature_ai_desc: "Ask the AI about the best product, best country, or best ad scenario… and get recommendations based on actual platform data.",
                            feature_social_title: "Social Scan",
                            feature_social_desc: "Comprehensive social media account scanning – content quality, engagement rate, signals, and pricing.",
                            // How it works section
                            how_it_works_title: "How It Works?",
                            step1_title: "Connect Your Data Sources",
                            step1_title_en: "Connect Your Data Sources",
                            step1_desc: "Stores, social accounts, suppliers, shipping",
                            step2_title: "Let TrendLens Analyze",
                            step2_title_en: "Let TrendLens Analyze",
                            step2_desc: "Trends, explosions, competitors",
                            step3_title: "Make Smarter Decisions",
                            step3_title_en: "Make Smarter Decisions",
                            step3_desc: "Product selection, ad campaigns, supplier, shipping route",
                            // Who is this for section
                            who_is_this_for_title: "Who Is This For?",
                            persona1_title: "Amazon / eBay / Etsy Seller",
                            persona1_title_en: "Amazon / eBay / Etsy Seller",
                            persona1_desc: "Discover winning products before competitors and increase sales by 300%",
                            persona2_title: "Independent Store Owner",
                            persona2_title_en: "Independent Store Owner",
                            persona2_desc: "Shopify / WooCommerce – Connect your store to TrendLens intelligence and increase profits",
                            persona3_title: "Marketing Agency / Social Media Marketer",
                            persona3_title_en: "Marketing Agency / Social Media Marketer",
                            persona3_desc: "Offer professional analytics to your clients and enhance the value of your services",
                            // Smart analysis
                            smart_analysis_title: "Smart Comprehensive Analysis",
                            smart_analysis_desc: "Run all smart assistants in one click for comprehensive analysis",
                            // Live pills
                            live_pill_1: "3,241 products analyzed in the last 24 hours",
                            live_pill_2: "19 shipping routes from Asia to the Gulf are being tracked now",
                            live_pill_3: "87 AI consultations given to traders today",
                            live_pill_4: "Last product explosion detected just 3 hours ago",
                            // Hero section
                            hero_search_placeholder: "Enter a product, category, or Instagram / TikTok account to analyze success probability...",
                            hero_search_example: "e.g., office chair, smartwatch, @brand_ksa",
                            hero_first_free_analysis: "First free analysis after registration",
                            snapshot_title: "Control Room Snapshot",
                            snapshot_subtitle: "Trial Preview – Demo Preview",
                            snapshot_overlay_text: "Full details available after login.",
                            snapshot_overlay_note: "This is just a mock snapshot from inside the control room.",
                            // Feature cards
                            feature_locked_subscription: "Locked – Unlock with subscription",
                            feature_try_now: "Try Now",
                            feature_overlay_text: "See a live example of this tool's analysis",
                            feature_preview_new_user: "Partial preview for new user",
                            feature_try_explosion: "Try one explosion shot",
                            feature_requires_ai_credit: "Requires AI credit",
                            feature_see_vague_answer: "See a vague trial answer",
                            feature_continuous_monitoring: "Continuous monitoring with paid plan",
                            feature_try_one_scan: "Try checking one account after registration",
                            // Trend AI
                            trend_ai_title: "Smart Trend Assistant (Trend AI Assistant)",
                            trend_ai_subtitle: "Ask the AI to analyze TrendLens trends and explosions data.",
                            trend_ai_placeholder: "Type your trend question here...",
                            trend_ai_button: "Ask Trend AI",
                            // CTA section
                            cta_successful_stores: "Successful stores don't wait for the market… they lead it",
                            cta_start_now_subtitle: "Connect your account and start seeing AI indicators on the products and accounts that matter to you.",
                            cta_start_now_button: "Continue registration",
                            // AI Insights
                            insight_symbol_placeholder: "Keyword or symbol (e.g., BTCUSDT or Ceramic Tiles)",
                            // Candles meta
                            candles_asset: "Asset:",
                            candles_timeframe: "Timeframe:",
                            candles_count: "Candles:",
                            candles_patterns: "Detected Patterns:",
                            candles_status: "Status:",
                            candles_table_time: "Time",
                            candles_table_note: "Showing last 10 candles (ready for TradingView Charts integration)",
                            // Port status
                            port_busy: "Busy",
                            port_smooth: "Smooth",
                            port_normal: "Normal",
                            port_wait_hours: "hours wait",
                            port_vessels_waiting: "vessels waiting",
                            // Suppliers
                            supplier_rating: "Rating",
                            supplier_shipments: "shipments",
                            supplier_months: "months",
                            supplier_top_buyer: "Top buyer:",
                            supplier_big_buyer: "Sells to big buyer",
                            supplier_low_risk: "Low risk",
                            supplier_contact_available: "Contact info available",
                            supplier_show_shipments: "Show shipments",
                            // General
                            unknown: "Unknown",
                            no_data_available: "No data available",
                            no_forecast_available: "No forecast available",
                            sources_not_specified: "Sources: Not specified",
                            live_data: "Live Data",
                            last_updated: "Last updated:",
                            // AI Insights
                            ai_insight_for: "AI Insight for",
                            sentiment: "Sentiment:",
                            momentum: "Momentum:",
                            volatility: "Volatility:",
                            social_heat: "Social Heat:",
                            ai_disclaimer_text: "⚠️ This is an automated, descriptive analysis based on available data and is not investment or financial advice.",
                            // Options
                            option_market: "Market",
                            option_product: "Product",
                            option_social: "Social",
                            option_short: "Short",
                            option_medium: "Medium",
                            option_deep: "Deep",
                            social_scanner_title: "Social Media Account Quality",
                            platform: "Platform",
                            account_url: "Account URL",
                            price: "Price",
                            comprehensive_analysis: "Comprehensive Analysis + PDF Report",
                            btn_start_scan: "Start Scan",
                            recent_scans: "Recent Scans",
                            followers: "Followers",
                            pricing_title: "Subscription Plans",
                            pricing_subtitle: "Choose the right plan for you and enjoy up to 20% discount on annual subscriptions",
                            monthly: "Monthly",
                            yearly: "Yearly",
                            save_20: "Save 20%",
                            plan_basic: "Basic",
                            plan_basic_desc: "Perfect for personal use",
                            plan_pro: "Pro",
                            plan_pro_desc: "For advanced usage",
                            plan_enterprise: "Enterprise",
                            plan_enterprise_desc: "For businesses and companies",
                            per_month: "/month",
                            yearly_price: "/year",
                            you_save: "You save",
                            feature_search_basic: "100 monthly searches",
                            feature_saved_searches: "10 saved searches",
                            feature_email_support: "Email support",
                            feature_no_api: "No API access",
                            feature_search_pro: "500 monthly searches",
                            feature_saved_searches_pro: "50 saved searches",
                            feature_priority_support: "Priority support",
                            feature_api_access: "API access",
                            feature_search_unlimited: "Unlimited searches",
                            feature_saved_searches_enterprise: "200 saved searches",
                            feature_dedicated_support: "Dedicated support",
                            feature_white_label: "White label",
                            choose_plan: "Choose Plan",
                            most_popular: "Most Popular",
                            pricing_note: "All plans include 30-day money-back guarantee",
                            secure_payment: "Secure Payment",
                            cancel_anytime: "Cancel Anytime",
                            support_24_7: "24/7 Support",
                            support_team: "Support Team",
                            online_now: "Online Now",
                            welcome_message: "Hello! How can I help you today?",
                            quick_billing: "Billing",
                            quick_technical: "Technical Issues",
                            quick_feature: "Feature Request",
                            type_message: "Type your message...",
                            response_time: "Average response time: less than a minute",
                            engagement_rate: "Engagement Rate",
                            growth: "Growth",
                            download_pdf: "Download PDF",
                            waiting: "Waiting...",
                            features_title: "Features",
                            unified_search: "Unified Smart Search",
                            unified_search_desc: "Search in products, suppliers, shipping, and social accounts from one place",
                            private_ai: "Private AI",
                            private_ai_desc: "Insights and analytics based on platform data with clear sources and confidence",
                            advanced_charts: "Advanced Charts",
                            advanced_charts_desc: "Financial candles, shipping costs, supplier comparisons, and social charts",
                            most_popular: "Most Popular",
                            monthly: "/month",
                            yearly: "/year",
                            basic_features: "Basic Search, 10 Saved Searches, Email Support",
                            pro_features: "Advanced Search, 50 Saved Searches, Priority Support, API",
                            enterprise_features: "Unlimited Search, 200 Saved Searches, Dedicated Support, API, White Label",
                            get_started: "Get Started",
                            footer_text: "Operational Intelligence Platform",
                            terms: "Terms & Conditions",
                            privacy: "Privacy Policy",
                            support: "Support",
                            try_title: "Try TrendLens Now",
                            try_subtitle: "Enter a product / keyword / social account to get a quick mini report.",
                            try_placeholder: "e.g., matte ceramic / @brand / gaming chair",
                            try_btn: "Start Analysis",
                            product_keyword_placeholder: "Keyword or niche (e.g., beauty products)",
                            product_category_placeholder: "Category (optional)",
                            product_country_placeholder: "Country code (optional)",
                            supplier_product_placeholder: "Product name (e.g., steel components)",
                            supplier_hs_code_placeholder: "HS Code (optional)",
                            supplier_country_placeholder: "Country code (optional)",
                            express_origin_placeholder: "From (country code)",
                            express_dest_placeholder: "To (country code)",
                            express_weight_placeholder: "Weight (kg)",
                            proof_title: "Trusted by marketers, merchants and creators worldwide",
                            social_example_title: "Example: Social Account Scan",
                            social_example_intro: "Soon we will add a full social account scanner that provides:",
                            social_example_bullet1: "• <strong>Account Quality:</strong> Credibility and posting consistency",
                            social_example_bullet2: "• <strong>Engagement Rate:</strong> Posts performance and followers growth",
                            social_example_bullet3: "• <strong>Signals:</strong> Detect suspicious/fake followers",
                            social_example_bullet4: "• <strong>Pricing:</strong> Sponsored post and market benchmarks",
                            social_example_bullet5: "• <strong>Reports:</strong> Detailed PDF report",
                            social_example_note: "In the Admin panel you can scan accounts and show results to clients",
                            ads_example_title: "Example: Ads from Meta and TikTok",
                            ads_example_intro: "We show you the latest active ads from:",
                            ads_example_bullet1: "• <strong>Meta Ads Library:</strong> Facebook and Instagram ads",
                            ads_example_bullet2: "• <strong>TikTok Ads:</strong> Latest TikTok advertising campaigns",
                            ads_example_bullet3: "• <strong>Google Ads:</strong> Google search ads",
                            ads_example_bullet4: "• <strong>Snap Ads:</strong> Snapchat ads",
                            ads_example_bullet5: "• <strong>Smart Analysis:</strong> AI analysis of each ad",
                            ads_example_note: "Ads are updated automatically every 6 hours",
                            search: "Search",
                            sources_label: "Sources:",
                            sources_not_specified: "Not specified",
                            mock_data: "Mock Data",
                            live_data: "Live Data",
                            cached_data: " — Cached",
                            last_updated: "Last updated:",
                            ai_prompt_placeholder: "Type your question or request...",
                            port_jeddah: "Jeddah Port",
                            port_dubai: "Dubai Port",
                            port_shanghai: "Shanghai Port",
                            status_busy: "Busy",
                            status_smooth: "Smooth",
                            status_normal: "Normal",
                            shipping_vessels: "Vessel Movement",
                            shipping_ports: "Ports",
                            shipping_rates: "Shipping Rates",
                            express_shipping: "Express Shipping",
                            best_suppliers: "Best Suppliers",
                            top_exporting_countries: "Top Exporting Countries",
                            data_sources: "Data Sources",
                            exploding_products: "Exploding Products",
                            hottest_platforms: "Hottest Platforms/Countries",
                            forecast: "Forecast",
                            card_lifeguard_title: "Campaign Lifeguard",
                            lifeguard_preview_desc: "Campaign Health: Needs attention - CPC rising",
                            lifeguard_ai_preview_title: "AI Summary",
                            lifeguard_ai_preview_text: "CPC rising 23% over last 7 days. Recommendation: shift 20% budget to best creative.",
                            btn_open_lifeguard: "Open Full Campaign Lifeguard",
                            new: "New",
                            lifeguard_metric_roas: "ROAS",
                            lifeguard_metric_cpc: "CPC",
                            candles_chart: "Candles Chart",
                            detected_patterns: "Detected Patterns",
                            candles_meta: "Information",
                            interval_1m: "1 minute",
                            interval_5m: "5 minutes",
                            interval_15m: "15 minutes",
                            interval_1h: "1 hour",
                            interval_4h: "4 hours",
                            interval_1d: "1 day",
                            btn_show_candles: "Show Candles",
                            card_ai_insights_title: "AI Insights",
                            ai_insight_text: "AI Insight",
                            ai_insights_metrics: "Metrics",
                            ai_insights_disclaimer: "Legal Disclaimer",
                            recommendation_label: "Recommendation:",
                            recommendation_text: "Invest in office products",
                            confidence_label: "Confidence:",
                            multiple_sources: "multiple sources",
                            sources_label: "Sources:",
                            confidence_inline: "Confidence",
                            // Auth translations
                            auth_login_tab: "Login",
                            auth_register_tab: "Create Account",
                            auth_login_title: "Login",
                            auth_register_title: "Create New Account",
                            auth_login_google: "Login with Google",
                            auth_login_apple: "Login with Apple",
                            auth_register_google: "Sign up with Google",
                            auth_register_apple: "Sign up with Apple",
                            auth_or: "or",
                            auth_email: "Email",
                            auth_email_placeholder: "example@email.com",
                            auth_password: "Password",
                            auth_password_placeholder: "••••••••",
                            auth_remember: "Remember me",
                            auth_forgot: "Forgot password?",
                            auth_login_btn: "Login",
                            auth_full_name: "Full Name",
                            auth_full_name_placeholder: "Full Name",
                            auth_phone: "Phone Number",
                            auth_optional: "(optional)",
                            auth_phone_placeholder: "Phone number",
                            auth_confirm_password: "Confirm Password",
                            auth_confirm_password_placeholder: "Confirm password",
                            auth_agree: "I agree to",
                            auth_terms: "Terms & Conditions",
                            auth_and: "and",
                            auth_privacy: "Privacy Policy",
                            auth_register_btn: "Create Account",
                            run: "Run"
                };
            } else { // Arabic (default)
                return {
                    results_title: "نتائج البحث الموحد",
                            page_title: "TrendLens - منصة الذكاء التشغيلي",
                            partner_dashboard: "لوحة الشريك",
                            candles_pair_label: "شموع BTC/USDT",
                            candles_chart_placeholder: "رسم بياني للشموع",
                            candles_chart_note: "سيتم ربطه بـ Chart.js أو TradingView",
                            volume_chart_placeholder: "رسم بياني للحجم",
                            shipping_chart_placeholder: "رسم بياني لأسعار الشحن",
                            suppliers_chart_placeholder: "رسم بياني لمقارنة الموردين",
                            social_chart_placeholder: "رسم بياني للسوشيال",
                            status_completed: "مكتمل",
                            status_in_progress: "جاري",
                            books_title: "كتب إلكترونية",
                            books_view_all: "عرض كل الكتب",
                            view_more: "المزيد",
                            ebook_badge: "كتاب إلكتروني",
                            badge_best_selling: "الأعلى مبيعاً",
                            badge_fast_growing: "الأسرع نمواً",
                            badge_biz_favorite: "مفضل لأصحاب الأعمال",
                            partner_summary: "ملخص الشريك",
                            by_seller: "البائع:",
                            view_details: "تفاصيل",
                            add_to_favorites: "أضف للمفضلة",
                            added_to_favorites: "تمت الإضافة للمفضلة",
                            buy_now: "اشترِ الآن",
                            ticker_title: "الترند التشغيلي",
                            hero_title: "كل أدوات ترند لينس في واجهة موحّدة",
                            happening_now: "يحدث الآن",
                            hero_subtitle: "اربط متاجرك وحساباتك ومصادر بياناتك، ودع الذكاء التشغيلي في ترند لينس يحلل الترندات، الانفجارات، الشحن، وسلوك المنافسين ثم يعطيك توصيات جاهزة.",
                            hero_eyebrow: "٣ نماذج ذكاء تعمل لصالحك الآن",
                            hero_primary_cta: "ابدأ الذكاء التشغيلي",
                            hero_secondary_cta: "دخول لوحة التحكم",
                            hero_models_label: "اختر نمط التحليل",
                            hero_models_title: "لوحة النماذج الذكية",
                            hero_model_core_badge: "النموذج الأساسي",
                            hero_model_core_title: "محرك تقييم المنتجات",
                            hero_model_core_desc: "تحليل فوري لأي منتج أو حساب سوشيال مع إشارات الموردين والشحن.",
                            hero_model_core_status: "نشط دائمًا",
                            hero_model_assist_badge: "ذكاء مساعد",
                            hero_model_assist_title: "المساعد الذكي",
                            hero_model_assist_desc: "يحوّل سياقك (الميزانية، الدول، المنصات) إلى خطة تنفيذية سريعة.",
                            hero_model_assist_status: "وضع تجريبي",
                            hero_model_trend_badge: "Trend AI",
                            hero_model_trend_title: "مساعد الترندات",
                            hero_model_trend_desc: "يراقب الانفجارات ويكشف الفئات والدول الساخنة قبل اكتظاظ السوق.",
                            hero_model_trend_status: "تجريبي محدود",
                            hero_console_label: "لوحة الأوامر",
                            hero_console_cta: "سجل مجانًا",
                            hero_usage_title: "حالة النماذج الآن",
                            hero_usage_sync: "آخر مزامنة قبل ٢ دقيقة",
                            hero_usage_core_desc: "يشغّل البحث الفوري ويضمن رصيد الذكاء الأساسي.",
                            hero_usage_assist_desc: "مفعّل لعدد محدود من المستخدمين كتجربة مغلقة.",
                            hero_usage_trend_desc: "يراقب ترندات الدول ويطلق تنبيهات الانفجارات.",
                            hero_usage_status_active: "نشط",
                            hero_usage_status_beta: "تجريبي",
                            hero_usage_status_labs: "Trend Labs",
                            cta_try_search: "جرّب بحث عالمي",
                            cta_view_candles: "شاهد الشموع الآن",
                            btn_login: "تسجيل الدخول",
                            btn_register: "إنشاء حساب",
                            partner_apply: "انضم كشريك",
                            product_keyword_placeholder: "كلمة مفتاحية أو niche (مثل: beauty products)",
                            product_category_placeholder: "التصنيف (اختياري)",
                            product_country_placeholder: "رمز الدولة (اختياري)",
                            supplier_product_placeholder: "اسم المنتج (مثل: steel components)",
                            supplier_hs_code_placeholder: "HS Code (اختياري)",
                            supplier_country_placeholder: "رمز الدولة (اختياري)",
                            express_origin_placeholder: "من (رمز الدولة)",
                            express_dest_placeholder: "إلى (رمز الدولة)",
                            express_weight_placeholder: "الوزن (كجم)",
                            global_ai_analysis: "افتح التحليل العام",
                            global_ai_analysis_loading: "جاري التحليل...",
                            global_ai_analysis_success: "تم تشغيل التحليل العام — جميع المساعدين الذكاءيين قيد العمل الآن.",
                            charts_title: "الشموع والرسوم البيانية",
                            tab_candles: "الشموع (OHLC)",
                            tab_volume: "الحجم والسعر",
                            tab_shipping: "تكلفة الشحن",
                            tab_suppliers: "أسعار الموردين",
                            tab_ads: "إعلانات السوق الآن",
                            card_products_title: "انفجارات المنتجات",
                            card_suppliers_title: "أفضل الموردين",
                            card_shipping_title: "نبض الشحن",
                            card_ads_title: "🧠 إعلانات السوق الآن",
                            ads_description: "شاهد أحدث الإعلانات حول العالم، وتعلّم منها كيف تُصمم حملتك القادمة.",
                            ads_example_title: "مثال: إعلانات من Meta و TikTok",
                            ads_example_intro: "نعرض لك أحدث الإعلانات النشطة من:",
                            ads_example_bullet1: "• <strong>Meta Ads Library:</strong> إعلانات Facebook و Instagram",
                            ads_example_bullet2: "• <strong>TikTok Ads:</strong> أحدث حملات TikTok الإعلانية",
                            ads_example_bullet3: "• <strong>Google Ads:</strong> إعلانات بحث Google",
                            ads_example_bullet4: "• <strong>Snap Ads:</strong> إعلانات Snapchat",
                            ads_example_bullet5: "• <strong>تحليل ذكي:</strong> تحليل كل إعلان بالذكاء الصناعي",
                            ads_example_note: "يتم تحديث الإعلانات كل 6 ساعات تلقائياً",
                            ads_chart_placeholder: "Market Ads chart",
                            card_market_title: "الشموع المالية",
                            card_ai_title: "رؤى الذكاء الاصطناعي",
                            confidence_85: "ثقة 85%",
                            confidence_92: "ثقة 92%",
                            updated: "محدث",
                            hot: "حار",
                            live: "مباشر",
                            ai: "AI",
                            btn_open_analysis: "افتح التحليل",
                            btn_explain: "اشرح لي",
                            social_scanner_title: "جودة حسابات السوشل ميديا",
                            platform: "منصة",
                            account_url: "رابط الحساب",
                            price: "السعر",
                            comprehensive_analysis: "تحليل شامل + تقرير PDF",
                            btn_start_scan: "ابدأ الفحص",
                            recent_scans: "آخر المسوح",
                            followers: "المتابعون",
                            pricing_title: "خطط الاشتراك",
                            pricing_subtitle: "اختر الخطة المناسبة لك واستمتع بخصم يصل إلى 20% عند الاشتراك السنوي",
                            monthly: "شهري",
                            yearly: "سنوي",
                            save_20: "وفر 20%",
                            plan_basic: "أساسي",
                            plan_basic_desc: "مثالي للاستخدام الشخصي",
                            plan_pro: "احترافي",
                            plan_pro_desc: "للاستخدام المتقدم",
                            plan_enterprise: "مؤسسي",
                            plan_enterprise_desc: "للمؤسسات والشركات",
                            per_month: "/شهر",
                            yearly_price: "/سنة",
                            you_save: "وفر",
                            feature_search_basic: "100 بحث شهري",
                            feature_saved_searches: "10 بحوث محفوظة",
                            feature_email_support: "دعم البريد الإلكتروني",
                            feature_no_api: "لا يوجد وصول API",
                            feature_search_pro: "500 بحث شهري",
                            feature_saved_searches_pro: "50 بحث محفوظ",
                            feature_priority_support: "دعم أولوية",
                            feature_api_access: "وصول API",
                            feature_search_unlimited: "بحث غير محدود",
                            feature_saved_searches_enterprise: "200 بحث محفوظ",
                            feature_dedicated_support: "دعم مخصص",
                            feature_white_label: "علامة بيضاء",
                            choose_plan: "اختر الخطة",
                            most_popular: "الأكثر شعبية",
                            pricing_note: "جميع الخطط تشمل ضمان استرداد الأموال لمدة 30 يوماً",
                            secure_payment: "دفع آمن",
                            cancel_anytime: "إلغاء في أي وقت",
                            support_24_7: "دعم 24/7",
                            support_team: "فريق الدعم",
                            online_now: "متصل الآن",
                            welcome_message: "مرحباً! كيف يمكنني مساعدتك اليوم؟",
                            quick_billing: "الفوترة",
                            quick_technical: "مشاكل تقنية",
                            quick_feature: "طلب ميزة",
                            type_message: "اكتب رسالتك...",
                            response_time: "متوسط وقت الرد: أقل من دقيقة",
                            engagement_rate: "نسبة التفاعل",
                            growth: "النمو",
                            download_pdf: "تحميل PDF",
                            waiting: "في الانتظار...",
                            features_title: "الميزات",
                            unified_search: "بحث موحد ذكي",
                            unified_search_desc: "ابحث في المنتجات والموردين والشحن والحسابات الاجتماعية من مكان واحد",
                            private_ai: "ذكاء اصطناعي خاص",
                            private_ai_desc: "رؤى وتحليلات مبنية على بيانات المنصة مع مصادر وثقة واضحة",
                            advanced_charts: "رسوم بيانية متقدمة",
                            advanced_charts_desc: "شموع مالية وتكلفة شحن ومقارنة موردين ورسوم سوشيال",
                            most_popular: "الأكثر شعبية",
                            monthly: "/شهر",
                            yearly: "/سنة",
                            basic_features: "البحث الأساسي، 10 بحث محفوظ، دعم البريد الإلكتروني",
                            pro_features: "البحث المتقدم، 50 بحث محفوظ، دعم أولوية، API",
                            enterprise_features: "البحث غير المحدود، 200 بحث محفوظ، دعم مخصص، API، علامة بيضاء",
                            get_started: "ابدأ الآن",
                            footer_text: "منصة الذكاء التشغيلي",
                            terms: "الشروط والأحكام",
                            privacy: "سياسة الخصوصية",
                            support: "الدعم",
                            try_title: "جرّب ترند لينس الآن",
                            try_subtitle: "أدخل منتج / كلمة / حساب سوشيال وشاهد تقريرًا مصغّرًا فورًا.",
                            try_placeholder: "مثال: سيراميك مطفي / @brand / gaming chair",
                            try_btn: "ابدأ التحليل",
                            proof_title: "يستخدم ترند لينس مسوّقون وتُجّار ومبدعون حول العالم",
                            social_example_title: "مثال: فحص حساب السوشيال ميديا",
                            social_example_intro: "لاحقاً سنضيف أداة فحص حسابات السوشيال ميديا التي تقدم:",
                            social_example_bullet1: "• <strong>جودة الحساب:</strong> تقييم شامل لمصداقية المحتوى واستمرارية النشر",
                            social_example_bullet2: "• <strong>معدل التفاعل:</strong> تحليل أداء المنشورات ونمو المتابعين",
                            social_example_bullet3: "• <strong>الإشارات:</strong> كشف الحسابات الوهمية والمتابعين المزيفين",
                            social_example_bullet4: "• <strong>التسعير:</strong> عرض أسعار الإعلانات والمعدلات التنافسية",
                            social_example_bullet5: "• <strong>التقارير:</strong> تقارير PDF مفصلة عن الحساب",
                            social_example_note: "في لوحة الأدمن يمكنك فحص حسابات محددة وعرض النتائج لحسابات العملاء",
                            search: "بحث",
                            sources_label: "المصادر:",
                            sources_not_specified: "غير محدد",
                            mock_data: "بيانات تجريبية (Mock)",
                            live_data: "بيانات حية",
                            cached_data: " — مخزنة مؤقتًا",
                            last_updated: "آخر تحديث:",
                            port_jeddah: "ميناء جدة",
                            port_dubai: "ميناء دبي",
                            port_shanghai: "ميناء شنغهاي",
                            status_busy: "مزدحم",
                            status_smooth: "سلس",
                            status_normal: "عادي",
                            shipping_vessels: "حركة السفن",
                            shipping_ports: "الموانئ",
                            shipping_rates: "أسعار الشحن",
                            express_shipping: "الشحن السريع",
                            best_suppliers: "أفضل الموردين",
                            top_exporting_countries: "الدول الأهم لهذا المنتج",
                            data_sources: "مصادر البيانات",
                            exploding_products: "المنتجات المنفجرة",
                            hottest_platforms: "المنصات/الدول الأكثر سخونة",
                            forecast: "توقع مدة الانفجار",
                            card_lifeguard_title: "منقذ الحملات",
                            lifeguard_preview_desc: "صحة الحملة: تحتاج انتباه - تكلفة النقرة ترتفع",
                            lifeguard_ai_preview_title: "خلاصة الذكاء",
                            lifeguard_ai_preview_text: "CPC يرتفع 23% خلال آخر 7 أيام. التوصية: انقل 20% من الميزانية لأفضل كرييتف.",
                            btn_open_lifeguard: "افتح منقذ الحملات الكامل",
                            new: "جديد",
                            lifeguard_metric_roas: "ROAS",
                            lifeguard_metric_cpc: "CPC",
                            candles_chart: "رسم الشموع",
                            detected_patterns: "النماذج المكتشفة",
                            candles_meta: "المعلومات",
                            interval_1m: "1 دقيقة",
                            interval_5m: "5 دقائق",
                            interval_15m: "15 دقيقة",
                            interval_1h: "1 ساعة",
                            interval_4h: "4 ساعات",
                            interval_1d: "1 يوم",
                            btn_show_candles: "اعرض الشموع",
                            card_ai_insights_title: "رؤى الذكاء الاصطناعي",
                            ai_insight_text: "الرؤية الذكية",
                            ai_insights_metrics: "المؤشرات",
                            ai_insights_disclaimer: "التنبيه القانوني",
                            recommendation_label: "توصية:",
                            recommendation_text: "استثمر في منتجات المكتب",
                            confidence_label: "ثقة:",
                            multiple_sources: "مصادر متعددة",
                            sources_label: "المصادر:",
                            confidence_inline: "ثقة",
                            ai_prompt_placeholder: "اكتب سؤالك أو طلبك...",
                            run: "تشغيل",
                            // Auth translations
                            auth_login_tab: "تسجيل الدخول",
                            auth_register_tab: "إنشاء حساب",
                            auth_login_title: "تسجيل الدخول",
                            auth_register_title: "إنشاء حساب جديد",
                            auth_login_google: "تسجيل الدخول بحساب Google",
                            auth_login_apple: "تسجيل الدخول بحساب Apple",
                            auth_register_google: "التسجيل بحساب Google",
                            auth_register_apple: "التسجيل بحساب Apple",
                            auth_or: "أو",
                            auth_email: "البريد الإلكتروني",
                            auth_email_placeholder: "example@email.com",
                            auth_password: "كلمة المرور",
                            auth_password_placeholder: "••••••••",
                            auth_remember: "تذكرني",
                            auth_forgot: "نسيت كلمة المرور؟",
                            auth_login_btn: "تسجيل الدخول",
                            auth_full_name: "الاسم الكامل",
                            auth_full_name_placeholder: "الاسم الكامل",
                            auth_phone: "رقم الجوال",
                            auth_optional: "(اختياري)",
                            auth_phone_placeholder: "501234567",
                            auth_confirm_password: "تأكيد كلمة المرور",
                            auth_confirm_password_placeholder: "تأكيد كلمة المرور",
                            auth_agree: "أوافق على",
                            auth_terms: "الشروط والأحكام",
                            auth_and: "و",
                            auth_privacy: "سياسة الخصوصية",
                            auth_register_btn: "إنشاء حساب",
                            loading_text: "جاري التحميل...",
                            data_status_placeholder: "سيتم عرض حالة البيانات بعد التحميل...",
                            visitor_label: "زائر",
                            btn_get_insight: "احصل على الرؤية",
                            btn_load: "تحميل",
                            btn_calculate_price: "حساب السعر",
                            smart_assistant_products: "مساعد الذكاء الصناعي — تحليل المنتجات",
                            smart_assistant_candles: "مساعد الذكاء الصناعي — تحليل الشموع",
                            smart_assistant_insights: "مساعد الذكاء الصناعي — تحليل الرؤى",
                            smart_assistant_suppliers: "مساعد الذكاء الصناعي — تحليل الموردين",
                            smart_assistant_shipping: "مساعد الذكاء الصناعي — تحليل حالة الموانئ",
                            smart_assistant_ads: "مساعد الذكاء الصناعي — تحليل إعلانات السوق",
                            smart_assistant_market: "مساعد الذكاء الصناعي — تحليل الأسهم والعملات",
                            ai_assistant_title: "المساعد الذكي",
                            ai_assistant_subtitle: "اختر الوكيل الذكي الذي تحتاجه",
                            agent_trend_al_label: "ذكاء الاتجاهات (Trend-Al)",
                            agent_trend_al_short: "يكشف المنتجات والأسواق الصاعدة.",
                            agent_trend_al_description: "يحلل بيانات ترند لينس لاكتشاف المنتجات أو القطاعات التي تبدأ بالارتفاع قبل ازدحام المنافسين.",
                            agent_insight_al_label: "ذكاء الرؤى التحليلية (Insight-Al)",
                            agent_insight_al_short: "يحوّل البيانات إلى رؤى مفهومة.",
                            agent_insight_al_description: "يربط بين الشحن والموردين والشموع المالية ويكتب ملخصًا بشريًا يشرح الاتجاهات الحالية.",
                            agent_seller_al_label: "ذكاء البائعين (Seller-Al)",
                            agent_seller_al_short: "مخصص للتجار والبائعين.",
                            agent_seller_al_description: "يساعدك على تقييم المنتج، تقدير الطلب، وتحسين عرض المنتج لزيادة فرص البيع.",
                            agent_copy_al_label: "ذكاء المحتوى التسويقي (Copy-Al)",
                            agent_copy_al_short: "ينتج عناوين ونصوص جاهزة.",
                            agent_copy_al_description: "يكتب وصف المنتجات والعناوين الإعلانية والكابات التسويقية باللهجة المناسبة لجمهورك.",
                            agent_alert_al_label: "ذكاء التنبيهات (Alert-Al)",
                            agent_alert_al_short: "يراقب ويبلغك فورًا.",
                            agent_alert_al_description: "يتابع المؤشرات المهمة ويصدر تنبيهًا عند ظهور فرصة أو هبوط غير عادي في السوق.",
                            agent_price_al_label: "ذكاء التسعير (Price-Al)",
                            agent_price_al_short: "يقترح السعر الأمثل.",
                            agent_price_al_description: "يحسب نطاق السعر المناسب بناءً على المنافسة وحجم الطلب وبيانات الموردين.",
                            agent_pixel_al_label: "ذكاء الإعلانات (Pixel-Al)",
                            agent_pixel_al_short: "يدرّب البيكسل ويحسّن الحملات.",
                            agent_pixel_al_description: "يحلل بيانات بيكسلات ميتا وتيك توك وقوقل ويقترح تعديلات في الاستهداف أو الميزانية.",
                            agent_fraud_al_label: "ذكاء مكافحة الاحتيال (Fraud-Al)",
                            agent_fraud_al_short: "يحمي المنصة من النشاطات المريبة.",
                            agent_fraud_al_description: "يرصد الطلبات المكررة أو التحركات غير الطبيعية وينبّه الفريق الأمني تلقائيًا.",
                            agent_support_al_label: "ذكاء الدعم (Support-Al)",
                            agent_support_al_short: "يساعد المستخدم مباشرة.",
                            agent_support_al_description: "يجيب على الأسئلة الشائعة، يوجّه المستخدم داخل المنصة، ويرفع الحالات المعقدة للدعم البشري.",
                            btn_start_now: "ابدأ الآن",
                            ai_optional_image: "الصورة اختيارية لتحليل المنتج",
                            // Feature titles and descriptions
                            feature_trends_title: "لوحة الترند",
                            feature_trends_desc: "تحليل الترندات في الوقت الفعلي",
                            feature_explosions_title: "انفجارات المنتجات",
                            feature_explosions_desc: "اكتشاف مبكر للمنتجات التي تقفز فجأة في الطلب قبل أن تزدحم فيها المنافسة – مع نسبة نمو وثقة لكل منتج.",
                            feature_ai_title: "مساعد الذكاء Trend AI",
                            feature_ai_desc: "اسأل الذكاء عن أفضل منتج، أفضل دولة، أو أفضل سيناريو إعلان… ويحصل على توصية مبنية على بيانات المنصة الفعلية.",
                            feature_social_title: "فحص حسابات السوشيال",
                            feature_social_desc: "فحص شامل لحسابات السوشيال ميديا – جودة المحتوى، معدل التفاعل، الإشارات، والتسعير.",
                            // How it works section
                            how_it_works_title: "كيف تعمل المنصة؟",
                            step1_title: "اربط مصادر بياناتك",
                            step1_desc: "متاجر، حسابات سوشيال، مورّدين، شحن",
                            step2_title: "دع TrendLens يحلل",
                            step2_desc: "ترندات، انفجارات، منافسين",
                            step3_title: "نفّذ قرارات أذكى",
                            step3_desc: "اختيار المنتج، حملات الإعلانات، المورد، خط الشحن",
                            // Who is this for section
                            who_is_this_for_title: "لمن هذه المنصة؟",
                            persona1_title: "تاجر Amazon / eBay / Etsy",
                            persona1_desc: "اكتشف المنتجات الرابحة قبل المنافسين وزد مبيعاتك بنسبة 300%",
                            persona2_title: "تاجر متجر مستقل",
                            persona2_desc: "Shopify / WooCommerce – اربط متجرك بذكاء TrendLens وزد أرباحك",
                            persona3_title: "وكالة تسويق أو مسوّق سوشيال",
                            persona3_desc: "قدم لزبائنك تحليلات احترافية وزيّن قيمة خدماتك",
                            // Smart analysis
                            smart_analysis_title: "تحليل شامل ذكي",
                            smart_analysis_desc: "شغّل جميع المساعدين الذكيين في ضغطة واحدة للحصول على تحليل شامل",
                            // Live pills
                            live_pill_1: "تم تحليل 3,241 منتج خلال آخر ٢٤ ساعة",
                            live_pill_2: "تتم متابعة 19 مسار شحن من آسيا إلى الخليج الآن",
                            live_pill_3: "87 استشارة ذكاء صناعي أُعطيت للتجار اليوم",
                            live_pill_4: "آخر انفجار منتجات تم اكتشافه منذ 3 ساعات فقط",
                            // Hero section
                            hero_search_placeholder: "اكتب اسم منتج، فئة، أو حساب إنستغرام / تيك توك لتحليل احتمالية نجاحه…",
                            hero_search_example: "مثال: كرسي مكتبي، ساعة ذكية، @brand_ksa",
                            hero_first_free_analysis: "أول تحليل مجاني بعد التسجيل",
                            snapshot_title: "لقطة من غرفة التحكم",
                            snapshot_subtitle: "معاينة تجريبية – Demo Preview",
                            snapshot_overlay_text: "التفاصيل الكاملة متاحة بعد تسجيل الدخول.",
                            snapshot_overlay_note: "هذه مجرد لقطة تمويهية من داخل غرفة التحكم.",
                            // Feature cards
                            feature_locked_subscription: "مقفل – افتح مع الاشتراك",
                            feature_try_now: "جرّب الآن",
                            feature_overlay_text: "شاهد مثال حي لتحليل هذه الأداة",
                            feature_preview_new_user: "معاينة جزئية للمستخدم الجديد",
                            feature_try_explosion: "جرّب لقطة انفجار واحدة",
                            feature_requires_ai_credit: "يتطلب رصيد ذكاء صناعي",
                            feature_see_vague_answer: "شاهد إجابة تجريبية مبهمة",
                            feature_continuous_monitoring: "مراقبة مستمرة مع الخطة المدفوعة",
                            feature_try_one_scan: "جرّب فحص حساب واحد بعد التسجيل",
                            // Trend AI
                            trend_ai_title: "مساعد الترندات الذكي (Trend AI Assistant)",
                            trend_ai_subtitle: "اطلب من الذكاء الاصطناعي تحليل بيانات الترندات والانفجارات في TrendLens.",
                            trend_ai_placeholder: "اكتب سؤالك عن الترندات هنا...",
                            trend_ai_button: "اسأل Trend AI",
                            // CTA section
                            cta_successful_stores: "المتاجر الناجحة لا تنتظر السوق… وإنما تسبقه",
                            cta_start_now_subtitle: "اربط حسابك في ترند لينس وابدأ برؤية مؤشرات الذكاء على المنتجات والحسابات التي تهمك.",
                            cta_start_now_button: "متابعة التسجيل",
                            // AI Insights
                            insight_symbol_placeholder: "الكلمة المفتاحية أو الرمز (مثل: BTCUSDT أو Ceramic Tiles)",
                            // Candles meta
                            candles_asset: "الأصل:",
                            candles_timeframe: "الفترة:",
                            candles_count: "عدد الشموع:",
                            candles_patterns: "النماذج المكتشفة:",
                            candles_status: "الحالة:",
                            candles_table_time: "الوقت",
                            candles_table_note: "عرض آخر 10 شموع (جاهز لربط TradingView Charts)",
                            // Port status
                            port_busy: "مزدحم",
                            port_smooth: "سلس",
                            port_normal: "عادي",
                            port_wait_hours: "ساعة انتظار",
                            port_vessels_waiting: "سفينة منتظرة",
                            // Suppliers
                            supplier_rating: "درجة",
                            supplier_shipments: "شحنة",
                            supplier_months: "شهر",
                            supplier_top_buyer: "أهم عميل:",
                            supplier_big_buyer: "يبيع لعميل كبير",
                            supplier_low_risk: "مخاطرة منخفضة",
                            supplier_contact_available: "معلومات اتصال متاحة",
                            supplier_show_shipments: "أرني الشحنات",
                            // General
                            unknown: "غير معروف",
                            no_data_available: "لا توجد بيانات متاحة",
                            no_forecast_available: "لا توجد توقعات متاحة",
                            sources_not_specified: "المصادر: غير محدد",
                            live_data: "بيانات حية",
                            last_updated: "آخر تحديث:",
                            // AI Insights
                            ai_insight_for: "رؤية الذكاء الاصطناعي لـ",
                            sentiment: "المزاج العام:",
                            momentum: "قوة الحركة (Momentum):",
                            volatility: "التقلبات (Volatility):",
                            social_heat: "حرارة السوشيال:",
                            ai_disclaimer_text: "⚠️ هذا تحليل آلي وصفي يعتمد على بيانات متاحة، ولا يُعد توصية استثمارية أو مالية.",
                            // Options
                            option_market: "سوق",
                            option_product: "منتج",
                            option_social: "سوشيال",
                            option_short: "سريع",
                            option_medium: "متوسط",
                            option_deep: "عميق"
                };
            }
        }
        
        
        // Load ticker - Simple method like old page
        function loadTicker() {
            const lang = window.__UICFG?.ui?.locale || 'en';
            const box = document.getElementById('opTicker');
            const track = document.getElementById('tickerTrack');
            
            // Set direction based on language
            const isRTL = (lang === 'ar' || lang === 'fa');
            track.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
            
            // Fallback ticker items
            const fallbackItems = lang === 'en' ? [
                { badge: "Demand Explosion", text: "in Office Chair product in Turkey" },
                { badge: "Port Congestion", text: "Jeddah - 3 days delay" },
                { badge: "Trusted Supplier", text: "Istanbul Steel Co. - 74% trust" },
                { badge: "Rising Account", text: "@brand_store - 6.4% growth" }
            ] : [
                { badge: "انفجار الطلب", text: "في منتج Office Chair بدولة تركيا" },
                { badge: "ازدحام ميناء", text: "جدة - تأخير 3 أيام" },
                { badge: "مورد موثوق", text: "Istanbul Steel Co. - ثقة 74%" },
                { badge: "حساب متصاعد", text: "@brand_store - نمو 6.4%" }
            ];
            
            const render = fallbackItems.map(it => 
                `<span class="tl-ticker-item">
                    <span class="text-primary font-semibold">${it.badge}</span>
                    <span class="text-white">${it.text}</span>
                </span>`).join('');
            
            track.innerHTML = render + render;
            box.hidden = false;
        }
        
        function updateAIUploadButtonPosition(lang) {
            const btn = document.getElementById('openImageFromText');
            if (!btn) return;
            
            const isRTL = (lang === 'ar' || lang === 'fa');
            btn.classList.remove('left-3', 'right-3', 'top-3');
            btn.classList.add('bottom-3');
            
            if (isRTL) {
                btn.classList.add('left-3');
                btn.classList.remove('right-3');
            } else {
                btn.classList.add('right-3');
                btn.classList.remove('left-3');
            }
        }
        
        // Switch language - Enhanced to ensure complete language switch
        function switchLang(lang) {
            // استدعاء setLanguage من i18n.js أولاً
            if (typeof window.setLanguage === 'function') {
                window.setLanguage(lang);
            }
            
            localStorage.setItem('tl_lang', lang);
            if (!window.__UICFG) window.__UICFG = { ui: {} };
            window.__UICFG.ui.locale = lang;
            
            // تحديث HTML lang و dir فوراً
            document.documentElement.lang = lang;
            document.documentElement.dir = (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr';
            updateAIUploadButtonPosition(lang);
            
            // تحديث font-family حسب اللغة
            if (lang === 'ar') {
                document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
                document.documentElement.style.fontFamily = 'Cairo, sans-serif';
            } else {
                document.body.className = document.body.className.replace(/font-cairo/g, '') + ' font-roboto';
                document.documentElement.style.fontFamily = 'Roboto, sans-serif';
            }
            
            // تطبيق الترجمات فوراً
            if (typeof applyI18n === 'function') {
                applyI18n();
            }
            
            // تحديث جميع العناصر التي تحتاج تغيير الاتجاه - بما في ذلك Dashboard
            window.updateAllTranslations = function() {
                const currentLang = window.__UICFG?.ui?.locale || localStorage.getItem('tl_lang') || localStorage.getItem('lang') || 'ar';
                const dict = getTranslations(currentLang);
                const publicDict = __PUBLIC_I18N__[currentLang] || {};
                const combinedDict = { ...dict, ...publicDict };
                
                // تحديث جميع العناصر مع data-i18n
                document.querySelectorAll('[data-i18n]').forEach(el => {
                    const key = el.getAttribute('data-i18n');
                    if (key) {
                        let translated = null;
                        
                        // محاولة من window.t أولاً
                        if (typeof window.t === 'function') {
                            translated = window.t(key);
                        }
                        
                        // إذا لم تنجح، جرب من القاموس المدمج
                        if (!translated && combinedDict && combinedDict[key]) {
                            translated = combinedDict[key];
                        }
                        
                        // إذا لم تنجح، جرب من __PUBLIC_I18N__ مباشرة
                        if (!translated && __PUBLIC_I18N__ && __PUBLIC_I18N__[currentLang] && __PUBLIC_I18N__[currentLang][key]) {
                            translated = __PUBLIC_I18N__[currentLang][key];
                        }
                        
                        if (translated) {
                            if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
                                if (el.hasAttribute('data-i18n-placeholder')) {
                                    el.placeholder = translated;
                                } else {
                                    el.value = translated;
                                }
                            } else {
                                el.textContent = translated;
                            }
                        }
                    }
                });
            };
            
            // استدعاء التحديث فوراً
            window.updateAllTranslations();
            
            // تحديث أزرار اللغة
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.classList.remove('active', 'bg-primary', 'text-black');
                btn.classList.add('bg-white/10', 'text-white');
            });
            const btn = document.getElementById(`lang-${lang}`);
            if (btn) {
                btn.classList.add('active', 'bg-primary', 'text-black');
                btn.classList.remove('bg-white/10', 'text-white');
            }
            
            // إعادة تحميل البيانات إذا كانت الدوال موجودة
            if (typeof loadTicker === 'function') loadTicker();
            if (typeof toggleBilling === 'function') toggleBilling();
            if (typeof renderBooksShelf === 'function') renderBooksShelf();
            if (typeof window.__updateTestimonials === 'function') window.__updateTestimonials();
            
            // إعادة تطبيق الترجمات بعد تأخير قصير للتأكد
            setTimeout(() => {
                if (typeof applyI18n === 'function') applyI18n();
                if (typeof window.updateAllTranslations === 'function') {
                    window.updateAllTranslations(); // تحديث إضافي
                }
            }, 100);
            
            // تحديث إضافي بعد تحميل البيانات
            setTimeout(() => {
                if (typeof window.updateAllTranslations === 'function') {
                    window.updateAllTranslations();
                }
            }, 500);

            if (typeof refreshFeatureExpandContent === 'function') {
                refreshFeatureExpandContent();
            }
        }

        // Go to payment page
        function goToPayment(planName) {
            const toggle = document.getElementById('billingToggle');
            const isYearly = toggle ? toggle.checked : false;
            const billingPeriod = isYearly ? 'yearly' : 'monthly';
            
            // Get plan prices
            const planPrices = {
                basic: { monthly: 29.99, yearly: 287.99 },
                pro: { monthly: 59.99, yearly: 575.99 },
                enterprise: { monthly: 199.99, yearly: 1919.99 }
            };
            
            const price = isYearly ? planPrices[planName].yearly : planPrices[planName].monthly;
            const planDisplay = isYearly ? `${planName}_yearly` : `${planName}_monthly`;
            
            // Build payment URL
            const paymentUrl = `/trendlens/payment.html?plan=${planDisplay}&amount=${price}&currency=USD&description=${encodeURIComponent(`اشتراك TrendLens - ${planName} ${isYearly ? 'سنوي' : 'شهري'}`)}`;
            
            // Check for partner/discount codes in URL
            const urlParams = new URLSearchParams(window.location.search);
            const partner = urlParams.get('partner') || urlParams.get('ref') || urlParams.get('affiliate');
            const discount = urlParams.get('discount') || urlParams.get('coupon') || urlParams.get('code');
            
            let finalUrl = paymentUrl;
            if (partner) {
                finalUrl += `&partner=${encodeURIComponent(partner)}`;
            }
            if (discount) {
                finalUrl += `&discount=${encodeURIComponent(discount)}`;
            }
            
            // Redirect to payment page
            window.location.href = finalUrl;
        }

        // Start social media scan
        function startSocialScan() {
            const platform = document.getElementById('socialPlatform')?.value || 'tiktok';
            const accountUrl = document.getElementById('socialAccountUrl')?.value.trim() || '';
            
            // Validate account URL
            if (!accountUrl) {
                alert('يرجى إدخال رابط الحساب');
                return;
            }
            
            // Build payment URL for social scan
            const paymentUrl = `/trendlens/payment.html?plan=social_scan&amount=2.99&currency=USD&description=${encodeURIComponent(`فحص حساب ${platform} - ${accountUrl}`)}`;
            
            // Check for partner/discount codes in URL
            const urlParams = new URLSearchParams(window.location.search);
            const partner = urlParams.get('partner') || urlParams.get('ref') || urlParams.get('affiliate');
            const discount = urlParams.get('discount') || urlParams.get('coupon') || urlParams.get('code');
            
            let finalUrl = paymentUrl;
            if (partner) {
                finalUrl += `&partner=${encodeURIComponent(partner)}`;
            }
            if (discount) {
                finalUrl += `&discount=${encodeURIComponent(discount)}`;
            }
            
            // Add social scan details
            finalUrl += `&social_platform=${encodeURIComponent(platform)}`;
            finalUrl += `&social_account=${encodeURIComponent(accountUrl)}`;
            
            // Redirect to payment page
            window.location.href = finalUrl;
        }

        // Toggle billing (monthly/yearly)
        function toggleBilling() {
            const toggle = document.getElementById('billingToggle');
            if (!toggle) return;
            const isYearly = !!toggle.checked;
            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);

            ['basic','pro','enterprise'].forEach(plan => {
                const priceEl = document.getElementById(`${plan}Price`);
                const periodEl = document.getElementById(`${plan}Period`);
                const yearlyPriceEl = document.getElementById(`${plan}YearlyPrice`);
                const savingsEl = document.getElementById(`${plan}Savings`);
                if (!priceEl || !periodEl || !yearlyPriceEl || !savingsEl) return;

                if (isYearly) {
                    priceEl.textContent = `$${PLAN_PRICES[plan].yearly}`;
                    priceEl.className = 'text-4xl font-bold text-red-500';
                    periodEl.classList.add('hidden');
                    yearlyPriceEl.classList.remove('hidden');
                    yearlyPriceEl.textContent = `$${PLAN_PRICES[plan].yearly}${dict.yearly_price}`;
                    savingsEl.classList.remove('hidden');
                    const monthlyTotal = PLAN_PRICES[plan].monthly * 12;
                    const savings = monthlyTotal - PLAN_PRICES[plan].yearly;
                    savingsEl.textContent = lang === 'en' ? `You save $${savings.toFixed(2)}` : `وفر $${toArabicNumerals(savings.toFixed(2))}`;
                } else {
                    priceEl.textContent = `$${PLAN_PRICES[plan].monthly}`;
                    priceEl.className = 'text-4xl font-bold text-white';
                    periodEl.classList.remove('hidden');
                    periodEl.textContent = dict.per_month;
                    yearlyPriceEl.classList.add('hidden');
                    savingsEl.classList.add('hidden');
                }
            });

            const discount = document.getElementById('yearlyDiscount');
            if (discount) {
                if (isYearly) {
                    discount.classList.remove('hidden');
                    discount.textContent = dict.save_20;
                    discount.className = 'bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold transition-all duration-300';
                } else {
                    discount.classList.add('hidden');
                    discount.className = 'bg-success text-white px-3 py-1 rounded-full text-sm font-semibold transition-all duration-300';
                }
            }
        }

        function initializePricing() {
            const toggle = document.getElementById('billingToggle');
            if (toggle) toggle.checked = false;
            toggleBilling();
        }

        // Initialize language on page load
        function initializeLanguage() {
            // Get saved language or detect from browser
            const savedLang = localStorage.getItem('tl_lang') || 
                             window.__UICFG?.ui?.locale ||
                             (navigator.language && navigator.language.toLowerCase().startsWith('ar') ? 'ar' : 'en');
            
            const lang = (savedLang === 'ar' || savedLang === 'en') ? savedLang : 'en';
            
            // Set language immediately
            if (!window.__UICFG) window.__UICFG = { ui: {} };
            window.__UICFG.ui.locale = lang;
            localStorage.setItem('tl_lang', lang);
            
            // Update HTML attributes
            document.documentElement.lang = lang;
            document.documentElement.dir = (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr';
            
            // Update font family
            if (lang === 'ar') {
                document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
                document.documentElement.style.fontFamily = 'Cairo, sans-serif';
            } else {
                document.body.className = document.body.className.replace(/font-cairo/g, '') + ' font-roboto';
                document.documentElement.style.fontFamily = 'Roboto, sans-serif';
            }
            
            // Update language buttons
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.classList.remove('active', 'bg-primary', 'text-black');
                btn.classList.add('bg-white/10', 'text-white');
            });
            const btn = document.getElementById(`lang-${lang}`);
            if (btn) {
                btn.classList.add('active', 'bg-primary', 'text-black');
                btn.classList.remove('bg-white/10', 'text-white');
            }
        }
        
        // Initialize language immediately
        initializeLanguage();
        
        // تطبيق الترجمات عند تحميل الصفحة
        (async function() {
            // تحميل القواميس أولاً
            const currentLang = localStorage.getItem('tl_lang') || localStorage.getItem('lang') || 'ar';
            await loadPublicDict(currentLang);
            await loadPublicDict(currentLang === 'ar' ? 'en' : 'ar'); // تحميل كلا القاموسين
            
            // تطبيق الترجمات
            if (typeof applyI18n === 'function') {
                applyI18n();
            }
            
            // تحديث إضافي بعد تحميل Dashboard
            setTimeout(() => {
                if (typeof applyI18n === 'function') {
                    applyI18n();
                }
                // تحديث عناصر Dashboard
                if (typeof updateAllTranslations === 'function') {
                    updateAllTranslations();
                }
            }, 1000);
        })();
        
        // Initial boot
        (async function boot() {
            // URL lang override
            const params = new URLSearchParams(window.location.search);
            const urlLang = params.get('lang');
            if (urlLang === 'en' || urlLang === 'ar') {
                localStorage.setItem('tl_lang', urlLang);
                if (!window.__UICFG) window.__UICFG = { ui: {} };
                window.__UICFG.ui.locale = urlLang;
                // Re-initialize language with URL override
                initializeLanguage();
            }
            
            // Ensure language is initialized
            if (!window.__UICFG?.ui?.locale) {
                initializeLanguage();
            }
            
            // load external dict then apply
            try { await loadPublicDict((window.__UICFG?.ui?.locale)||'en'); } catch(_){}
            try { await loadPublicDict('en'); } catch(_){}
            
            // Apply translations
            if (typeof applyI18n === 'function') {
                applyI18n();
            }
            
            // Update HTML attributes again to ensure they're set
            const currentLang = window.__UICFG?.ui?.locale || 'en';
            document.documentElement.lang = currentLang;
            document.documentElement.dir = (currentLang === 'ar' || currentLang === 'fa') ? 'rtl' : 'ltr';
            
            // Update font family
            if (currentLang === 'ar') {
                document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
                document.documentElement.style.fontFamily = 'Cairo, sans-serif';
            } else {
                document.body.className = document.body.className.replace(/font-cairo/g, '') + ' font-roboto';
                document.documentElement.style.fontFamily = 'Roboto, sans-serif';
            }
            
            loadTicker();
            toggleBilling();
            initializePricing();
            
            // defer books shelf render to end of tick to ensure definitions exist
            setTimeout(function(){ if (typeof renderBooksShelf === 'function') { renderBooksShelf(); } }, 0);
            // safety render after translations/layout settle
            setTimeout(function(){
                const wrap = document.getElementById('booksShelfTrack');
                if (wrap && wrap.children.length === 0 && typeof renderBooksShelf === 'function') {
                    renderBooksShelf();
                }
            }, 300);
            
            // Update language buttons
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.classList.remove('active', 'bg-primary', 'text-black');
                btn.classList.add('bg-white/10', 'text-white');
            });
            const btn = document.getElementById(`lang-${currentLang}`);
            if (btn) {
                btn.classList.add('active', 'bg-primary', 'text-black');
                btn.classList.remove('bg-white/10', 'text-white');
            }
        })();
        
        // Global AI Analysis - تشغيل جميع المساعدين دفعة واحدة
        const runGlobalAIBtn = document.getElementById('runGlobalAI');
        if (runGlobalAIBtn) {
            runGlobalAIBtn.addEventListener('click', async function() {
            const btn = this;
            const originalText = btn.innerHTML;
            
            // تغيير النص إلى "جارٍ التحليل..." أو "Analyzing..."
            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            const loadingText = dict.global_ai_analysis_loading || 'Analyzing...';
            btn.innerHTML = `<i class="fas fa-spinner fa-spin me-2"></i>${loadingText}`;
            btn.disabled = true;
            btn.classList.add('opacity-75', 'cursor-not-allowed');
            
            // البحث عن جميع المساعدين الذكيين
            const assistantButtons = document.querySelectorAll('.smart-assistant-btn');
            const assistantPanels = document.querySelectorAll('.smart-assistant-panel');
            
            // فتح جميع المساعدين وتشغيل التحديث
            let openedCount = 0;
            assistantPanels.forEach((panel, index) => {
                const cardId = panel.dataset.card;
                if (cardId) {
                    // فتح المساعد
                    panel.classList.remove('hidden');
                    // تشغيل التحليل
                    fetchSmartAssistant(cardId, true);
                    openedCount++;
                }
            });
            
            // انتظار قليل ثم إعادة الزر
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.disabled = false;
                btn.classList.remove('opacity-75', 'cursor-not-allowed');
                
                // إظهار رسالة نجاح
                if (openedCount > 0) {
                    // يمكن إضافة toast notification هنا
                    console.log(`✅ تم تشغيل ${openedCount} مساعد ذكي`);
                }
            }, 2000);
            });
        }

        // Chart tabs functionality
        document.querySelectorAll('.chart-tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.chart-tab-btn').forEach(b => {
                    b.classList.remove('active', 'bg-primary', 'text-black');
                    b.classList.add('bg-transparent', 'border', 'border-white', 'text-white');
                });
                
                this.classList.add('active', 'bg-primary', 'text-black');
                this.classList.remove('bg-transparent', 'border', 'border-white', 'text-white');
                
                // Hide all chart panels
                document.querySelectorAll('.chart-panel').forEach(panel => {
                    panel.classList.add('hidden');
                });
                
                // Show selected chart
                const chartType = this.dataset.chart;
                const chartPanel = document.getElementById(chartType + 'Chart');
                if (chartPanel) {
                    chartPanel.classList.remove('hidden');
                    // إذا كان التبويب هو global-trends، حمّل البيانات
                    if (chartType === 'global-trends') {
                        loadGlobalTrends();
                    }
                    // إذا كان التبويب هو image-search، إعادة تعيين
                    if (chartType === 'image-search') {
                        selectedImageFile = null;
                        document.getElementById('imgSearchInput').value = '';
                        document.getElementById('imgPreview').classList.add('hidden');
                        document.getElementById('imgSearchBtn').disabled = true;
                        document.getElementById('imgSearchResults').innerHTML = `
                            <div class="text-center py-8 text-gray-400">
                                <i class="fas fa-image text-4xl mb-4"></i>
                                <p>ارفع صورة للبحث عن منتجات مشابهة</p>
                            </div>
                        `;
                    }
                }
            });
        });

        // Global Trends Function
        async function loadGlobalTrends() {
            const content = document.getElementById('globalTrendsContent');
            if (!content) return;
            
            // عرض loading
            content.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i>
                    <p class="text-gray-300">جاري التحميل...</p>
                </div>
            `;
            
            try {
                const response = await fetch('/trendlens/api/global-trends/products');
                const data = await response.json();
                
                if (data.ok && data.data) {
                    showGlobalTrends(data.data);
                } else {
                    content.innerHTML = `
                        <div class="text-center py-8">
                            <i class="fas fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                            <p class="text-gray-300">لم يتم العثور على بيانات</p>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('Error loading global trends:', error);
                content.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-times-circle text-4xl text-red-500 mb-4"></i>
                        <p class="text-gray-300">حدث خطأ أثناء تحميل البيانات</p>
                    </div>
                `;
            }
        }

        function showGlobalTrends(data) {
            const content = document.getElementById('globalTrendsContent');
            if (!content) return;
            
            // عرض البيانات في ثلاثة أعمدة: Noon / Temu / Shopify / eBay
            const sources = ['noon', 'temu', 'shein', 'shopify', 'google_trends', 'ebay'];
            let html = '<div class="grid md:grid-cols-3 gap-4">';
            
            sources.forEach(sourceKey => {
                const sourceData = data[sourceKey];
                if (!sourceData || !sourceData.data) return;
                
                const products = sourceData.data.products || [];
                const sourceName = sourceKey === 'google_trends' ? 'Google Trends' : 
                                 sourceKey === 'shopify' ? 'Shopify' : 
                                 sourceKey === 'ebay' ? 'eBay' :
                                 sourceKey.charAt(0).toUpperCase() + sourceKey.slice(1);
                
                html += `
                    <div class="glass-effect rounded-lg p-4">
                        <h5 class="text-lg font-bold text-primary mb-3">${sourceName}</h5>
                        <div class="space-y-2">
                            ${products.length > 0 ? products.slice(0, 5).map((product, idx) => `
                                <div class="bg-black bg-opacity-30 rounded p-2">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <p class="text-white font-semibold text-sm">${idx + 1}. ${product.product_name || 'N/A'}</p>
                                            <p class="text-gray-400 text-xs">${product.category || ''}</p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-primary text-sm font-bold">${product.sales_score ? toArabicNumerals(product.sales_score.toFixed(1)) : 'N/A'}</p>
                                            <p class="text-green-400 text-xs">${product.change_rate ? '+' + toArabicNumerals(product.change_rate.toFixed(1)) + '%' : ''}</p>
                                        </div>
                                    </div>
                                </div>
                            `).join('') : '<p class="text-gray-400 text-sm">لا توجد بيانات</p>'}
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            content.innerHTML = html;
        }

        // ---- Image Search Functions ----
        let selectedImageFile = null;

        function handleImageSelect(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            selectedImageFile = file;
            
            // عرض Preview
            const preview = document.getElementById('imgPreview');
            const previewImg = document.getElementById('imgPreviewImg');
            const searchBtn = document.getElementById('imgSearchBtn');
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    preview.classList.remove('hidden');
                    searchBtn.disabled = false;
                };
                reader.readAsDataURL(file);
            }
        }

        async function uploadImage() {
            if (!selectedImageFile) {
                alert('يرجى اختيار صورة أولاً');
                return;
            }
            
            const resultsDiv = document.getElementById('imgSearchResults');
            const searchBtn = document.getElementById('imgSearchBtn');
            
            // عرض loading
            resultsDiv.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i>
                    <p class="text-gray-300">جاري البحث...</p>
                </div>
            `;
            
            searchBtn.disabled = true;
            
            try {
                const formData = new FormData();
                formData.append('file', selectedImageFile);
                
                const response = await fetch('/trendlens/api/image-search/upload?top_k=15', {
                    method: 'POST',
                    body: formData
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.ok && data.results && data.results.length > 0) {
                    showImageSearchResults(data.results, data.fallback);
                } else {
                    resultsDiv.innerHTML = `
                        <div class="text-center py-8">
                            <i class="fas fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                            <p class="text-gray-300">لم يتم العثور على نتائج</p>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('Error uploading image:', error);
                resultsDiv.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-times-circle text-4xl text-red-500 mb-4"></i>
                        <p class="text-gray-300">حدث خطأ أثناء البحث: ${error.message}</p>
                    </div>
                `;
            } finally {
                searchBtn.disabled = false;
            }
        }

        function showImageSearchResults(results, fallback) {
            const resultsDiv = document.getElementById('imgSearchResults');
            
            if (!results || results.length === 0) {
                resultsDiv.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                        <p class="text-gray-300">لم يتم العثور على نتائج</p>
                    </div>
                `;
                return;
            }
            
            let html = '';
            
            if (fallback) {
                html += `
                    <div class="mb-4 p-3 bg-yellow-500 bg-opacity-20 border border-yellow-500 rounded-lg">
                        <p class="text-yellow-400 text-sm">
                            <i class="fas fa-info-circle mr-2"></i>
                            تم استخدام نتائج إضافية من Bing Visual Search
                        </p>
                    </div>
                `;
            }
            
            html += '<div class="grid md:grid-cols-3 gap-4">';
            
            results.forEach((result, idx) => {
                const thumbnail = result.thumbnail_url || result.page_url || '';
                const productName = result.product_name || 'منتج غير معروف';
                const score = (result.final_score || result.score || 0) * 100;
                const source = result.source || 'unknown';
                
                html += `
                    <div class="glass-effect rounded-lg p-4 hover:bg-white hover:bg-opacity-10 transition-colors">
                        <div class="relative mb-3">
                            ${thumbnail ? `
                                <img src="${thumbnail}" alt="${productName}" 
                                     class="w-full h-48 object-cover rounded-lg" 
                                     onerror="this.src='https://via.placeholder.com/300x200?text=No+Image'">
                            ` : `
                                <div class="w-full h-48 bg-gray-700 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-image text-4xl text-gray-500"></i>
                                </div>
                            `}
                            <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs text-white">
                                ${toArabicNumerals(score.toFixed(1))}%
                            </div>
                        </div>
                        <h5 class="text-white font-semibold mb-2 line-clamp-2">${productName}</h5>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-tag mr-1"></i>${source}</span>
                            ${result.page_url ? `
                                <a href="${result.page_url}" target="_blank" 
                                   class="text-primary hover:text-yellow-400">
                                    <i class="fas fa-external-link-alt mr-1"></i>عرض
                                </a>
                            ` : ''}
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            resultsDiv.innerHTML = html;
        }

        // ---- Candles Chart Functions ----
        async function loadCandles() {
            const symbol = document.getElementById('candleSymbol').value.trim().toUpperCase();
            const interval = document.getElementById('candleInterval').value;
            const content = document.getElementById('candlesContent');
            const overlays = document.getElementById('candlesOverlays');
            
            if (!symbol) {
                alert('يرجى إدخال رمز الأصل');
                return;
            }
            
            // عرض loading
            content.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i>
                    <p class="text-gray-300">جاري تحميل الشموع...</p>
                </div>
            `;
            
            try {
                // جلب الشموع
                const response = await fetch(`/trendlens/api/market/candles?symbol=${symbol}&interval=${interval}&limit=200`);
                const data = await response.json();
                
                if (data.ok && data.candles && data.candles.length > 0) {
                    // عرض الشموع
                    renderCandles(data.candles, symbol, interval);
                    
                    // جلب التراكب
                    loadOverlays(symbol);
                    
                    // تحليل الشموع
                    analyzeCandles(symbol, interval, data.candles);
                } else {
                    content.innerHTML = `
                        <div class="text-center py-8">
                            <i class="fas fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                            <p class="text-gray-300">لم يتم العثور على بيانات للرمز ${symbol}</p>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('Error loading candles:', error);
                content.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-times-circle text-4xl text-red-500 mb-4"></i>
                        <p class="text-gray-300">حدث خطأ أثناء تحميل البيانات: ${error.message}</p>
                    </div>
                `;
            }
        }

        function renderCandles(candles, symbol, interval) {
            const content = document.getElementById('candlesContent');
            
            // استخدام Chart.js أو TradingView
            // هنا مثال بسيط باستخدام HTML/CSS
            let html = `
                <div class="mb-4">
                    <h5 class="text-white font-bold text-lg">${symbol} - ${interval}</h5>
                    <p class="text-gray-400 text-sm">${candles.length} شمعة</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-gray-400 border-b border-gray-700">
                                <th class="px-2 py-2 text-right">الوقت</th>
                                <th class="px-2 py-2 text-right">فتح</th>
                                <th class="px-2 py-2 text-right">عالي</th>
                                <th class="px-2 py-2 text-right">منخفض</th>
                                <th class="px-2 py-2 text-right">إغلاق</th>
                                <th class="px-2 py-2 text-right">الحجم</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            // عرض آخر 20 شمعة
            candles.slice(-20).reverse().forEach(candle => {
                const date = new Date(candle.ts);
                const isGreen = candle.close >= candle.open;
                const colorClass = isGreen ? 'text-green-400' : 'text-red-400';
                
                html += `
                    <tr class="border-b border-gray-800 hover:bg-white hover:bg-opacity-5">
                        <td class="px-2 py-2 text-gray-300">${formatDate(date)}</td>
                        <td class="px-2 py-2 text-gray-300">${toArabicNumerals(candle.open.toFixed(2))}</td>
                        <td class="px-2 py-2 text-green-400">${toArabicNumerals(candle.high.toFixed(2))}</td>
                        <td class="px-2 py-2 text-red-400">${toArabicNumerals(candle.low.toFixed(2))}</td>
                        <td class="px-2 py-2 ${colorClass}">${toArabicNumerals(candle.close.toFixed(2))}</td>
                        <td class="px-2 py-2 text-gray-400">${toArabicNumerals(candle.volume.toFixed(2))}</td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-center">
                    <p class="text-gray-400 text-xs">ملاحظة: يمكن دمج Chart.js أو TradingView لعرض رسومي أفضل</p>
                </div>
            `;
            
            content.innerHTML = html;
        }

        async function loadOverlays(symbol) {
            try {
                const response = await fetch(`/trendlens/api/trendlens/overlays?symbol=${symbol}`);
                const data = await response.json();
                
                if (data.ok) {
                    // عرض التراكب
                    document.getElementById('socialMentions').classList.remove('hidden');
                    document.getElementById('socialCount').textContent = data.social_mentions || 0;
                    
                    document.getElementById('shippingPulse').classList.remove('hidden');
                    const pulseText = {
                        'high': 'عالي',
                        'medium': 'متوسط',
                        'normal': 'عادي'
                    };
                    document.getElementById('pulseText').textContent = pulseText[data.shipping_pulse] || 'عادي';
                    
                    document.getElementById('heatIndicator').classList.remove('hidden');
                    const heatText = {
                        'high': 'عالي',
                        'medium': 'متوسط',
                        'low': 'منخفض'
                    };
                    document.getElementById('heatText').textContent = heatText[data.heat] || 'منخفض';
                }
            } catch (error) {
                console.error('Error loading overlays:', error);
            }
        }

        async function analyzeCandles(symbol, interval, candles) {
            try {
                const response = await fetch('/trendlens/api/market/candles/analyze', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        symbol: symbol,
                        interval: interval,
                        last_candles: candles.slice(-50)  // آخر 50 شمعة
                    })
                });
                
                const data = await response.json();
                
                if (data.ok && data.analysis) {
                    // عرض التحليل
                    const content = document.getElementById('candlesContent');
                    const analysisDiv = document.createElement('div');
                    analysisDiv.className = 'mt-4 p-4 bg-yellow-500 bg-opacity-20 border border-yellow-500 rounded-lg';
                    analysisDiv.innerHTML = `
                        <h6 class="text-yellow-400 font-bold mb-2">
                            <i class="fas fa-brain mr-2"></i>التحليل الذكي
                        </h6>
                        <p class="text-white text-sm mb-2">${data.analysis.summary}</p>
                        <div class="flex gap-2 flex-wrap">
                            ${data.analysis.signals.map(signal => `
                                <span class="bg-primary text-black px-2 py-1 rounded text-xs">${signal}</span>
                            `).join('')}
                        </div>
                    `;
                    content.appendChild(analysisDiv);
                }
            } catch (error) {
                console.error('Error analyzing candles:', error);
            }
        }

        // ---- Books Mini-Shelf seed and renderer ----
        const BOOKS_SEED = [
            {
                id: 'bk-001',
                title: { ar: 'دليل البائع العربي على أمازون', en: "Arab Seller's Guide to Amazon" },
                seller: { name: 'متجر النخبة' },
                price: 29.99,
                cover: 'https://picsum.photos/seed/ebook1/600/360',
                summary: { ar: 'أساسيات الانطلاق ورفع المنتجات وتحسين المبيعات.', en: 'Basics to launch, list products, and boost sales.' },
                partner_summary: { ar: 'هذا الكتاب تلخيص عملي من الشريك يشرح خطوات البداية.', en: 'Partner summary: a practical guide for getting started.' },
                rating: 4.6,
                flags: { best_selling: true, biz_favorite: true },
                type: 'ebook'
            },
            {
                id: 'bk-002',
                title: { ar: 'سحر الصور بالذكاء الاصطناعي', en: 'The Magic of AI Images' },
                seller: { name: 'AITech Lab' },
                price: 19.00,
                cover: 'https://picsum.photos/seed/ebook2/600/360',
                summary: { ar: 'دليل عملي لإنشاء صور تسويقية جذابة.', en: 'Hands-on guide to create catchy marketing visuals.' },
                partner_summary: { ar: 'أفكار جاهزة للاستخدام مع أمثلة تطبيقية.', en: 'Ready-to-use ideas with practical examples.' },
                rating: 4.2,
                flags: { fast_growing: true },
                type: 'ebook'
            },
            {
                id: 'bk-003',
                title: { ar: 'التسويق عبر تيك توك', en: 'TikTok Marketing Playbook' },
                seller: { name: 'Kroser Lab' },
                price: 24.50,
                cover: 'https://picsum.photos/seed/ebook3/600/360',
                summary: { ar: 'تكتيكات نمو واقعية لعلامتك التجارية.', en: 'Practical growth tactics for your brand.' },
                partner_summary: { ar: 'ملخص يصف خطوات الحملات الناجحة.', en: 'Summary outlining successful campaign steps.' },
                rating: 4.4,
                flags: { },
                type: 'ebook'
            },
            {
                id: 'bk-004',
                title: { ar: 'دليل رواد الأعمال السريع', en: 'Rapid Guide for Entrepreneurs' },
                seller: { name: 'BizHub' },
                price: 14.99,
                cover: 'https://picsum.photos/seed/ebook4/600/360',
                summary: { ar: 'وصفات مختصرة للبدء والتوسع.', en: 'Concise recipes to start and scale.' },
                partner_summary: { ar: 'نصائح عملية سريعة التنفيذ.', en: 'Actionable tips you can apply fast.' },
                rating: 4.1,
                flags: { biz_favorite: true },
                type: 'ebook'
            }
        ];

        function getCurrentLang() { return (window.__UICFG?.ui?.locale) || 'en'; }

        function renderStars(r){
            const full = Math.floor(r || 0);
            const half = (r - full) >= 0.5;
            const empty = 5 - full - (half?1:0);
            return '<span class="text-yellow-400">' + '★'.repeat(full) + (half?'☆':'') + '</span>' + '<span class="text-gray-500">' + '☆'.repeat(empty) + '</span>' + ` <span class="text-xs text-gray-400">(${toArabicNumerals((r||0).toFixed(1))})</span>`;
        }

        function renderBooksShelf() {
            const wrap = document.getElementById('booksShelfTrack');
            if (!wrap) return;
            const lang = getCurrentLang();

            // اختر أول 4 عناصر
            const shelf = Array.isArray(typeof BOOKS_SEED !== 'undefined' ? BOOKS_SEED : []) ? BOOKS_SEED : [];
            const picked = [];
            shelf.forEach(b => { if (picked.length < 4) picked.push(b); });

            // Fallback static samples if still less than 4
            const FALLBACK = [
                { id:'fb-1', title:{ar:'كتاب عينة 1',en:'Sample Book 1'}, seller:{name:'Demo'}, price:19.99, cover:'https://picsum.photos/seed/fb1/600/360', summary:{ar:'وصف مختصر',en:'Short blurb'}, flags:{best_selling:true}, type:'ebook' },
                { id:'fb-2', title:{ar:'كتاب عينة 2',en:'Sample Book 2'}, seller:{name:'Demo'}, price:24.99, cover:'https://picsum.photos/seed/fb2/600/360', summary:{ar:'وصف مختصر',en:'Short blurb'}, flags:{fast_growing:true}, type:'ebook' },
                { id:'fb-3', title:{ar:'كتاب عينة 3',en:'Sample Book 3'}, seller:{name:'Demo'}, price:14.50, cover:'https://picsum.photos/seed/fb3/600/360', summary:{ar:'وصف مختصر',en:'Short blurb'}, flags:{biz_favorite:true}, type:'ebook' },
                { id:'fb-4', title:{ar:'كتاب عينة 4',en:'Sample Book 4'}, seller:{name:'Demo'}, price:29.00, cover:'https://picsum.photos/seed/fb4/600/360', summary:{ar:'وصف مختصر',en:'Short blurb'}, flags:{}, type:'ebook' }
            ];
            // أكمل حتى 4 عناصر كحد أدنى
            let i=0; 
            while (picked.length < 4 && i < FALLBACK.length) {
                const fb = FALLBACK[i++];
                if (!picked.find(x => x.id === fb.id)) picked.push(fb);
            }

            wrap.innerHTML = picked.map(b => {
                const t = b.title?.[lang] || b.title?.ar || b.title?.en || '';
                const s = b.summary?.[lang] || b.summary?.ar || b.summary?.en || '';
                const ps = b.partner_summary?.[lang] || b.partner_summary?.ar || b.partner_summary?.en || '';
                const seller = b.seller?.name || '';
                const tr = getTranslations(lang) || {};
                const badgeText = tr.ebook_badge || (lang === 'en' ? 'E-book' : 'كتاب إلكتروني');
                const bestSellingText = tr.badge_best_selling || (lang === 'en' ? 'Best Selling' : 'الأعلى مبيعاً');
                const fastGrowingText = tr.badge_fast_growing || (lang === 'en' ? 'Fastest Growing' : 'الأسرع نمواً');
                const bizFavoriteText = tr.badge_biz_favorite || (lang === 'en' ? 'Business Favorite' : 'مفضل لأصحاب الأعمال');
                const badge = b.type === 'ebook'
                    ? `<span class="ebook-badge bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="ebook_badge">${badgeText}</span>`
                    : '';
                const tag = b.flags?.best_selling ? `<span class="bg-primary text-black text-xs font-semibold px-2 py-0.5 rounded" data-i18n="badge_best_selling">${bestSellingText}</span>` : b.flags?.fast_growing ? `<span class="bg-success text-white text-xs font-semibold px-2 py-0.5 rounded" data-i18n="badge_fast_growing">${fastGrowingText}</span>` : b.flags?.biz_favorite ? `<span class="bg-blue-300 text-black text-xs font-semibold px-2 py-0.5 rounded badge-biz" data-i18n="badge_biz_favorite">${bizFavoriteText}</span>` : '';
                const bookFlag = tag ? `<div class="book-flag">${tag}</div>` : '';
                return `
                <div class="glass-effect rounded-2xl overflow-hidden flex flex-col relative">
                    ${badge}
                    ${bookFlag}
                    <div>
                        <img src="${b.cover}" alt="${t}" class="w-full h-48 object-cover" onerror="this.onerror=null;this.src='https://picsum.photos/seed/ebook-fallback/600/360';">
                    </div>
                    <div class="p-4 flex-1 flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <h4 class="font-bold line-clamp-2">${t}</h4>
                            <div class="text-xs"></div>
                        </div>
                        <div class="text-sm text-gray-300"><span data-i18n="by_seller">${getTranslations(lang).by_seller || 'By:'}</span> ${seller}</div>
                        <p class="text-sm text-gray-300 line-clamp-2">${s}</p>
                        ${ps ? `<p class=\"text-xs text-gray-400 line-clamp-2\"><span data-i18n=\"partner_summary\">${getTranslations(lang).partner_summary || 'Partner summary'}</span>: ${ps}</p>` : ''}
                        <div class="mt-auto flex items-center justify-between">
                            <div class="text-primary font-bold">$${b.price||''}</div>
                            <a href="books.html#${b.id}" class="underline text-sm" data-i18n="view_more">${getTranslations(lang).view_more || 'More'}</a>
                        </div>
                    </div>
                </div>`;
            }).join('');
        }

        // Re-render books when language changes
        const _origSwitchLang = switchLang;
        switchLang = function(lang){
            _origSwitchLang(lang);
            if (typeof renderBooksShelf === 'function') renderBooksShelf();
            // تحديث الشهادات عند تبديل اللغة
            if (typeof window.__updateTestimonials === 'function') window.__updateTestimonials();
            // re-check shortly in case layout/i18n updated after injection
            setTimeout(function(){
                const wrap = document.getElementById('booksShelfTrack');
                if (wrap && wrap.children.length === 0 && typeof renderBooksShelf === 'function') renderBooksShelf();
                if (typeof window.__updateTestimonials === 'function') window.__updateTestimonials();
            }, 200);
        };

        // Cinematic Loader Animation (TrendLens Final)
        (function () {
            // كشف لغة المتصفح
            function detectBrowserLanguage() {
                // محاولة الحصول من إعدادات الموقع أولاً
                const savedLocale = window.__UICFG?.ui?.locale || localStorage.getItem('tl_lang');
                if (savedLocale === 'ar' || savedLocale === 'en') {
                    return savedLocale;
                }
                
                // كشف من لغة المتصفح
                const browserLang = navigator.language || navigator.userLanguage || 'en';
                const langCode = browserLang.toLowerCase().split('-')[0];
                
                // إذا كانت اللغة عربية أو أي لغة تبدأ بـ 'ar'
                if (langCode === 'ar' || browserLang.toLowerCase().startsWith('ar')) {
                    return 'ar';
                }
                
                // افتراضي: إنجليزي
                return 'en';
            }

            function initLoader() {
                const overlay = document.getElementById('intro-screen');
                const logoSvg = document.getElementById('loader-logo-svg');
                const logoContainer = logoSvg?.parentElement;
                const logoMain = document.getElementById('loader-logo-main');
                const loaderText = document.getElementById('loader-text');

                // لو عنصر اللودر مو جاهز، جرّب بعد لحظات
                if (!overlay) {
                    setTimeout(initLoader, 100);
                    return;
                }

                // كشف اللغة وتعيين النص المناسب
                const locale = detectBrowserLanguage();
                const texts = {
                    ar: 'تهيئة غرفة التحكّم في الترندات…',
                    en: 'Preparing your trend control room…'
                };

                if (loaderText) {
                    loaderText.textContent = texts[locale] || texts.en;
                    loaderText.dir = locale === 'ar' ? 'rtl' : 'ltr';
                }

                // تأكد أن اللودر ظاهر في البداية
                overlay.style.display = 'flex';
                overlay.style.visibility = 'visible';
                overlay.style.opacity = '1';
                overlay.classList.remove('hidden');

                // ظهور الشعار SVG بعد 0.3 ثانية مع حركة دوران وتكبير
                setTimeout(() => {
                    if (logoContainer) {
                        logoContainer.classList.add('visible');
                    }
                }, 300);

                // ظهور النص الرئيسي بعد 0.5 ثانية
                setTimeout(() => {
                    if (logoMain) {
                        logoMain.classList.add('visible');
                    }
                }, 500);

                // ظهور النص بعد 0.7 ثانية
                setTimeout(() => {
                    if (loaderText) {
                        loaderText.classList.add('visible');
                    }
                }, 700);

                // إخفاء اللودر بعد 2.2 ثانية مع fade-out
                setTimeout(() => {
                    overlay.classList.add('hidden');
                    overlay.style.opacity = '0';
                    overlay.style.visibility = 'hidden';

                    // بعد انتهاء الانتقال (0.5s)، نخفيه نهائيًا
                    setTimeout(() => {
                        overlay.style.display = 'none';
                        overlay.style.opacity = '0';
                        overlay.style.visibility = 'hidden';
                    }, 500);
                }, 2200);
            }

            // تشغيل اللودر عند تحميل الصفحة
            if (document.readyState === 'loading') {
                window.addEventListener('load', initLoader);
                // Fallback: init after 3 seconds even if load event doesn't fire
                setTimeout(initLoader, 3000);
            } else {
                initLoader();
            }
        })();
        
        // Scene Cut Navigation
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('a[data-scene-link="true"]');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    const url = link.getAttribute('href');
                    
                    if (!url || url.startsWith('#') || link.target === '_blank') return;
                    
                    e.preventDefault();
                    
                    document.body.classList.add('page-transitioning');
                    
                    setTimeout(() => {
                        window.location.href = url;
                    }, 280);
                });
            });
        });
        
        document.addEventListener('DOMContentLoaded', renderBooksShelf);

        // Final fallback to render ebooks thumbnails after full page load
        let ebooksRendered = false;
        function renderEbooksFallback() {
            if (ebooksRendered) return;
            ebooksRendered = true;
            if (typeof renderBooksShelf === 'function') { renderBooksShelf(); }
            const wrap = document.getElementById('booksShelfTrack');
            if (wrap && wrap.children.length === 0 && typeof renderBooksShelf === 'function') {
                setTimeout(renderBooksShelf, 150);
            }
        }
        window.addEventListener('load', renderEbooksFallback);
        // Fallback: render after 3 seconds even if load event doesn't fire
        setTimeout(renderEbooksFallback, 3000);

        // ---- Chat widget logic with i18n ----
        function getCurrentLocale(){ return (window.__UICFG?.ui?.locale) || 'en'; }

        function toggleChat(){
            const win = document.getElementById('chatWindow');
            if (!win) return;
            const isHidden = win.classList.contains('hidden');
            win.classList.toggle('hidden');
            // عند الفتح، مرر للنهاية
            if (isHidden) {
                const box = document.getElementById('chatMessages');
                if (box) box.scrollTop = box.scrollHeight;
            }
        }

        function addMessage(role, text){
            const box = document.getElementById('chatMessages');
            if (!box) return;
            const isMe = role === 'me';
            const item = document.createElement('div');
            item.className = 'flex items-start gap-2 ' + (isMe ? 'justify-end' : '');
            item.innerHTML = isMe ? `
                <div class="bg-primary text-black rounded-lg p-3 shadow-sm max-w-xs">${text}</div>
            ` : `
                <div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-robot text-black text-xs"></i>
                </div>
                <div class="bg-white rounded-lg p-3 shadow-sm max-w-xs"><p class="text-sm text-gray-800">${text}</p></div>
            `;
            box.appendChild(item);
            // scroll to bottom
            box.scrollTop = box.scrollHeight;
        }

        function getQuickResponse(key, lang){
            if (lang === 'en') {
                const map = {
                    billing: 'For billing questions, please specify your plan or invoice number.',
                    technical: 'What technical issue are you facing? Login, performance, or errors?',
                    feature: 'Tell us the feature you need and your use case.'
                };
                return map[key] || 'How can I help?';
            } else {
                const map = {
                    billing: 'لاستفسارات الفوترة، فضلاً حدّد خطتك أو رقم الفاتورة.',
                    technical: 'ما المشكلة التقنية؟ هل هي تسجيل الدخول، الأداء، أم أخطاء؟',
                    feature: 'اذكر الميزة المطلوبة وحالة الاستخدام لديك.'
                };
                return map[key] || 'كيف أقدر أساعدك؟';
            }
        }

        function getBotResponse(message, lang){
            const msg = (message || '').toLowerCase();
            if (lang === 'en') {
                if (msg.includes('price') || msg.includes('plan')) return 'You can switch Monthly/Yearly in pricing. Annual saves up to 20%.';
                if (msg.includes('book') || msg.includes('ebook')) return 'E-books section shows top picks and more on the books page.';
                if (msg.includes('language') || msg.includes('english') || msg.includes('arabic')) return 'Switch language from the top-right buttons. Content updates instantly.';
                return "Thanks! Our team will respond shortly. Meanwhile, can you share more details?";
            } else {
                if (msg.includes('سعر') || msg.includes('خطة') || msg.includes('الباقات')) return 'تقدر تغيّر بين شهري/سنوي في التسعير. السنوي يوفر حتى 20%.';
                if (msg.includes('كتاب') || msg.includes('الكتب')) return 'قسم الكتب الإلكترونية يعرض أبرز الكتب ويمكنك مشاهدة المزيد في صفحة الكتب.';
                if (msg.includes('لغة') || msg.includes('عربي') || msg.includes('انجليزي')) return 'بدّل اللغة من الأزرار أعلى يمين الصفحة وسيتم التحديث فوراً.';
                return 'شكراً! سيردّ عليك فريقنا قريباً. خلال ذلك، هل تستطيع توضيح التفاصيل أكثر؟';
            }
        }

        function sendMessage(){
            const input = document.getElementById('chatInput');
            if (!input) return;
            const text = (input.value || '').trim();
            if (!text) return;
            addMessage('me', text);
            input.value = '';
            const lang = getCurrentLocale();
            // محاولة استدعاء Support-AI عبر API، مع fallback محلي
            fetch(`${API_BASE}/ai/infer`, {
                method: 'POST', headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ intent: 'support', text, plan_code: 'basic', locale: lang })
            }).then(r=>r.json()).then(data=>{
                const a = data?.result?.answer || getBotResponse(text, lang);
                addMessage('bot', a);
            }).catch(()=>{
                setTimeout(() => addMessage('bot', getBotResponse(text, lang)), 300);
            });
        }

        function sendQuickMessage(key){
            const lang = getCurrentLocale();
            const btnDict = getTranslations(lang);
            // أرسل عبارة الزر كنصي أنا
            const keyMap = { billing: 'quick_billing', technical: 'quick_technical', feature: 'quick_feature' };
            const label = btnDict[keyMap[key]] || key;
            addMessage('me', label);
            // استدعاء Support-AI بنفس الآلية
            fetch(`${API_BASE}/ai/infer`, {
                method: 'POST', headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ intent: 'support', text: label, plan_code: 'basic', locale: lang })
            }).then(r=>r.json()).then(data=>{
                const a = data?.result?.answer || getQuickResponse(key, lang);
                addMessage('bot', a);
            }).catch(()=>{
                setTimeout(() => addMessage('bot', getQuickResponse(key, lang)), 250);
            });
        }

        // --- Usage quota fetching & rendering ---
        async function fetchUsageAndRender(){
            try{
                const res = await fetch(`${API_BASE}/me/usage`);
                if (!res.ok) {
                    if (res.status === 404) {
                        console.warn('Usage endpoint not available:', res.status);
                    }
                    return;
                }
                const contentType = res.headers.get('content-type');
                if (!contentType || !contentType.includes('application/json')) {
                    console.warn('API returned non-JSON response:', contentType);
                    return;
                }
                const data = await res.json();
                if(!data.ok) return;
                const aiTextQuotaEl = document.getElementById('aiTextQuota');
                const imageQuotaEl = document.getElementById('imageQuota');
                if(aiTextQuotaEl){
                    const t = data.ai_text;
                    aiTextQuotaEl.textContent = (t.quota === -1)
                        ? 'استخدام الذكاء النصي: غير محدود في باقتك'
                        : `استخدام الذكاء النصي: ${t.used} من ${t.quota} (المتبقي ${t.remaining})`;
                    aiTextQuotaEl.classList.remove('hidden');
                }
                if(imageQuotaEl){
                    const im = data.image_search;
                    imageQuotaEl.textContent = (im.quota === -1)
                        ? 'البحث بالصور: غير محدود في باقتك'
                        : `البحث بالصور: ${im.used} من ${im.quota} (المتبقي ${im.remaining})`;
                    imageQuotaEl.classList.remove('hidden');
                }
            }catch(e){ console.warn('usage fetch failed', e); }
        }

        // استدعاء عند التحميل
        fetchUsageAndRender();
        updateAIUploadButtonPosition(window.__UICFG?.ui?.locale || document.documentElement.lang || 'en');

        // --- Camera button inside AI text ---
        (function(){
            const btn = document.getElementById('openImageFromText');
            const input = document.getElementById('hiddenImageInput');
            if(btn && input){
                btn.addEventListener('click', ()=> input.click());
                input.addEventListener('change', async (e)=>{
                    const file = e.target && e.target.files && e.target.files[0];
                    if(!file) return;
                    try{
                        const fd = new FormData();
                        fd.append('file', file);
                        const res = await fetch(`${API_BASE}/image-search/upload?top_k=15`, { method:'POST', body: fd });
                        const data = await res.json();
                        if(data && data.ok){
                            // يمكن عرض النتائج في عنصر منفصل لاحقاً
                        }else if(data && data.result && data.result.message){
                            alert(data.result.message);
                        }
                    }catch(err){ console.error('image upload failed', err); }
                    // حدّث الرصيد بعد العملية
                    fetchUsageAndRender();
                });
            }
        })();

        // ===== Homepage Trends (local/global scope switch) =====
        (function () {
            const section = document.getElementById('homepage-trends-section');
            if (!section) return;

            const listEl = document.getElementById('homepageTrendsList');
            const scopeLabelEl = document.getElementById('homepageTrendsScopeLabel');
            const btnLocal = document.getElementById('homepageScopeLocalBtn');
            const btnGlobal = document.getElementById('homepageScopeGlobalBtn');
            const STORAGE_KEY = 'tl_trend_scope';

            function getLocale() {
                const lang = (window.currentLang || window.__UICFG?.ui?.locale || 'ar');
                return lang === 'en' ? 'en-US' : 'ar-SA';
            }

            function setActive(scope) {
                if (!btnLocal || !btnGlobal) return;
                const activeClasses = ['bg-primary', 'text-black'];
                const inactiveClasses = ['text-gray-300'];

                if (scope === 'global') {
                    btnGlobal.classList.add(...activeClasses);
                    btnGlobal.classList.remove(...inactiveClasses);
                    btnLocal.classList.remove(...activeClasses);
                    if (!btnLocal.classList.contains('text-gray-300')) {
                        btnLocal.classList.add('text-gray-300');
                    }
                } else {
                    btnLocal.classList.add(...activeClasses);
                    btnLocal.classList.remove(...inactiveClasses);
                    btnGlobal.classList.remove(...activeClasses);
                    if (!btnGlobal.classList.contains('text-gray-300')) {
                        btnGlobal.classList.add('text-gray-300');
                    }
                }
            }

            function updateScopeLabel(scope, countryCode, countryName) {
                if (!scopeLabelEl) return;
                const lang = (window.currentLang || window.__UICFG?.ui?.locale || 'ar').toLowerCase();
                const isEn = lang.startsWith('en');
                
                // استخدام window.t إذا موجود، وإلا fallback مباشر
                let tFn;
                if (typeof window.t === 'function') {
                    tFn = window.t;
                } else {
                    tFn = function (k) { 
                        const translations = {
                            'trends.scope.global_title': isEn ? 'Global Trend' : 'الترند العالمي',
                            'trends.scope.country_prefix': isEn ? 'Local Trend –' : 'الترند المحلي –',
                            'trends.scope.country_unknown': isEn ? 'Unknown' : 'غير معروف'
                        };
                        return translations[k] || k;
                    };
                }

                if (scope === 'global') {
                    const text = tFn('trends.scope.global_title');
                    scopeLabelEl.textContent = text || (isEn ? 'Global Trend' : 'الترند العالمي');
                    return;
                }

                const prefix = tFn('trends.scope.country_prefix') || (isEn ? 'Local Trend –' : 'الترند المحلي –');
                const fallbackCountry = tFn('trends.scope.country_unknown') || (isEn ? 'Unknown' : 'غير معروف');
                const displayName = countryName || countryCode || fallbackCountry;
                scopeLabelEl.textContent = `${prefix} ${displayName}`;
            }

            function renderItems(items, accessLevel) {
                if (!listEl) return;
                const lang = (window.currentLang || window.__UICFG?.ui?.locale || 'ar').toLowerCase();
                const isEn = lang.startsWith('en');
                const tFn = window.t || function (k) { 
                    const translations = {
                        'lifespan_days_label': isEn ? 'Lifespan (days)' : 'عمر الترند (أيام)'
                    };
                    return translations[k] || k;
                };

                if (!items || !items.length) {
                    const msg = isEn
                        ? 'No trends available right now.'
                        : 'لا توجد بيانات ترند متاحة حالياً.';
                    listEl.innerHTML = `
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-rocket"></i>
                            <span class="ml-2">${msg}</span>
                        </div>
                    `;
                    return;
                }

                // تحويل إلى شريط تمرير أفقي مثل live-pill
                listEl.className = 'live-teaser-bar-pills';
                listEl.style.cssText = 'display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin;';
                
                let html = '';
                items.forEach((item, index) => {
                    const rawName = item.name || '';
                    const name = escapeHtml(rawName);
                    const category = escapeHtml(item.category || '');
                    const market = escapeHtml(item.primary_market || '');
                    const trendLabelText = escapeHtml(item.trend_label_text || '');
                    const uts = (item.uts !== undefined && item.uts !== null) ? String(item.uts) : null;
                    const lifespan = (item.lifespan_days !== undefined && item.lifespan_days !== null) ? String(item.lifespan_days) : null;

                    // ترجمة اسم المنتج عند توفره
                    let displayName = name;
                    if (typeof window.translateProductName === 'function') {
                        const translated = window.translateProductName(rawName);
                        if (translated && translated !== rawName) {
                            displayName = escapeHtml(translated);
                        }
                    }

                    // بناء نص مختصر للـ pill
                    let pillText = displayName;
                    if (category && category !== 'غير مصنف') {
                        pillText += ` • ${category}`;
                    }
                    if (market) {
                        pillText += ` (${market})`;
                    }

                    // إضافة معلومات المشترك في tooltip أو نص إضافي
                    let extraInfo = '';
                    if (accessLevel === 'subscriber' && (uts !== null || lifespan !== null)) {
                        const parts = [];
                        if (uts !== null) parts.push(`UTS: ${uts}`);
                        if (lifespan !== null) parts.push(isEn ? `${lifespan}d` : `${lifespan} يوم`);
                        if (parts.length > 0) {
                            extraInfo = ` • ${parts.join(', ')}`;
                        }
                    }

                    html += `
                        <div class="live-pill homepage-trend-pill ${index === 0 ? 'active' : ''}" style="position: relative; opacity: 1; transform: none; pointer-events: all; display: inline-flex; left: auto; min-width: fit-content; white-space: nowrap; cursor: pointer;" title="${escapeHtml(pillText + extraInfo)}">
                            <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                            <span class="trend-name">${displayName}</span>
                            ${trendLabelText ? `<span class="trend-meta ml-2">${trendLabelText}</span>` : ''}
                        </div>
                    `;
                });

                listEl.innerHTML = html;
            }

            async function loadHomepageTrends(scope) {
                const tFn = window.t || function (k) { return k; };
                const locale = getLocale();

                if (listEl) {
                    listEl.innerHTML = `
                        <div class="text-center py-4 text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i>
                            <span class="ml-2">${tFn('generic.loading') || 'جاري التحميل...'}</span>
                        </div>
                    `;
                }

                try {
                    const params = new URLSearchParams();
                    params.append('scope', scope);
                    params.append('locale', locale);

                    const url = `${API_BASE}/trends/homepage?${params.toString()}`;
                    console.log('[Homepage Trends] Fetching:', url);
                    
                    let resp;
                    try {
                        resp = await fetchWithTimeout(url, { credentials: 'include', cache: 'no-store' }, 8000);
                    } catch (fetchErr) {
                        console.error('[Homepage Trends] Fetch error:', fetchErr);
                        throw new Error('Network error: ' + (fetchErr.message || 'Failed to fetch'));
                    }
                    
                    if (!resp || !resp.ok) {
                        const status = resp ? resp.status : 'unknown';
                        const statusText = resp ? resp.statusText : 'No response';
                        console.error('[Homepage Trends] HTTP error:', status, statusText);
                        throw new Error(`HTTP ${status}: ${statusText}`);
                    }
                    
                    const contentType = resp.headers.get('content-type') || '';
                    if (!contentType.includes('application/json')) {
                        const text = await resp.text();
                        console.error('[Homepage Trends] Invalid content-type:', contentType);
                        console.error('[Homepage Trends] Response text:', text.substring(0, 200));
                        throw new Error('Invalid response format (expected JSON, got ' + contentType + ')');
                    }

                    let data;
                    try {
                        data = await resp.json();
                    } catch (jsonErr) {
                        console.error('[Homepage Trends] JSON parse error:', jsonErr);
                        const text = await resp.text();
                        console.error('[Homepage Trends] Response text:', text.substring(0, 500));
                        throw new Error('Failed to parse JSON response');
                    }
                    
                    console.log('[Homepage Trends] Response:', data);
                    
                    if (!data || data.ok !== true) {
                        console.error('[Homepage Trends] API error:', data ? data.error : 'No data');
                        throw new Error(data ? (data.error || 'API error') : 'No response data');
                    }

                    const items = data.items || [];
                    const accessLevel = data.access_level || 'free';
                    const scopeValue = data.scope || scope;
                    const countryCode = data.country_code || null;
                    const countryName = data.country_name || null;

                    updateScopeLabel(scopeValue, countryCode, countryName);
                    renderItems(items, accessLevel);
                    
                    // تطبيق الترجمات على الأزرار بعد التحميل
                    if (typeof applyTranslations === 'function') {
                        applyTranslations(section);
                    }
                } catch (err) {
                    console.error('[Homepage Trends] Error:', err);
                    console.error('[Homepage Trends] Error details:', {
                        message: err.message,
                        stack: err.stack,
                        name: err.name
                    });
                    if (listEl) {
                        const lang = (window.currentLang || window.__UICFG?.ui?.locale || 'ar').toLowerCase();
                        const msg = lang.startsWith('en')
                            ? 'Something went wrong while loading trends.'
                            : 'تعذر تحميل بيانات الترندات.';
                        listEl.innerHTML = `
                            <div class="text-center py-4 text-red-400">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="ml-2">${msg}</span>
                            </div>
                        `;
                    }
                }
            }

            const savedScope = localStorage.getItem(STORAGE_KEY);
            let currentScope = (savedScope === 'global' || savedScope === 'local') ? savedScope : 'local';

            // تطبيق الترجمات على الأزرار عند التحميل
            if (typeof applyTranslations === 'function') {
                applyTranslations(section);
            }

            setActive(currentScope);
            loadHomepageTrends(currentScope);

            if (btnLocal) {
                btnLocal.addEventListener('click', function () {
                    if (currentScope === 'local') return;
                    currentScope = 'local';
                    localStorage.setItem(STORAGE_KEY, 'local');
                    setActive('local');
                    loadHomepageTrends('local');
                });
            }

            if (btnGlobal) {
                btnGlobal.addEventListener('click', function () {
                    if (currentScope === 'global') return;
                    currentScope = 'global';
                    localStorage.setItem(STORAGE_KEY, 'global');
                    setActive('global');
                    loadHomepageTrends('global');
                });
            }
        })();

        // ===== Trending Products Cards =====
        (function () {
            let isLoading = false;
            let hasLoaded = false;
            
            const grid = document.getElementById('exploding-products-grid') || document.querySelector('.tl-cards-grid');
            if (!grid) {
                console.error('[Trending Cards] Grid element not found!');
                return;
            }
            
            console.log('[Trending Cards] Grid element found:', grid);
            
            // حماية Grid من أي سكربت آخر يحاول الكتابة فيه
            const originalInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
            const originalTextContent = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
            const originalInnerText = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerText');
            
            // حماية Grid من أي سكربت آخر يحاول الكتابة فيه (باستخدام flag بدلاً من stack trace)
            let allowWrite = false;
            
            // حماية innerHTML
            if (originalInnerHTML && originalInnerHTML.set) {
                Object.defineProperty(grid, 'innerHTML', {
                    set: function(value) {
                        // السماح فقط إذا كان allowWrite = true أو إذا كان مسح (grid.innerHTML = '')
                        const isClearing = value === '' || value.trim() === '';
                        
                        if (!allowWrite && !isClearing) {
                            console.warn('[Trending Cards] ⚠️ Blocked attempt to write to grid.innerHTML from another script:', value.substring(0, 100));
                            return; // منع الكتابة
                        }
                        originalInnerHTML.set.call(this, value);
                        allowWrite = false; // إعادة تعيين بعد الكتابة
                    },
                    get: originalInnerHTML.get
                });
            }
            
            // حماية textContent
            if (originalTextContent && originalTextContent.set) {
                Object.defineProperty(grid, 'textContent', {
                    set: function(value) {
                        const isClearing = value === '' || value.trim() === '';
                        
                        if (!allowWrite && !isClearing) {
                            console.warn('[Trending Cards] ⚠️ Blocked attempt to write to grid.textContent from another script:', value.substring(0, 100));
                            return; // منع الكتابة
                        }
                        originalTextContent.set.call(this, value);
                        allowWrite = false;
                    },
                    get: originalTextContent.get
                });
            }
            
            // حماية innerText
            if (originalInnerText && originalInnerText.set) {
                Object.defineProperty(grid, 'innerText', {
                    set: function(value) {
                        const isClearing = value === '' || value.trim() === '';
                        
                        if (!allowWrite && !isClearing) {
                            console.warn('[Trending Cards] ⚠️ Blocked attempt to write to grid.innerText from another script:', value.substring(0, 100));
                            return; // منع الكتابة
                        }
                        originalInnerText.set.call(this, value);
                        allowWrite = false;
                    },
                    get: originalInnerText.get
                });
            }
            
            // دالة مساعدة للسماح بالكتابة من سكربت الكروت
            function allowGridWrite() {
                allowWrite = true;
            }

            // دالة لبناء نقاط الشارت (للتوافق مع الكود القديم)
            function buildSparklinePoints(series) {
                if (!series || !series.length) {
                    series = [10, 15, 12, 18, 20, 25, 22, 28];
                }
                
                series = series
                    .map(v => parseFloat(v))
                    .filter(v => !isNaN(v) && isFinite(v));
                
                if (series.length === 0) {
                    series = [10, 15, 12, 18, 20, 25, 22, 28];
                }

                const max = Math.max(...series);
                const min = Math.min(...series);
                const span = max - min || 1;
                
                const padding = span * 0.1;
                const adjustedMin = min - padding;
                const adjustedMax = max + padding;
                const adjustedSpan = adjustedMax - adjustedMin || 1;

                return series.map((v, idx) => {
                    const x = (idx / Math.max(series.length - 1, 1)) * 100;
                    const norm = (v - adjustedMin) / adjustedSpan;
                    const y = 2 + (1 - norm) * 26;
                    return { x, y };
                });
            }

            // دالة جديدة لبناء path مع منحنيات ناعمة (Cubic Bezier)
            function buildSmoothSparklinePath(series) {
                const points = buildSparklinePoints(series);
                if (points.length < 2) {
                    return 'M 0,15 L 100,15';
                }

                let path = `M ${points[0].x},${points[0].y}`;
                
                // استخدام Cubic Bezier Curves لإنشاء منحنيات ناعمة
                for (let i = 0; i < points.length - 1; i++) {
                    const current = points[i];
                    const next = points[i + 1];
                    
                    // حساب نقاط التحكم للـ Bezier curve
                    const cp1x = current.x + (next.x - current.x) / 3;
                    const cp1y = current.y;
                    const cp2x = current.x + 2 * (next.x - current.x) / 3;
                    const cp2y = next.y;
                    
                    // استخدام C (cubic bezier) لإنشاء منحنى ناعم
                    path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
                }
                
                return path;
            }
            
            // جعل الدالة متاحة عالمياً
            window.buildSmoothSparklinePath = buildSmoothSparklinePath;

            function getDemandLevel(score) {
                if (!score) return { label: 'متوسط', class: 'medium' };
                const num = parseFloat(score) || 0;
                if (num >= 70) return { label: 'مرتفع', class: 'high' };
                if (num >= 40) return { label: 'متوسط', class: 'medium' };
                return { label: 'منخفض', class: 'low' };
            }

            function formatGrowth(growth) {
                if (!growth) return '0%';
                const num = parseFloat(growth) || 0;
                return (num > 0 ? '+' : '') + num + '%';
            }

            function translate(key, fallback) {
                if (typeof window.t === 'function') {
                    const translated = window.t(key);
                    if (translated && translated !== key) return translated;
                }
                return fallback;
            }

            // دالة تحديث الوقت
            function updateLastUpdateTime() {
                const timeEl = document.getElementById('last-update-time');
                if (timeEl) {
                    const now = new Date();
                    const timeStr = now.toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
                    timeEl.textContent = timeStr;
                }
            }

            // دالة تحديث المنتجات المنفجرة (متاحة عالمياً)
            window.refreshExplodingProducts = function() {
                const refreshBtn = document.querySelector('button[onclick="refreshExplodingProducts()"]');
                if (refreshBtn) {
                    const icon = refreshBtn.querySelector('i');
                    if (icon) {
                        icon.classList.add('fa-spin');
                        setTimeout(() => {
                            icon.classList.remove('fa-spin');
                        }, 1000);
                    }
                }
                hasLoaded = false; // إعادة تعيين للسماح بإعادة التحميل
                loadTrendingCards();
            };

            async function loadTrendingCards() {
                // منع التحميل المكرر (لكن نسمح بإعادة التحميل عند الطلب)
                if (isLoading) {
                    console.log('[Trending Cards] Already loading, skipping...');
                    return;
                }
                
                isLoading = true;
                console.log('[Trending Cards] Starting to load...');
                
                if (!grid) {
                    console.error('[Trending Cards] Grid element not found!');
                    isLoading = false;
                    return;
                }

                try {
                    const locale = (window.currentLang || window.__UICFG?.ui?.locale || 'ar') === 'en' ? 'en-US' : 'ar-SA';
                    // استخدام timestamp لمنع الـ cache
                    const timestamp = new Date().getTime();
                    const url = `${API_BASE}/trends/explosions?limit=8&period=last_7d&_t=${timestamp}`;
                    
                    console.log('[Trending Cards] Fetching from:', url);
                    
                    const response = await fetch(url, { 
                        credentials: 'include', 
                        cache: 'no-store',
                        headers: {
                            'Cache-Control': 'no-cache, no-store, must-revalidate',
                            'Pragma': 'no-cache'
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }

                    const data = await response.json();
                    console.log('[Trending Cards] API Response:', data);
                    
                    // طباعة أول عنصر من API للتحقق من الحقول
                    const rawItems = data.items || data.products || data || [];
                    console.log('[Trending Cards] Raw API data structure:', {
                        hasItems: !!data.items,
                        hasProducts: !!data.products,
                        isArray: Array.isArray(data),
                        rawItemsLength: rawItems.length,
                        rawItemsType: typeof rawItems
                    });
                    
                    if (rawItems.length > 0) {
                        console.log('Exploding API sample:', rawItems[0]);
                        console.log('Exploding API sample keys:', Object.keys(rawItems[0]));
                        console.log('[Trending Cards] Sample item sparkline data:', {
                            hasSeries: !!rawItems[0].series,
                            hasSparklineSeries: !!rawItems[0].sparkline_series,
                            hasPlatformBreakdown: !!rawItems[0].platform_breakdown,
                            hasCountryBreakdown: !!rawItems[0].country_breakdown,
                            hasTimeSeriesData: !!rawItems[0].time_series_data,
                            hasSearchGrowth: rawItems[0].search_growth !== undefined,
                            hasExplosionScore: rawItems[0].explosion_score !== undefined
                        });
                        console.log('Exploding API sample full object:', JSON.stringify(rawItems[0], null, 2));
                    } else {
                        console.warn('[Trending Cards] No items found in API response!');
                        console.log('[Trending Cards] Full API response:', JSON.stringify(data, null, 2));
                    }
                    
                    const items = Array.isArray(rawItems) ? rawItems : [];
                    console.log('[Trending Cards] Items found:', items.length);
                    
                    if (items.length === 0) {
                        console.error('[Trending Cards] CRITICAL: No items to render!');
                        console.error('[Trending Cards] API response was:', data);
                    }

                    if (items.length === 0) {
                        const errorMsg = locale === 'en-US' ? 'No trends available right now.' : 'لا توجد ترندات جاهزة للعرض الآن.';
                        allowGridWrite();
                        grid.innerHTML = `<p class="text-center py-8 text-gray-400">${errorMsg}</p>`;
                        return;
                    }

                    allowGridWrite();
                    grid.innerHTML = '';

                    // تطبيق الترجمات على العنوان والوصف
                    const titleEl = document.getElementById('trending-cards-title');
                    const subtitleEl = document.getElementById('trending-cards-subtitle');
                    if (titleEl) {
                        const titleText = translate('trending_cards.title', locale === 'en-US' ? 'Exploding Products Now' : 'المنتجات المنفجرة الآن');
                        titleEl.textContent = titleText;
                    }
                    if (subtitleEl) {
                        const subtitleText = translate('trending_cards.subtitle', locale === 'en-US' ? 'Live snapshot from the control room' : 'لقطة حية من غرفة التحكم');
                        subtitleEl.textContent = subtitleText;
                    }

                    items.slice(0, 8).forEach((item, index) => {
                        try {
                            console.log(`[Trending Cards] Processing item ${index + 1}:`, item);
                            
                            // إنشاء الكرت
                            const card = document.createElement('div');
                            // نضيف tl-card--trend من البداية
                            card.className = 'tl-card tl-card--trend glass-effect rounded-xl p-4 flex flex-col gap-2';
                            
                            // الحصول على معرف المنتج - دعم حقول متعددة
                            const productId = item.product_id || item.id || item.productId || item._id || item.name || item.title || `product-${index}`;
                            card.dataset.productId = productId;
                            
                            // التأكد من أن className مطبق قبل innerHTML
                            console.log('[Trending Cards] Card className BEFORE innerHTML:', card.className);
                            console.log('[Trending Cards] Card element before innerHTML:', card);

                            // معالجة النمو - قد يكون string أو number - دعم حقول متعددة
                            let growth = 0;
                            if (item.growth !== undefined && item.growth !== null) {
                                growth = parseFloat(item.growth) || 0;
                            } else if (item.search_growth !== undefined && item.search_growth !== null) {
                                growth = parseFloat(item.search_growth) || 0;
                            } else if (item.growth_7d !== undefined && item.growth_7d !== null) {
                                growth = parseFloat(item.growth_7d) || 0;
                            } else if (item.growth_rate !== undefined && item.growth_rate !== null) {
                                growth = parseFloat(item.growth_rate) || 0;
                            }
                            
                            // الحصول على اسم المنتج - دعم حقول متعددة
                            const productName = item.name || item.title || item.product_name || item.productName || (locale === 'en-US' ? 'Product' : 'منتج');
                            
                            // الحصول على مستوى الطلب - دعم حقول متعددة
                            const demand = getDemandLevel(item.explosion_score || item.score || item.confidence || item.demand_level || item.demand_score);
                            
                            // الحصول على السوق - دعم حقول متعددة
                            const market = item.market || item.primary_market || item.country || item.dominant_country || item.country_code || '-';
                            
                            // الحصول على الفئة - دعم حقول متعددة
                            const category = item.category || item.category_name || item.product_category || (locale === 'en-US' ? 'Unclassified' : 'غير مصنف');
                        
                            // إنشاء سلسلة sparkline من البيانات الحقيقية - أولوية للبيانات الحقيقية
                            let sparklineSeries = [];
                            
                            // 1. استخدام series مباشرة من API (البيانات الحقيقية من product_timeseries)
                            if (item.series && Array.isArray(item.series) && item.series.length > 0) {
                                sparklineSeries = item.series.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using real series data from API:', sparklineSeries.length, 'points');
                            } 
                            // 2. استخدام sales_history من time_series_data (البيانات الحقيقية)
                            else if (item.time_series_data && item.time_series_data.sales_history && Array.isArray(item.time_series_data.sales_history) && item.time_series_data.sales_history.length > 0) {
                                sparklineSeries = item.time_series_data.sales_history.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using real sales_history from time_series_data:', sparklineSeries.length, 'points');
                            }
                            // 3. استخدام social_mentions من time_series_data
                            else if (item.time_series_data && item.time_series_data.social_mentions && Array.isArray(item.time_series_data.social_mentions) && item.time_series_data.social_mentions.length > 0) {
                                sparklineSeries = item.time_series_data.social_mentions.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using real social_mentions from time_series_data:', sparklineSeries.length, 'points');
                            }
                            // 4. استخدام extra_history من time_series_data
                            else if (item.time_series_data && item.time_series_data.extra_history && Array.isArray(item.time_series_data.extra_history) && item.time_series_data.extra_history.length > 0) {
                                sparklineSeries = item.time_series_data.extra_history.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using real extra_history from time_series_data:', sparklineSeries.length, 'points');
                            }
                            // 5. استخدام sparkline_series (إذا كانت موجودة)
                            else if (item.sparkline_series && Array.isArray(item.sparkline_series) && item.sparkline_series.length > 0) {
                                sparklineSeries = item.sparkline_series.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                            }
                            // 4. استخدام platform_breakdown (قيم حقيقية من المنصات)
                            else if (item.platform_breakdown && Array.isArray(item.platform_breakdown) && item.platform_breakdown.length > 0) {
                                sparklineSeries = item.platform_breakdown.map(p => parseFloat(p.score || p.value || 0) || 0);
                                // إذا كانت القيم قليلة، نضيف نقاط إضافية بناءً على النمو
                                if (sparklineSeries.length < 5) {
                                    const lastValue = sparklineSeries[sparklineSeries.length - 1] || 10;
                                    const growthFactor = growth > 0 ? 1.15 : 0.85;
                                    for (let i = sparklineSeries.length; i < 8; i++) {
                                        sparklineSeries.push(lastValue * Math.pow(growthFactor, i - sparklineSeries.length + 1));
                                    }
                                }
                            } 
                            // 5. استخدام country_breakdown (قيم حقيقية من الدول)
                            else if (item.country_breakdown && Array.isArray(item.country_breakdown) && item.country_breakdown.length > 0) {
                                sparklineSeries = item.country_breakdown.map(c => parseFloat(c.score || c.value || 0) || 0);
                                // إذا كانت القيم قليلة، نضيف نقاط إضافية بناءً على النمو
                                if (sparklineSeries.length < 5) {
                                    const lastValue = sparklineSeries[sparklineSeries.length - 1] || 10;
                                    const growthFactor = growth > 0 ? 1.15 : 0.85;
                                    for (let i = sparklineSeries.length; i < 8; i++) {
                                        sparklineSeries.push(lastValue * Math.pow(growthFactor, i - sparklineSeries.length + 1));
                                    }
                                }
                            }
                            // 6. محاولة جلب السلاسل الزمنية من API مباشرة (إذا كان product_id موجود ولم تكن البيانات متوفرة)
                            if (sparklineSeries.length === 0 && productId && (typeof productId === 'number' || !isNaN(parseInt(productId)))) {
                                // جلب السلاسل الزمنية الحقيقية من API
                                const productIdNum = typeof productId === 'number' ? productId : parseInt(productId);
                                console.log('[Trending Cards] Attempting to fetch real timeseries for product:', productIdNum);
                                
                                // جلب البيانات بشكل غير متزامن (async)
                                (async () => {
                                    try {
                                        // استخدام endpoint الصحيح
                                        const timeseriesUrl = `${API_BASE}/trends/products/${productIdNum}/timeseries?market=${encodeURIComponent(market)}&days=7&metric_types=sales,social,search`;
                                        const response = await fetch(timeseriesUrl, { 
                                            credentials: 'include', 
                                            cache: 'no-store',
                                            headers: {
                                                'Cache-Control': 'no-cache, no-store, must-revalidate',
                                                'Pragma': 'no-cache'
                                            }
                                        });
                                        
                                        if (!response.ok) {
                                            throw new Error(`HTTP ${response.status}`);
                                        }
                                        
                                        const tsData = await response.json();
                                        
                                        if (tsData && tsData.ok) {
                                            // استخدام sales_history أولاً، ثم social_mentions، ثم extra_history
                                            let realSeries = [];
                                            if (tsData.sales_history && tsData.sales_history.length > 0) {
                                                realSeries = tsData.sales_history;
                                            } else if (tsData.social_mentions && tsData.social_mentions.length > 0) {
                                                realSeries = tsData.social_mentions;
                                            } else if (tsData.extra_history && tsData.extra_history.length > 0) {
                                                realSeries = tsData.extra_history;
                                            }
                                            
                                            if (realSeries.length > 0) {
                                                const cleanSeries = realSeries.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                                console.log('[Trending Cards] ✅ Fetched real timeseries from API:', cleanSeries.length, 'points');
                                                
                                                // إعادة رسم الشارت بالبيانات الحقيقية
                                                if (cleanSeries.length > 0 && card) {
                                                    setTimeout(() => {
                                                        const existingSparkline = card.querySelector('.tl-sparkline');
                                                        if (existingSparkline) {
                                                            const path = existingSparkline.querySelector('path');
                                                            if (path && typeof buildSmoothSparklinePath === 'function') {
                                                                path.setAttribute('d', buildSmoothSparklinePath(cleanSeries));
                                                                console.log('[Trending Cards] ✅ Updated sparkline with real data');
                                                            }
                                                        }
                                                    }, 100);
                                                }
                                            }
                                        }
                                    } catch (err) {
                                        console.warn('[Trending Cards] Could not fetch timeseries:', err);
                                    }
                                })();
                            }
                            
                            // 7. Fallback: استخدام platform_breakdown أو country_breakdown (بيانات حقيقية من API)
                            if (sparklineSeries.length === 0 && item.platform_breakdown && Array.isArray(item.platform_breakdown) && item.platform_breakdown.length > 0) {
                                sparklineSeries = item.platform_breakdown.map(p => parseFloat(p.score || p.value || 0) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using platform_breakdown as fallback:', sparklineSeries.length, 'points');
                            } 
                            else if (sparklineSeries.length === 0 && item.country_breakdown && Array.isArray(item.country_breakdown) && item.country_breakdown.length > 0) {
                                sparklineSeries = item.country_breakdown.map(c => parseFloat(c.score || c.value || 0) || 0).filter(v => !isNaN(v) && isFinite(v));
                                console.log('[Trending Cards] Using country_breakdown as fallback:', sparklineSeries.length, 'points');
                            }
                            
                            // 8. Fallback أخير: بناء سلسلة واقعية بناءً على النمو الفعلي (فقط إذا لم توجد بيانات حقيقية)
                            if (sparklineSeries.length === 0) {
                                const growthValue = parseFloat(growth) || 0;
                                const baseValue = 15;
                                const growthRate = growthValue / 100;
                                
                                sparklineSeries = [];
                                for (let i = 0; i < 8; i++) {
                                    // نمو تدريجي واقعي يعكس النمو الفعلي
                                    const value = baseValue * (1 + growthRate * (i / 7));
                                    sparklineSeries.push(Math.max(5, value));
                                }
                                console.warn('[Trending Cards] No real data available, using calculated series based on growth');
                            }
                            
                            // التأكد من أن السلسلة ليست فارغة وأنها أرقام صحيحة
                            sparklineSeries = sparklineSeries
                                .map(v => parseFloat(v) || 0)
                                .filter(v => !isNaN(v) && isFinite(v));
                            
                            // إذا كانت السلسلة فارغة بعد المعالجة، نستخدم قيم افتراضية بسيطة
                            if (sparklineSeries.length === 0) {
                                sparklineSeries = [10, 12, 11, 14, 16, 18, 15, 20];
                            }
                            
                            console.log('[Trending Cards] Sparkline series for', productName, ':', sparklineSeries);

                        const viewProductText = translate('trending_cards.view_product', locale === 'en-US' ? 'Open Product Dashboard' : 'افتح لوحة المنتج');
                        const growthLabel = locale === 'en-US' ? '7-day growth' : 'نمو آخر ٧ أيام';
                        const demandLabel = locale === 'en-US' ? 'Demand strength' : 'قوة الطلب';
                        const marketLabel = locale === 'en-US' ? 'Market' : 'السوق';
                        const trendBadge = locale === 'en-US' ? 'Trend' : 'ترند';

                            // التحقق من وجود الدوال المساعدة
                            if (typeof escapeHtml !== 'function') {
                                console.error('[Trending Cards] escapeHtml function not found!');
                                window.escapeHtml = function(str) {
                                    if (!str) return '';
                                    const div = document.createElement('div');
                                    div.textContent = str;
                                    return div.innerHTML;
                                };
                            }
                            
                            if (typeof buildSmoothSparklinePath !== 'function') {
                                console.error('[Trending Cards] buildSmoothSparklinePath function not found!');
                                window.buildSmoothSparklinePath = function(series) {
                                    if (!series || !Array.isArray(series) || series.length < 2) {
                                        return 'M 0,15 L 100,15';
                                    }
                                    
                                    series = series.map(v => parseFloat(v) || 0).filter(v => !isNaN(v) && isFinite(v));
                                    if (series.length < 2) {
                                        return 'M 0,15 L 100,15';
                                    }
                                    
                                    const max = Math.max(...series);
                                    const min = Math.min(...series);
                                    const span = max - min || 1;
                                    const padding = span * 0.1;
                                    const adjustedMin = min - padding;
                                    const adjustedMax = max + padding;
                                    const adjustedSpan = adjustedMax - adjustedMin || 1;
                                    
                                    const points = series.map((v, idx) => {
                                        const x = (idx / Math.max(series.length - 1, 1)) * 100;
                                        const norm = (v - adjustedMin) / adjustedSpan;
                                        const y = 2 + (1 - norm) * 26;
                                        return { x, y };
                                    });
                                    
                                    let path = `M ${points[0].x},${points[0].y}`;
                                    for (let i = 0; i < points.length - 1; i++) {
                                        const current = points[i];
                                        const next = points[i + 1];
                                        const cp1x = current.x + (next.x - current.x) / 3;
                                        const cp1y = current.y;
                                        const cp2x = current.x + 2 * (next.x - current.x) / 3;
                                        const cp2y = next.y;
                                        path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
                                    }
                                    return path;
                                };
                            }
                            
                            if (typeof formatGrowth !== 'function') {
                                console.error('[Trending Cards] formatGrowth function not found!');
                                window.formatGrowth = function(growth) {
                                    const num = parseFloat(growth) || 0;
                                    return (num > 0 ? '+' : '') + num + '%';
                                };
                            }
                            
                            console.log('[Trending Cards] Building card with DOM API:', {
                                productName,
                                growth,
                                demand: demand.label,
                                market,
                                category,
                                sparklineLength: sparklineSeries.length
                            });
                            
                            // بناء الكرت باستخدام DOM API بدلاً من innerHTML
                            // Header
                            const header = document.createElement('div');
                            header.className = 'tl-card-header';
                            
                            const title = document.createElement('div');
                            title.className = 'tl-card-title';
                            
                            const badge = document.createElement('span');
                            badge.className = 'tl-badge tl-badge--hot';
                            badge.textContent = String(trendBadge || 'ترند');
                            
                            const h4 = document.createElement('h4');
                            h4.textContent = String(productName || 'منتج');
                            
                            title.appendChild(badge);
                            title.appendChild(h4);
                            
                            const meta = document.createElement('div');
                            meta.className = 'tl-card-meta';
                            
                            const marketChip = document.createElement('span');
                            marketChip.className = 'tl-chip';
                            marketChip.textContent = String(marketLabel || 'السوق') + ': ' + String(market || '-');
                            
                            const categoryChip = document.createElement('span');
                            categoryChip.className = 'tl-chip';
                            categoryChip.textContent = String(category || 'غير مصنف');
                            
                            meta.appendChild(marketChip);
                            meta.appendChild(categoryChip);
                            
                            header.appendChild(title);
                            header.appendChild(meta);
                            
                            // Body
                            const body = document.createElement('div');
                            body.className = 'tl-card-body';
                            
                            const growthMetric = document.createElement('div');
                            growthMetric.className = 'tl-metric';
                            
                            const growthLabelEl = document.createElement('span');
                            growthLabelEl.className = 'tl-metric-label';
                            growthLabelEl.textContent = String(growthLabel || 'نمو');
                            
                            const growthValueEl = document.createElement('span');
                            growthValueEl.className = 'tl-metric-value';
                            growthValueEl.textContent = String(formatGrowth(growth) || '0%');
                            
                            growthMetric.appendChild(growthLabelEl);
                            growthMetric.appendChild(growthValueEl);
                            
                            const demandMetric = document.createElement('div');
                            demandMetric.className = 'tl-metric';
                            
                            const demandLabelEl = document.createElement('span');
                            demandLabelEl.className = 'tl-metric-label';
                            demandLabelEl.textContent = String(demandLabel || 'طلب');
                            
                            const demandValueEl = document.createElement('span');
                            demandValueEl.className = 'tl-metric-value tl-metric-value--' + String(demand.class || 'medium');
                            demandValueEl.textContent = String(demand.label || 'متوسط');
                            
                            demandMetric.appendChild(demandLabelEl);
                            demandMetric.appendChild(demandValueEl);
                            
                            const sparklineWrapper = document.createElement('div');
                            sparklineWrapper.className = 'tl-sparkline-wrapper';
                            
                            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                            svg.setAttribute('class', 'tl-sparkline');
                            svg.setAttribute('viewBox', '0 0 100 30');
                            svg.setAttribute('preserveAspectRatio', 'none');
                            svg.setAttribute('width', '100');
                            svg.setAttribute('height', '30');
                            
                            // استخدام path مع منحنيات ناعمة بدلاً من polyline
                            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                            path.setAttribute('class', 'tl-sparkline-line');
                            path.setAttribute('fill', 'none');
                            path.setAttribute('stroke', '#5eead4');
                            path.setAttribute('stroke-width', '2');
                            path.setAttribute('stroke-linecap', 'round');
                            path.setAttribute('stroke-linejoin', 'round');
                            path.setAttribute('d', buildSmoothSparklinePath(sparklineSeries));
                            
                            svg.appendChild(path);
                            sparklineWrapper.appendChild(svg);
                            
                            body.appendChild(growthMetric);
                            body.appendChild(demandMetric);
                            body.appendChild(sparklineWrapper);
                            
                            // Footer
                            const footer = document.createElement('div');
                            footer.className = 'tl-card-footer';
                            
                            const button = document.createElement('button');
                            button.className = 'tl-link-button js-open-product-dashboard';
                            button.type = 'button';
                            button.textContent = String(viewProductText || 'افتح');
                            // إضافة data attributes للربط مع Dashboard
                            button.setAttribute('data-product-id', String(productId || ''));
                            button.setAttribute('data-market', String(market || ''));
                            button.setAttribute('data-locale', String(locale || 'ar'));
                            
                            footer.appendChild(button);
                            
                            // إضافة كل العناصر للكرت
                            card.appendChild(header);
                            card.appendChild(body);
                            card.appendChild(footer);
                            
                            console.log('[Trending Cards] ✅ Card built using DOM API');
                        
                        // نتأكد أن الكلاس موجود
                        if (!card.classList.contains('tl-card')) {
                            console.warn('[Trending Cards] className lost after innerHTML, restoring.');
                            card.classList.add('tl-card', 'tl-card--trend');
                        }
                        
                        // التأكد من أن card element يحتوي على structure صحيح
                        const hasHeader = card.querySelector('.tl-card-header');
                        const hasBody = card.querySelector('.tl-card-body');
                        const hasFooter = card.querySelector('.tl-card-footer');
                        
                        if (!hasHeader || !hasBody || !hasFooter) {
                            console.error('[Trending Cards] ❌ Card structure is broken!', {
                                hasHeader: !!hasHeader,
                                hasBody: !!hasBody,
                                hasFooter: !!hasFooter,
                                cardHTML: cardHTML.substring(0, 300)
                            });
                        } else {
                            console.log('[Trending Cards] ✅ Card structure is valid');
                        }
                        
                        // إعادة تطبيق الكلاسات بالقوة لو لزم
                        if (!card.className.includes('tl-card')) {
                            card.className = 'tl-card tl-card--trend glass-effect rounded-xl p-4 flex flex-col gap-2';
                        }
                        
                        console.log('[Trending Cards] Card className AFTER innerHTML and force set:', card.className);
                        console.log('[Trending Cards] Card outerHTML preview:', card.outerHTML.substring(0, 150));

                        // ملاحظة: حدث النقر على الزر يتم التعامل معه عبر سكربت عام في نهاية الصفحة

                        // التأكد من أن className لا يزال موجوداً قبل الإضافة
                        if (!card.classList.contains('tl-card')) {
                            console.error('[Trending Cards] ERROR: Card missing tl-card class!');
                            card.classList.add('tl-card', 'tl-card--trend', 'glass-effect', 'rounded-xl', 'p-4', 'flex', 'flex-col', 'gap-2');
                        }
                        
                        // Force apply styles immediately via inline styles AND classes - مع الحفاظ على tl-card
                        if (!card.className.includes('tl-card')) {
                            card.className = 'tl-card tl-card--trend glass-effect rounded-xl p-4 flex flex-col gap-2';
                        }
                        card.style.cssText = `
                            display: flex !important;
                            flex-direction: column !important;
                            justify-content: space-between !important;
                            visibility: visible !important;
                            opacity: 1 !important;
                            background: rgba(15, 23, 42, 0.9) !important;
                            border-radius: 12px !important;
                            padding: 0.75rem 1rem !important;
                            border: 1px solid rgba(148, 163, 184, 0.3) !important;
                            min-height: 200px !important;
                            width: 100% !important;
                            box-sizing: border-box !important;
                            margin: 0 !important;
                            position: relative !important;
                            color: rgba(255, 255, 255, 0.9) !important;
                        `;
                        
                            // إضافة الكرت إلى Grid
                            try {
                                grid.appendChild(card);
                                console.log('[Trending Cards] ✅ Card successfully appended to grid!');
                                console.log('[Trending Cards] Grid children count now:', grid.children.length);
                            } catch (appendError) {
                                console.error('[Trending Cards] ❌ Error appending card to grid:', appendError);
                                console.error('[Trending Cards] Grid element:', grid);
                                console.error('[Trending Cards] Card element:', card);
                                throw appendError;
                            }
                        } catch (cardError) {
                            console.error(`[Trending Cards] ❌❌❌ ERROR building card ${index + 1} ❌❌❌`);
                            console.error(`[Trending Cards] Error message:`, cardError.message);
                            console.error(`[Trending Cards] Error stack:`, cardError.stack);
                            console.error(`[Trending Cards] Item data that caused error:`, item);
                            console.error(`[Trending Cards] Item JSON:`, JSON.stringify(item, null, 2));
                        }
                    });

                    console.log('[Trending Cards] Successfully rendered', items.length, 'cards');
                    console.log('[Trending Cards] Grid HTML length:', grid.innerHTML.length);
                    console.log('[Trending Cards] Grid children count:', grid.children.length);
                    
                    hasLoaded = true;
                    isLoading = false;
                    
                    // تحديث وقت آخر تحديث
                    updateLastUpdateTime();
                    
                    // Force apply grid styles immediately - keep tl-cards-grid class
                    if (grid) {
                        grid.className = 'tl-cards-grid grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4';
                        // Force grid display and columns
                        grid.style.cssText = `
                            display: grid !important;
                            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
                            gap: 1rem !important;
                            width: 100% !important;
                            visibility: visible !important;
                            opacity: 1 !important;
                        `;
                    }
                    
                    // التأكد من أن CSS مطبق على Grid
                    const gridStyles = window.getComputedStyle(grid);
                    console.log('[Trending Cards] Grid computed styles:', {
                        display: gridStyles.display,
                        gridTemplateColumns: gridStyles.gridTemplateColumns,
                        gap: gridStyles.gap,
                        width: gridStyles.width,
                        height: gridStyles.height
                    });
                    
                    // التأكد من أن CSS مطبق على الكروت
                    console.log('[Trending Cards] Grid children:', grid.children.length);
                    console.log('[Trending Cards] Grid children details:', Array.from(grid.children).map((c, i) => ({
                        index: i,
                        tagName: c.tagName,
                        className: c.className,
                        id: c.id,
                        hasTlCard: c.classList.contains('tl-card'),
                        hasTlCardTrend: c.classList.contains('tl-card--trend')
                    })));
                    
                    const firstCard =
                        grid.querySelector('.tl-card--trend') ||
                        grid.querySelector('.tl-card') ||
                        (grid.children.length > 0 ? grid.children[0] : null);
                    
                    if (firstCard && firstCard.nodeType === 1) {
                        const styles = window.getComputedStyle(firstCard);
                        console.log('[Trending Cards] First card computed styles:', {
                            display: styles.display,
                            visibility: styles.visibility,
                            opacity: styles.opacity,
                            width: styles.width,
                            height: styles.height,
                            backgroundColor: styles.backgroundColor,
                            borderRadius: styles.borderRadius,
                            padding: styles.padding,
                            color: styles.color,
                            position: styles.position,
                            zIndex: styles.zIndex
                        });
                        
                        // طباعة HTML للكرت الأول للتحقق
                        console.log('[Trending Cards] First card HTML:', firstCard.outerHTML.substring(0, 300));
                    } else {
                        console.error('[Trending Cards] ERROR: No card found in grid (no .tl-card / .tl-card--trend)!');
                        console.error('[Trending Cards] Grid children:', Array.from(grid.children).map(c => ({
                            tagName: c.tagName,
                            className: c.className,
                            id: c.id,
                            nodeType: c.nodeType
                        })));
                    }

                } catch (err) {
                    console.error('[Trending Cards] Error:', err);
                    console.error('[Trending Cards] Error stack:', err.stack);
                    if (grid && (grid.innerHTML.trim() === '' || grid.innerHTML.includes('spinner'))) {
                        const errorMsg = (window.currentLang || 'ar') === 'en' 
                            ? 'No trends available right now.' 
                            : 'لا توجد ترندات جاهزة للعرض الآن.';
                        allowGridWrite();
                        grid.innerHTML = `<p class="text-center py-8 text-gray-400">${errorMsg}</p>`;
                    }
                    isLoading = false;
                    // تحديث الوقت حتى في حالة الخطأ
                    updateLastUpdateTime();
                }
            }

            // تحميل الكروت عند تحميل الصفحة - مرة واحدة فقط
            console.log('[Trending Cards] Script loaded, document readyState:', document.readyState);
            
            // محاولة متعددة للتأكد من تحميل الصفحة
            function tryLoadCards() {
                // منع التحميل المكرر
                if (isLoading || hasLoaded) {
                    console.log('[Trending Cards] Already loading or loaded, skipping tryLoadCards');
                    return;
                }
                
                const gridEl = document.getElementById('exploding-products-grid') || document.querySelector('.tl-cards-grid');
                if (gridEl) {
                    console.log('[Trending Cards] Grid found, loading cards...');
                    loadTrendingCards();
                } else {
                    console.warn('[Trending Cards] Grid not found yet, retrying...');
                    setTimeout(tryLoadCards, 200);
                }
            }
            
            // تحميل مرة واحدة فقط عند DOMContentLoaded
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => {
                    console.log('[Trending Cards] DOMContentLoaded fired');
                    setTimeout(tryLoadCards, 100);
                }, { once: true });
            } else {
                console.log('[Trending Cards] Document already loaded, calling tryLoadCards');
                setTimeout(tryLoadCards, 100);
            }
            
            // تحديث تلقائي كل 30 ثانية
            let autoRefreshInterval = null;
            function startAutoRefresh() {
                if (autoRefreshInterval) {
                    clearInterval(autoRefreshInterval);
                }
                autoRefreshInterval = setInterval(() => {
                    console.log('[Trending Cards] Auto-refreshing...');
                    hasLoaded = false; // السماح بإعادة التحميل
                    loadTrendingCards();
                }, 30000); // 30 ثانية
            }
            
            // بدء التحديث التلقائي بعد التحميل الأول
            const originalLoadTrendingCards = loadTrendingCards;
            loadTrendingCards = async function() {
                await originalLoadTrendingCards();
                if (hasLoaded && !autoRefreshInterval) {
                    startAutoRefresh();
                }
            };
            
            // إزالة window load event listener - لا نحتاجه
        })();

        // --- Agent Info Display ---
        window.updateAgentInfo = function() {
            const intentSel = document.getElementById('aiIntent');
            const agentInfoCard = document.getElementById('agentInfoCard');
            const agentInfoLabel = document.getElementById('agentInfoLabel');
            const agentInfoShort = document.getElementById('agentInfoShort');
            const agentInfoDescription = document.getElementById('agentInfoDescription');
            
            if (!intentSel || !agentInfoCard || !agentInfoLabel || !agentInfoShort || !agentInfoDescription) return;
            
            const agentKey = intentSel.value;
            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            
            const labelKey = `agent_${agentKey}_label`;
            const shortKey = `agent_${agentKey}_short`;
            const descKey = `agent_${agentKey}_description`;
            
            if (dict[labelKey] && dict[shortKey] && dict[descKey]) {
                agentInfoLabel.textContent = dict[labelKey];
                agentInfoShort.textContent = dict[shortKey];
                agentInfoDescription.textContent = dict[descKey];
                agentInfoCard.classList.remove('hidden');
            } else {
                agentInfoCard.classList.add('hidden');
            }
        };
        
        (function(){
            const intentSel = document.getElementById('aiIntent');
            if (intentSel) {
                intentSel.addEventListener('change', window.updateAgentInfo);
            }
            
            const closeAgentInfo = document.getElementById('closeAgentInfo');
            const agentInfoCard = document.getElementById('agentInfoCard');
            if (closeAgentInfo && agentInfoCard) {
                closeAgentInfo.addEventListener('click', () => {
                    agentInfoCard.classList.add('hidden');
                });
            }
            
            // تحديث خيارات select عند تغيير اللغة
            const updateSelectOptions = () => {
                const intentSel = document.getElementById('aiIntent');
                if (!intentSel) return;
                
                const lang = window.__UICFG?.ui?.locale || 'en';
                const dict = getTranslations(lang);
                
                Array.from(intentSel.options).forEach(option => {
                    const i18nKey = option.getAttribute('data-i18n');
                    if (i18nKey && dict[i18nKey]) {
                        option.textContent = dict[i18nKey];
                    }
                });
            };
            
            // تحديث عند تغيير اللغة
            const originalApplyI18n = window.applyI18n;
            if (originalApplyI18n) {
                window.applyI18n = function() {
                    originalApplyI18n();
                    updateSelectOptions();
                    if (window.updateAgentInfo) {
                        setTimeout(window.updateAgentInfo, 100);
                    }
                };
            }
            
            // تحديث عند التحميل
            setTimeout(() => {
                updateSelectOptions();
            }, 200);
        })();

        // --- Run button (Unified Infer) ---
        (function(){
            const aiRunBtn = document.getElementById('aiRunBtn');
            const aiResponseContainer = document.getElementById('aiResponseContainer');
            const aiResponseContent = document.getElementById('aiResponseContent');
            const aiResponseError = document.getElementById('aiResponseError');
            const closeAIResponse = document.getElementById('closeAIResponse');
            
            if(!aiRunBtn) return;
            
            // إخفاء قسم الرد عند الضغط على زر الإغلاق
            if(closeAIResponse) {
                closeAIResponse.addEventListener('click', () => {
                    if(aiResponseContainer) aiResponseContainer.classList.add('hidden');
                });
            }
            
            aiRunBtn.addEventListener('click', async ()=>{
                const intentSel = document.getElementById('aiIntent');
                const textEl = document.getElementById('aiText');
                const agent = intentSel ? intentSel.value : 'trend_al';
                const prompt = textEl ? textEl.value.trim() : '';
                
                if(!prompt) {
                    alert('يرجى إدخال سؤالك أو طلبك');
                    return;
                }
                
                // تعطيل الزر وإظهار حالة التحميل
                aiRunBtn.disabled = true;
                aiRunBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>جاري المعالجة...';
                
                // إظهار قسم الرد وإخفاء رسالة الخطأ السابقة
                if(aiResponseContainer) {
                    aiResponseContainer.classList.remove('hidden');
                    if(aiResponseContent) aiResponseContent.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin text-primary text-xl mb-2"></i><div class="text-gray-400 text-sm">جاري معالجة طلبك...</div></div>';
                    if(aiResponseError) {
                        aiResponseError.classList.add('hidden');
                        aiResponseError.textContent = '';
                    }
                }

                // تفريغ حقل الإدخال بعد إرسال الطلب ليكون جاهزاً لسؤال جديد
                if (textEl) {
                    textEl.value = '';
                }
                
                try{
                    const lang = window.__UICFG?.ui?.locale || 'ar';
                    // تحويل اسم الـ Agent من الشكل القديم (_al) إلى الجديد (_ai) للتوافق
                    const agentMap = {
                        'trend_al': 'trend_ai',
                        'insight_al': 'insight_ai',
                        'seller_al': 'seller_ai',
                        'copy_al': 'copy_ai',
                        'alert_al': 'alert_ai',
                        'price_al': 'price_ai',
                        'pixel_al': 'pixel_ai',
                        'fraud_al': 'fraud_ai',
                        'support_al': 'support_ai'
                    };
                    const normalizedAgent = agentMap[agent] || agent;
                    const endpoint = `${API_BASE}/ai/assistant?agent=${normalizedAgent}`;
                    
                    console.log(`🤖 [AI Assistant] Sending request to: ${endpoint}`);
                    console.log(`📝 Prompt: ${prompt.substring(0, 100)}...`);
                    console.log(`🌐 Locale: ${lang}`);
                    
                    // بناء الطلب حسب العقد الموحد
                    const requestBody = {
                        prompt: prompt,
                        locale: lang,
                        context: {
                            period: 'last_7d',
                            source: 'dashboard_home'
                        }
                    };
                    
                    const res = await fetch(endpoint, {
                        method:'POST', 
                        headers:{'Content-Type':'application/json'},
                        body: JSON.stringify(requestBody)
                    });
                    
                    if(!res.ok) {
                        const errorDetails = logAPIError('AI Assistant', endpoint, new Error(`HTTP ${res.status}`), res);
                        const errorText = `فشل في معالجة الطلب (${res.status})`;
                        if(aiResponseError) {
                            aiResponseError.textContent = errorText;
                            aiResponseError.classList.remove('hidden');
                        }
                        if(aiResponseContent) {
                            aiResponseContent.innerHTML = '<div class="text-danger"><i class="fas fa-exclamation-circle me-2"></i>حدث خطأ أثناء معالجة الطلب</div>';
                        }
                        return;
                    }
                    
                    const contentType = res.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        logAPIError('AI Assistant', endpoint, new Error('API returned HTML instead of JSON'), res);
                        if(aiResponseError) {
                            aiResponseError.textContent = 'خطأ في تنسيق البيانات من الخادم';
                            aiResponseError.classList.remove('hidden');
                        }
                        return;
                    }
                    
                    const data = await res.json();
                    
                    // معالجة الاستجابة حسب العقد الموحد
                    if(data && data.ok){
                        const output = data.output || data.result?.message || data.result?.answer || data.message || 'تمت المعالجة بنجاح';
                        console.log('✅ [AI Assistant] Response received successfully');
                        console.log('📊 Meta:', data.meta);
                        
                        // بناء HTML للرد مع معلومات إضافية
                        let responseHTML = `<div class="text-gray-300 whitespace-pre-wrap leading-relaxed">${escapeHtml(output)}</div>`;
                        
                        // إضافة معلومات المصادر إذا كانت موجودة
                        if(data.meta && data.meta.sources && data.meta.sources.length > 0) {
                            responseHTML += `<div class="mt-4 pt-4 border-t border-white border-opacity-10">
                                <div class="text-xs text-gray-400">
                                    <i class="fas fa-database me-1"></i>المصادر: ${data.meta.sources.join(', ')}
                                </div>
                            </div>`;
                        }
                        
                        if(aiResponseContent) {
                            aiResponseContent.innerHTML = responseHTML;
                        }
                        if(aiResponseError) {
                            aiResponseError.classList.add('hidden');
                        }
                    } else {
                        const errorMsg = data.error || data.message || 'فشل في معالجة الطلب';
                        const errorType = data.meta?.type || 'unknown_error';
                        logAPIError('AI Assistant', endpoint, new Error(`${errorType}: ${errorMsg}`), res);
                        
                        if(aiResponseError) {
                            aiResponseError.textContent = errorMsg;
                            aiResponseError.classList.remove('hidden');
                        }
                        if(aiResponseContent) {
                            aiResponseContent.innerHTML = '<div class="text-danger"><i class="fas fa-exclamation-circle me-2"></i>فشل في معالجة الطلب</div>';
                        }
                    }
                }catch(err){ 
                    const errorDetails = logAPIError('AI Assistant', `${API_BASE}/ai/assistant`, err);
                    console.error('AI Assistant request failed', err);
                    
                    if(aiResponseError) {
                        aiResponseError.textContent = `خطأ في الاتصال: ${err.message}`;
                        aiResponseError.classList.remove('hidden');
                    }
                    if(aiResponseContent) {
                        aiResponseContent.innerHTML = '<div class="text-danger"><i class="fas fa-exclamation-circle me-2"></i>حدث خطأ أثناء الاتصال بالخادم</div>';
                    }
                } finally {
                    // إعادة تفعيل الزر
                    aiRunBtn.disabled = false;
                    aiRunBtn.innerHTML = '<span data-i18n="run">تشغيل</span>';
                    fetchUsageAndRender();
                }
            });
        })();

        // ---- Smart Assistant System ----
        const smartAssistantCache = {}; // نظام كاش للنتائج
        
        // إعدادات API لكل قسم
        const smartAssistantConfig = {
            products: {
                endpoint: `${API_BASE}/ai/insights`,
                query: { entity_id: "products" }
            },
            suppliers: {
                endpoint: `${API_BASE}/ai/insights`,
                query: { entity_id: "suppliers" }
            },
            shipping: {
                endpoint: `${API_BASE}/ai/insights`,
                query: { entity_id: "port-jeddah" }
            },
            ads: {
                endpoint: `${API_BASE}/ads/latest`,
                query: { limit: 10 }
            },
            market: {
                endpoint: `${API_BASE}/ai/forecast`,
                query: { symbol: "BTCUSDT", timeframe: "1h", periods: 7 }
            },
            ai: {
                endpoint: `${API_BASE}/ai/explain`,
                query: { query: "تحليل الاتجاه العام" }
            }
        };

        async function fetchSmartAssistant(cardId, forceUpdate = false) {
            const config = smartAssistantConfig[cardId];
            if (!config) return;

            // استخدم الكاش إذا موجود ولا يتم إجبار التحديث
            if (!forceUpdate && smartAssistantCache[cardId]) {
                return smartAssistantCache[cardId];
            }

            const panel = document.querySelector(`.smart-assistant-panel[data-card="${cardId}"]`);
            const content = panel?.querySelector('.smart-assistant-content');
            if (!panel || !content) return;

            // عرض حالة التحميل
            content.innerHTML = '<div class="flex items-center gap-2 text-gray-400"><i class="fas fa-spinner fa-spin"></i> جارٍ تحليل البيانات...</div>';
            panel.classList.remove('hidden');

            try {
                const res = await fetch(config.endpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(config.query)
                });

                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                
                const data = await res.json();
                let result = '';

                // استخراج النص التحليلي حسب نوع الاستجابة
                if (data.explanation?.summary) {
                    result = data.explanation.summary;
                } else if (data.forecast) {
                    const f = data.forecast;
                    result = `المؤشر يُظهر اتجاهاً ${f.trend_description} (ثقة: ${f.confidence_percent}%). ${data.legal_notice || ''}`;
                } else if (data.insights && Array.isArray(data.insights)) {
                    result = data.insights.map(insight => 
                        `<div class="mb-2"><strong>${insight.title}:</strong> ${insight.reasoning}</div>`
                    ).join('');
                } else if (data.message) {
                    result = data.message;
                } else if (data.note) {
                    result = data.note;
            } else {
                    result = 'تم التحليل بنجاح.';
                }
                
                // تحويل الأرقام من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (0-9)
                result = toLatinDigits(result);

                // حفظ في الكاش
                smartAssistantCache[cardId] = {
                    result,
                    timestamp: new Date().toLocaleTimeString('ar-KW-u-ca-gregory')
                };

                // عرض النتيجة
                content.innerHTML = `<div>${result}</div><div class="mt-2 text-xs text-gray-500">آخر تحديث: ${smartAssistantCache[cardId].timestamp}</div>`;
            } catch (err) {
                console.error('Error fetching smart assistant:', err);
                content.innerHTML = '<div class="text-red-400">⚠️ خطأ أثناء جلب التحليل. حاول مجددًا.</div>';
            }
        }

        // معالجة الأزرار
        document.addEventListener('click', function(e) {
            // زر فتح/إغلاق المساعد - يوجه لصفحة التحليل
            if (e.target.closest('.smart-assistant-btn')) {
                const btn = e.target.closest('.smart-assistant-btn');
                const cardId = btn.dataset.card;
                
                // خريطة القنوات
                const channelMap = {
                    'products': 'products',
                    'suppliers': 'suppliers',
                    'shipping': 'shipping',
                    'ads': 'ads',
                    'market': 'markets',
                    'ai': 'ai'
                };
                
                const channel = channelMap[cardId] || cardId;
                
                // تتبع الحدث
                if (typeof trackEvent === 'function' || window.trackEvent) {
                    (window.trackEvent || trackEvent)('ui.open_analysis', {
                        channel: channel,
                        src_card_metrics: cardId,
                        ts: new Date().toISOString()
                    });
                }
                
                // توجيه لصفحة التحليل
                window.location.href = `analysis.html?channel=${channel}`;
            }

            // زر تحديث
            if (e.target.closest('.smart-assistant-refresh')) {
                const btn = e.target.closest('.smart-assistant-refresh');
                const cardId = btn.dataset.card;
                fetchSmartAssistant(cardId, true);
            }

            // زر التبديل (إخفاء/إظهار المحتوى)
            if (e.target.closest('.smart-assistant-toggle')) {
                const btn = e.target.closest('.smart-assistant-toggle');
                const cardId = btn.dataset.card;
                const panel = document.querySelector(`.smart-assistant-panel[data-card="${cardId}"]`);
                const content = panel?.querySelector('.smart-assistant-content');
                const icon = btn.querySelector('i');
                if (content && icon) {
                    const isHidden = content.classList.contains('hidden');
                    if (isHidden) {
                        content.classList.remove('hidden');
                        icon.className = 'fas fa-chevron-up';
                    } else {
                        content.classList.add('hidden');
                        icon.className = 'fas fa-chevron-down';
                    }
                }
            }
        });

        // تحميل رصيد AI
        async function loadAIQuota() {
            try {
                const token = localStorage.getItem('token') || sessionStorage.getItem('token');
                const quotaCard = document.getElementById('aiQuotaCardContainer');
                
                if (!token) {
                    if (quotaCard) quotaCard.classList.add('hidden');
                    return;
                }
                
                const res = await fetchWithTimeout(`/trendlens/api/ai/usage-summary?token=${token}`, {}, 5000);
                const data = await res.json();
                
                if (data.ok && data.data) {
                    const { used, limit, remaining, cycle_resets_at } = data.data;
                    const percentage = (used / limit) * 100;
                    
                    const quotaLabel = document.getElementById('quotaLabel');
                    const resetsAt = document.getElementById('resetsAt');
                    const quotaProgress = document.getElementById('quotaProgress');
                    const upgradeBtn = document.getElementById('upgradeQuotaBtn');
                    
                    if (quotaLabel) quotaLabel.textContent = `${remaining}/${limit}`;
                    if (resetsAt) {
                        const resetDate = new Date(cycle_resets_at);
                        const daysUntilReset = Math.ceil((resetDate - new Date()) / (1000 * 60 * 60 * 24));
                        if (daysUntilReset > 0) {
                            resetsAt.textContent = `إعادة في ${daysUntilReset} يوم`;
                        } else {
                            resetsAt.textContent = 'يتم إعادة التصفير قريباً';
                        }
                    }
                    if (quotaProgress) quotaProgress.style.width = `${percentage}%`;
                    
                    // إظهار البطاقة
                    if (quotaCard) quotaCard.classList.remove('hidden');
                    
                    // تحذير عند قرب الحد
                    if (remaining <= limit * 0.1) {
                        if (quotaCard) {
                            quotaCard.classList.remove('border-primary');
                            quotaCard.classList.add('border-yellow-500');
                        }
                        if (upgradeBtn) upgradeBtn.classList.remove('hidden');
                    } else if (remaining <= limit * 0.2) {
                        if (quotaCard) {
                            quotaCard.classList.remove('border-yellow-500');
                            quotaCard.classList.add('border-primary');
                        }
                        if (upgradeBtn) upgradeBtn.classList.add('hidden');
                    } else {
                        if (quotaCard) {
                            quotaCard.classList.remove('border-yellow-500');
                            quotaCard.classList.add('border-primary');
                        }
                        if (upgradeBtn) upgradeBtn.classList.add('hidden');
                    }
                } else {
                    if (quotaCard) quotaCard.classList.add('hidden');
                }
            } catch (err) {
                console.error('Error loading AI quota:', err);
                const quotaCard = document.getElementById('aiQuotaCardContainer');
                if (quotaCard) quotaCard.classList.add('hidden');
            }
        }

        // تتبع الأحداث
        function trackEvent(eventName, data) {
            console.log('Event:', eventName, data);
            // TODO: إرسال إلى analytics endpoint
        }

        // ===== Shipping Pulse Functions =====
        // 
        // 📋 النسق الموحد: API واحد → 3 بلوكات → 3 دوال render
        // 
        // هذا النسق قابل لإعادة الاستخدام في أي قسم "نبض" آخر:
        // - نبض الموردين: loadSuppliersPulse() → renderSuppliers() + renderRFQs() + renderRates()
        // - نبض السوشيال: loadSocialPulse() → renderAccounts() + renderTrends() + renderAlerts()
        // - نبض الأسواق: loadMarketsPulse() → renderStocks() + renderCrypto() + renderForex()
        //
        // القاعدة: endpoint واحد يرجّع أكثر من array → 3 divs ثابتة → 3 دوال render
        
        let shippingDataCache = null;
        // جعل shippingDataCache متاحاً عالمياً
        window.shippingDataCache = shippingDataCache;
        
        // بيانات تجريبية لنبض الشحن
        function getMockShippingPulseData() {
            const vessels = [
                {
                    vessel_name: 'MSC OSCAR',
                    vessel_type: 'Container Ship',
                    port_name: 'Shanghai',
                    port_code: 'CNSHA',
                    speed: 18.5,
                    eta: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString()
                },
                {
                    vessel_name: 'EVERGREEN ACE',
                    vessel_type: 'Container Ship',
                    port_name: 'Los Angeles',
                    port_code: 'USLAX',
                    speed: 20.2,
                    eta: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString()
                },
                {
                    vessel_name: 'CMA CGM ANTOINE',
                    vessel_type: 'Container Ship',
                    port_name: 'Rotterdam',
                    port_code: 'NLRTM',
                    speed: 19.8,
                    eta: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString()
                },
                {
                    vessel_name: 'COSCO SHIPPING UNIVERSE',
                    vessel_type: 'Container Ship',
                    port_name: 'Singapore',
                    port_code: 'SGSIN',
                    speed: 17.5,
                    eta: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString()
                },
                {
                    vessel_name: 'HAPAG-LLOYD BERLIN',
                    vessel_type: 'Container Ship',
                    port_name: 'Hamburg',
                    port_code: 'DEHAM',
                    speed: 21.0,
                    eta: new Date(Date.now() + 6 * 24 * 60 * 60 * 1000).toISOString()
                }
            ];
            
            const ports = [
                {
                    port_name: 'Shanghai',
                    port_code: 'CNSHA',
                    status: 'busy',
                    congestion_score: 85,
                    avg_berth_wait_hours: 48,
                    vessels_waiting: 12
                },
                {
                    port_name: 'Los Angeles',
                    port_code: 'USLAX',
                    status: 'smooth',
                    congestion_score: 35,
                    avg_berth_wait_hours: 8,
                    vessels_waiting: 3
                },
                {
                    port_name: 'Rotterdam',
                    port_code: 'NLRTM',
                    status: 'normal',
                    congestion_score: 55,
                    avg_berth_wait_hours: 18,
                    vessels_waiting: 5
                },
                {
                    port_name: 'Singapore',
                    port_code: 'SGSIN',
                    status: 'smooth',
                    congestion_score: 40,
                    avg_berth_wait_hours: 12,
                    vessels_waiting: 4
                }
            ];
            
            const rates = [
                {
                    route: 'CN → US',
                    rate_20ft: 2800,
                    rate_40ft: 4500,
                    carrier: 'Maersk',
                    transit_days: 25,
                    last_update: new Date().toISOString()
                },
                {
                    route: 'CN → EU',
                    rate_20ft: 2200,
                    rate_40ft: 3800,
                    carrier: 'CMA CGM',
                    transit_days: 30,
                    last_update: new Date().toISOString()
                },
                {
                    route: 'CN → ME',
                    rate_20ft: 1500,
                    rate_40ft: 2500,
                    carrier: 'COSCO',
                    transit_days: 15,
                    last_update: new Date().toISOString()
                }
            ];
            
            return {
                ok: true,
                vessels,
                ports,
                rates,
                mock: true
            };
        }

        // دالة تحميل نبض الشحن (API واحد → 3 بلوكات)
        async function loadShippingPulse() {
            const vesselsEl = document.getElementById('shippingVessels');
            const portsEl = document.getElementById('shippingPorts');
            const ratesEl = document.getElementById('shippingRates');
            
            // عرض حالة التحميل
            if (vesselsEl) showLoadingState('shippingVessels', 'جاري تحميل بيانات السفن...');
            if (portsEl) showLoadingState('shippingPorts', 'جاري تحميل بيانات الموانئ...');
            if (ratesEl) showLoadingState('shippingRates', 'جاري تحميل أسعار الشحن...');
            
            shippingDataCache = null;
            
            try {
                const USE_MOCK_DATA = false;
                // استخدام نفس API_BASE المستخدم في باقي الصفحة
                const DATA_COLLECTION_API = API_BASE.replace('/api', '/api/data-collection');
                
                let data;
                if (USE_MOCK_DATA) {
                    data = getMockShippingPulseData();
                } else {
                    // جلب بيانات السفن والموانئ من API الجديد
                    try {
                        // جلب بيانات السفن
                        const vesselsResponse = await fetch(`${DATA_COLLECTION_API}/shipping-signals/vessels?days=7&limit=20`);
                        let vessels = [];
                        if (vesselsResponse.ok) {
                            const vesselsData = await vesselsResponse.json();
                            vessels = (vesselsData.vessels || []).map(v => ({
                                vessel_name: v.vessel_name || v.vessel_id || 'غير معروف',
                                vessel_type: v.vessel_type || 'Container Ship',
                                port_name: v.port_name || v.port_code || 'غير محدد',
                                port_code: v.port_code || '',
                                speed: v.speed || null,
                                eta: v.eta || null
                            }));
                            console.log('✅ [Shipping Pulse] Vessels data loaded:', vessels.length);
                        } else {
                            console.warn('⚠️ [Shipping Pulse] Failed to load vessels:', vesselsResponse.status, vesselsResponse.statusText);
                        }
                        
                        // جلب بيانات الموانئ
                        const portsResponse = await fetch(`${DATA_COLLECTION_API}/shipping-signals/ports-summary?days=7`);
                        let ports = [];
                        if (portsResponse.ok) {
                            const portsData = await portsResponse.json();
                            
                            // تحويل البيانات من API الجديد إلى الصيغة المتوقعة
                            ports = (portsData.ports || []).map(port => {
                                const congestionIndex = port.metrics?.congestion_index?.avg || 0;
                                const vesselCount = port.metrics?.vessel_count?.avg || 0;
                                
                                // تحديد حالة الميناء حسب مؤشر الازدحام
                                let status = 'normal';
                                if (congestionIndex > 70) {
                                    status = 'busy';
                                } else if (congestionIndex < 30) {
                                    status = 'smooth';
                                }
                                
                                return {
                                    port_name: port.port_name || port.port_code || 'غير معروف',
                                    port_code: port.port_code || '',
                                    country_code: port.country_code || '',
                                    status: status,
                                    congestion_score: congestionIndex,
                                    avg_berth_wait_hours: 0, // غير متوفر في API الحالي
                                    vessels_waiting: vesselCount
                                };
                            });
                            
                            console.log('✅ [Shipping Pulse] Ports data loaded:', ports.length);
                        } else {
                            console.warn('⚠️ [Shipping Pulse] Failed to load ports:', portsResponse.status, portsResponse.statusText);
                        }
                        
                        data = {
                            ok: true,
                            vessels: vessels,
                            ports: ports,
                            rates: [] // سيتم جلبها من API آخر لاحقاً
                        };
                        
                        console.log('✅ [Shipping Pulse] Data loaded from Data Collection API', {
                            vessels: vessels.length,
                            ports: ports.length
                        });
                    } catch (apiError) {
                        console.warn('⚠️ [Shipping Pulse] Failed to load from Data Collection API, using mock data:', apiError);
                        data = getMockShippingPulseData();
                    }
                }
                
                shippingDataCache = data;
                window.shippingDataCache = shippingDataCache;
                renderVessels(data.vessels || []);
                renderPorts(data.ports || []);
                renderRates(data.rates || []);
            } catch (error) {
                const errorDetails = logAPIError('Shipping Pulse', 'Data Collection API', error);
                showErrorToUser('shippingVessels', `خطأ في الاتصال: ${error.message}`);
                
                // استخدام البيانات التجريبية كـ fallback
                const fallbackData = getMockShippingPulseData();
                shippingDataCache = fallbackData;
                window.shippingDataCache = shippingDataCache;
                renderVessels(fallbackData.vessels || []);
                renderPorts(fallbackData.ports || []);
                renderRates(fallbackData.rates || []);
            }
        }
        
        // جعل loadShippingPulse متاحاً عالمياً
        window.loadShippingPulse = loadShippingPulse;

        // ===== Market Ads Functions =====
        // 
        // 📋 نفس النسق المستخدم في باقي الكروت: API واحد → 3 بلوكات → 3 دوال render
        
        let adsDataCache = null;
        // جعل adsDataCache متاحاً عالمياً
        window.adsDataCache = adsDataCache;
        const ADS_LOADING_HTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span></div>';

        // بيانات تجريبية لإعلانات السوق
        function getMockMarketAdsData() {
            const lang = window.currentLang || document.documentElement.lang || 'ar';
            const isArabic = lang === 'ar';
            
            const ads = [
                {
                    title: isArabic ? 'منتج جديد - خصم 50%' : 'New Product - 50% Off',
                    platform: 'Meta',
                    advertiser: 'TechBrand',
                    image_url: 'https://picsum.photos/seed/ads1/400/300',
                    spend_range: '$5K - $10K',
                    impressions: '125K',
                    start_date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
                    category: isArabic ? 'إلكترونيات' : 'Electronics'
                },
                {
                    title: isArabic ? 'عرض خاص - توصيل مجاني' : 'Special Offer - Free Shipping',
                    platform: 'TikTok',
                    advertiser: 'FashionStore',
                    image_url: 'https://picsum.photos/seed/ads2/400/300',
                    spend_range: '$3K - $7K',
                    impressions: '89K',
                    start_date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
                    category: isArabic ? 'أزياء' : 'Fashion'
                },
                {
                    title: isArabic ? 'جديد - جودة عالية' : 'New - High Quality',
                    platform: 'Google',
                    advertiser: 'HomeGoods',
                    image_url: 'https://picsum.photos/seed/ads3/400/300',
                    spend_range: '$8K - $15K',
                    impressions: '234K',
                    start_date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
                    category: isArabic ? 'منزل ومكتب' : 'Home & Office'
                },
                {
                    title: isArabic ? 'عرض محدود - لا تفوت' : 'Limited Offer - Don\'t Miss',
                    platform: 'Instagram',
                    advertiser: 'BeautyBrand',
                    image_url: 'https://picsum.photos/seed/ads4/400/300',
                    spend_range: '$4K - $8K',
                    impressions: '156K',
                    start_date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
                    category: isArabic ? 'جمال' : 'Beauty'
                },
                {
                    title: isArabic ? 'خصم كبير - اشتري الآن' : 'Big Discount - Buy Now',
                    platform: 'Snapchat',
                    advertiser: 'SportsShop',
                    image_url: 'https://picsum.photos/seed/ads5/400/300',
                    spend_range: '$2K - $5K',
                    impressions: '67K',
                    start_date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),
                    category: isArabic ? 'رياضة' : 'Sports'
                }
            ];
            
            const platforms = [
                { name: 'Meta', ads_count: 1247, spend_total: '$125K', growth: '+15%' },
                { name: 'TikTok', ads_count: 892, spend_total: '$89K', growth: '+28%' },
                { name: 'Google', ads_count: 654, spend_total: '$156K', growth: '+8%' },
                { name: 'Instagram', ads_count: 523, spend_total: '$78K', growth: '+12%' },
                { name: 'Snapchat', ads_count: 345, spend_total: '$45K', growth: '+5%' }
            ];
            
            const stats = {
                total_ads: 3651,
                total_spend: '$493K',
                avg_impressions: '154K',
                top_category: isArabic ? 'إلكترونيات' : 'Electronics',
                top_advertiser: 'TechBrand',
                last_update: new Date().toISOString()
            };
            
            return {
                ok: true,
                ads,
                platforms,
                stats,
                mock: true
            };
        }

        async function loadMarketAds() {
            const listEl = document.getElementById('adsList');
            const platformsEl = document.getElementById('adsPlatforms');
            const statsEl = document.getElementById('adsStats');
            
            // عرض حالة التحميل
            if (listEl) showLoadingState('adsList', 'جاري تحميل الإعلانات...');
            if (platformsEl) showLoadingState('adsPlatforms', 'جاري تحميل بيانات المنصات...');
            if (statsEl) showLoadingState('adsStats', 'جاري تحميل الإحصائيات...');
            
            adsDataCache = null;
            
            try {
                const USE_MOCK_DATA = false;
                const endpoint = `${API_BASE}/ads/latest?limit=10`;
                
                let data;
                if (USE_MOCK_DATA) {
                    data = getMockMarketAdsData();
                } else {
                    const response = await fetchWithTimeout(endpoint, {}, 8000);
                    
                    if (!response.ok) {
                        const errorDetails = logAPIError('Market Ads', endpoint, new Error(`HTTP ${response.status}`), response);
                        showErrorToUser('adsList', `فشل تحميل الإعلانات (${response.status})`, true);
                        data = getMockMarketAdsData();
                    } else {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            logAPIError('Market Ads', endpoint, new Error('API returned HTML instead of JSON'), response);
                            showErrorToUser('adsList', 'خطأ في تنسيق البيانات من الخادم', true);
                            data = getMockMarketAdsData();
                        } else {
                            const apiData = await response.json();
                            if (apiData.ok) {
                                data = apiData;
                                console.log('✅ [Market Ads] Data loaded successfully');
                            } else {
                                logAPIError('Market Ads', endpoint, new Error(apiData.error || 'API returned ok=false'), response);
                                showErrorToUser('adsList', apiData.error || 'فشل تحميل البيانات', true);
                                data = getMockMarketAdsData();
                            }
                        }
                    }
                }
                
                adsDataCache = data;
                window.adsDataCache = adsDataCache;
                renderAdsList(data.ads || []);
                renderAdsPlatforms(data.platforms || []);
                renderAdsStats(data.stats || {});
            } catch (error) {
                const errorDetails = logAPIError('Market Ads', `${API_BASE}/ads/latest?limit=10`, error);
                showErrorToUser('adsList', `خطأ في الاتصال: ${error.message}`);
                
                // استخدام البيانات التجريبية كـ fallback
                const fallbackData = getMockMarketAdsData();
                adsDataCache = fallbackData;
                window.adsDataCache = adsDataCache;
                renderAdsList(fallbackData.ads || []);
                renderAdsPlatforms(fallbackData.platforms || []);
                renderAdsStats(fallbackData.stats || {});
            }
        }
        
        // دالة عرض الإعلانات (Block 1)
        function renderAdsList(ads) {
            const container = document.getElementById('adsList');
            if (!container) return;
            
            if (!ads || ads.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-bullhorn"></i> لا توجد إعلانات متاحة</div>';
                return;
            }
            
            let html = '';
            ads.slice(0, 5).forEach(ad => {
                const title = escapeHtml(ad.title || 'غير معروف');
                const platform = escapeHtml(ad.platform || 'غير محدد');
                const advertiser = escapeHtml(ad.advertiser || 'غير محدد');
                const spendRange = ad.spend_range || '—';
                const impressions = ad.impressions || '—';
                const category = escapeHtml(ad.category || '');
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <div class="text-white font-semibold text-sm">${title}</div>
                                <div class="text-gray-400 text-xs mt-1">${advertiser} • ${platform}</div>
                            </div>
                            <div class="text-primary text-xs">${spendRange}</div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-eye mr-1"></i>${impressions}</span>
                            ${category ? `<span><i class="fas fa-tag mr-1"></i>${category}</span>` : ''}
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض المنصات (Block 2)
        function renderAdsPlatforms(platforms) {
            const container = document.getElementById('adsPlatforms');
            if (!container) return;
            
            if (!platforms || platforms.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-chart-bar"></i> لا توجد بيانات متاحة</div>';
                return;
            }
            
            let html = '';
            platforms.forEach(platform => {
                const name = escapeHtml(platform.name || 'غير معروف');
                const adsCount = platform.ads_count || 0;
                const spendTotal = platform.spend_total || '—';
                const growth = platform.growth || '—';
                const growthColor = growth.startsWith('+') ? 'text-success' : 'text-danger';
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-center mb-2">
                            <div class="text-white font-semibold text-sm">${name}</div>
                            <div class="text-primary text-xs ${growthColor}">${growth}</div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-bullhorn mr-1"></i>${adsCount} إعلان</span>
                            <span><i class="fas fa-dollar-sign mr-1"></i>${spendTotal}</span>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض الإحصائيات (Block 3)
        function renderAdsStats(stats) {
            const container = document.getElementById('adsStats');
            if (!container) return;
            
            if (!stats || Object.keys(stats).length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-chart-line"></i> لا توجد إحصائيات متاحة</div>';
                return;
            }
            
            const translateTextFn = window.t;
            const totalAdsText = translateTextFn ? translateTextFn('total_ads') || 'إجمالي الإعلانات' : 'إجمالي الإعلانات';
            const totalSpendText = translateTextFn ? translateTextFn('total_spend') || 'إجمالي الإنفاق' : 'إجمالي الإنفاق';
            const avgImpressionsText = translateTextFn ? translateTextFn('avg_impressions') || 'متوسط المشاهدات' : 'متوسط المشاهدات';
            const topCategoryText = translateTextFn ? translateTextFn('top_category') || 'أفضل فئة' : 'أفضل فئة';
            
            const html = `
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">${totalAdsText}</div>
                        <div class="text-white font-bold text-lg">${stats.total_ads || '—'}</div>
                    </div>
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">${totalSpendText}</div>
                        <div class="text-primary font-bold text-lg">${stats.total_spend || '—'}</div>
                    </div>
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">${avgImpressionsText}</div>
                        <div class="text-white font-bold text-lg">${stats.avg_impressions || '—'}</div>
                    </div>
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">${topCategoryText}</div>
                        <div class="text-white font-bold text-sm">${escapeHtml(stats.top_category || '—')}</div>
                    </div>
                </div>
            `;
            
            container.innerHTML = html;
        }
        
        // جعل loadMarketAds و renderAdsList متاحة عالمياً
        window.loadMarketAds = loadMarketAds;
        window.renderAdsList = renderAdsList;
        window.renderAdsPlatforms = renderAdsPlatforms;
        window.renderAdsStats = renderAdsStats;

        // ===== دوال Render (Block 1, 2, 3) =====
        // 
        // 📋 القاعدة: كل بلوك له دالة render خاصة
        // هذا يضمن فصل المسؤوليات وإمكانية إعادة الاستخدام
        
        // دالة عرض حركة السفن (Block 1)
        // 
        // 📌 يعرض: اسم السفينة، نوعها، الميناء، السرعة، ETA
        function renderVessels(vessels) {
            const container = document.getElementById('shippingVessels');
            if (!container) {
                console.warn('⚠️ [Shipping Pulse] shippingVessels container not found');
                return;
            }
            
            if (!vessels || vessels.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-ship"></i> لا توجد سفن متاحة</div>';
                return;
            }
            
            let html = '';
            vessels.slice(0, 10).forEach(vessel => {
                const vesselName = vessel.vessel_name || 'غير معروف';
                const vesselType = vessel.vessel_type || 'غير محدد';
                const portName = vessel.port_name || vessel.port_code || 'غير محدد';
                const speed = vessel.speed ? `${toArabicNumerals(vessel.speed.toFixed(1))} عقدة` : 'غير متاح';
                const eta = vessel.eta ? formatDate(new Date(vessel.eta), { year: 'numeric', month: 'short', day: 'numeric' }) : 'غير متاح';
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <div class="text-white font-semibold text-sm">${vesselName}</div>
                                <div class="text-gray-400 text-xs mt-1">${vesselType}</div>
                            </div>
                            <div class="text-primary text-xs">${speed}</div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-anchor mr-1"></i>${portName}</span>
                            <span><i class="fas fa-clock mr-1"></i>${eta}</span>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        // دالة عرض الموانئ (Block 2) - جدول ملوّن بالازدحام
        // 
        // 📌 يعرض: اسم الميناء، حالة الازدحام (ملونة)، ساعات الانتظار، عدد السفن المنتظرة
        // الألوان: busy (warning) | smooth (success) | normal (info)
        function renderPorts(ports) {
            const container = document.getElementById('shippingPorts');
            if (!container) {
                console.warn('⚠️ [Shipping Pulse] shippingPorts container not found');
                return;
            }
            
            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            
            if (!ports || ports.length === 0) {
                const noPortsText = dict.no_data_available || 'No data available';
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-anchor"></i> ${noPortsText}</div>`;
                return;
            }
            
            let html = '';
            ports.forEach(port => {
                const portName = port.port_name || port.port_code || (dict.unknown || 'Unknown');
                const status = port.status || 'unknown';
                const congestionScore = port.congestion_score || 0;
                const waitHours = port.avg_berth_wait_hours || 0;
                const vesselsWaiting = port.vessels_waiting || 0;
                
                // تحديد اللون حسب حالة الازدحام
                let statusColor = 'text-gray-400';
                let statusBg = 'bg-gray-500';
                if (status === 'busy' || congestionScore > 70) {
                    statusColor = 'text-warning';
                    statusBg = 'bg-warning';
                } else if (status === 'smooth' || congestionScore < 30) {
                    statusColor = 'text-success';
                    statusBg = 'bg-success';
                } else if (status === 'normal') {
                    statusColor = 'text-info';
                    statusBg = 'bg-info';
                }
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors border-r-4 ${statusBg}">
                        <div class="flex justify-between items-center mb-2">
                            <div class="text-white font-semibold text-sm">${portName}</div>
                            <div class="flex items-center gap-2">
                                <span class="${statusColor} font-bold text-xs">${status === 'busy' ? (dict.port_busy || 'Busy') : status === 'smooth' ? (dict.port_smooth || 'Smooth') : (dict.port_normal || 'Normal')}</span>
                                <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                                    <div class="h-full ${statusBg}" style="width: ${Math.min(congestionScore, 100)}%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-clock me-1"></i>${lang === 'ar' ? toArabicNumerals(waitHours.toFixed(1)) : waitHours.toFixed(1)} ${dict.port_wait_hours || 'hours wait'}</span>
                            <span><i class="fas fa-ship me-1"></i>${lang === 'ar' ? toArabicNumerals(vesselsWaiting) : vesselsWaiting} ${dict.port_vessels_waiting || 'vessels waiting'}</span>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        // دالة عرض أسعار الشحن (Block 3)
        function renderRates(rates) {
            const container = document.getElementById('shippingRates');
            
            if (!rates || rates.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-dollar-sign"></i> لا توجد أسعار متاحة</div>';
                return;
            }
            
            let html = '';
            rates.slice(0, 10).forEach(rate => {
                const carrier = rate.carrier || 'غير معروف';
                const serviceType = rate.service_type || 'غير محدد';
                const origin = rate.origin_city || rate.origin_country || 'غير محدد';
                const dest = rate.destination_city || rate.destination_country || 'غير محدد';
                const amount = rate.rate_amount ? `${toArabicNumerals(rate.rate_amount.toFixed(2))} ${rate.currency || 'USD'}` : 'غير متاح';
                const transitDays = rate.transit_days ? `${toArabicNumerals(rate.transit_days)} يوم` : 'غير متاح';
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <div class="text-white font-semibold text-sm">${carrier}</div>
                                <div class="text-gray-400 text-xs mt-1">${serviceType}</div>
                            </div>
                            <div class="text-primary font-bold text-sm">${amount}</div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400">
                            <span><i class="fas fa-route mr-1"></i>${origin} → ${dest}</span>
                            <span><i class="fas fa-calendar mr-1"></i>${transitDays}</span>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        // دالة جلب أسعار الشحن السريع (DHL/UPS/FedEx)
        // 
        // 📌 ملاحظة: النتائج تُعرض داخل البلوك الثالث (#shippingRates)
        // لأننا موحّدين الأسعار في مكان واحد (بحري + جوي + سريع)
        // لا نفتح تبويب جديد ولا كرت جديد، حتى يبقى "نبض الشحن" مكان كل شيء متعلق بالشحن
        // دالة تتبع السفينة
        async function trackVessel(event) {
            event.preventDefault();
            
            const vesselId = document.getElementById('vesselIdInput').value.trim();
            if (!vesselId) {
                alert('يرجى إدخال رقم السفينة');
                return;
            }
            
            const resultDiv = document.getElementById('vesselTrackingResult');
            const DATA_COLLECTION_API = API_BASE.replace('/api', '/api/data-collection');
            
            // عرض حالة التحميل
            resultDiv.classList.remove('hidden');
            resultDiv.querySelector('#trackedVesselName').textContent = 'جاري التحميل...';
            const vesselTypeEl = resultDiv.querySelector('#trackedVesselType');
            if (vesselTypeEl) vesselTypeEl.textContent = 'جاري التحميل...';
            resultDiv.querySelector('#trackedCurrentLocation').textContent = '-';
            resultDiv.querySelector('#trackedDestination').textContent = '-';
            resultDiv.querySelector('#trackedTimeRemaining').textContent = '-';
            resultDiv.querySelector('#trackedSpeed').textContent = '-';
            resultDiv.querySelector('#trackedLastUpdate').textContent = '-';
            const statusEl = resultDiv.querySelector('#trackedStatus');
            if (statusEl) statusEl.textContent = '-';
            
            try {
                const response = await fetch(`${DATA_COLLECTION_API}/shipping-signals/track-vessel/${encodeURIComponent(vesselId)}`);
                
                let data;
                if (!response.ok) {
                    // محاولة قراءة رسالة الخطأ
                    try {
                        const errorData = await response.json();
                        if (response.status === 404 && errorData.detail) {
                            throw new Error(errorData.detail);
                        }
                    } catch (e) {
                        // إذا فشل قراءة JSON، استخدم رسالة افتراضية
                    }
                    
                    if (response.status === 404) {
                        throw new Error('لم يتم العثور على سفينة بهذا الرقم');
                    }
                    throw new Error(`خطأ في الاتصال: ${response.status}`);
                }
                
                data = await response.json();
                
                // عرض البيانات
                resultDiv.querySelector('#trackedVesselName').textContent = data.vessel_name || vesselId;
                if (data.vessel_type) {
                    const vesselTypeEl = resultDiv.querySelector('#trackedVesselType');
                    if (vesselTypeEl) vesselTypeEl.textContent = data.vessel_type;
                }
                resultDiv.querySelector('#trackedCurrentLocation').textContent = 
                    data.current_location?.port_name || data.current_location?.port_code || 'غير محدد';
                resultDiv.querySelector('#trackedDestination').textContent = 
                    data.destination_port || 'غير محدد';
                
                // حساب الوقت المتبقي
                let timeRemainingText = 'غير متاح';
                if (data.time_remaining_hours !== null && data.time_remaining_hours !== undefined) {
                    const hours = Math.floor(data.time_remaining_hours);
                    const days = Math.floor(hours / 24);
                    const remainingHours = hours % 24;
                    
                    if (days > 0) {
                        timeRemainingText = `${days} يوم و ${remainingHours} ساعة`;
                    } else if (hours > 0) {
                        timeRemainingText = `${hours} ساعة`;
                    } else {
                        timeRemainingText = 'وصلت';
                    }
                } else if (data.eta) {
                    try {
                        const etaDate = new Date(data.eta);
                        const now = new Date();
                        const diffHours = (etaDate - now) / (1000 * 60 * 60);
                        
                        if (diffHours > 0) {
                            const days = Math.floor(diffHours / 24);
                            const hours = Math.floor(diffHours % 24);
                            timeRemainingText = days > 0 ? `${days} يوم و ${hours} ساعة` : `${hours} ساعة`;
                        } else {
                            timeRemainingText = 'وصلت';
                        }
                    } catch (e) {
                        timeRemainingText = data.eta;
                    }
                }
                resultDiv.querySelector('#trackedTimeRemaining').textContent = timeRemainingText;
                
                // السرعة
                resultDiv.querySelector('#trackedSpeed').textContent = 
                    data.speed ? `${data.speed} عقدة` : 'غير متاح';
                
                // آخر تحديث
                if (data.last_signal_time) {
                    try {
                        const lastUpdate = new Date(data.last_signal_time);
                        const now = new Date();
                        const diffMinutes = Math.floor((now - lastUpdate) / (1000 * 60));
                        
                        if (diffMinutes < 60) {
                            resultDiv.querySelector('#trackedLastUpdate').textContent = `منذ ${diffMinutes} دقيقة`;
                        } else if (diffMinutes < 1440) {
                            const hours = Math.floor(diffMinutes / 60);
                            resultDiv.querySelector('#trackedLastUpdate').textContent = `منذ ${hours} ساعة`;
                        } else {
                            const days = Math.floor(diffMinutes / 1440);
                            resultDiv.querySelector('#trackedLastUpdate').textContent = `منذ ${days} يوم`;
                        }
                    } catch (e) {
                        resultDiv.querySelector('#trackedLastUpdate').textContent = data.last_signal_time;
                    }
                } else {
                    resultDiv.querySelector('#trackedLastUpdate').textContent = 'غير متاح';
                }
                
                // الحالة
                const statusEl = resultDiv.querySelector('#trackedStatus');
                if (statusEl) {
                    const statusMap = {
                        'arrival': 'وصلت',
                        'departure': 'غادرت',
                        'vessel_count': 'في المنطقة',
                        'وصلت': 'وصلت',
                        'غادرت': 'غادرت'
                    };
                    const statusText = data.status || 'غير محدد';
                    statusEl.textContent = statusMap[statusText] || statusText;
                }
                
                console.log('✅ [Vessel Tracking] Data loaded:', data);
                
            } catch (error) {
                console.error('❌ [Vessel Tracking] Error:', error);
                resultDiv.querySelector('#trackedVesselName').textContent = 'خطأ';
                resultDiv.querySelector('#trackedCurrentLocation').textContent = error.message || 'فشل التحميل';
                resultDiv.querySelector('#trackedDestination').textContent = '-';
                resultDiv.querySelector('#trackedTimeRemaining').textContent = '-';
                resultDiv.querySelector('#trackedSpeed').textContent = '-';
                resultDiv.querySelector('#trackedLastUpdate').textContent = '-';
            }
        }
        
        // جعل trackVessel متاحاً عالمياً
        window.trackVessel = trackVessel;
        
        async function getExpressRates(event) {
            event.preventDefault();
            
            const origin = document.getElementById('expressOrigin').value.trim().toUpperCase();
            const dest = document.getElementById('expressDest').value.trim().toUpperCase();
            const weight = parseFloat(document.getElementById('expressWeight').value);
            
            if (!origin || !dest || !weight || weight <= 0) {
                alert('يرجى إدخال جميع البيانات بشكل صحيح');
                return;
            }
            
            // عرض حالة التحميل في البلوك الثالث
            const ratesContainer = document.getElementById('shippingRates');
            const loadingHtml = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i> جاري الحساب...</div>';
            ratesContainer.innerHTML = ratesContainer.innerHTML + loadingHtml;
            
            try {
                // استدعاء API الشحن السريع
                const response = await fetch(`/trendlens/api/shipping/rates/express?origin_country=${origin}&dest_country=${dest}&weight_kg=${weight}`);
                const data = await response.json();
                
                if (data.ok && data.rates) {
                    // إزالة رسالة التحميل
                    ratesContainer.innerHTML = ratesContainer.innerHTML.replace(loadingHtml, '');
                    
                    let html = '<div class="space-y-2 mt-3 border-t border-white border-opacity-20 pt-3">';
                    html += '<div class="text-xs text-gray-400 mb-2"><i class="fas fa-rocket mr-1"></i>أسعار الشحن السريع (DHL/UPS/FedEx)</div>';
                    
                    // DHL
                    if (data.rates.dhl && data.rates.dhl.ok) {
                        html += `
                            <div class="bg-black bg-opacity-30 rounded-lg p-3 border border-primary hover:bg-opacity-50 transition-colors">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="text-white font-semibold text-sm">DHL Express</div>
                                        <div class="text-gray-400 text-xs mt-1">${data.rates.dhl.service_name || 'Express'}</div>
                                    </div>
                                    <div class="text-primary font-bold text-sm">${toArabicNumerals(data.rates.dhl.rate_amount.toFixed(2))} ${data.rates.dhl.currency}</div>
                                </div>
                                <div class="flex justify-between items-center text-xs text-gray-400 mt-2">
                                    <span><i class="fas fa-route mr-1"></i>${origin} → ${dest}</span>
                                    <span><i class="fas fa-calendar me-1"></i>${toArabicNumerals(data.rates.dhl.transit_days)} يوم</span>
                                </div>
                            </div>
                        `;
                    }
                    
                    // UPS
                    if (data.rates.ups && data.rates.ups.ok) {
                        html += `
                            <div class="bg-black bg-opacity-30 rounded-lg p-3 border border-primary hover:bg-opacity-50 transition-colors">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="text-white font-semibold text-sm">UPS Express</div>
                                        <div class="text-gray-400 text-xs mt-1">${data.rates.ups.service_name || 'Express'}</div>
                                    </div>
                                    <div class="text-primary font-bold text-sm">${toArabicNumerals(data.rates.ups.rate_amount.toFixed(2))} ${data.rates.ups.currency}</div>
                                </div>
                                <div class="flex justify-between items-center text-xs text-gray-400 mt-2">
                                    <span><i class="fas fa-route mr-1"></i>${origin} → ${dest}</span>
                                    <span><i class="fas fa-calendar me-1"></i>${toArabicNumerals(data.rates.ups.transit_days)} يوم</span>
                                </div>
                            </div>
                        `;
                    }
                    
                    // FedEx
                    if (data.rates.fedex && data.rates.fedex.ok) {
                        html += `
                            <div class="bg-black bg-opacity-30 rounded-lg p-3 border border-primary hover:bg-opacity-50 transition-colors">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="text-white font-semibold text-sm">FedEx Express</div>
                                        <div class="text-gray-400 text-xs mt-1">${data.rates.fedex.service_name || 'Express'}</div>
                                    </div>
                                    <div class="text-primary font-bold text-sm">${toArabicNumerals(data.rates.fedex.rate_amount.toFixed(2))} ${data.rates.fedex.currency}</div>
                                </div>
                                <div class="flex justify-between items-center text-xs text-gray-400 mt-2">
                                    <span><i class="fas fa-route mr-1"></i>${origin} → ${dest}</span>
                                    <span><i class="fas fa-calendar me-1"></i>${toArabicNumerals(data.rates.fedex.transit_days)} يوم</span>
                                </div>
                            </div>
                        `;
                    }
                    
                    html += '</div>';
                    
                    // إضافة النتائج إلى البلوك الثالث (أسعار الشحن) - إضافة، لا استبدال
                    // هذا يضمن أن الأسعار الآلية من pulse + الأسعار اليدوية من express كلها في مكان واحد
                    ratesContainer.innerHTML = ratesContainer.innerHTML + html;
                } else {
                    // إزالة رسالة التحميل وعرض رسالة خطأ
                    ratesContainer.innerHTML = ratesContainer.innerHTML.replace(loadingHtml, '<div class="text-center py-4 text-red-400"><i class="fas fa-exclamation-triangle"></i> خطأ في جلب الأسعار</div>');
                }
            } catch (error) {
                console.error('Error getting express rates:', error);
                // إزالة رسالة التحميل وعرض رسالة خطأ
                ratesContainer.innerHTML = ratesContainer.innerHTML.replace(loadingHtml, '<div class="text-center py-4 text-red-400"><i class="fas fa-exclamation-triangle"></i> خطأ في الاتصال</div>');
            }
        }

        // تحميل رصيد AI عند تحميل الصفحة
        loadAIQuota();
        
        // ===== Best Suppliers Functions =====
        // 
        // 📋 نفس النسق المستخدم في "نبض الشحن": API واحد → 3 بلوكات → 3 دوال render
        
        let suppliersDataCache = null;
        // جعل suppliersDataCache متاحاً عالمياً
        window.suppliersDataCache = suppliersDataCache;
        
        // بيانات تجريبية لأفضل الموردين
        function getMockSuppliersData(product = null, hs_code = null, country = null) {
            const suppliers = [
                {
                    name: 'Shenzhen Tech Manufacturing Co.',
                    country: 'CN',
                    shipments_12m: 1247,
                    last_shipment: '2024-01-15',
                    score: 92,
                    top_buyer: 'Amazon',
                    is_verified: true,
                    risk_level: 'low',
                    contact_hint: true
                },
                {
                    name: 'Guangzhou Electronics Ltd.',
                    country: 'CN',
                    shipments_12m: 892,
                    last_shipment: '2024-01-14',
                    score: 88,
                    top_buyer: 'Walmart',
                    is_verified: true,
                    risk_level: 'low',
                    contact_hint: false
                },
                {
                    name: 'Dongguan Industrial Supplies',
                    country: 'CN',
                    shipments_12m: 654,
                    last_shipment: '2024-01-13',
                    score: 85,
                    top_buyer: 'Home Depot',
                    is_verified: true,
                    risk_level: 'medium',
                    contact_hint: true
                },
                {
                    name: 'Shanghai Materials Group',
                    country: 'CN',
                    shipments_12m: 523,
                    last_shipment: '2024-01-12',
                    score: 82,
                    top_buyer: null,
                    is_verified: true,
                    risk_level: 'low',
                    contact_hint: false
                },
                {
                    name: 'Ningbo Trading Company',
                    country: 'CN',
                    shipments_12m: 456,
                    last_shipment: '2024-01-11',
                    score: 78,
                    top_buyer: null,
                    is_verified: false,
                    risk_level: 'medium',
                    contact_hint: true
                }
            ];
            
            const markets = [
                { country: 'CN', volume: 4500, growth: '+12%', rank: 1 },
                { country: 'VN', volume: 2300, growth: '+8%', rank: 2 },
                { country: 'IN', volume: 1800, growth: '+15%', rank: 3 },
                { country: 'TH', volume: 1200, growth: '+5%', rank: 4 },
                { country: 'MY', volume: 900, growth: '+10%', rank: 5 }
            ];
            
            const sources = [
                { name: 'Alibaba', verified: true, count: 234 },
                { name: 'Global Sources', verified: true, count: 156 },
                { name: 'Made-in-China', verified: true, count: 98 },
                { name: 'TradeKey', verified: false, count: 67 }
            ];
            
            return {
                ok: true,
                suppliers,
                markets,
                sources,
                mock: true
            };
        }

        // دالة تحميل أفضل الموردين (API واحد → 3 بلوكات)
        async function loadBestSuppliers(product = null, hs_code = null, country = null) {
            const listEl = document.getElementById('suppliersList');
            const marketsEl = document.getElementById('suppliersMarkets');
            const sourcesEl = document.getElementById('suppliersSources');
            
            // عرض حالة التحميل
            if (listEl) showLoadingState('suppliersList', 'جاري تحميل قائمة الموردين...');
            if (marketsEl) showLoadingState('suppliersMarkets', 'جاري تحميل بيانات الأسواق...');
            if (sourcesEl) showLoadingState('suppliersSources', 'جاري تحميل المصادر...');
            
            suppliersDataCache = null;
            
            try {
                const USE_MOCK_DATA = false;
                
                let data;
                if (USE_MOCK_DATA) {
                    data = getMockSuppliersData(product, hs_code, country);
                } else {
                    let url = `${API_BASE}/suppliers/top?`;
                    const params = [];
                    if (product) params.push(`product=${encodeURIComponent(product)}`);
                    if (hs_code) params.push(`hs_code=${encodeURIComponent(hs_code)}`);
                    if (country) params.push(`country=${encodeURIComponent(country)}`);
                    url += params.join('&');
                    
                    const response = await fetchWithTimeout(url, {}, 8000);
                    
                    if (!response.ok) {
                        const errorDetails = logAPIError('Best Suppliers', url, new Error(`HTTP ${response.status}`), response);
                        showErrorToUser('suppliersList', `فشل تحميل الموردين (${response.status})`, true);
                        data = getMockSuppliersData(product, hs_code, country);
                    } else {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            logAPIError('Best Suppliers', url, new Error('API returned HTML instead of JSON'), response);
                            showErrorToUser('suppliersList', 'خطأ في تنسيق البيانات من الخادم', true);
                            data = getMockSuppliersData(product, hs_code, country);
                        } else {
                            const apiData = await response.json();
                            if (apiData.ok) {
                                data = apiData;
                                console.log('✅ [Best Suppliers] Data loaded successfully');
                            } else {
                                logAPIError('Best Suppliers', url, new Error(apiData.error || 'API returned ok=false'), response);
                                showErrorToUser('suppliersList', apiData.error || 'فشل تحميل البيانات', true);
                                data = getMockSuppliersData(product, hs_code, country);
                            }
                        }
                    }
                }
                
                suppliersDataCache = data;
                window.suppliersDataCache = suppliersDataCache;
                renderSuppliers(data.suppliers || []);
                renderMarkets(data.markets || []);
                renderSources(data.sources || []);
            } catch (error) {
                const errorDetails = logAPIError('Best Suppliers', `${API_BASE}/suppliers/top`, error);
                showErrorToUser('suppliersList', `خطأ في الاتصال: ${error.message}`);
                
                // استخدام البيانات التجريبية كـ fallback
                const fallbackData = getMockSuppliersData(product, hs_code, country);
                suppliersDataCache = fallbackData;
                window.suppliersDataCache = suppliersDataCache;
                renderSuppliers(fallbackData.suppliers || []);
                renderMarkets(fallbackData.markets || []);
                renderSources(fallbackData.sources || []);
            }
        }
        
        // جعل loadBestSuppliers متاحاً عالمياً
        window.loadBestSuppliers = loadBestSuppliers;
        
        // دالة البحث عن موردين
        function searchSuppliers(event) {
            event.preventDefault();
            const product = document.getElementById('supplierProduct').value.trim();
            const hs_code = document.getElementById('supplierHSCode').value.trim();
            const country = document.getElementById('supplierCountry').value.trim().toUpperCase();
            
            loadBestSuppliers(
                product || null,
                hs_code || null,
                country || null
            );
        }
        
        // دالة عرض الموردين (Block 1)
        function renderSuppliers(suppliers) {
            const container = document.getElementById('suppliersList');
            
            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            
            if (!suppliers || suppliers.length === 0) {
                const noSuppliersText = dict.no_data_available || 'No data available';
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-industry"></i> ${noSuppliersText}</div>`;
                return;
            }
            
            let html = '';
            suppliers.slice(0, 10).forEach(supplier => {
                const name = supplier.name || (dict.unknown || 'Unknown');
                const country = supplier.country || (dict.unknown || 'Unknown');
                const shipments = supplier.shipments_12m || 0;
                const lastShipment = supplier.last_shipment || (dict.unknown || 'Unknown');
                const score = supplier.score || 0;
                const topBuyer = supplier.top_buyer || null;
                const isVerified = supplier.is_verified !== false;
                const riskLevel = supplier.risk_level || 'medium';
                const contactHint = supplier.contact_hint || false;
                
                // تحديد لون حسب score
                let scoreColor = 'text-gray-400';
                if (score >= 80) scoreColor = 'text-success';
                else if (score >= 60) scoreColor = 'text-info';
                else if (score >= 40) scoreColor = 'text-warning';
                else scoreColor = 'text-danger';
                
                // تحديد لون المخاطرة
                let riskColor = 'text-gray-400';
                let riskBadge = '';
                if (riskLevel === 'low') {
                    riskColor = 'text-success';
                    riskBadge = `<span class="text-xs text-success"><i class="fas fa-check-circle mr-1"></i>${dict.supplier_low_risk || 'Low risk'}</span>`;
                } else if (riskLevel === 'high') {
                    riskColor = 'text-danger';
                    riskBadge = `<span class="text-xs text-danger"><i class="fas fa-exclamation-triangle mr-1"></i>High risk</span>`;
                }
                
                // شارة "يبيع لعميل كبير"
                let bigBuyerBadge = '';
                if (topBuyer && (topBuyer.includes('Amazon') || topBuyer.includes('Home Depot') || topBuyer.includes('Walmart'))) {
                    bigBuyerBadge = `<span class="text-xs text-primary bg-primary bg-opacity-20 px-2 py-1 rounded"><i class="fas fa-star mr-1"></i>${dict.supplier_big_buyer || 'Sells to big buyer'}</span>`;
                }
                
                // كشف المورد الوهمي (لا شحنات خلال 18 شهر)
                const isFake = shipments === 0 || !lastShipment || lastShipment === (dict.unknown || 'Unknown');
                const fakeClass = isFake ? 'opacity-50' : '';
                const numConverter = lang === 'ar' ? toArabicNumerals : (n) => n;
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors ${fakeClass}">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <div class="text-white font-semibold text-sm flex items-center gap-2">
                                    ${name}
                                    ${isVerified ? '<i class="fas fa-check-circle text-success text-xs" title="Verified supplier"></i>' : ''}
                                </div>
                                <div class="text-gray-400 text-xs mt-1">${country}</div>
                            </div>
                            <div class="text-right">
                                <div class="${scoreColor} font-bold text-sm">${numConverter(score.toFixed(1))}</div>
                                <div class="text-xs text-gray-400">${dict.supplier_rating || 'Rating'}</div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-400 mb-2">
                            <span><i class="fas fa-ship me-1"></i>${numConverter(shipments)} ${dict.supplier_shipments || 'shipments'} (${numConverter(12)} ${dict.supplier_months || 'months'})</span>
                            <span><i class="fas fa-calendar mr-1"></i>${lastShipment}</span>
                        </div>
                        ${topBuyer ? `<div class="text-xs text-gray-400 mb-2"><i class="fas fa-user-tie mr-1"></i>${dict.supplier_top_buyer || 'Top buyer:'} ${topBuyer}</div>` : ''}
                        <div class="flex items-center gap-2 flex-wrap mt-2">
                            ${bigBuyerBadge}
                            ${riskBadge}
                            ${contactHint ? `<span class="text-xs text-info"><i class="fas fa-phone mr-1"></i>${dict.supplier_contact_available || 'Contact info available'}</span>` : ''}
                        </div>
                        <button onclick="showSupplierShipments('${name}')" class="w-full mt-2 text-xs text-primary hover:text-yellow-400 border border-primary border-opacity-30 rounded px-2 py-1">
                            <i class="fas fa-list mr-1"></i>${dict.supplier_show_shipments || 'Show shipments'}
                        </button>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض الدول الأهم (Block 2)
        function renderMarkets(markets) {
            const container = document.getElementById('suppliersMarkets');
            
            if (!markets || markets.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-globe"></i> لا توجد بيانات متاحة</div>';
                return;
            }
            
            let html = '';
            markets.forEach((market, index) => {
                const country = market.country || 'غير معروف';
                const countryName = market.country_name || country;
                const exportVolume = market.export_volume || 0;
                const rank = market.rank || index + 1;
                
                // تنسيق حجم التصدير
                const volumeFormatted = exportVolume >= 1000000 
                    ? `${toArabicNumerals((exportVolume / 1000000).toFixed(1))}M`
                    : exportVolume >= 1000
                    ? `${toArabicNumerals((exportVolume / 1000).toFixed(1))}K`
                    : toArabicNumerals(exportVolume.toString());
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors border-r-4 border-primary">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 bg-primary text-black rounded-full flex items-center justify-center font-bold text-sm">${toArabicNumerals(rank)}</div>
                                <div>
                                    <div class="text-white font-semibold text-sm">${countryName}</div>
                                    <div class="text-gray-400 text-xs">${country}</div>
                                </div>
                            </div>
                            <div class="text-primary font-bold text-sm">$${volumeFormatted}</div>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض مصادر البيانات (Block 3)
        function renderSources(sources) {
            const container = document.getElementById('suppliersSources');
            
            if (!sources || sources.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> لا توجد مصادر متاحة</div>';
                return;
            }
            
            let html = '';
            sources.forEach(source => {
                // معالجة source إذا كان object
                let sourceName = 'غير معروف';
                if (typeof source === 'string') {
                    sourceName = source;
                } else if (source && typeof source === 'object') {
                    sourceName = source.name || source.source || source.title || source.label || 'مصدر غير معروف';
                }
                const now = formatDate(new Date());
                
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-center">
                            <div class="text-white font-semibold text-sm">${sourceName}</div>
                            <div class="text-xs text-gray-400">${now}</div>
                        </div>
                    </div>
                `;
            });
            
            // إضافة مصادر إضافية
            if (sources.includes('Panjiva') || sources.includes('ImportYeti')) {
                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 border border-primary border-opacity-30">
                        <div class="text-xs text-gray-400 mb-1">مصدر التجارة:</div>
                        <div class="text-white font-semibold text-sm">UN Comtrade / ITC TradeMap</div>
                    </div>
                `;
            }
            
            container.innerHTML = html;
        }
        
        // دالة عرض شحنات المورد (مودال)
        async function showSupplierShipments(supplierName) {
            try {
                // TODO: في الإنتاج، استخدم supplier_id الفعلي
                const response = await fetch(`/trendlens/api/suppliers/${encodeURIComponent(supplierName)}/shipments?limit=5`);
                const data = await response.json();
                
                if (data.ok && data.shipments) {
                    let html = `
                        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onclick="this.remove()">
                            <div class="glass-effect rounded-xl p-6 max-w-2xl w-full mx-4 max-h-96 overflow-y-auto" onclick="event.stopPropagation()">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-lg font-bold text-white">آخر شحنات ${supplierName}</h3>
                                    <button onclick="this.closest('.fixed').remove()" class="text-gray-400 hover:text-white">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div class="space-y-3">
                    `;
                    
                    data.shipments.forEach(shipment => {
                        html += `
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="flex justify-between items-center mb-2">
                                    <div class="text-white font-semibold text-sm">${shipment.date}</div>
                                    <div class="text-primary font-bold">$${shipment.value_usd ? toArabicNumerals(formatNumber(shipment.value_usd)) : 'N/A'}</div>
                                </div>
                                <div class="text-xs text-gray-400 space-y-1">
                                    <div><i class="fas fa-ship mr-1"></i>${shipment.origin_port_name} → ${shipment.destination_port_name}</div>
                                    <div><i class="fas fa-user-tie mr-1"></i>المشتري: ${shipment.buyer}</div>
                                    <div><i class="fas fa-box me-1"></i>${shipment.product} (${toArabicNumerals(shipment.weight_kg)} كجم)</div>
                                </div>
                            </div>
                        `;
                    });
                    
                    html += `
                                </div>
                            </div>
                        </div>
                    `;
                    
                    document.body.insertAdjacentHTML('beforeend', html);
                } else {
                    alert('لا توجد شحنات متاحة');
                }
            } catch (error) {
                console.error('Error fetching supplier shipments:', error);
                alert('خطأ في جلب الشحنات');
            }
        }
        
        // ===== Product Explosions Functions =====
        // 
        // 📋 نفس النسق المستخدم في "نبض الشحن" و "أفضل الموردين": API واحد → 3 بلوكات → 3 دوال render

        let explodingDataCache = null;
        // جعل explodingDataCache متاحاً عالمياً
        window.explodingDataCache = explodingDataCache;
        const EXPLOSIONS_LOADING_HTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span></div>';

        function escapeHtml(str) {
            if (str === null || str === undefined) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        async function loadProductExplosions(query = null, category = null, country = null) {
            const listEl = document.getElementById('explodingList');
            const platformsEl = document.getElementById('explodingPlatforms');
            const forecastEl = document.getElementById('explodingForecast');

            if (listEl) listEl.innerHTML = EXPLOSIONS_LOADING_HTML;
            if (platformsEl) platformsEl.innerHTML = EXPLOSIONS_LOADING_HTML;
            if (forecastEl) forecastEl.innerHTML = EXPLOSIONS_LOADING_HTML;

            explodingDataCache = null;

            try {
                const params = new URLSearchParams();
                if (query) params.append('q', query);
                if (category) params.append('category', category);
                if (country) params.append('country', country);
                params.append('period', 'last_7d');
                params.append('limit', '5');

                const url = `${API_BASE}/trends/explosions?${params.toString()}`;
                const response = await fetchWithTimeout(url, { cache: 'no-store' }, 8000);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                const contentType = response.headers.get('content-type');
                if (!contentType || !contentType.includes('application/json')) {
                    console.error('API returned HTML instead of JSON. Check API endpoint:', url);
                    throw new Error('Invalid response format');
                }

                const data = await response.json();

                // التحقق من response.ok === true قبل استخدام البيانات
                if (data.ok !== true) {
                    throw new Error(data.error || 'فشل في جلب البيانات');
                }

                // استخدام data.items بدلاً من data.products
                const items = data.items || [];
                
                explodingDataCache = data;
                // جعل explodingDataCache متاحاً عالمياً
                window.explodingDataCache = explodingDataCache;
                // التعامل مع عدد العناصر المتاحة (حتى لو كان أقل من limit)
                renderExplodingList(items);
                renderExplodingPlatforms(data.platforms || [], data.countries || []);
                renderExplodingForecast(data.forecast || []);
                renderExplodingMeta(data);
            } catch (error) {
                console.error('Error loading product explosions:', error);
                const errorHtml = '<div class="text-center py-4 text-red-400"><i class="fas fa-exclamation-triangle"></i> تعذر تحميل البيانات</div>';
                if (listEl) listEl.innerHTML = errorHtml;
                if (platformsEl) platformsEl.innerHTML = errorHtml;
                if (forecastEl) forecastEl.innerHTML = errorHtml;
                renderExplodingMeta({ mock: true, sources: [], generated_at: null, cache_hit: false });
            }
        }

        function searchProducts(event) {
            event.preventDefault();
            const query = document.getElementById('productQuery').value.trim();
            const category = document.getElementById('productCategory').value.trim();
            const country = document.getElementById('productCountry').value.trim().toUpperCase();

            loadProductExplosions(query || null, category || null, country || null);
        }

        function renderExplodingList(products) {
            const container = document.getElementById('explodingList');
            if (!container) return;

            if (!products || products.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-rocket"></i> لا توجد منتجات متاحة</div>';
                return;
            }

            let html = '';
            products.forEach(product => {
                const rawName = product.name || 'غير معروف';
                // استخدام translateProductName لترجمة اسم المنتج
                // التأكد من استخدام window.translateProductName
                const translateProductFn = window.translateProductName;
                let name = rawName;
                if (translateProductFn && typeof translateProductFn === 'function') {
                    // استدعاء الدالة مباشرة - ستقرأ window.currentLang تلقائياً
                    name = translateProductFn(rawName);
                } else {
                    // إذا لم تكن الدالة متاحة، استخدام الاسم الأصلي
                    name = rawName;
                }
                const encodedName = encodeURIComponent(name);

                // التعامل مع البنية الجديدة (growth, confidence) والقديمة (search_growth, score)
                const growth = product.growth || product.search_growth || '0%';
                const confidence = product.confidence !== undefined
                    ? product.confidence
                    : (product.score !== undefined ? product.score / 100 : 0.5);
                const confidencePercent = Math.round(confidence * 100);

                // استخدام دالة الترجمة t() إذا كانت متاحة
                const translateTextFn = window.t;
                const trustedText = translateTextFn ? translateTextFn('explosions.trusted') : 'موثوق';
                const monitoredText = translateTextFn ? translateTextFn('explosions.monitored') : 'تحت المراقبة';
                const undefinedText = translateTextFn ? translateTextFn('explosions.undefined') : 'غير محدد';
                const growthText = translateTextFn ? translateTextFn('explosions.growth') : 'النمو';
                const confidenceText = translateTextFn ? translateTextFn('explosions.confidence') : 'الثقة';
                const openAnalysisText = translateTextFn ? translateTextFn('explosions.open_analysis') : 'افتح التحليل';
                
                const badge = confidencePercent >= 80
                    ? `<span class="ml-2 inline-flex items-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs text-green-300">${trustedText}</span>`
                    : `<span class="ml-2 inline-flex items-center rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-300">${monitoredText}</span>`;

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <div class="text-white font-semibold text-sm">${escapeHtml(name)}</div>
                                <div class="text-xs text-gray-400 mt-1">${escapeHtml(product.category || undefinedText)}</div>
                            </div>
                            <div class="text-right">
                                <div class="text-emerald-400 font-bold text-lg">${escapeHtml(String(growth))}</div>
                                <div class="text-xs text-gray-400">${growthText}</div>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <div>${confidenceText}: ${confidencePercent}% ${badge}</div>
                            <a href="/trendlens/product-analysis.html?name=${encodedName}" class="text-primary hover:text-yellow-400 underline">${openAnalysisText}</a>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = html;
        }
        // جعل renderExplodingList متاحاً عالمياً - تحديثه في كل مرة يتم استدعاؤها
        window.renderExplodingList = renderExplodingList;
        
        // إضافة event listener لتغيير اللغة
        document.addEventListener('click', function(e) {
            const target = e.target;
            // التحقق من أي زر يستدعي setLanguage
            if (target.onclick && target.onclick.toString().includes('setLanguage')) {
                // إعادة عرض المنتجات بعد تغيير اللغة
                setTimeout(() => {
                    if (window.explodingDataCache) {
                        const items = window.explodingDataCache.items || window.explodingDataCache.products || [];
                        if (items && items.length > 0 && window.renderExplodingList) {
                            window.renderExplodingList(items);
                        }
                    }
                }, 100);
            }
        });

        function renderExplodingPlatforms(platforms, countries) {
            const container = document.getElementById('explodingPlatforms');
            if (!container) return;

            if ((!platforms || platforms.length === 0) && (!countries || countries.length === 0)) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-globe"></i> لا توجد بيانات متاحة</div>';
                return;
            }

            let html = '';

            if (platforms && platforms.length > 0) {
                html += '<div class="mb-4"><div class="text-xs text-gray-400 mb-2"><i class="fas fa-store mr-1"></i>المنصات الأكثر سخونة</div>';
                html += platforms.slice(0, 6).map(entry => `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 flex justify-between items-center mb-2">
                        <span class="text-white text-sm">${escapeHtml(entry.name)}</span>
                        <span class="text-primary text-xs font-semibold">${entry.count}</span>
                    </div>
                `).join('');
                html += '</div>';
            }

            if (countries && countries.length > 0) {
                html += '<div><div class="text-xs text-gray-400 mb-2"><i class="fas fa-flag mr-1"></i>الدول الأكثر سخونة</div>';
                html += countries.slice(0, 6).map(entry => `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 flex justify-between items-center mb-2">
                        <span class="text-white text-sm">${escapeHtml(entry.name)}</span>
                        <span class="text-primary text-xs font-semibold">${entry.count}</span>
                    </div>
                `).join('');
                html += '</div>';
            }

            container.innerHTML = html;
        }

        function renderExplodingForecast(forecast) {
            const container = document.getElementById('explodingForecast');
            if (!container) return;

            if (!forecast || forecast.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-calendar-alt"></i> لا توجد توقعات متاحة</div>';
                return;
            }

            const html = forecast.slice(0, 6).map(item => {
                const lifespan = item.lifespan_days || 7;
                let colorClass = 'text-danger';
                if (lifespan >= 16) colorClass = 'text-success';
                else if (lifespan >= 12) colorClass = 'text-info';
                else if (lifespan >= 10) colorClass = 'text-warning';

                return `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors border-r-4 border-primary">
                        <div class="flex justify-between items-center mb-2">
                            <div class="text-white font-semibold text-sm">${escapeHtml(item.product || 'غير معروف')}</div>
                            <div class="${colorClass} font-bold text-sm">${toArabicNumerals(lifespan)} يوم</div>
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="fas fa-lightbulb mr-1"></i>${escapeHtml(item.reason || 'غير محدد')}
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = html;
        }

        function renderExplodingMeta(data) {
            const container = document.getElementById('explodingMeta');
            if (!container) return;

            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            const sourcesLabel = dict.sources_label || 'Sources:';
            const sourcesNotSpecified = dict.sources_not_specified || 'Not specified';
            const mockData = dict.mock_data || 'Mock Data';
            const liveData = dict.live_data || 'Live Data';
            const cachedData = dict.cached_data || ' — Cached';
            const lastUpdated = dict.last_updated || 'Last updated:';

            const mockLabel = data?.mock ? mockData : liveData;
            const cacheLabel = data?.cache_hit ? cachedData : '';
            const generatedAt = data?.generated_at ? formatDate(data.generated_at) : '—';
            const sources = (data?.sources && data.sources.length)
                ? data.sources.map(escapeHtml).join(', ')
                : sourcesNotSpecified;

            container.innerHTML = `
                <div class="text-xs text-gray-400 space-y-1">
                    <div><i class="fas fa-database me-1"></i>${sourcesLabel} ${sources}</div>
                    <div><i class="fas fa-info-circle me-1"></i>${mockLabel}${cacheLabel}</div>
                    <div><i class="fas fa-clock me-1"></i>${lastUpdated} ${generatedAt}</div>
                </div>
            `;
        }

        function showExplosionDetails(encodedName) {
            const productName = decodeURIComponent(encodedName || '');
            // استخدام items بدلاً من products
            const items = explodingDataCache?.items || explodingDataCache?.products || [];
            if (!explodingDataCache || !Array.isArray(items)) {
                return;
            }

            // البحث بالاسم المترجم أولاً، ثم بالاسم الأصلي
            const translateFn = window.translateProductName || (typeof translateProductName === 'function' ? translateProductName : null);
            let product = items.find(item => {
                const translatedName = translateFn ? translateFn(item.name) : item.name;
                return translatedName === productName || item.name === productName;
            });
            
            if (!product) {
                alert('لم يتم العثور على تفاصيل المنتج المحدد');
                return;
            }

            document.querySelectorAll('.explosion-modal').forEach(el => el.remove());

            const topCountries = product.top_countries || product.countries || [];
            const platformBreakdown = product.platform_breakdown || [];
            const reasons = product.reason || [];
            const productSources = product.sources || [];
            const globalSources = explodingDataCache.sources || [];
            
            // ترجمة اسم المنتج للعرض
            const displayName = translateFn ? translateFn(product.name) : product.name;

            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 explosion-modal';
            modal.innerHTML = `
                <div class="glass-effect rounded-2xl max-w-3xl w-full mx-4 max-h-[80vh] overflow-y-auto" onclick="event.stopPropagation()">
                    <div class="flex justify-between items-center p-6 border-b border-white border-opacity-10">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-1">${escapeHtml(displayName || 'منتج')}</h3>
                            <div class="text-xs text-gray-400">${escapeHtml(product.category || 'غير مصنف')}</div>
                        </div>
                        <button class="text-gray-400 hover:text-white" onclick="this.closest('.explosion-modal').remove()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="p-6 space-y-5 text-sm text-gray-300">
                        <div class="grid md:grid-cols-3 gap-4 text-xs text-gray-400">
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">الدرجة</div>
                                <div class="text-primary text-lg font-bold">${typeof product.score === 'number' ? toArabicNumerals(product.score.toFixed(1)) : escapeHtml(product.score || '0')}</div>
                            </div>
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">العمر المتوقع</div>
                                <div><i class="fas fa-clock me-1"></i>${toArabicNumerals(product.lifespan_days || 7)} يوم</div>
                            </div>
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">المنصة الأقوى</div>
                                <div><i class="fas fa-store mr-1"></i>${escapeHtml(product.primary_platform || 'غير محدد')}</div>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">الأسباب</h4>
                            <div class="flex flex-wrap gap-2">
                                ${reasons.length ? reasons.map(item => `<span class="bg-white bg-opacity-10 px-2 py-1 rounded-full">${escapeHtml(item)}</span>`).join('') : '<span class="text-gray-500">لا توجد بيانات</span>'}
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">أفضل الدول</h4>
                            <div class="flex flex-wrap gap-2">
                                ${topCountries.length ? topCountries.map(item => `<span class="bg-white bg-opacity-10 px-2 py-1 rounded-full">${escapeHtml(item)}</span>`).join('') : '<span class="text-gray-500">لا توجد بيانات</span>'}
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">المنصات</h4>
                            <div class="space-y-1">
                                ${platformBreakdown.length ? platformBreakdown.map(entry => `<div class="flex justify-between items-center bg-black bg-opacity-20 rounded px-3 py-2"><span>${escapeHtml(entry.platform || entry.name || '—')}</span><span class="text-primary text-xs">${entry.score !== undefined ? entry.score : '—'}</span></div>`).join('') : '<span class="text-gray-500">لا توجد بيانات</span>'}
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">المصادر</h4>
                            <div class="flex flex-wrap gap-2">
                                ${(productSources.length ? productSources : globalSources).map(source => `<span class="bg-white bg-opacity-10 px-2 py-1 rounded-full">${escapeHtml(source)}</span>`).join('') || '<span class="text-gray-500">لا توجد بيانات</span>'}
                            </div>
                        </div>
                    </div>
                </div>
            `;

            modal.addEventListener('click', () => modal.remove());
            document.body.appendChild(modal);
        }
        
        // ===== Finance Candles Functions =====
        // 
        // 📋 نفس النسق المستخدم في "نبض الشحن" و "أفضل الموردين" و "انفجارات المنتجات": API واحد → 3 بلوكات → 3 دوال render

        let candlesDataCache = null;
        // جعل candlesDataCache متاحاً عالمياً
        window.candlesDataCache = candlesDataCache;
        const CANDLES_LOADING_HTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span></div>';

        // بيانات تجريبية للشموع المالية
        function getMockCandlesData(symbol = 'BTCUSDT', interval = '1h') {
            const now = Math.floor(Date.now() / 1000);
            const candles = [];
            let basePrice = symbol === 'BTCUSDT' ? 45000 : symbol === 'ETHUSDT' ? 2800 : 2000;
            
            for (let i = 119; i >= 0; i--) {
                const ts = now - (i * 3600); // كل ساعة
                const open = basePrice + (Math.random() - 0.5) * 500;
                const close = open + (Math.random() - 0.5) * 300;
                const high = Math.max(open, close) + Math.random() * 200;
                const low = Math.min(open, close) - Math.random() * 200;
                const volume = Math.random() * 1000 + 100;
                
                candles.push({ ts, open, high, low, close, volume });
                basePrice = close;
            }
            
            return {
                ok: true,
                candles,
                patterns: [
                    { name: 'Bullish Engulfing', confidence: 0.85, signal: 'buy' },
                    { name: 'Hammer', confidence: 0.72, signal: 'buy' },
                    { name: 'Doji', confidence: 0.65, signal: 'neutral' }
                ],
                meta: {
                    symbol,
                    interval,
                    source: 'Binance',
                    last_update: new Date().toISOString(),
                    mock: true
                }
            };
        }

        async function loadFinanceCandles(symbol = null, interval = null) {
            const chartEl = document.getElementById('candlesChart');
            const patternsEl = document.getElementById('candlesPatterns');
            const metaEl = document.getElementById('candlesMeta');

            // عرض حالة التحميل
            if (chartEl) showLoadingState('candlesChart', 'جاري تحميل الشموع المالية...');
            if (patternsEl) showLoadingState('candlesPatterns', 'جاري تحليل الأنماط...');
            if (metaEl) showLoadingState('candlesMeta', 'جاري تحميل البيانات الوصفية...');

            candlesDataCache = null;

            try {
                const selectedSymbol = symbol || document.getElementById('candleSymbol')?.value || 'BTCUSDT';
                const selectedInterval = interval || document.getElementById('candleInterval')?.value || '1h';
                const USE_MOCK_DATA = false;
                const endpoint = `${API_BASE}/finance/candles?symbol=${encodeURIComponent(selectedSymbol)}&interval=${encodeURIComponent(selectedInterval)}&limit=120`;
                
                let data;
                if (USE_MOCK_DATA) {
                    data = getMockCandlesData(selectedSymbol, selectedInterval);
                } else {
                    const response = await fetch(endpoint);
                    
                    if (!response.ok) {
                        if (response.status === 404) {
                            logAPIError('Finance Candles', endpoint, new Error(`Endpoint not found (404)`), response);
                            showErrorToUser('candlesChart', 'نقطة النهاية غير متاحة (404)', true);
                        } else {
                            logAPIError('Finance Candles', endpoint, new Error(`HTTP ${response.status}`), response);
                            showErrorToUser('candlesChart', `فشل تحميل الشموع (${response.status})`, true);
                        }
                        data = getMockCandlesData(selectedSymbol, selectedInterval);
                    } else {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            logAPIError('Finance Candles', endpoint, new Error('API returned HTML instead of JSON'), response);
                            showErrorToUser('candlesChart', 'خطأ في تنسيق البيانات من الخادم', true);
                            data = getMockCandlesData(selectedSymbol, selectedInterval);
                        } else {
                            data = await response.json();
                            if (data.ok === false) {
                                logAPIError('Finance Candles', endpoint, new Error(data.error || 'API returned ok=false'), response);
                                showErrorToUser('candlesChart', data.error || 'فشل تحميل البيانات', true);
                                data = getMockCandlesData(selectedSymbol, selectedInterval);
                            } else {
                                console.log('✅ [Finance Candles] Data loaded successfully');
                            }
                        }
                    }
                }

                candlesDataCache = data;
                window.candlesDataCache = candlesDataCache;
                renderCandlesChart(data.candles || []);
                renderCandlesPatterns(data.patterns || []);
                renderCandlesMeta(data);
            } catch (error) {
                const errorDetails = logAPIError('Finance Candles', `${API_BASE}/finance/candles`, error);
                showErrorToUser('candlesChart', `خطأ في الاتصال: ${error.message}`);
                
                // استخدام البيانات التجريبية كـ fallback
                const fallbackData = getMockCandlesData(
                    symbol || document.getElementById('candleSymbol')?.value || 'BTCUSDT',
                    interval || document.getElementById('candleInterval')?.value || '1h'
                );
                candlesDataCache = fallbackData;
                window.candlesDataCache = candlesDataCache;
                renderCandlesChart(fallbackData.candles || []);
                renderCandlesPatterns(fallbackData.patterns || []);
                renderCandlesMeta(fallbackData);
            }
        }
        
        // جعل loadFinanceCandles و renderCandlesChart متاحة عالمياً
        window.loadFinanceCandles = loadFinanceCandles;

        function searchCandles(event) {
            event.preventDefault();
            const symbol = document.getElementById('candleSymbol').value;
            const interval = document.getElementById('candleInterval').value;
            loadFinanceCandles(symbol, interval);
        }

        function renderCandlesChart(candles) {
            const container = document.getElementById('candlesChart');
            if (!container) return;

            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);

            if (!candles || candles.length === 0) {
                const noDataText = dict.no_data_available || 'No data available';
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-chart-line"></i> ${noDataText}</div>`;
                return;
            }

            // TODO: في الإنتاج، استخدم TradingView Lightweight Charts أو مكتبة مشابهة
            // الآن نعرض جدول بسيط للتوضيح
            let html = '<div class="overflow-x-auto"><table class="w-full text-xs text-gray-300">';
            html += '<thead><tr class="border-b border-white border-opacity-10">';
            const timeLabel = dict.candles_table_time || 'Time';
            const tableNote = dict.candles_table_note || 'Showing last 10 candles (ready for TradingView Charts integration)';
            
            html += `<th class="text-left py-2 px-2">${timeLabel}</th>`;
            html += '<th class="text-right py-2 px-2">Open</th>';
            html += '<th class="text-right py-2 px-2">High</th>';
            html += '<th class="text-right py-2 px-2">Low</th>';
            html += '<th class="text-right py-2 px-2">Close</th>';
            html += '<th class="text-right py-2 px-2">Volume</th>';
            html += '</tr></thead><tbody>';

            candles.slice(-10).forEach(candle => {
                const date = formatDate(new Date(candle.ts * 1000), { hour: '2-digit', minute: '2-digit' });
                const isBullish = candle.close > candle.open;
                const colorClass = isBullish ? 'text-success' : 'text-danger';
                const numConverter = lang === 'ar' ? toArabicNumerals : (n) => n;

                html += `<tr class="border-b border-white border-opacity-5 hover:bg-white hover:bg-opacity-5">`;
                html += `<td class="py-2 px-2">${date}</td>`;
                html += `<td class="text-right py-2 px-2">${numConverter(candle.open.toFixed(2))}</td>`;
                html += `<td class="text-right py-2 px-2 text-success">${numConverter(candle.high.toFixed(2))}</td>`;
                html += `<td class="text-right py-2 px-2 text-danger">${numConverter(candle.low.toFixed(2))}</td>`;
                html += `<td class="text-right py-2 px-2 ${colorClass} font-semibold">${numConverter(candle.close.toFixed(2))}</td>`;
                html += `<td class="text-right py-2 px-2">${numConverter(candle.volume.toFixed(2))}</td>`;
                html += `</tr>`;
            });

            html += '</tbody></table></div>';
            html += '<div class="mt-3 text-xs text-gray-400 text-center">';
            html += `<i class="fas fa-info-circle mr-1"></i>${tableNote}`;
            html += '</div>';

            container.innerHTML = html;
        }

        function renderCandlesPatterns(patterns) {
            const container = document.getElementById('candlesPatterns');
            if (!container) return;

            if (!patterns || patterns.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-shapes"></i> لا توجد نماذج مكتشفة</div>';
                return;
            }

            let html = '';
            patterns.forEach(pattern => {
                const name = pattern.name || 'غير معروف';
                const strength = pattern.strength || 0;
                const explanation = pattern.explanation || 'غير محدد';
                const patternType = pattern.type || 'unknown';
                const timestamp = pattern.at || 0;
                const date = timestamp ? formatDate(new Date(timestamp * 1000)) : 'غير محدد';

                let typeColor = 'text-gray-400';
                let typeBadge = '';
                if (patternType === 'reversal') {
                    typeColor = 'text-warning';
                    typeBadge = '<span class="text-xs text-warning bg-warning bg-opacity-20 px-2 py-1 rounded">انعكاس</span>';
                } else if (patternType === 'continuation') {
                    typeColor = 'text-info';
                    typeBadge = '<span class="text-xs text-info bg-info bg-opacity-20 px-2 py-1 rounded">استمرار</span>';
                }

                let strengthColor = 'text-gray-400';
                if (strength >= 80) strengthColor = 'text-success';
                else if (strength >= 60) strengthColor = 'text-info';
                else if (strength >= 40) strengthColor = 'text-warning';
                else strengthColor = 'text-danger';

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3 hover:bg-opacity-50 transition-colors">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <div class="text-white font-semibold text-sm">${escapeHtml(name)}</div>
                                <div class="text-xs text-gray-400 mt-1">${date}</div>
                            </div>
                            <div class="text-right">
                                <div class="${strengthColor} font-bold text-sm">${strength}</div>
                                <div class="text-xs text-gray-400">قوة</div>
                            </div>
                        </div>
                        <div class="text-xs text-gray-400 mb-2">${escapeHtml(explanation)}</div>
                        <div class="flex items-center gap-2 flex-wrap mt-2">
                            ${typeBadge}
                        </div>
                        <button type="button" onclick="showPatternDetails('${escapeHtml(name)}', ${timestamp})" class="w-full mt-2 text-xs text-primary hover:text-yellow-400 border border-primary border-opacity-30 rounded px-2 py-1">
                            <i class="fas fa-external-link-alt mr-1"></i>افتح التحليل
                        </button>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        function renderCandlesMeta(data) {
            const container = document.getElementById('candlesMeta');
            if (!container) return;

            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            const mockData = dict.mock_data || 'Mock Data';
            const liveData = dict.live_data || 'Live Data';
            const cachedData = dict.cached_data || ' — Cached';
            const sourcesNotSpecified = dict.sources_not_specified || 'Not specified';
            const lastUpdated = dict.last_updated || 'Last updated:';

            const mockLabel = data?.mock ? mockData : liveData;
            const cacheLabel = data?.cache_hit ? cachedData : '';
            const generatedAt = data?.generated_at ? formatDate(data.generated_at) : '—';
            const symbol = data?.symbol || sourcesNotSpecified;
            const interval = data?.interval || sourcesNotSpecified;
            const candlesCount = data?.candles?.length || 0;
            const patternsCount = data?.patterns?.length || 0;

            const assetLabel = dict.candles_asset || 'Asset:';
            const timeframeLabel = dict.candles_timeframe || 'Timeframe:';
            const candlesLabel = dict.candles_count || 'Candles:';
            const patternsLabel = dict.candles_patterns || 'Detected Patterns:';
            const statusLabel = dict.candles_status || 'Status:';

            container.innerHTML = `
                <div class="bg-black bg-opacity-30 rounded-lg p-3 space-y-2 text-xs text-gray-400">
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-coins me-1"></i>${assetLabel}</span>
                        <span class="text-white font-semibold">${escapeHtml(symbol)}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-clock me-1"></i>${timeframeLabel}</span>
                        <span class="text-white font-semibold">${escapeHtml(interval)}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-chart-bar me-1"></i>${candlesLabel}</span>
                        <span class="text-white font-semibold">${candlesCount}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-shapes me-1"></i>${patternsLabel}</span>
                        <span class="text-white font-semibold">${patternsCount}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-info-circle me-1"></i>${statusLabel}</span>
                        <span class="text-white font-semibold">${mockLabel}${cacheLabel}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span><i class="fas fa-clock me-1"></i>${lastUpdated}</span>
                        <span class="text-white font-semibold">${generatedAt}</span>
                    </div>
                </div>
            `;
        }

        function showPatternDetails(patternName, timestamp) {
            if (!candlesDataCache || !Array.isArray(candlesDataCache.patterns)) {
                return;
            }

            const pattern = candlesDataCache.patterns.find(p => p.name === patternName && p.at === timestamp);
            if (!pattern) {
                alert('لم يتم العثور على تفاصيل النموذج المحدد');
                return;
            }

            document.querySelectorAll('.pattern-modal').forEach(el => el.remove());

            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 pattern-modal';
            modal.innerHTML = `
                <div class="glass-effect rounded-2xl max-w-3xl w-full mx-4 max-h-[80vh] overflow-y-auto" onclick="event.stopPropagation()">
                    <div class="flex justify-between items-center p-6 border-b border-white border-opacity-10">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-1">${escapeHtml(pattern.name || 'نموذج')}</h3>
                            <div class="text-xs text-gray-400">${escapeHtml(pattern.explanation || 'غير محدد')}</div>
                        </div>
                        <button class="text-gray-400 hover:text-white" onclick="this.closest('.pattern-modal').remove()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="p-6 space-y-5 text-sm text-gray-300">
                        <div class="grid md:grid-cols-3 gap-4 text-xs text-gray-400">
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">القوة</div>
                                <div class="text-primary text-lg font-bold">${pattern.strength || 0}</div>
                            </div>
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">النوع</div>
                                <div><i class="fas fa-shapes mr-1"></i>${escapeHtml(pattern.type || 'غير محدد')}</div>
                            </div>
                            <div class="bg-black bg-opacity-30 rounded-lg p-3">
                                <div class="text-white font-semibold text-sm mb-1">التوقيت</div>
                                <div><i class="fas fa-clock me-1"></i>${formatDate(new Date((pattern.at || 0) * 1000))}</div>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">التفسير</h4>
                            <div class="bg-black bg-opacity-20 rounded-lg p-4">
                                <p class="text-gray-300 leading-relaxed">${escapeHtml(pattern.explanation || 'لا توجد معلومات إضافية')}</p>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">المعنى للمستخدم</h4>
                            <div class="bg-black bg-opacity-20 rounded-lg p-4">
                                <p class="text-gray-300 leading-relaxed">
                                    ${pattern.type === 'reversal' 
                                        ? 'هذا النموذج يشير إلى احتمال انعكاس في الاتجاه. راقب حركة السعر بعد ظهور النموذج.' 
                                        : pattern.type === 'continuation' 
                                        ? 'هذا النموذج يشير إلى استمرار الاتجاه الحالي. قد يكون مناسبًا للدخول في نفس الاتجاه.' 
                                        : 'راقب حركة السعر بعد ظهور النموذج لتحديد الاتجاه المحتمل.'}
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-white mb-2">الفريم</h4>
                            <div class="bg-black bg-opacity-20 rounded-lg p-4">
                                <p class="text-gray-300">${escapeHtml(candlesDataCache.interval || 'غير محدد')}</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            modal.addEventListener('click', () => modal.remove());
            document.body.appendChild(modal);
        }

        // ===== AI Insights Functions =====
        // 
        // 📋 نفس النسق المستخدم في "نبض الشحن" و "أفضل الموردين" و "انفجارات المنتجات" و "الشموع المالية": API واحد → 3 بلوكات → 3 دوال render

        let aiInsightsDataCache = null;
        // جعل aiInsightsDataCache متاحاً عالمياً
        window.aiInsightsDataCache = aiInsightsDataCache;
        const AI_INSIGHTS_LOADING_HTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i> <span data-i18n="loading_text">جاري التحميل...</span></div>';

        // بيانات تجريبية لرؤى الذكاء الاصطناعي
        function getMockAIInsightsData(symbol = '', scope = 'market', depth = 'short') {
            const lang = window.currentLang || document.documentElement.lang || 'ar';
            const isArabic = lang === 'ar';
            
            const insightTexts = {
                market: {
                    short: isArabic 
                        ? 'السوق يظهر علامات نمو قوية في قطاع التكنولوجيا. الطلب على المنتجات الإلكترونية في ارتفاع مستمر، خاصة في الأسواق الآسيوية. نوصي بمراقبة اتجاهات الأسعار عن كثب.'
                        : 'The market shows strong growth signs in the technology sector. Demand for electronic products is steadily rising, especially in Asian markets. We recommend closely monitoring price trends.',
                    medium: isArabic
                        ? 'تحليل متوسط العمق: السوق الحالي يتميز بزيادة الطلب على المنتجات الذكية بنسبة 35% مقارنة بالربع السابق. المناطق الأكثر نمواً هي جنوب شرق آسيا وأوروبا الشرقية.'
                        : 'Medium depth analysis: The current market shows a 35% increase in demand for smart products compared to the previous quarter. The fastest-growing regions are Southeast Asia and Eastern Europe.',
                    deep: isArabic
                        ? 'تحليل عميق: السوق يمر بمرحلة انتقالية مهمة. هناك تحول واضح من المنتجات التقليدية إلى المنتجات الذكية المدمجة بالذكاء الاصطناعي. هذا التحول مدعوم بثلاثة عوامل رئيسية: انخفاض تكاليف الإنتاج، زيادة الوعي بالاستدامة، وتطور البنية التحتية الرقمية.'
                        : 'Deep analysis: The market is undergoing a significant transition. There is a clear shift from traditional products to AI-integrated smart products. This shift is supported by three main factors: lower production costs, increased sustainability awareness, and digital infrastructure development.'
                },
                product: {
                    short: isArabic
                        ? 'هذا المنتج يظهر إمكانات نمو عالية. معدل البحث زاد بنسبة 45% في آخر 30 يوماً.'
                        : 'This product shows high growth potential. Search rate increased by 45% in the last 30 days.',
                    medium: isArabic
                        ? 'المنتج يحظى باهتمام متزايد من المستهلكين. معدل التحويل جيد والمنافسة متوسطة.'
                        : 'The product is gaining increasing consumer interest. Conversion rate is good and competition is moderate.',
                    deep: isArabic
                        ? 'تحليل شامل للمنتج: البيانات تشير إلى فرصة تسويقية قوية. المنتج يلبي حاجة حقيقية في السوق مع منافسة محدودة نسبياً.'
                        : 'Comprehensive product analysis: Data indicates a strong marketing opportunity. The product meets a real market need with relatively limited competition.'
                },
                social: {
                    short: isArabic
                        ? 'الحساب يظهر نمواً ثابتاً في التفاعل. معدل المشاركة جيد.'
                        : 'The account shows steady growth in engagement. Engagement rate is good.',
                    medium: isArabic
                        ? 'الحساب في حالة نمو صحي. المحتوى يحصل على تفاعل إيجابي من الجمهور المستهدف.'
                        : 'The account is in healthy growth. Content receives positive engagement from the target audience.',
                    deep: isArabic
                        ? 'تحليل عميق للحساب: الاستراتيجية الحالية فعالة. المحتوى التعليمي يحصل على أعلى معدلات تفاعل.'
                        : 'Deep account analysis: Current strategy is effective. Educational content receives the highest engagement rates.'
                }
            };
            
            return {
                ok: true,
                insight_text: insightTexts[scope]?.[depth] || insightTexts.market.short,
                metrics: {
                    momentum: Math.random() * 40 + 60,
                    volatility: Math.random() * 30 + 20,
                    social_heat: Math.random() * 50 + 50,
                    market_sentiment: Math.random() * 30 + 70
                },
                disclaimer: isArabic
                    ? 'هذه الرؤى مبنية على تحليل البيانات المتاحة وقد تتغير حسب ظروف السوق. لا تعتبر نصيحة استثمارية.'
                    : 'These insights are based on analysis of available data and may change according to market conditions. Not considered investment advice.',
                mock: true
            };
        }

        async function loadAIInsights(symbol = null, scope = null, depth = null) {
            const textEl = document.getElementById('aiInsightText');
            const metricsEl = document.getElementById('aiInsightsMetrics');
            const disclaimerEl = document.getElementById('aiInsightsDisclaimer');

            // عرض حالة التحميل
            if (textEl) showLoadingState('aiInsightText', 'جاري تحليل البيانات...');
            if (metricsEl) showLoadingState('aiInsightsMetrics', 'جاري حساب المقاييس...');
            if (disclaimerEl) showLoadingState('aiInsightsDisclaimer', 'جاري التحميل...');

            aiInsightsDataCache = null;

            try {
                const selectedSymbol = symbol || document.getElementById('insightSymbol')?.value || null;
                const selectedScope = scope || document.getElementById('insightScope')?.value || 'market';
                const selectedDepth = depth || document.getElementById('insightDepth')?.value || 'short';
                const lang = window.currentLang || document.documentElement.lang || 'ar';
                const USE_MOCK_DATA = false;
                
                let url = `${API_BASE}/ai/insights?scope=${encodeURIComponent(selectedScope)}&depth=${encodeURIComponent(selectedDepth)}&lang=${lang}`;
                if (selectedSymbol) {
                    url += `&symbol=${encodeURIComponent(selectedSymbol)}`;
                }
                
                let data;
                if (USE_MOCK_DATA) {
                    data = getMockAIInsightsData(selectedSymbol || '', selectedScope, selectedDepth);
                } else {
                    const response = await fetchWithTimeout(url, {}, 10000);
                    
                    if (!response.ok) {
                        if (response.status === 422) {
                            logAPIError('AI Insights', url, new Error('Validation error (422)'), response);
                            showErrorToUser('aiInsightText', 'خطأ في البيانات المرسلة (422)', true);
                        } else if (response.status === 404) {
                            logAPIError('AI Insights', url, new Error('Endpoint not found (404)'), response);
                            showErrorToUser('aiInsightText', 'نقطة النهاية غير متاحة (404)', true);
                        } else {
                            logAPIError('AI Insights', url, new Error(`HTTP ${response.status}`), response);
                            showErrorToUser('aiInsightText', `فشل تحميل الرؤى (${response.status})`, true);
                        }
                        data = getMockAIInsightsData(selectedSymbol || '', selectedScope, selectedDepth);
                    } else {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            logAPIError('AI Insights', url, new Error('API returned HTML instead of JSON'), response);
                            showErrorToUser('aiInsightText', 'خطأ في تنسيق البيانات من الخادم', true);
                            data = getMockAIInsightsData(selectedSymbol || '', selectedScope, selectedDepth);
                        } else {
                            data = await response.json();
                            if (data.ok === false) {
                                logAPIError('AI Insights', url, new Error(data.error || 'API returned ok=false'), response);
                                showErrorToUser('aiInsightText', data.error || 'فشل تحميل البيانات', true);
                                data = getMockAIInsightsData(selectedSymbol || '', selectedScope, selectedDepth);
                            } else {
                                console.log('✅ [AI Insights] Data loaded successfully');
                            }
                        }
                    }
                }

                aiInsightsDataCache = data;
                window.aiInsightsDataCache = aiInsightsDataCache;
                renderAIInsightText(data.insight_text || '');
                renderAIInsightsMetrics(data.metrics || {});
                renderAIInsightsDisclaimer(data.disclaimer || '', data.mock || false);
            } catch (error) {
                const errorDetails = logAPIError('AI Insights', `${API_BASE}/ai/insights`, error);
                showErrorToUser('aiInsightText', `خطأ في الاتصال: ${error.message}`);
                
                // استخدام البيانات التجريبية كـ fallback
                const fallbackData = getMockAIInsightsData(
                    symbol || document.getElementById('insightSymbol')?.value || '',
                    scope || document.getElementById('insightScope')?.value || 'market',
                    depth || document.getElementById('insightDepth')?.value || 'short'
                );
                aiInsightsDataCache = fallbackData;
                window.aiInsightsDataCache = aiInsightsDataCache;
                renderAIInsightText(fallbackData.insight_text || '');
                renderAIInsightsMetrics(fallbackData.metrics || {});
                renderAIInsightsDisclaimer(fallbackData.disclaimer || '', fallbackData.mock || false);
            }
        }
        
        // جعل loadAIInsights متاحاً عالمياً
        window.loadAIInsights = loadAIInsights;
        
        // ===== Data Collection AI Insights Functions =====
        /**
         * جلب Insights من Data Collection API (متعدد اللغات)
         * @param {string} sourceType - نوع المصدر (google_trends, shipping, ads, product, ...)
         * @param {string} countryCode - رمز الدولة (US, SA, AE, ...)
         * @param {string} category - الفئة (electronics, beauty, ...)
         */
        async function loadDataCollectionInsight(sourceType = 'google_trends', countryCode = null, category = null) {
            try {
                // الحصول على locale من الواجهة
                const locale = localStorage.getItem('lang') || localStorage.getItem('tl_lang') || 
                              document.documentElement.lang || 'ar';
                const finalLocale = (locale === 'ar' || locale === 'en') ? locale : 'ar';
                
                // بناء URL
                let url = `${API_BASE}/ai/data-collection/insights?source_type=${encodeURIComponent(sourceType)}&locale=${finalLocale}`;
                if (countryCode) {
                    url += `&country_code=${encodeURIComponent(countryCode)}`;
                }
                if (category) {
                    url += `&category=${encodeURIComponent(category)}`;
                }
                
                console.log(`🔍 [Data Collection Insights] جلب Insight: ${url}`);
                
                const response = await fetch(url);
                
                if (!response.ok) {
                    if (response.status === 404) {
                        console.warn(`⚠️ [Data Collection Insights] لا توجد Insights متاحة لـ ${sourceType}`);
                        return null;
                    }
                    throw new Error(`HTTP ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.ok) {
                    console.log('✅ [Data Collection Insights] تم جلب Insight بنجاح:', data);
                    return data;
                } else {
                    console.warn('⚠️ [Data Collection Insights] API رجع ok=false');
                    return null;
                }
                
            } catch (error) {
                console.error('❌ [Data Collection Insights] خطأ في جلب Insight:', error);
                return null;
            }
        }
        
        // جعل الدالة متاحة عالمياً
        window.loadDataCollectionInsight = loadDataCollectionInsight;

        function searchAIInsights(event) {
            event.preventDefault();
            const symbol = document.getElementById('insightSymbol').value.trim();
            const scope = document.getElementById('insightScope').value;
            const depth = document.getElementById('insightDepth').value;

            loadAIInsights(symbol || null, scope, depth);
        }

        function renderAIInsightText(insightText) {
            const container = document.getElementById('aiInsightText');
            if (!container) return;

            if (!insightText || insightText.trim() === '') {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-brain"></i> لا توجد رؤية متاحة</div>';
                return;
            }

            // تحويل الأرقام من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (0-9)
            insightText = toLatinDigits(insightText);

            // تحويل Markdown بسيط إلى HTML
            let html = insightText
                .replace(/\*\*(.*?)\*\*/g, '<strong class="text-white">$1</strong>')
                .replace(/\n\n/g, '</p><p class="text-gray-300 leading-relaxed mb-3">')
                .replace(/\n/g, '<br>')
                .replace(/## (.*?)\n/g, '<h3 class="text-white font-bold text-lg mb-3">$1</h3>')
                .replace(/---/g, '<hr class="border-white border-opacity-10 my-4">')
                .replace(/⚠️/g, '<i class="fas fa-exclamation-triangle text-warning me-1"></i>');

            container.innerHTML = `<div class="text-sm text-gray-300 leading-relaxed"><p class="text-gray-300 leading-relaxed mb-3">${html}</p></div>`;
        }

        function renderAIInsightsMetrics(metrics) {
            const container = document.getElementById('aiInsightsMetrics');
            if (!container) return;

            if (!metrics || Object.keys(metrics).length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-chart-bar"></i> لا توجد مؤشرات متاحة</div>';
                return;
            }

            let html = '<div class="grid grid-cols-2 gap-3">';

            // Momentum
            if (metrics.momentum !== undefined) {
                const momentum = Math.round(metrics.momentum * 100);
                let momentumColor = 'text-gray-400';
                if (momentum >= 70) momentumColor = 'text-success';
                else if (momentum >= 40) momentumColor = 'text-info';
                else if (momentum >= 20) momentumColor = 'text-warning';
                else momentumColor = 'text-danger';

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">قوة الحركة</div>
                        <div class="${momentumColor} font-bold text-lg">${momentum}%</div>
                    </div>
                `;
            }

            // Sentiment
            if (metrics.sentiment) {
                let sentimentColor = 'text-gray-400';
                let sentimentIcon = 'fa-equals';
                if (metrics.sentiment === 'bullish') {
                    sentimentColor = 'text-success';
                    sentimentIcon = 'fa-arrow-up';
                } else if (metrics.sentiment === 'bearish') {
                    sentimentColor = 'text-danger';
                    sentimentIcon = 'fa-arrow-down';
                }

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">المزاج العام</div>
                        <div class="${sentimentColor} font-bold text-lg flex items-center gap-2">
                            <i class="fas ${sentimentIcon}"></i>
                            ${escapeHtml(metrics.sentiment)}
                        </div>
                    </div>
                `;
            }

            // Volatility
            if (metrics.volatility !== undefined) {
                const volatility = Math.round(metrics.volatility * 100);
                let volatilityColor = 'text-gray-400';
                if (volatility >= 70) volatilityColor = 'text-danger';
                else if (volatility >= 40) volatilityColor = 'text-warning';
                else if (volatility >= 20) volatilityColor = 'text-info';
                else volatilityColor = 'text-success';

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">التقلبات</div>
                        <div class="${volatilityColor} font-bold text-lg">${volatility}%</div>
                    </div>
                `;
            }

            // Social Heat
            if (metrics.social_heat !== undefined) {
                const socialHeat = Math.round(metrics.social_heat * 100);
                let socialHeatColor = 'text-gray-400';
                if (socialHeat >= 70) socialHeatColor = 'text-success';
                else if (socialHeat >= 40) socialHeatColor = 'text-info';
                else if (socialHeat >= 20) socialHeatColor = 'text-warning';
                else socialHeatColor = 'text-danger';

                html += `
                    <div class="bg-black bg-opacity-30 rounded-lg p-3">
                        <div class="text-xs text-gray-400 mb-1">حرارة السوشيال</div>
                        <div class="${socialHeatColor} font-bold text-lg">${socialHeat}%</div>
                    </div>
                `;
            }

            html += '</div>';
            container.innerHTML = html;
        }

        function renderAIInsightsDisclaimer(disclaimer, isMock) {
            const container = document.getElementById('aiInsightsDisclaimer');
            if (!container) return;

            const lang = window.__UICFG?.ui?.locale || 'en';
            const dict = getTranslations(lang);
            const mockData = dict.mock_data || 'Mock Data';
            const noDisclaimer = lang === 'ar' ? 'لا يوجد تنبيه متاح' : 'No disclaimer available';

            if (!disclaimer || disclaimer.trim() === '') {
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-exclamation-triangle"></i> ${toLatinDigits(noDisclaimer)}</div>`;
                return;
            }

            // تحويل الأرقام من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (0-9)
            disclaimer = toLatinDigits(disclaimer);

            let html = `
                <div class="bg-warning bg-opacity-10 border border-warning border-opacity-30 rounded-lg p-4">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-exclamation-triangle text-warning text-lg mt-1"></i>
                        <div class="flex-1">
                            <div class="text-sm text-gray-300 leading-relaxed">${escapeHtml(disclaimer)}</div>
                            ${isMock ? `<div class="text-xs text-gray-400 mt-2"><i class="fas fa-info-circle me-1"></i>${toLatinDigits(mockData)}</div>` : ''}
                        </div>
                    </div>
                </div>
            `;

            container.innerHTML = html;
        }

        // تحويل الأرقام في حقول الإدخال الرقمية من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (0-9)
        function setupNumberInputs() {
            const numberInputs = document.querySelectorAll('input[type="number"]');
            numberInputs.forEach(input => {
                // إضافة lang="en" لإجبار المتصفح على استخدام الأرقام اللاتينية
                if (!input.hasAttribute('lang')) {
                    input.setAttribute('lang', 'en');
                }
                
                // تحويل الأرقام عند الكتابة
                input.addEventListener('input', function(e) {
                    const value = e.target.value;
                    if (value) {
                        const converted = toLatinDigits(value);
                        if (converted !== value) {
                            e.target.value = converted;
                        }
                    }
                });
                
                // تحويل الأرقام عند اللصق
                input.addEventListener('paste', function(e) {
                    setTimeout(() => {
                        const value = e.target.value;
                        if (value) {
                            const converted = toLatinDigits(value);
                            if (converted !== value) {
                                e.target.value = converted;
                            }
                        }
                    }, 0);
                });
            });
        }
        
        // مراقبة التغييرات في DOM وتحويل الأرقام تلقائياً (لحل مشكلة Chrome)
        function setupNumberObserver() {
            // مراقبة التغييرات في DOM
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    // معالجة العناصر المضافة
                    if (mutation.addedNodes) {
                        mutation.addedNodes.forEach(function(node) {
                            if (node.nodeType === 1) { // Element node
                                // تحويل الأرقام في textContent
                                if (node.textContent) {
                                    const converted = toLatinDigits(node.textContent);
                                    if (converted !== node.textContent && !node.querySelector('script, style')) {
                                        // تحويل فقط إذا لم يكن هناك HTML tags معقدة
                                        const walker = document.createTreeWalker(
                                            node,
                                            NodeFilter.SHOW_TEXT,
                                            null,
                                            false
                                        );
                                        
                                        let textNode;
                                        while (textNode = walker.nextNode()) {
                                            if (textNode.textContent) {
                                                const textConverted = toLatinDigits(textNode.textContent);
                                                if (textConverted !== textNode.textContent) {
                                                    textNode.textContent = textConverted;
                                                }
                                            }
                                        }
                                    }
                                }
                                
                                // تحويل الأرقام في placeholder
                                if (node.placeholder) {
                                    const converted = toLatinDigits(node.placeholder);
                                    if (converted !== node.placeholder) {
                                        node.placeholder = converted;
                                    }
                                }
                                
                                // إضافة lang="en" على حقول الإدخال الرقمية
                                if (node.tagName === 'INPUT' && node.type === 'number') {
                                    node.setAttribute('lang', 'en');
                                }
                            }
                        });
                    }
                    
                    // معالجة التغييرات في textContent
                    if (mutation.type === 'characterData' || mutation.type === 'childList') {
                        if (mutation.target && mutation.target.textContent) {
                            const converted = toLatinDigits(mutation.target.textContent);
                            if (converted !== mutation.target.textContent && 
                                mutation.target.parentElement && 
                                !mutation.target.parentElement.querySelector('script, style')) {
                                mutation.target.textContent = converted;
                            }
                        }
                    }
                });
            });
            
            // بدء المراقبة
            observer.observe(document.body, {
                childList: true,
                subtree: true,
                characterData: true
            });
        }
        
        // ===== Authentication System =====
        // قائمة أكواد الدول (ماعدا إسرائيل)
        const countryCodes = [
            { code: '+966', name: 'السعودية', nameEn: 'Saudi Arabia', flag: '🇸🇦' },
            { code: '+971', name: 'الإمارات', nameEn: 'UAE', flag: '🇦🇪' },
            { code: '+965', name: 'الكويت', nameEn: 'Kuwait', flag: '🇰🇼' },
            { code: '+974', name: 'قطر', nameEn: 'Qatar', flag: '🇶🇦' },
            { code: '+973', name: 'البحرين', nameEn: 'Bahrain', flag: '🇧🇭' },
            { code: '+968', name: 'عمان', nameEn: 'Oman', flag: '🇴🇲' },
            { code: '+961', name: 'لبنان', nameEn: 'Lebanon', flag: '🇱🇧' },
            { code: '+962', name: 'الأردن', nameEn: 'Jordan', flag: '🇯🇴' },
            { code: '+20', name: 'مصر', nameEn: 'Egypt', flag: '🇪🇬' },
            { code: '+212', name: 'المغرب', nameEn: 'Morocco', flag: '🇲🇦' },
            { code: '+213', name: 'الجزائر', nameEn: 'Algeria', flag: '🇩🇿' },
            { code: '+216', name: 'تونس', nameEn: 'Tunisia', flag: '🇹🇳' },
            { code: '+218', name: 'ليبيا', nameEn: 'Libya', flag: '🇱🇾' },
            { code: '+249', name: 'السودان', nameEn: 'Sudan', flag: '🇸🇩' },
            { code: '+964', name: 'العراق', nameEn: 'Iraq', flag: '🇮🇶' },
            { code: '+963', name: 'سوريا', nameEn: 'Syria', flag: '🇸🇾' },
            { code: '+967', name: 'اليمن', nameEn: 'Yemen', flag: '🇾🇪' },
            { code: '+1', name: 'الولايات المتحدة', nameEn: 'USA', flag: '🇺🇸' },
            { code: '+44', name: 'المملكة المتحدة', nameEn: 'UK', flag: '🇬🇧' },
            { code: '+33', name: 'فرنسا', nameEn: 'France', flag: '🇫🇷' },
            { code: '+49', name: 'ألمانيا', nameEn: 'Germany', flag: '🇩🇪' },
            { code: '+39', name: 'إيطاليا', nameEn: 'Italy', flag: '🇮🇹' },
            { code: '+34', name: 'إسبانيا', nameEn: 'Spain', flag: '🇪🇸' },
            { code: '+31', name: 'هولندا', nameEn: 'Netherlands', flag: '🇳🇱' },
            { code: '+32', name: 'بلجيكا', nameEn: 'Belgium', flag: '🇧🇪' },
            { code: '+41', name: 'سويسرا', nameEn: 'Switzerland', flag: '🇨🇭' },
            { code: '+43', name: 'النمسا', nameEn: 'Austria', flag: '🇦🇹' },
            { code: '+46', name: 'السويد', nameEn: 'Sweden', flag: '🇸🇪' },
            { code: '+47', name: 'النرويج', nameEn: 'Norway', flag: '🇳🇴' },
            { code: '+45', name: 'الدنمارك', nameEn: 'Denmark', flag: '🇩🇰' },
            { code: '+358', name: 'فنلندا', nameEn: 'Finland', flag: '🇫🇮' },
            { code: '+7', name: 'روسيا', nameEn: 'Russia', flag: '🇷🇺' },
            { code: '+86', name: 'الصين', nameEn: 'China', flag: '🇨🇳' },
            { code: '+81', name: 'اليابان', nameEn: 'Japan', flag: '🇯🇵' },
            { code: '+82', name: 'كوريا الجنوبية', nameEn: 'South Korea', flag: '🇰🇷' },
            { code: '+65', name: 'سنغافورة', nameEn: 'Singapore', flag: '🇸🇬' },
            { code: '+60', name: 'ماليزيا', nameEn: 'Malaysia', flag: '🇲🇾' },
            { code: '+66', name: 'تايلاند', nameEn: 'Thailand', flag: '🇹🇭' },
            { code: '+62', name: 'إندونيسيا', nameEn: 'Indonesia', flag: '🇮🇩' },
            { code: '+91', name: 'الهند', nameEn: 'India', flag: '🇮🇳' },
            { code: '+92', name: 'باكستان', nameEn: 'Pakistan', flag: '🇵🇰' },
            { code: '+880', name: 'بنغلاديش', nameEn: 'Bangladesh', flag: '🇧🇩' },
            { code: '+90', name: 'تركيا', nameEn: 'Turkey', flag: '🇹🇷' },
            { code: '+98', name: 'إيران', nameEn: 'Iran', flag: '🇮🇷' },
            { code: '+27', name: 'جنوب أفريقيا', nameEn: 'South Africa', flag: '🇿🇦' },
            { code: '+234', name: 'نيجيريا', nameEn: 'Nigeria', flag: '🇳🇬' },
            { code: '+254', name: 'كينيا', nameEn: 'Kenya', flag: '🇰🇪' },
            { code: '+55', name: 'البرازيل', nameEn: 'Brazil', flag: '🇧🇷' },
            { code: '+52', name: 'المكسيك', nameEn: 'Mexico', flag: '🇲🇽' },
            { code: '+54', name: 'الأرجنتين', nameEn: 'Argentina', flag: '🇦🇷' },
            { code: '+61', name: 'أستراليا', nameEn: 'Australia', flag: '🇦🇺' },
            { code: '+64', name: 'نيوزيلندا', nameEn: 'New Zealand', flag: '🇳🇿' }
        ];

        // تحميل أكواد الدول في القائمة المنسدلة
        function loadCountryCodes() {
            const select = document.getElementById('registerCountryCode');
            if (!select) return;
            
            select.innerHTML = '';
            
            countryCodes.forEach(country => {
                const option = document.createElement('option');
                option.value = country.code;
                // عرض فقط العلم + كود الهاتف
                option.textContent = `${country.flag} ${country.code}`;
                select.appendChild(option);
            });
            
            // تحديد السعودية كافتراضي
            select.value = '+966';
        }

        // فتح نافذة التسجيل/الدخول
        function openAuthModal(tab = 'login') {
            const modal = document.getElementById('authModal');
            if (modal) {
                modal.classList.remove('hidden');
                switchAuthTab(tab);
                // التحقق من توفر خدمات Google و Apple
                checkSocialAuthAvailability();
                // تطبيق الترجمات على النافذة
                if (typeof applyI18n === 'function') {
                    setTimeout(() => applyI18n(), 50);
                }
                // تحميل أكواد الدول عند فتح نافذة التسجيل
                if (tab === 'register') {
                    setTimeout(() => {
                        loadCountryCodes();
                        if (typeof applyI18n === 'function') {
                            applyI18n();
                        }
                    }, 100);
                }
            }
        }
        
        // معالجة البحث من Hero Section
        function handleHeroSearch() {
            const input = document.getElementById('heroSearchInput');
            if (!input) return;
            
            const query = input.value.trim();
            if (!query) {
                // إذا كان فارغاً، افتح نافذة التسجيل
                openAuthModal('register');
                return;
            }
            
            // التحقق من تسجيل الدخول
            const token = localStorage.getItem('authToken');
            if (!token) {
                // إذا لم يكن مسجل، افتح نافذة التسجيل مع رسالة
                openAuthModal('register');
                alert('يرجى التسجيل للوصول الكامل إلى جميع الميزات');
                return;
            }
            
            // إذا كان مسجل، نفذ البحث
            // يمكن إضافة منطق البحث هنا
            console.log('Searching for:', query);
            const mode = typeof window.getHeroActiveModel === 'function' ? window.getHeroActiveModel() : 'core';
            const target = '/trendlens/dashboard.html?search=' + encodeURIComponent(query) + '&mode=' + encodeURIComponent(mode || 'core');
            window.location.href = target;
        }

        // التحقق من توفر خدمات Google و Apple
        async function checkSocialAuthAvailability() {
            const googleLoginBtn = document.getElementById('googleLoginBtn');
            const googleRegisterBtn = document.getElementById('googleRegisterBtn');
            const appleLoginBtn = document.getElementById('appleLoginBtn');
            const appleRegisterBtn = document.getElementById('appleRegisterBtn');
            const socialLoginButtons = document.getElementById('socialLoginButtons');
            const socialRegisterButtons = document.getElementById('socialRegisterButtons');
            const socialLoginDivider = document.getElementById('socialLoginDivider');
            const socialRegisterDivider = document.getElementById('socialRegisterDivider');
            
            // إظهار الأزرار افتراضياً
            if (socialLoginButtons) socialLoginButtons.classList.remove('hidden');
            if (socialRegisterButtons) socialRegisterButtons.classList.remove('hidden');
            if (socialLoginDivider) socialLoginDivider.classList.remove('hidden');
            if (socialRegisterDivider) socialRegisterDivider.classList.remove('hidden');
            
            // إظهار أزرار Google افتراضياً
            if (googleLoginBtn) googleLoginBtn.style.display = 'flex';
            if (googleRegisterBtn) googleRegisterBtn.style.display = 'flex';
            
            // التحقق من Google
            try {
                const googleResponse = await fetchWithTimeout(`${API_BASE}/auth/google`, {}, 5000);
                const contentType = googleResponse.headers.get('content-type');
                
                if (!googleResponse.ok) {
                    console.warn('Google auth response not OK:', googleResponse.status, contentType);
                    // إخفاء فقط في حالة خطأ واضح (404, 500)
                    if (googleResponse.status === 404 || googleResponse.status === 500) {
                        if (googleLoginBtn) googleLoginBtn.style.display = 'none';
                        if (googleRegisterBtn) googleRegisterBtn.style.display = 'none';
                    }
                } else {
                    // التحقق من أن الاستجابة JSON وليست HTML
                    if (!contentType || !contentType.includes('application/json')) {
                        console.warn('Google auth returned non-JSON:', contentType, 'URL:', `${API_BASE}/auth/google`);
                        // لا نخفي الزر، نتركه ظاهراً
                    } else {
                        const googleData = await googleResponse.json();
                        const googleAvailable = googleData.status === 'ready' && 
                                               googleData.client_id && 
                                               googleData.client_id !== 'YOUR_GOOGLE_CLIENT_ID' &&
                                               googleData.client_id !== 'xxx.apps.googleusercontent.com' &&
                                               googleData.client_id.trim() !== '';
                        
                        console.log('Google auth check:', { status: googleData.status, client_id: googleData.client_id ? 'set' : 'not set', available: googleAvailable });
                        
                        // إظهار/إخفاء أزرار Google فقط إذا كان غير متاح بشكل واضح
                        if (googleLoginBtn) googleLoginBtn.style.display = googleAvailable ? 'flex' : 'flex'; // إظهار دائماً
                        if (googleRegisterBtn) googleRegisterBtn.style.display = googleAvailable ? 'flex' : 'flex'; // إظهار دائماً
                    }
                }
            } catch (e) {
                console.warn('Google auth check failed:', e);
                // لا نخفي الزر في حالة الخطأ، نتركه ظاهراً
                // if (googleLoginBtn) googleLoginBtn.style.display = 'none';
                // if (googleRegisterBtn) googleRegisterBtn.style.display = 'none';
            }
            
            // Apple معطل - لا نتحقق منه لتوفير الوقت
            // إخفاء أزرار Apple مباشرة
            if (appleLoginBtn) appleLoginBtn.style.display = 'none';
            if (appleRegisterBtn) appleRegisterBtn.style.display = 'none';
            
            // إخفاء قسم Social Login إذا لم تكن هناك أي خدمة متاحة
            const googleVisible = googleLoginBtn && googleLoginBtn.style.display !== 'none';
            const appleVisible = appleLoginBtn && appleLoginBtn.style.display !== 'none';
            const anyAvailable = googleVisible || appleVisible;
            
            if (!anyAvailable) {
                if (socialLoginButtons) socialLoginButtons.classList.add('hidden');
                if (socialRegisterButtons) socialRegisterButtons.classList.add('hidden');
                if (socialLoginDivider) socialLoginDivider.classList.add('hidden');
                if (socialRegisterDivider) socialRegisterDivider.classList.add('hidden');
            }
        }

        // إغلاق نافذة التسجيل/الدخول
        function closeAuthModal() {
            const modal = document.getElementById('authModal');
            if (modal) {
                modal.classList.add('hidden');
                // مسح الأخطاء
                document.getElementById('loginError').classList.add('hidden');
                document.getElementById('registerError').classList.add('hidden');
                document.getElementById('registerSuccess').classList.add('hidden');
                // مسح الحقول
                document.getElementById('loginEmail').value = '';
                document.getElementById('loginPassword').value = '';
                document.getElementById('registerName').value = '';
                document.getElementById('registerEmail').value = '';
                document.getElementById('registerPhone').value = '';
                document.getElementById('registerPassword').value = '';
                document.getElementById('registerPasswordConfirm').value = '';
            }
        }

        // فتح نافذة تسجيل الشريك
        function openPartnerRegisterModal() {
            const modal = document.getElementById('partnerRegisterModal');
            if (modal) {
                modal.classList.remove('hidden');
            }
        }

        // إغلاق نافذة تسجيل الشريك
        function closePartnerRegisterModal() {
            const modal = document.getElementById('partnerRegisterModal');
            if (modal) {
                modal.classList.add('hidden');
                // مسح الأخطاء والنجاح
                document.getElementById('partnerRegisterError').classList.add('hidden');
                document.getElementById('partnerRegisterSuccess').classList.add('hidden');
                // مسح الحقول
                document.getElementById('partnerRegisterForm').reset();
            }
        }

        // معالجة تسجيل الشريك
        async function handlePartnerRegister(event) {
            event.preventDefault();
            
            const fullName = document.getElementById('partnerFullName').value.trim();
            const email = document.getElementById('partnerEmail').value.trim();
            const phone = document.getElementById('partnerPhone').value.trim();
            const businessType = document.getElementById('partnerBusinessType').value;
            const password = document.getElementById('partnerPassword').value;
            const agreeTerms = document.getElementById('partnerAgreeTerms').checked;
            
            const errorDiv = document.getElementById('partnerRegisterError');
            const successDiv = document.getElementById('partnerRegisterSuccess');
            
            // إخفاء الرسائل السابقة
            errorDiv.classList.add('hidden');
            successDiv.classList.add('hidden');
            
            // التحقق من البيانات
            if (!fullName || !email || !phone || !businessType || !password) {
                errorDiv.textContent = 'يرجى ملء جميع الحقول المطلوبة';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            if (!agreeTerms) {
                errorDiv.textContent = 'يجب الموافقة على الشروط والأحكام';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            try {
                const response = await fetch('/trendlens/api/partners/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        full_name: fullName,
                        email: email,
                        phone: phone,
                        password: password,
                        business_type: businessType
                    })
                });
                
                const data = await response.json();
                
                if (response.ok && data.ok) {
                    if (data.status === 'approved') {
                        // حفظ التوكن إذا تم التفعيل الفوري
                        if (data.token) {
                            localStorage.setItem('partner_token', data.token);
                            localStorage.setItem('auth_token', data.token);
                            localStorage.setItem('user_email', email);
                        }
                        
                        successDiv.textContent = 'تم تسجيل الشريك بنجاح وتم تفعيل الحساب! جاري التوجيه إلى لوحة التحكم...';
                        successDiv.classList.remove('hidden');
                        
                        // التوجيه إلى لوحة التحكم بعد ثانيتين
                        setTimeout(() => {
                            window.location.href = '/trendlens/partner-dashboard.html';
                        }, 2000);
                    } else if (data.status === 'pending') {
                        // حالة انتظار الموافقة
                        successDiv.textContent = 'تم تقديم طلب التسجيل بنجاح. سيتم مراجعة الطلب والموافقة عليه قريباً. سيتم إرسال بريد إلكتروني عند الموافقة.';
                        successDiv.classList.remove('hidden');
                        
                        // إغلاق الـ modal بعد 5 ثوان
                        setTimeout(() => {
                            closePartnerRegisterModal();
                        }, 5000);
                    }
                } else {
                    errorDiv.textContent = data.detail || 'حدث خطأ أثناء التسجيل';
                    errorDiv.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Error registering partner:', error);
                errorDiv.textContent = 'حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى';
                errorDiv.classList.remove('hidden');
            }
        }

        // معالجة تسجيل الدخول عبر Google - مع موافقة على الأحكام والشروط
        function handleGoogleLogin() {
            console.log('[GOOGLE AUTH] ========================================');
            console.log('[GOOGLE AUTH] handleGoogleLogin called');
            console.log('[GOOGLE AUTH] API_BASE:', API_BASE);
            
            // التحقق من موافقة المستخدم على الأحكام والشروط
            const termsAccepted = localStorage.getItem('terms_accepted');
            console.log('[GOOGLE AUTH] Terms accepted:', termsAccepted);
            
            if (!termsAccepted) {
                console.log('[GOOGLE AUTH] Terms not accepted, showing terms modal...');
                showTermsModal(() => {
                    console.log('[GOOGLE AUTH] Terms accepted, redirecting to Google OAuth...');
                    const googleAuthUrl = `${API_BASE}/auth/google/login`;
                    console.log('[GOOGLE AUTH] Redirecting to:', googleAuthUrl);
                    // بعد الموافقة، إعادة التوجيه إلى Google OAuth (endpoint يعيد redirect مباشر)
                    window.location.href = googleAuthUrl;
                });
                return;
            }
            
            // Redirect مباشر إلى endpoint Google Login في API (يعيد redirect مباشر إلى Google)
            const googleAuthUrl = `${API_BASE}/auth/google/login`;
            console.log('[GOOGLE AUTH] ✅ Redirecting to Google OAuth:', googleAuthUrl);
            window.location.href = googleAuthUrl;
        }

        // معالجة تسجيل الدخول عبر Apple
        async function handleAppleLogin() {
            try {
                // الحصول على Apple Client ID من API أولاً
                let appleClientId = null;
                try {
                    const configResponse = await fetch(`${API_BASE}/auth/apple`);
                    const configData = await configResponse.json();
                    if (configData.client_id) {
                        appleClientId = configData.client_id;
                    }
                } catch (e) {
                    console.warn('Could not fetch Apple Client ID from API:', e);
                }
                
                // Apple Sign In باستخدام Apple JS SDK
                if (typeof AppleID !== 'undefined' && appleClientId) {
                    AppleID.auth.init({
                        clientId: appleClientId,
                        scope: 'name email',
                        redirectURI: window.location.origin + '/trendlens/api/auth/apple/callback',
                        usePopup: true
                    });
                    
                    AppleID.auth.signIn().then(async (response) => {
                        if (response.authorization) {
                            // إرسال البيانات إلى السيرفر
                            try {
                                const serverResponse = await fetch(`${API_BASE}/auth/apple/callback`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        id_token: response.authorization.id_token,
                                        code: response.authorization.code,
                                        user: response.user
                                    })
                                });
                                
                                const data = await serverResponse.json();
                                
                                if (serverResponse.ok && data.status === 'success') {
                                    if (data.token) {
                                        localStorage.setItem('auth_token', data.token);
                                        localStorage.setItem('user_email', data.email || '');
                                    }
                                    
                                    closeAuthModal();
                                    updateAuthUI(true);
                                    
                                    const lang = window.__UICFG?.ui?.locale || 'ar';
                                    const msg = lang === 'en' ? 'Login successful!' : 'تم تسجيل الدخول بنجاح!';
                                    alert(msg);
                                } else {
                                    throw new Error(data.detail || data.message || 'Login failed');
                                }
                            } catch (error) {
                                console.error('Server verification error:', error);
                                const lang = window.__UICFG?.ui?.locale || 'ar';
                                const msg = lang === 'en' ? 'Error verifying Apple account. Please try again.' : 'خطأ في التحقق من حساب Apple. يرجى المحاولة مرة أخرى.';
                                alert(msg);
                            }
                        }
                    }).catch((error) => {
                        console.error('Apple Sign In error:', error);
                        const lang = window.__UICFG?.ui?.locale || 'ar';
                        const msg = lang === 'en' ? 'Apple Sign In was cancelled or failed.' : 'تم إلغاء تسجيل الدخول عبر Apple أو فشل.';
                        alert(msg);
                    });
                } else {
                    // Fallback: رسالة توضح أن Apple Sign In غير متاح
                    const lang = window.__UICFG?.ui?.locale || 'ar';
                    const msg = lang === 'en' ? 'Apple Sign In is not available. Please use email registration.' : 'تسجيل الدخول عبر Apple غير متاح حالياً. يرجى استخدام التسجيل بالبريد الإلكتروني.';
                    alert(msg);
                }
            } catch (error) {
                console.error('Apple login error:', error);
                const lang = window.__UICFG?.ui?.locale || 'ar';
                const msg = lang === 'en' ? 'An error occurred while connecting to Apple service. Please try again later.' : 'حدث خطأ أثناء الاتصال بخدمة Apple. يرجى المحاولة لاحقاً.';
                alert(msg);
            }
        }

        // معالجة التسجيل عبر Google
        async function handleGoogleRegister() {
            // نفس دالة تسجيل الدخول (Google يعالج التسجيل والدخول بنفس الطريقة)
            handleGoogleLogin();
        }
        
        // عرض نافذة موافقة على الأحكام والشروط
        function showTermsModal(onAccept) {
            const modal = document.createElement('div');
            modal.id = 'termsModal';
            modal.className = 'fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4';
            modal.innerHTML = `
                <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6">
                    <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">الأحكام والشروط</h2>
                    <div class="prose dark:prose-invert max-w-none mb-6 text-gray-700 dark:text-gray-300">
                        <p class="mb-4">باستخدام TrendLens، أنت توافق على:</p>
                        <ul class="list-disc list-inside space-y-2 mb-4">
                            <li>استخدام المنصة لأغراض قانونية فقط</li>
                            <li>عدم مشاركة بياناتك مع أطراف ثالثة بدون موافقتك</li>
                            <li>احترام حقوق الملكية الفكرية</li>
                            <li>استخدام البيانات المقدمة كمرجع فقط وليس كتوصية استثمارية</li>
                        </ul>
                        <p class="text-sm text-gray-600 dark:text-gray-400">لقراءة الأحكام والشروط الكاملة، يرجى زيارة صفحة <a href="/trendlens/terms.html" target="_blank" class="text-primary underline">الأحكام والشروط</a></p>
                    </div>
                    <div class="flex gap-4">
                        <button onclick="acceptTerms()" class="flex-1 bg-primary text-black px-6 py-3 rounded-lg font-semibold hover:bg-yellow-500 transition-colors">
                            أوافق وأواصل
                        </button>
                        <button onclick="rejectTerms()" class="flex-1 border border-gray-300 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                            إلغاء
                        </button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
            
            window.acceptTerms = function() {
                localStorage.setItem('terms_accepted', 'true');
                localStorage.setItem('terms_accepted_date', new Date().toISOString());
                document.body.removeChild(modal);
                if (onAccept) onAccept();
            };
            
            window.rejectTerms = function() {
                document.body.removeChild(modal);
            };
        }

        // معالجة التسجيل عبر Apple
        async function handleAppleRegister() {
            // نفس دالة تسجيل الدخول (Apple يعالج التسجيل والدخول بنفس الطريقة)
            handleAppleLogin();
        }

        // التبديل بين تبويبات تسجيل الدخول والتسجيل
        function switchAuthTab(tab) {
            const loginTab = document.getElementById('authTabLogin');
            const registerTab = document.getElementById('authTabRegister');
            const loginForm = document.getElementById('loginForm');
            const registerForm = document.getElementById('registerForm');

            if (tab === 'login') {
                loginTab.classList.add('bg-primary', 'text-black');
                loginTab.classList.remove('border', 'border-primary', 'text-primary');
                registerTab.classList.remove('bg-primary', 'text-black');
                registerTab.classList.add('border', 'border-primary', 'text-primary');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            } else {
                registerTab.classList.add('bg-primary', 'text-black');
                registerTab.classList.remove('border', 'border-primary', 'text-primary');
                loginTab.classList.remove('bg-primary', 'text-black');
                loginTab.classList.add('border', 'border-primary', 'text-primary');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            }
        }

        // معالجة تسجيل الدخول
        async function handleLogin() {
            const email = document.getElementById('loginEmail').value.trim();
            const password = document.getElementById('loginPassword').value;
            const errorDiv = document.getElementById('loginError');

            // التحقق من الحقول
            if (!email || !password) {
                errorDiv.textContent = 'يرجى إدخال البريد الإلكتروني وكلمة المرور';
                errorDiv.classList.remove('hidden');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: email,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok && data.status === 'success') {
                    // حفظ التوكن إذا كان موجوداً (في كلا المكانين)
                    if (data.token) {
                        localStorage.setItem('authToken', data.token);
                        localStorage.setItem('auth_token', data.token);
                        localStorage.setItem('user_email', email);
                        console.log('✅ Token saved to localStorage:', data.token.substring(0, 20) + '...');
                    }
                    
                    // إغلاق النافذة
                    closeAuthModal();
                    
                    // تحديث واجهة المستخدم
                    updateAuthUI(true);
                    
                    // إظهار رسالة نجاح
                    alert('تم تسجيل الدخول بنجاح!');
                    
                    // التوجيه للداشبورد (مرة واحدة فقط)
                    window.location.href = '/trendlens/dashboard.html';
                } else {
                    errorDiv.textContent = data.detail || data.message || 'خطأ في تسجيل الدخول';
                    errorDiv.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Login error:', error);
                errorDiv.textContent = 'حدث خطأ أثناء الاتصال بالخادم. يرجى المحاولة لاحقاً.';
                errorDiv.classList.remove('hidden');
            }
        }

        // معالجة التسجيل
        async function handleRegister() {
            const name = document.getElementById('registerName').value.trim();
            const email = document.getElementById('registerEmail').value.trim();
            const countryCode = document.getElementById('registerCountryCode')?.value || '+966';
            const phoneNumber = document.getElementById('registerPhone').value.trim();
            const phone = phoneNumber ? `${countryCode}${phoneNumber}` : null;
            const password = document.getElementById('registerPassword').value;
            const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
            const agreeTerms = document.getElementById('agreeTerms').checked;
            const errorDiv = document.getElementById('registerError');
            const successDiv = document.getElementById('registerSuccess');

            // إخفاء الرسائل السابقة
            errorDiv.classList.add('hidden');
            successDiv.classList.add('hidden');

            // التحقق من الحقول
            if (!name || !email || !password || !passwordConfirm) {
                errorDiv.textContent = 'يرجى ملء جميع الحقول المطلوبة';
                errorDiv.classList.remove('hidden');
                return;
            }

            if (password !== passwordConfirm) {
                errorDiv.textContent = 'كلمات المرور غير متطابقة';
                errorDiv.classList.remove('hidden');
                return;
            }

            if (password.length < 6) {
                errorDiv.textContent = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
                errorDiv.classList.remove('hidden');
                return;
            }

            if (!agreeTerms) {
                errorDiv.textContent = 'يجب الموافقة على الشروط والأحكام';
                errorDiv.classList.remove('hidden');
                return;
            }

            // إظهار loading state
            const registerBtn = document.querySelector('#registerForm button[type="submit"]');
            const originalBtnText = registerBtn?.textContent;
            if (registerBtn) {
                registerBtn.disabled = true;
                registerBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>جاري التسجيل...';
            }

            try {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 ثانية timeout

                const response = await fetch(`${API_BASE}/auth/register`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: email,
                        full_name: name,
                        password: password,
                        phone: phone || null
                    }),
                    signal: controller.signal
                });

                clearTimeout(timeoutId);

                const data = await response.json();

                if (response.ok && data.status === 'success') {
                    successDiv.textContent = data.message || 'تم إنشاء الحساب بنجاح! يرجى التحقق من بريدك الإلكتروني.';
                    successDiv.classList.remove('hidden');
                    
                    // مسح الحقول
                    document.getElementById('registerName').value = '';
                    document.getElementById('registerEmail').value = '';
                    document.getElementById('registerPhone').value = '';
                    document.getElementById('registerPassword').value = '';
                    document.getElementById('registerPasswordConfirm').value = '';
                    
                    // التبديل إلى تبويب تسجيل الدخول بعد 2 ثانية
                    setTimeout(() => {
                        switchAuthTab('login');
                        document.getElementById('loginEmail').value = email;
                    }, 2000);
                } else {
                    errorDiv.textContent = data.detail || data.message || 'حدث خطأ أثناء التسجيل';
                    errorDiv.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Register error:', error);
                if (error.name === 'AbortError') {
                    errorDiv.textContent = 'انتهت مهلة الاتصال. يرجى المحاولة مرة أخرى.';
                } else {
                    errorDiv.textContent = 'حدث خطأ أثناء الاتصال بالخادم. يرجى المحاولة لاحقاً.';
                }
                errorDiv.classList.remove('hidden');
            } finally {
                // إعادة تفعيل الزر
                if (registerBtn) {
                    registerBtn.disabled = false;
                    registerBtn.textContent = originalBtnText || 'إنشاء حساب';
                }
            }
        }

        // تحديث واجهة المستخدم بعد تسجيل الدخول
        async function updateAuthUI(isLoggedIn, userData = null) {
            console.log('[AUTH UI] ========================================');
            console.log('[AUTH UI] updateAuthUI called:', { isLoggedIn, hasUserData: !!userData });
            
            const loginBtn = document.getElementById('loginBtn');
            const registerBtn = document.getElementById('registerBtn');
            const partnerApplyBtn = document.getElementById('partnerApplyBtn');
            const logoutHeaderBtn = document.getElementById('logoutHeaderBtn');
            const welcomeArea = document.getElementById('welcomeArea');
            
            // التحقق من token في localStorage أولاً
            const token = localStorage.getItem('authToken') || localStorage.getItem('auth_token');
            console.log('[AUTH UI] Token in localStorage:', token ? token.substring(0, 20) + '...' : 'NOT FOUND');
            
            // إذا كان isLoggedIn = false لكن يوجد token، نتحقق من الـ backend
            if (!isLoggedIn && token) {
                console.log('[AUTH UI] ⚠️ isLoggedIn=false but token exists, verifying with backend...');
                try {
                    const response = await fetch(`${API_BASE}/user/profile`, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        }
                    });
                    if (response.ok) {
                        userData = await response.json();
                        isLoggedIn = true;
                        console.log('[AUTH UI] ✅ Token is valid, user is logged in:', userData.email || userData.id);
                    } else {
                        console.warn('[AUTH UI] ⚠️ Token invalid, removing from localStorage');
                        localStorage.removeItem('authToken');
                        localStorage.removeItem('auth_token');
                        localStorage.removeItem('user_email');
                    }
                } catch (error) {
                    console.error('[AUTH UI] ❌ Error verifying token:', error);
                    localStorage.removeItem('authToken');
                    localStorage.removeItem('auth_token');
                    localStorage.removeItem('user_email');
                }
            }
            
            if (isLoggedIn) {
                console.log('[AUTH UI] User is logged in, updating UI...');
                
                // جلب بيانات المستخدم إذا لم تكن متوفرة
                if (!userData) {
                    if (token) {
                        console.log('[AUTH UI] Fetching user profile...');
                        try {
                            const response = await fetch(`${API_BASE}/user/profile`, {
                                headers: {
                                    'Authorization': `Bearer ${token}`
                                }
                            });
                            console.log('[AUTH UI] Profile response status:', response.status);
                            if (response.ok) {
                                userData = await response.json();
                                console.log('[AUTH UI] ✅ User data fetched:', userData.email || userData.id);
                                if (userData.email) {
                                    localStorage.setItem('user_email', userData.email);
                                }
                                if (userData.name || userData.full_name) {
                                    localStorage.setItem('user_name', userData.name || userData.full_name);
                                }
                            } else {
                                console.error('[AUTH UI] ❌ Profile fetch failed:', response.status);
                            }
                        } catch (error) {
                            console.error('[AUTH UI] ❌ Error fetching user data:', error);
                        }
                    } else {
                        console.warn('[AUTH UI] ⚠️ No token available for profile fetch');
                    }
                }
                
                const userName = localStorage.getItem('user_name') || localStorage.getItem('user_email') || 'المستخدم';
                const userEmail = localStorage.getItem('user_email') || '';
                const lang = window.__UICFG?.ui?.locale || 'ar';
                const welcomeText = lang === 'en'
                    ? `Welcome, ${userName}`
                    : `مرحباً، ${userName}`;

                // إخفاء أزرار التسجيل والشريك وإظهار زر الخروج
                if (registerBtn) registerBtn.style.display = 'none';
                if (partnerApplyBtn) partnerApplyBtn.style.display = 'none';
                if (logoutHeaderBtn) logoutHeaderBtn.classList.remove('hidden');

                // تحويل زر الدخول إلى زر إعدادات/قائمة للمستخدم
                if (loginBtn) {
                    loginBtn.innerHTML = `
                        <div class="flex items-center gap-2">
                            <span class="hidden sm:inline text-sm text-gray-200">${welcomeText}</span>
                            <i class="fas fa-user-circle"></i>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                    `;
                    loginBtn.className = 'btn-primary bg-primary text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors';
                    loginBtn.onclick = function(e) {
                        e.stopPropagation();
                        showUserMenu(loginBtn, userName, userEmail);
                    };
                }
            } else {
                console.log('[AUTH UI] User is NOT logged in, showing login/register buttons');
                
                if (loginBtn) {
                    loginBtn.innerHTML = '<span data-i18n="btn_login">تسجيل الدخول</span>';
                    loginBtn.className = 'btn-primary bg-primary text-black px-6 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors';
                    loginBtn.onclick = () => openAuthModal('login');
                }
                if (registerBtn) {
                    registerBtn.style.display = 'block';
                    registerBtn.onclick = () => openAuthModal('register');
                }
                if (partnerApplyBtn) {
                    partnerApplyBtn.style.display = 'inline-flex';
                }
                if (logoutHeaderBtn) {
                    logoutHeaderBtn.classList.add('hidden');
                }
            }
            console.log('[AUTH UI] ✅ UI update complete');
        }
        
        // عرض قائمة المستخدم
        function showUserMenu(button, userName, userEmail) {
            // إزالة القائمة السابقة إن وجدت
            const existingMenu = document.getElementById('userMenu');
            if (existingMenu) {
                existingMenu.remove();
            }
            
            const menu = document.createElement('div');
            menu.id = 'userMenu';
            // نستخدم تموضع ثابت (fixed) مع إحداثيات لحفظ القائمة فوق كل شيء بدون قص
            menu.className = 'fixed bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 min-w-[220px] z-[9999]';
            menu.innerHTML = `
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <p class="font-semibold text-gray-900 dark:text-white">${userName}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">${userEmail}</p>
                </div>
                <div class="p-2">
                    <a href="/trendlens/dashboard.html" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-tachometer-alt me-2"></i>لوحة التحكم
                    </a>
                    <button onclick="handleLogout()" class="w-full text-left px-4 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                        <i class="fas fa-sign-out-alt me-2"></i>تسجيل الخروج
                    </button>
                </div>
            `;
            
            // حساب موضع الزر لوضع القائمة تحته مباشرة
            const rect = button.getBoundingClientRect();
            const top = rect.bottom + 8; // 8px مسافة تحت الزر
            const right = window.innerWidth - rect.right;
            menu.style.top = `${top}px`;
            menu.style.right = `${right}px`;
            // إضافة القائمة إلى الـ body حتى تظهر فعلياً
            document.body.appendChild(menu);
            
            // إغلاق القائمة عند النقر خارجها
            setTimeout(() => {
                document.addEventListener('click', function closeMenu(e) {
                    if (!menu.contains(e.target) && e.target !== button) {
                        menu.remove();
                        document.removeEventListener('click', closeMenu);
                    }
                });
            }, 100);
        }
        
        // تسجيل الخروج
        function handleLogout() {
            if (confirm('هل تريد تسجيل الخروج؟')) {
                localStorage.removeItem('authToken');
                localStorage.removeItem('auth_token');
                localStorage.removeItem('user_email');
                localStorage.removeItem('user_name');
                updateAuthUI(false);
                window.location.href = '/trendlens/';
            }
        }
        
        // التحقق من token في URL parameters عند تحميل الصفحة
        function checkAuthFromURL() {
            console.log('[AUTH URL] ========================================');
            console.log('[AUTH URL] Checking URL for token...');
            console.log('[AUTH URL] Current URL:', window.location.href);
            
            const urlParams = new URLSearchParams(window.location.search);
            const token = urlParams.get('token');
            const email = urlParams.get('email');
            
            console.log('[AUTH URL] Token in URL:', token ? token.substring(0, 20) + '...' : 'NOT FOUND');
            console.log('[AUTH URL] Email in URL:', email || 'NOT FOUND');
            
            if (token && email) {
                console.log('[AUTH URL] ✅ Token and email found in URL, saving to localStorage...');
                
                // حفظ التوكن في كلا المكانين
                localStorage.setItem('authToken', token);
                localStorage.setItem('auth_token', token);
                localStorage.setItem('user_email', email);
                console.log('[AUTH URL] ✅ Token saved to localStorage');
                
                // إزالة token و email من URL
                urlParams.delete('token');
                urlParams.delete('email');
                const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
                window.history.replaceState({}, '', newUrl);
                console.log('[AUTH URL] ✅ URL cleaned:', newUrl);
                
                // تحديث واجهة المستخدم
                console.log('[AUTH URL] Updating UI...');
                updateAuthUI(true, { email: email });
                
                // إظهار رسالة نجاح
                showNotification('تم تسجيل الدخول بنجاح!', 'success');
                console.log('[AUTH URL] ✅ Auth from URL complete');
            } else {
                console.log('[AUTH URL] No token in URL, checking localStorage...');
                // التحقق من وجود token في localStorage
                const savedToken = localStorage.getItem('authToken') || localStorage.getItem('auth_token');
                console.log('[AUTH URL] Token in localStorage:', savedToken ? savedToken.substring(0, 20) + '...' : 'NOT FOUND');
                
                if (savedToken) {
                    console.log('[AUTH URL] ✅ Token found in localStorage, updating UI...');
                    updateAuthUI(true);
                } else {
                    console.log('[AUTH URL] ⚠️ No token found anywhere');
                }
            }
        }
        
        // إظهار إشعار
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-xl ${
                type === 'success' ? 'bg-green-500' : 
                type === 'error' ? 'bg-red-500' : 
                'bg-blue-500'
            } text-white font-semibold`;
            notification.textContent = message;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transition = 'opacity 0.3s';
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        // ===== Helper: Fetch with Timeout =====
        async function fetchWithTimeout(url, options = {}, timeout = 10000) {
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), timeout);
            
            try {
                const response = await fetch(url, {
                    ...options,
                    signal: controller.signal
                });
                clearTimeout(timeoutId);
                return response;
            } catch (error) {
                clearTimeout(timeoutId);
                if (error.name === 'AbortError' || error.message === 'Request timeout') {
                    // إنشاء Response object وهمي للـ timeout
                    return new Response(JSON.stringify({
                        ok: false,
                        error: 'Request timeout',
                        message: 'انتهت مهلة الطلب'
                    }), {
                        status: 408,
                        statusText: 'Request Timeout',
                        headers: { 'Content-Type': 'application/json' }
                    });
                }
                // للـ network errors، أرجع response وهمي
                return new Response(JSON.stringify({
                    ok: false,
                    error: error.message || 'Network error',
                    message: 'خطأ في الاتصال'
                }), {
                    status: 0,
                    statusText: 'Network Error',
                    headers: { 'Content-Type': 'application/json' }
                });
            }
        }

            // إغلاق النافذة عند النقر خارجها
            document.addEventListener('DOMContentLoaded', function() {
                const authModal = document.getElementById('authModal');
                if (authModal) {
                    authModal.addEventListener('click', function(e) {
                        if (e.target === authModal) {
                            closeAuthModal();
                        }
                    });
                }
                
                // إغلاق modal تسجيل الشريك عند النقر خارجه
                const partnerModal = document.getElementById('partnerRegisterModal');
                if (partnerModal) {
                    partnerModal.addEventListener('click', function(e) {
                        if (e.target === partnerModal) {
                            closePartnerRegisterModal();
                        }
                    });
                }

            // ربط الأزرار
            const loginBtn = document.getElementById('loginBtn');
            const registerBtn = document.getElementById('registerBtn');
            const partnerApplyBtn = document.getElementById('partnerApplyBtn');
            
            if (loginBtn && !loginBtn.onclick) {
                loginBtn.addEventListener('click', () => openAuthModal('login'));
            }
            if (registerBtn && !registerBtn.onclick) {
                registerBtn.addEventListener('click', () => openAuthModal('register'));
            }
            // ربط زر الشركاء مباشرة بدون أي modal
            if (partnerApplyBtn) {
                partnerApplyBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    window.location.href = '/trendlens/partner-apply.html';
                });
            }
            
            // تحميل أكواد الدول عند فتح نافذة التسجيل
            const registerTab = document.getElementById('authTabRegister');
            if (registerTab) {
                registerTab.addEventListener('click', function() {
                    setTimeout(loadCountryCodes, 100);
                });
            }

            // التحقق من token في URL parameters (بعد تسجيل الدخول عبر Google)
            checkAuthFromURL();
            
        });

        // تحميل نبض الشحن عند تحميل الصفحة
        // Live Pills Rotator - Display one pill at a time
        function initLivePillsRotator() {
            const pillsContainer = document.querySelector('.live-teaser-bar-pills');
            if (!pillsContainer) return;
            
            const pills = pillsContainer.querySelectorAll('.live-pill');
            if (pills.length === 0) return;
            
            let currentIndex = 0;
            
            // Show first pill
            pills[0].classList.add('active');
            
            // Rotate pills every 3 seconds
            setInterval(() => {
                // Hide current pill first
                pills[currentIndex].classList.remove('active');
                
                // Wait a bit before showing next (to ensure smooth transition)
                setTimeout(() => {
                    // Move to next pill
                    currentIndex = (currentIndex + 1) % pills.length;
                    
                    // Show next pill
                    pills[currentIndex].classList.add('active');
                }, 300); // Small delay for smooth transition
            }, 3000); // Change every 3 seconds
        }
        
            if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                setupNumberInputs();
                setupNumberObserver(); // مراقبة التغييرات في DOM
                loadShippingPulse();
                loadBestSuppliers();
                loadProductExplosions();
                loadFinanceCandles();
                loadAIInsights();
                loadMarketAds();
                initLivePillsRotator(); // Initialize live pills rotator
            });
        } else {
            setupNumberInputs();
            setupNumberObserver(); // مراقبة التغييرات في DOM
            loadShippingPulse();
            loadBestSuppliers();
            loadProductExplosions();
            loadFinanceCandles();
            loadAIInsights();
            initLivePillsRotator(); // Initialize live pills rotator
        }
        
        // تحديث الرصيد كل 30 ثانية
        setInterval(loadAIQuota, 30000);

        // ===== Public visits widget =====
        (function(){
            // تسجيل زيارة بصمت
            fetchWithTimeout(`${API_BASE}/track/view`, {method:'POST'}, 3000).catch(()=>{});
            
            function updateVisitorDisplay(count) {
                const el = document.getElementById('total-visitors');
                if (!el) {
                    console.warn('Visitor element not found');
                    return;
                }
                
                let displayText;
                try {
                    if (typeof formatNumber === 'function') {
                        displayText = formatNumber(count);
                    } else {
                        displayText = count.toLocaleString('en-US');
                    }
                } catch (e) {
                    displayText = count.toLocaleString('en-US');
                }
                
                el.textContent = displayText;
                
                // تسمية حسب اللغة
                const htmlEl = document.documentElement;
                const isEnglish = (htmlEl && (htmlEl.dir === 'ltr' || htmlEl.lang === 'en')) || (window.__UICFG?.ui?.locale === 'en');
                const lbl = isEnglish ? 'visitors' : 'زائر';
                const lEl = document.getElementById('visitor-label-float');
                if (lEl) lEl.textContent = lbl;
            }
            
            async function refreshVisits(){
                try{
                    const r = await fetchWithTimeout(`${API_BASE}/stats/public`, {}, 5000);
                    
                    // التحقق من حالة الـ response
                    if (!r.ok || r.status === 0 || r.status === 408) {
                        console.warn('Failed to load visitor count: HTTP', r.status);
                        updateVisitorDisplay(1268);
                        return;
                    }
                    
                    // محاولة parse JSON
                    let d;
                    try {
                        d = await r.json();
                    } catch (parseError) {
                        console.warn('Failed to parse visitor stats JSON:', parseError);
                        updateVisitorDisplay(1268);
                        return;
                    }
                    
                    console.log('Visitor stats:', d);
                    
                    // التحقق من صحة البيانات
                    if (d && d.ok && typeof d.visits === 'number') {
                        updateVisitorDisplay(d.visits);
                    } else {
                        console.warn('Invalid visitor stats data:', d);
                        updateVisitorDisplay(1268);
                    }
                }catch(e){
                    console.warn('Failed to load visitor count:', e);
                    // فشل: اعرض الأساس مباشرة
                    updateVisitorDisplay(1268);
                }
            }
            
            // تأخير بسيط لضمان تحميل DOM
            function initVisitorCounter() {
                const el = document.getElementById('total-visitors');
                if (!el) {
                    console.warn('Visitor element not found, retrying...');
                    setTimeout(initVisitorCounter, 500);
                    return;
                }
                refreshVisits();
            }
            
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initVisitorCounter);
            } else {
                // تأخير صغير لضمان تحميل جميع السكربتات
                setTimeout(initVisitorCounter, 100);
            }
            
            // إعادة التحديث كل 60 ثانية لضمان تزامن الرقم عند بقاء الصفحة مفتوحة
            setInterval(refreshVisits, 60000);
        })();

        // ===== Rotating testimonials (every 5s) =====
        (function(){
            const txt = document.getElementById('testimonialText');
            const auth = document.getElementById('testimonialAuthor');
            const card = document.getElementById('testimonialCard');
            let items = [];
            let i = 0;
            function isEnglishLocale(){
                const htmlEl = document.documentElement;
                return (window.__UICFG?.ui?.locale === 'en') || (htmlEl && (htmlEl.lang === 'en' || htmlEl.dir === 'ltr'));
            }
            function computeItems(){
                items = isEnglishLocale() ? [
                    { t: '“TrendLens helped me spot the trend a week earlier.”', a: '— Marketing Manager, E‑commerce' },
                    { t: '“Accurate and fast AI report — days of analysis in one hour.”', a: '— Amazon Seller' },
                    { t: '“One tool that replaces five separate tools.”', a: '— Growth Analyst' }
                ] : [
                    { t: '“ساعدتني TrendLens على توقع الترند قبل السوق بأسبوع.”', a: '— مدير تسويق، تجارة إلكترونية' },
                    { t: '“تقرير ذكي دقيق وسريع — اختصرت أيام تحليل لساعة.”', a: '— بائع Amazon' },
                    { t: '“أداة واحدة تغنيني عن خمس أدوات منفصلة.”', a: '— محلل نمو' }
                ];
            }
            function applyCurrent(){
                if (!txt || !auth || !card || items.length === 0) return;
                card.style.opacity = '0';
                setTimeout(()=>{
                    txt.textContent = items[i].t;
                    auth.textContent = items[i].a;
                    card.style.opacity = '1';
                }, 150);
            }
            function rotate(){
                if (items.length === 0) return;
                i = (i+1) % items.length;
                applyCurrent();
            }
            // public updater for language switch
            window.__updateTestimonials = function(){
                const curIsEnglish = isEnglishLocale();
                computeItems();
                i = 0;
                applyCurrent();
            };
            // initial
            computeItems();
            i = 0;
            applyCurrent();
            setInterval(rotate, 5000);
        })();

        // ===== Hero Model Switcher =====
        (function() {
            const models = {
                core: {
                    status: { ar: 'النموذج الأساسي مفعل الآن', en: 'Core engine is active' },
                    consoleTitle: { ar: 'محرك تقييم المنتجات', en: 'Product evaluation engine' },
                    consoleDesc: {
                        ar: 'أدخل منتجًا أو حسابًا اجتماعيًا لتحصل على مؤشرات الطلب، الموردين والشحن في أقل من 10 ثوانٍ.',
                        en: 'Drop a product or social handle to instantly get demand, supplier, and logistics signals.'
                    },
                    hint: {
                        ar: 'المحرك الأساسي يمنحك قراءة سوقية + توصية واحدة قابلة للتنفيذ.',
                        en: 'Core mode returns a market pulse plus one actionable recommendation.'
                    },
                    placeholder: {
                        ar: 'اكتب منتجًا أو فئة أو حساب سوشيال لتحليل فوري…',
                        en: 'Type a product, category, or social handle for instant analysis…'
                    },
                    badge: { ar: 'الوضع الأساسي', en: 'Core mode' }
                },
                assistant: {
                    status: { ar: 'المساعد الذكي يعمل ببياناتك', en: 'Smart assistant ready for your context' },
                    consoleTitle: { ar: 'المساعد الذكي', en: 'Smart assistant' },
                    consoleDesc: {
                        ar: 'ارسل للمساعد ميزانيتك وسوقك، وسيقترح خطة إطلاق وحزم إعلانات مجمعة.',
                        en: 'Share your budget and market; the assistant drafts a launch plan plus bundled ad angles.'
                    },
                    hint: {
                        ar: 'مثالي لفرق التسويق: استفسر عن الرسائل، الأسعار، أو سيناريوهات التوسّع.',
                        en: 'Best for marketing teams—ask about messaging, pricing, or go-to-market iterations.'
                    },
                    placeholder: {
                        ar: 'اكتب سؤالك للمساعد الذكي (مثال: جهّز حملة نوفمبر للسوق الكويتي)...',
                        en: 'Ask the smart assistant (e.g., build a November launch for Kuwait)…'
                    },
                    badge: { ar: 'وضع المساعد', en: 'Assistant mode' }
                },
                trend: {
                    status: { ar: 'Trend AI يرصد الانفجارات الآن', en: 'Trend AI scanning live surges' },
                    consoleTitle: { ar: 'مساعد الترندات', en: 'Trend AI assistant' },
                    consoleDesc: {
                        ar: 'راقب نمو الفئات والدول الساخنة، واحصل على تنبيهات قبل اكتظاظ السوق.',
                        en: 'Track hot categories and countries, with alerts before the crowd piles in.'
                    },
                    hint: {
                        ar: 'اكتب دولة أو منصة ليعطيك Trend AI أفضل 3 منتجات صاعدة الآن.',
                        en: 'Feed a country or platform to get the top three rising products right now.'
                    },
                    placeholder: {
                        ar: 'اكتب اسم دولة / منصة + منتج (مثال: السعودية + beauty fridge)…',
                        en: 'Type a country/platform + product (e.g., Saudi + beauty fridge)…'
                    },
                    badge: { ar: 'Trend Labs', en: 'Trend Labs' }
                }
            };

            let activeModel = 'core';

            function getLang() {
                const htmlLang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
                if (htmlLang.startsWith('en')) return 'en';
                const stored = (window.__UICFG?.ui?.locale || localStorage.getItem('tl_lang') || 'ar').toLowerCase();
                return stored.startsWith('en') ? 'en' : 'ar';
            }

            function setText(id, value) {
                const el = document.getElementById(id);
                if (el && typeof value === 'string') {
                    el.textContent = value;
                }
            }

            function applyModelCopy() {
                const cfg = models[activeModel];
                if (!cfg) return;
                const lang = getLang();
                setText('heroModelStatus', cfg.status[lang]);
                setText('heroConsoleTitle', cfg.consoleTitle[lang]);
                setText('heroConsoleDesc', cfg.consoleDesc[lang]);
                setText('heroConsoleHint', cfg.hint[lang]);
                setText('heroConsoleBadge', cfg.badge[lang]);
                const input = document.getElementById('heroSearchInput');
                if (input && cfg.placeholder) {
                    input.placeholder = cfg.placeholder[lang];
                }
                if (document.body) {
                    document.body.setAttribute('data-hero-model', activeModel);
                }
            }

            function setActiveModel(key) {
                if (!models[key]) key = 'core';
                activeModel = key;
                document.querySelectorAll('[data-hero-model]').forEach(btn => {
                    const isActive = btn.getAttribute('data-hero-model') === key;
                    btn.classList.toggle('active', isActive);
                });
                applyModelCopy();
            }

            function bindEvents() {
                document.querySelectorAll('[data-hero-model]').forEach(btn => {
                    btn.addEventListener('click', () => setActiveModel(btn.getAttribute('data-hero-model')));
                });
            }

            function augmentApplyI18n() {
                const original = window.applyI18n;
                if (typeof original !== 'function' || original.__heroAugmented) return;
                const wrapped = function() {
                    original.apply(this, arguments);
                    applyModelCopy();
                };
                wrapped.__heroAugmented = true;
                window.applyI18n = wrapped;
            }

            function init() {
                if (!document.querySelector('[data-hero-model]')) return;
                bindEvents();
                applyModelCopy();
                augmentApplyI18n();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
            } else {
                init();
            }

            window.getHeroActiveModel = () => activeModel;
            window.setHeroModel = setActiveModel;
        })();

        // ===== Try TrendLens Now =====
        async function fetchInsight(q){
            try{
                const r = await fetch('/trendlens/api/ai/insights?q='+encodeURIComponent(q));
                if (r.ok) return await r.json();
            }catch(e){}
            return {
                ok: true,
                demand_7d: Math.floor(400 + Math.random()*800),
                suppliers: Math.floor(3 + Math.random()*6),
                logistics_index: ["مستقر","مرتفِع","منخفض"][Math.floor(Math.random()*3)],
                social_pulse: ["قوي","متوسط","ضعيف"][Math.floor(Math.random()*3)],
                summary: "ابدأ بكمية تجريبية، اختبر عرضين سعريين، وروّج عبر حسابات سوشيال صغيرة ذات تفاعل حقيقي."
            };
        }
        document.getElementById('tryBtn')?.addEventListener('click', async ()=>{
            const box = document.getElementById('tryInput');
            const q   = (box.value||'').trim();
            if (!q) { box.focus(); return; }
            document.getElementById('tryResult').classList.remove('hidden');
            document.getElementById('r-demand').textContent   = '...';
            document.getElementById('r-suppliers').textContent= '...';
            document.getElementById('r-logistics').textContent= '...';
            document.getElementById('r-ads').textContent   = '...';
            document.getElementById('r-ai').textContent       = '...';
            const d = await fetchInsight(q);
            document.getElementById('r-demand').textContent    = formatNumber(d.demand_7d||0);
            document.getElementById('r-suppliers').textContent = d.suppliers||0;
            document.getElementById('r-logistics').textContent = d.logistics_index||'-';
            document.getElementById('r-ads').textContent    = d.ads_pulse||'-';
            document.getElementById('r-ai').textContent        = d.summary||'—';
        });

        // التحقق من توفر خدمات Google و Apple عند تحميل الصفحة
        if (typeof checkSocialAuthAvailability === 'function') {
            checkSocialAuthAvailability();
        }

        // ===== Trend AI Assistant Widget =====
        (function() {
            const widget = document.getElementById("trend-ai-widget");
            if (!widget) return;

            // locale from attribute: "ar" or "en"
            const locale = widget.getAttribute("data-locale") === "en" ? "en" : "ar";

            const titleEl = document.getElementById("trend-ai-title");
            const subtitleEl = document.getElementById("trend-ai-subtitle");
            const inputEl = document.getElementById("trend-ai-input");
            const btnEl = document.getElementById("trend-ai-btn");
            const outputEl = document.getElementById("trend-ai-output");
            const outputPreEl = outputEl.querySelector("pre");

            // Helper: very simple country detection from free-text prompt
            function detectCountryFromPrompt(prompt) {
                if (!prompt) return null;
                const p = prompt.toLowerCase();

                // Arabic / English country hints (expandable)
                if (p.includes("الامارات") || p.includes("الإمارات") || p.includes("uae") || p.includes("dubai") || p.includes("abu dhabi")) {
                    return "AE";
                }
                if (p.includes("السعودية") || p.includes("السعوديه") || p.includes("المملكة") || p.includes("ksa") || p.includes("saudi")) {
                    return "SA";
                }
                if (p.includes("الكويت") || p.includes("kuwait")) {
                    return "KW";
                }
                if (p.includes("قطر") || p.includes("qatar")) {
                    return "QA";
                }
                if (p.includes("البحرين") || p.includes("bahrain")) {
                    return "BH";
                }
                if (p.includes("عمان") || p.includes("عُمان") || p.includes("oman")) {
                    return "OM";
                }
                if (p.includes("امريكا") || p.includes("أمريكا") || p.includes("usa") || p.includes("united states") || p.includes("us ")) {
                    return "US";
                }
                if (p.includes("المملكة المتحدة") || p.includes("بريطانيا") || p.includes("انجلترا") || p.includes("uk") || p.includes("united kingdom")) {
                    return "GB";
                }

                return null;
            }

            // Texts for both locales
            const texts = {
                ar: {
                    title: "مساعد الترندات الذكي (Trend AI Assistant)",
                    subtitle: "اطلب من الذكاء الاصطناعي تحليل بيانات الترندات والانفجارات في TrendLens.",
                    placeholder: "اكتب سؤالك عن الترندات هنا...",
                    button: "اسأل Trend AI",
                    empty: "فضلاً اكتب سؤالك أولاً.",
                    loading: "جاري تحليل بيانات الترندات...",
                    noOutput: "لا توجد نتائج متاحة حالياً، حاول تغيير سؤالك أو الفترة الزمنية.",
                    apiError: "تعذر تنفيذ طلب الذكاء الاصطناعي حالياً. حاول مرة أخرى بعد قليل.",
                    networkError: "حدث خطأ في الاتصال بالخادم. حاول مرة أخرى بعد قليل.",
                    // التحية المطلوبة حرفياً من قبلك
                    friendlyGreeting: "هلا وسهلا! 😄 حاضر لكل أسئلتك. التحية والكلام اللطيف ما ينقص من رصيدك أبداً، قولي بس وش تبين أحلل؟",
                    friendlyThanks: "يعطيك العافية على اللطف! 🙌 وأنا بعد موجود متى ما احتجت تحليل أو فكرة، ولا تم خصم أي نقطة من رصيدك.",
                    friendlyMood: "فهمت مودك 👀✨ إذا حابة أساعدك باقتراح منتج أو حملة تناسب شعورك الحالي بس اكتبي لي التفاصيل، ووعد ما نحسب الترحيب من الرصيد."
                },
                en: {
                    title: "Trend AI Assistant (Smart Trend Advisor)",
                    subtitle: "Ask the AI to analyze TrendLens explosions data and highlight key opportunities.",
                    placeholder: "Type your trend question here…",
                    button: "Ask Trend AI",
                    empty: "Please enter your question first.",
                    loading: "Analyzing trends data…",
                    noOutput: "No results available for this query. Try changing your question or time period.",
                    apiError: "The AI request could not be processed right now. Please try again later.",
                    networkError: "An error occurred while contacting the server. Please try again later.",
                    friendlyGreeting: "Hey there! 😄 Happy to chat anytime. Greetings and warm vibes never touch your AI credits—just let me know what you’d like analyzed.",
                    friendlyThanks: "Appreciate the kind words! 🙌 Whenever you need another breakdown I’m here, and no credits were deducted for this friendly exchange.",
                    friendlyMood: "Got the vibe! 👀✨ If you want product ideas or campaign tweaks that fit your mood, drop me a detail or two—no credits taken for the chit-chat."
                }
            };

            const friendlyKeywords = {
                greeting: ['مرحبا','هلا','اهلا','السلام','هاي','hello','hi','hey','hola'],
                thanks: ['شكرا','شكرًا','يعطيك','مشكور','thanks','thank you','thx'],
                mood: ['حزين','سعيد','طفشان','متحمس','احبك','احب','متوتر','tired','sad','happy','excited','stressed','love','mood']
            };

            function detectFriendlyIntent(prompt) {
                if (!prompt) return null;
                const normalized = prompt.toLowerCase();
                for (const intent of ['greeting','thanks','mood']) {
                    const match = friendlyKeywords[intent].some(keyword => normalized.includes(keyword));
                    if (match) return intent;
                }
                return null;
            }

            const t = texts[locale];

            // Apply texts
            if (titleEl) titleEl.textContent = t.title;
            if (subtitleEl) subtitleEl.textContent = t.subtitle;
            if (inputEl) inputEl.placeholder = t.placeholder;
            if (btnEl) {
                const btnSpan = btnEl.querySelector("span");
                if (btnSpan) btnSpan.textContent = t.button;
            }

            // Function to show output
            function showOutput(text) {
                if (outputPreEl) outputPreEl.textContent = text;
                outputEl.classList.remove("hidden");
            }

            // Function to hide output
            function hideOutput() {
                outputEl.classList.add("hidden");
            }

            // Handle button click
            if (btnEl) {
                btnEl.addEventListener("click", async () => {
                    const prompt = inputEl ? inputEl.value.trim() : "";
                    if (!prompt) {
                        showOutput(t.empty);
                        return;
                    }

                    const friendlyIntent = detectFriendlyIntent(prompt);
                    if (friendlyIntent) {
                        let replyKey = 'friendlyGreeting';
                        if (friendlyIntent === 'thanks') replyKey = 'friendlyThanks';
                        if (friendlyIntent === 'mood') replyKey = 'friendlyMood';
                        showOutput(t[replyKey] || t.friendlyGreeting);
                        return;
                    }

                    // Disable button during request
                    btnEl.disabled = true;
                    showOutput(t.loading);
                    // Clear input box after sending so المجال يصبح جاهز للسؤال التالي
                    if (inputEl) {
                        inputEl.value = "";
                    }

                    try {
                        const countryFromPrompt = detectCountryFromPrompt(prompt);

                        const resp = await fetch("/trendlens/api/ai/assistant?agent=trend_ai", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify({
                                prompt: prompt,
                                locale: locale,
                                context: {
                                    period: "last_7d",
                                    source: "dashboard_home",
                                    filters: {
                                        country: countryFromPrompt,
                                        category: null
                                    }
                                }
                            })
                        });

                        // التحقق من حالة الـ response
                        if (!resp.ok) {
                            let errorMsg = t.apiError;
                            try {
                                const errorData = await resp.json();
                                if (errorData.detail || errorData.error || errorData.message) {
                                    errorMsg = errorData.detail || errorData.error || errorData.message;
                                    console.error("API Error Response:", errorData);
                                }
                            } catch (e) {
                                // إذا فشل parse JSON، استخدم رسالة الخطأ الافتراضية
                                errorMsg = `${t.apiError} (HTTP ${resp.status})`;
                                console.error("Failed to parse error response:", e);
                            }
                            showOutput(errorMsg);
                            btnEl.disabled = false;
                            return;
                        }

                        const data = await resp.json();

                        if (!data.ok) {
                            console.error("AI error:", data);
                            const errorMsg = data.error || data.message || t.apiError;
                            showOutput(errorMsg);
                            btnEl.disabled = false;
                            return;
                        }

                        showOutput(data.output || t.noOutput);
                    } catch (err) {
                        console.error("Network/Parse error:", err);
                        showOutput(t.networkError);
                    } finally {
                        btnEl.disabled = false;
                    }
                });
            }

            // Handle Enter key in textarea (Shift+Enter for new line, Enter to submit)
            if (inputEl) {
                inputEl.addEventListener("keydown", (e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                        e.preventDefault();
                        if (btnEl && !btnEl.disabled) {
                            btnEl.click();
                        }
                    }
                });
            }
        })();

    </script>

    <!-- Feature Expand Dashboard Overlay -->
    <div id="featureExpandOverlay" class="feature-expand-overlay hidden">
        <div class="feature-expand-backdrop" onclick="if (event.target === this) closeFeatureExpand()">
            <div class="feature-expand-modal glass-effect">
                <!-- Header -->
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div id="featureExpandIcon" class="w-10 h-10 rounded-2xl flex items-center justify-center bg-[var(--accent-soft)] text-[var(--accent)] text-xl shadow-lg">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <h2 id="featureExpandTitle" class="text-lg md:text-2xl font-bold text-[var(--text-main)]">لوحة الترند</h2>
                            <p id="featureExpandSubtitle" class="text-xs md:text-sm text-[var(--text-muted)]">نظرة عميقة على حركة السوق، مهيأة حسب دولتك ولغتك.</p>
                        </div>
                    </div>
                    <button class="w-9 h-9 rounded-full bg-black/40 border border-[var(--border-subtle)] flex items-center justify-center text-[var(--text-muted)] hover:text-[var(--accent)] hover:border-[var(--accent)] transition"
                            onclick="closeFeatureExpand()">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                </div>

                <!-- Top KPIs -->
                <div class="grid gap-3 md:grid-cols-4 mb-5">
                    <div class="kpi-card">
                        <div class="kpi-label" id="kpiProductsLabel">منتجات تحت المراقبة</div>
                        <div id="kpiProducts" class="kpi-value">—</div>
                        <div class="kpi-sub" id="kpiProductsSub">آخر ٧ أيام</div>
                    </div>
                    <div class="kpi-card">
                        <div class="kpi-label" id="kpiCountriesLabel">دول نشطة</div>
                        <div id="kpiCountries" class="kpi-value">—</div>
                        <div class="kpi-sub" id="kpiCountriesSub">أعلى أسواق أداءً</div>
                    </div>
                    <div class="kpi-card">
                        <div class="kpi-label" id="kpiTrendLabel">قوة الترند</div>
                        <div id="kpiTrendPower" class="kpi-value">—</div>
                        <div class="kpi-bar-wrapper">
                            <div class="kpi-bar-fill" id="kpiTrendBar"></div>
                        </div>
                    </div>
                    <div class="kpi-card">
                        <div class="kpi-label" id="kpiConfidenceLabel">ثقة الذكاء</div>
                        <div id="kpiConfidence" class="kpi-value">—</div>
                        <div class="kpi-bar-wrapper">
                            <div class="kpi-bar-fill" id="kpiConfidenceBar"></div>
                        </div>
                    </div>
                </div>

                <!-- Charts + Details -->
                <div class="grid gap-4 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)] mb-5">
                    <div class="chart-card">
                        <div class="flex items-center justify-between mb-3">
                            <div>
                                <div class="chart-title" id="chartMainTitle">نمو الطلب خلال آخر ٧ أيام</div>
                                <div class="chart-subtitle" id="chartMainSubtitle">رؤية يومية لارتفاع/انخفاض الاهتمام بالمنتجات.</div>
                            </div>
                            <span class="chip-live">
                                <span class="live-dot"></span>
                                <span id="chartLiveLabel">بيانات تجريبية</span>
                            </span>
                        </div>
                        <div class="mini-line-chart" id="miniLineChart">
                            <!-- الرسم يتم بالـ JS -->
                        </div>
                        <div class="chart-legend">
                            <span><span class="legend-dot"></span><span id="chartLegendLeft">مستوى الطلب</span></span>
                            <span id="chartLegendRight">أعلى يوم: —</span>
                        </div>
                    </div>

                    <div class="chart-card">
                        <div class="chart-title mb-2" id="sideListTitle">أعلى ٣ فئات نشاطًا</div>
                        <ul id="sideList" class="space-y-2 text-xs md:text-sm text-[var(--text-main)]">
                            <!-- تعبئة ديناميكية -->
                        </ul>
                    </div>
                </div>

                <!-- AI Insight -->
                <div class="ai-insight-card">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="w-8 h-8 rounded-2xl flex items-center justify-center bg-[var(--accent-soft)] text-[var(--accent)]">
                            <i class="fas fa-brain text-sm"></i>
                        </span>
                        <span id="aiInsightLabel" class="text-xs font-semibold text-[var(--text-muted)]">رأي الذكاء الصناعي من داخل TrendLens</span>
                    </div>
                    <p id="aiInsightText" class="text-xs md:text-sm text-[var(--text-main)] leading-relaxed">
                        يتم هنا عرض ملخص ذكي يربط بين الأرقام، ويقترح عليك خطوة عملية واحدة على الأقل.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- TikTok Trends Overlay (Video Thumbnails + Mini Chart) -->
    <div
        id="tiktokTrendsOverlay"
        class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-70"
    >
        <div
            class="bg-gray-900 max-w-5xl w-full mx-4 rounded-2xl border border-white/10 shadow-2xl flex flex-col max-h-[90vh]"
        >
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-white/10">
                <div>
                    <h3 class="text-lg font-bold text-white">
                        إشارات TikTok (تجريبي)
                    </h3>
                    <p class="text-xs text-gray-400 mt-1">
                        أقوى المقاطع المرتبطة بمنتجات التجارة خلال آخر فترة، مع منحنى بسيط للحركة لكل فيديو.
                    </p>
                </div>
                <button
                    type="button"
                    onclick="closeTiktokTrendsOverlay()"
                    class="text-gray-400 hover:text-white transition"
                >
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="px-6 py-4 overflow-y-auto">
                <!-- شريط أفضل 5 فيديوهات -->
                <div class="mb-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs text-gray-300">
                            أعلى 5 فيديوهات أداءً – شريط مصغّر
                        </span>
                        <span
                            id="tiktokTrendsStatus"
                            class="text-[11px] text-gray-400"
                        >
                            جاري تحميل بيانات TikTok…
                        </span>
                    </div>
                    <div
                        id="tiktokTopStrip"
                        class="flex gap-3 overflow-x-auto pb-1"
                    >
                        <!-- يتم ملؤها ديناميكياً -->
                    </div>
                </div>

                <!-- باقي الفيديوهات كشبكة -->
                <div
                    id="tiktokTrendsGrid"
                    class="grid gap-4 md:grid-cols-2"
                >
                    <!-- يتم ملؤها ديناميكياً -->
                </div>
            </div>
        </div>
    </div>

    <script>
        (function() {
            const featureExpandStaticText = {
                ar: {
                    productsLabel: 'منتجات تحت المراقبة',
                    countriesLabel: 'دول نشطة',
                    trendLabel: 'قوة الترند',
                    confidenceLabel: 'ثقة الذكاء',
                    legendLeft: 'مستوى الطلب',
                    legendRight: 'أعلى يوم: {value}% (محاكاة)',
                    aiLabel: 'رأي الذكاء الصناعي من داخل TrendLens'
                },
                en: {
                    productsLabel: 'Products under monitoring',
                    countriesLabel: 'Active countries',
                    trendLabel: 'Trend power',
                    confidenceLabel: 'AI confidence',
                    legendLeft: 'Demand level',
                    legendRight: 'Top day: {value}% (simulated)',
                    aiLabel: 'TrendLens AI insight'
                }
            };

            const featureExpandConfigs = {
                trends: {
                    icon: 'fa-chart-line',
                    productsValue: '3,241',
                    countriesValue: '19',
                    trendPower: 78,
                    confidence: 0.86,
                    chartBars: [35, 52, 60, 80, 72, 68, 90],
                    translations: {
                        ar: {
                            title: 'لوحة الترند',
                            subtitle: 'نظرة عميقة على حركة الترند في الدول والفئات الأكثر أهمية لك.',
                            productsSub: 'منتج تم تحليله خلال آخر ٢٤ ساعة',
                            countriesSub: 'مسارات ودول نشطة الآن',
                            chartTitle: 'نمو الطلب خلال آخر ٧ أيام',
                            chartSubtitle: 'سلوك الاهتمام بالمنتجات المختارة يوميًا.',
                            chartLiveLabel: 'عينة من بيانات ترند لينس',
                            sideTitle: 'أعلى ٣ فئات نشاطًا',
                            sideItems: [
                                'منتجات المكتب والمنزل – نمو ثابت مع ذروة نهاية الأسبوع.',
                                'إكسسوارات إلكترونية – انفجارات سريعة ثم استقرار.',
                                'منتجات تنظيم المنزل – ارتفاع هادئ لكن مستمر.'
                            ],
                            aiText: 'بيانات الأسبوع الحالي تشير إلى انتقال الإنفاق من الكماليات الصغيرة إلى منتجات تحسّن الراحة اليومية في المنزل. لو عندك ميزانية اختبار محدودة، ابدأ بمنتج واحد مكتبي أو منزلي، مع إعلان قبل/بعد بسيط موجه لسوق واحد قوي بدل التشتت بين دول متعددة.'
                        },
                        en: {
                            title: 'Operational Trends',
                            subtitle: 'Deep view into movement across your priority countries and categories.',
                            productsSub: 'Products analyzed in the last 24 hours',
                            countriesSub: 'Markets showing activity right now',
                            chartTitle: 'Demand growth over the last 7 days',
                            chartSubtitle: 'Daily behavior of interest for the monitored products.',
                            chartLiveLabel: 'Sample TrendLens data',
                            sideTitle: 'Top 3 active categories',
                            sideItems: [
                                'Home & office goods – steady lift with a weekend spike.',
                                'Electronic accessories – fast explosions followed by stabilization.',
                                'Home organization – calm but consistent climb.'
                            ],
                            aiText: 'This week shows budgets shifting from impulse gadgets to comfort-at-home products. If your testing budget is limited, start with one office or home item and run a simple before/after ad targeting a single strong market.'
                        }
                    }
                },
                explosions: {
                    icon: 'fa-rocket',
                    productsValue: '57',
                    countriesValue: '7',
                    trendPower: 92,
                    confidence: 0.89,
                    chartBars: [10, 18, 32, 55, 80, 96, 100],
                    translations: {
                        ar: {
                            title: 'انفجارات المنتجات',
                            subtitle: 'تركيز على المنتجات التي قفزت فعليًا في الطلب خلال فترة قصيرة.',
                            productsSub: 'منتج مصنّف كـ “منفجر” خلال آخر ٧ أيام',
                            countriesSub: 'أسواق يظهر فيها الانفجار بوضوح',
                            chartTitle: 'تسارع انفجار الطلب',
                            chartSubtitle: 'كيف تحوّل الطلب من عادي إلى انفجار خلال الأيام الماضية.',
                            chartLiveLabel: 'محاكاة لانفجار حقيقي',
                            sideTitle: '٣ أنماط انفجار شائعة',
                            sideItems: [
                                'منتج كان ضعيف ثم فجأة ارتفع ×4 بسبب محتوى في تيكتوك.',
                                'منتج موسمي يرتفع دائمًا قبل موسم معيّن ثم يبرد سريعًا.',
                                'منتج جديد في فئة مشبعة لكن بفكرة عرض مختلفة جذبت الانتباه.'
                            ],
                            aiText: 'المنتجات المنفجرة مناسبة للتجار السريعين فقط. لو دخلت متأخر، تشتري المخزون بسعر أعلى وتتزاحم في الإعلانات. استخدم هذا القسم لاختيار منتج واحد واختبار سريع خلال ٣–٥ أيام، ثم قرر الاستمرار أو الانتقال للمنتج التالي.'
                        },
                        en: {
                            title: 'Product Explosions',
                            subtitle: 'Focus on products that truly spiked within a short period.',
                            productsSub: 'Products flagged as “exploding” in the last 7 days',
                            countriesSub: 'Markets where the spike is obvious',
                            chartTitle: 'Acceleration of explosive demand',
                            chartSubtitle: 'How normal demand turned into an explosion over the past few days.',
                            chartLiveLabel: 'Simulated explosion sample',
                            sideTitle: '3 common explosion patterns',
                            sideItems: [
                                'A quiet product jumped 4× overnight after a TikTok trend.',
                                'Seasonal item that always spikes before its season then cools fast.',
                                'New entrant in a crowded niche but with a different creative hook.'
                            ],
                            aiText: 'Exploding products reward fast movers only. Entering late means expensive stock and crowded ads. Pick one signal, run a 3–5 day sprint, then decide to double down or move on.'
                        }
                    }
                },
                ai: {
                    icon: 'fa-brain',
                    productsValue: '87',
                    countriesValue: '4',
                    trendPower: 71,
                    confidence: 0.93,
                    chartBars: [65, 40, 55, 70, 60, 50, 80],
                    translations: {
                        ar: {
                            title: 'مساعد الذكاء Trend AI',
                            subtitle: 'إجابات مدعومة ببيانات ترند لينس، وليست مجرد دردشة عامة.',
                            productsSub: 'استشارة ذكاء صناعي أُعطيت اليوم',
                            countriesSub: 'أسواق تم تحليلها في آخر الجلسات',
                            chartTitle: 'نوعية الأسئلة التي يجيب عليها Trend AI',
                            chartSubtitle: 'توزيع بين: اختيار منتج، اختيار دولة، أفكار إعلانات.',
                            chartLiveLabel: 'أمثلة من أسئلة حقيقية',
                            sideTitle: 'أكثر ٣ أسئلة يكررها التجار',
                            sideItems: [
                                '“أعطني منتج واحد يناسب السوق السعودي قبل الشتاء مع فكرة إعلان قصيرة.”',
                                '“حلّل لي أهم الترندات الحالية في السوق الأمريكي خلال آخر ٧ أيام.”',
                                '“هل أستمر على هذا المنتج أم أوقفه وأنتقل لبديل أفضل؟”'
                            ],
                            aiText: 'أفضل طريقة لاستخدام Trend AI هي أن تعطيه سياقك الحقيقي: ميزانيتك، منصتك، دولتك، ونوع منتجاتك. كلما زاد السياق، صار الرد أقرب لخطة شريك ذكي، وليس مجرد نصائح عامة.'
                        },
                        en: {
                            title: 'Trend AI Assistant',
                            subtitle: 'Answers backed by TrendLens data rather than generic chat replies.',
                            productsSub: 'AI consultations delivered today',
                            countriesSub: 'Markets analyzed in the latest sessions',
                            chartTitle: 'What Trend AI gets asked about',
                            chartSubtitle: 'Distribution between product choice, country choice, and ad ideas.',
                            chartLiveLabel: 'Examples from real questions',
                            sideTitle: 'Top 3 questions merchants repeat',
                            sideItems: [
                                '"Give me one product for the Saudi market before winter with a short ad idea."',
                                '"Analyze the hottest trends in the US during the last 7 days."',
                                '"Should I keep scaling this product or switch to a better alternative?"'
                            ],
                            aiText: 'Give Trend AI your real context—budget, platform, country, and product type. The richer the context, the closer the answer feels to a strategic partner.'
                        }
                    }
                },
                social: {
                    icon: 'fa-mobile-alt',
                    productsValue: '142',
                    countriesValue: '9',
                    trendPower: 64,
                    confidence: 0.81,
                    chartBars: [30, 45, 50, 60, 55, 62, 70],
                    translations: {
                        ar: {
                            title: 'إشارات السوشيال والإعلانات',
                            subtitle: 'تجميع إشارات من المحتوى المدفوع والعضوي لفهم ما يعمل الآن.',
                            productsSub: 'منتج تمت ملاحظة نشاط دعائي حوله',
                            countriesSub: 'أسواق نشطة على السوشيال',
                            chartTitle: 'زخم المحتوى الإعلاني',
                            chartSubtitle: 'كمية المحتوى المرتبط بمنتجات التجارة خلال آخر ٧ أيام.',
                            chartLiveLabel: 'مؤشرات من حملات نشطة',
                            sideTitle: '٣ أنماط محتوى ناجح',
                            sideItems: [
                                'مراجعات قصيرة وصادقة من زاوية تجربة شخصية حقيقية.',
                                'محتوى قبل/بعد مع نتيجة واضحة في أقل من ٨ ثواني.',
                                'لقطات شاشة للأرقام (قبل وبعد) مع شرح بسيط وسريع.'
                            ],
                            aiText: 'بدل ما تقلّد العروض حرفيًا، ركّز على الفكرة الرئيسية في المحتوى الناجح: زاوية المشكلة، نوع الوعد، وطريقة العرض. استخدم بيانات TrendLens لاختيار المنتج، ثم استلهم من نمط المحتوى هنا لبناء نسختك الخاصة.'
                        },
                        en: {
                            title: 'Social & Ads Signals',
                            subtitle: 'Blending paid and organic signals to see what works right now.',
                            productsSub: 'Products with noticeable ad momentum',
                            countriesSub: 'Markets active across social networks',
                            chartTitle: 'Advertising content momentum',
                            chartSubtitle: 'Volume of commerce-related content in the last 7 days.',
                            chartLiveLabel: 'Indicators from active campaigns',
                            sideTitle: '3 winning content patterns',
                            sideItems: [
                                'Short, honest reviews shot from a real-life experience.',
                                'Before/after clips with a clear result in under eight seconds.',
                                'Screenshot-style proof with a quick narrated takeaway.'
                            ],
                            aiText: 'Do not copy ads literally. Focus on the problem angle, the promise, and the proof style. Choose a product via TrendLens, then borrow these content patterns to craft your own creative.'
                        }
                    }
                }
            };

            let currentFeatureExpandKey = null;
            let previousOverflowValue = '';

            function getFeatureExpandLocale() {
                const preferred = window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar';
                return preferred === 'en' ? 'en' : 'ar';
            }

            function setFeatureExpandText(id, value) {
                if (typeof value !== 'string') return;
                const el = document.getElementById(id);
                if (el) el.textContent = value;
            }

            function renderFeatureExpand(key) {
                const cfg = featureExpandConfigs[key];
                if (!cfg) return;

                const lang = getFeatureExpandLocale();
                const texts = cfg.translations[lang] || cfg.translations.ar;
                const staticTexts = featureExpandStaticText[lang] || featureExpandStaticText.ar;

                const iconEl = document.getElementById('featureExpandIcon');
                if (iconEl) iconEl.innerHTML = `<i class="fas ${cfg.icon}"></i>`;

                setFeatureExpandText('featureExpandTitle', texts.title);
                setFeatureExpandText('featureExpandSubtitle', texts.subtitle);

                setFeatureExpandText('kpiProductsLabel', staticTexts.productsLabel);
                setFeatureExpandText('kpiCountriesLabel', staticTexts.countriesLabel);
                setFeatureExpandText('kpiTrendLabel', staticTexts.trendLabel);
                setFeatureExpandText('kpiConfidenceLabel', staticTexts.confidenceLabel);

                setFeatureExpandText('kpiProducts', cfg.productsValue);
                setFeatureExpandText('kpiProductsSub', texts.productsSub);
                setFeatureExpandText('kpiCountries', cfg.countriesValue);
                setFeatureExpandText('kpiCountriesSub', texts.countriesSub);

                setFeatureExpandText('kpiTrendPower', `${cfg.trendPower}/100`);
                setFeatureExpandText('kpiConfidence', `${Math.round(cfg.confidence * 100)}%`);

                const trendBar = document.getElementById('kpiTrendBar');
                if (trendBar) trendBar.style.width = `${Math.min(cfg.trendPower, 100)}%`;
                const confidenceBar = document.getElementById('kpiConfidenceBar');
                if (confidenceBar) confidenceBar.style.width = `${Math.min(cfg.confidence * 100, 100)}%`;

                setFeatureExpandText('chartMainTitle', texts.chartTitle);
                setFeatureExpandText('chartMainSubtitle', texts.chartSubtitle);
                setFeatureExpandText('chartLiveLabel', texts.chartLiveLabel);
                setFeatureExpandText('chartLegendLeft', staticTexts.legendLeft);

                const topValue = cfg.chartBars.length ? Math.max(...cfg.chartBars) : 0;
                const legendTemplate = (staticTexts.legendRight || featureExpandStaticText.ar.legendRight).replace('{value}', topValue.toString());
                setFeatureExpandText('chartLegendRight', legendTemplate);

                const chartContainer = document.getElementById('miniLineChart');
                if (chartContainer) {
                    chartContainer.innerHTML = '';
                    const maxVal = cfg.chartBars.length ? Math.max(...cfg.chartBars, 1) : 1;
                    cfg.chartBars.forEach(value => {
                        const bar = document.createElement('div');
                        bar.className = 'mini-line-chart-bar';
                        bar.style.height = '10%';
                        chartContainer.appendChild(bar);
                        requestAnimationFrame(() => {
                            bar.style.height = `${15 + (value / maxVal) * 80}%`;
                        });
                    });
                }

                setFeatureExpandText('sideListTitle', texts.sideTitle);
                const sideList = document.getElementById('sideList');
                if (sideList) {
                    sideList.innerHTML = '';
                    texts.sideItems.forEach(item => {
                        const li = document.createElement('li');
                        li.textContent = item;
                        sideList.appendChild(li);
                    });
                }

                setFeatureExpandText('aiInsightLabel', staticTexts.aiLabel);
                setFeatureExpandText('aiInsightText', texts.aiText);
            }

            window.openFeatureExpand = function(key) {
                renderFeatureExpand(key);
                currentFeatureExpandKey = key;
                const overlay = document.getElementById('featureExpandOverlay');
                if (overlay) overlay.classList.remove('hidden');
                previousOverflowValue = document.documentElement.style.overflow || '';
                document.documentElement.style.overflow = 'hidden';
            };

            window.closeFeatureExpand = function() {
                const overlay = document.getElementById('featureExpandOverlay');
                if (overlay) overlay.classList.add('hidden');
                document.documentElement.style.overflow = previousOverflowValue || '';
                currentFeatureExpandKey = null;
            };

            window.refreshFeatureExpandContent = function() {
                if (currentFeatureExpandKey) {
                    renderFeatureExpand(currentFeatureExpandKey);
                }
            };

            document.addEventListener('keydown', event => {
                if (event.key === 'Escape') {
                    const overlay = document.getElementById('featureExpandOverlay');
                    if (overlay && !overlay.classList.contains('hidden')) {
                        window.closeFeatureExpand();
                    }
                }
            });

            window.addEventListener('pageshow', () => {
                if (!currentFeatureExpandKey) {
                    document.documentElement.style.overflow = '';
                }
            });
        })();
    </script>
        <!-- Intelligence Tabs Handler -->
        <script>
            (function() {
                const tabs = document.querySelectorAll('.intelligence-tab');
                const contents = document.querySelectorAll('.intelligence-tab-content');

                tabs.forEach(tab => {
                    tab.addEventListener('click', () => {
                        const targetTab = tab.getAttribute('data-tab');
                        
                        // Remove active from all tabs and contents
                        tabs.forEach(t => t.classList.remove('active'));
                        contents.forEach(c => c.classList.remove('active'));
                        
                        // Add active to clicked tab and corresponding content
                        tab.classList.add('active');
                        const targetContent = document.querySelector(`.intelligence-tab-content[data-content="${targetTab}"]`);
                        if (targetContent) {
                            targetContent.classList.add('active');
                        }
                    });
                });
            })();
        </script>

        <!-- ===== Product Dashboard Navigation Script ===== -->
        <script>
            (function () {
                // دالة تساعدنا نكوّن الرابط مع براميترز إضافية
                function buildDashboardUrl(productId, options) {
                    var params = new URLSearchParams();

                    // براميترز اختيارية
                    params.set('product_id', productId);

                    if (options && options.market) {
                        params.set('market', options.market);
                    }

                    if (options && options.locale) {
                        params.set('locale', options.locale);
                    }

                    if (options && options.period) {
                        params.set('period', options.period);
                    } else {
                        params.set('period', 'last_30d');
                    }

                    // access_level ممكن مستقبلاً تجي من الكوكي أو الـ localStorage
                    if (options && options.access_level) {
                        params.set('access_level', options.access_level);
                    }

                    return '/trendlens/dashboard.html?' + params.toString();
                }

                document.addEventListener('click', function (event) {
                    var target = event.target;

                    // نتأكد إننا ماسكين الزر نفسه حتى لو كان فيه أيقونة داخله
                    if (target && !target.classList.contains('js-open-product-dashboard')) {
                        target = target.closest('.js-open-product-dashboard');
                    }

                    if (!target) return;

                    // منع الانتشار للحدث
                    event.preventDefault();
                    event.stopPropagation();

                    var productId = target.getAttribute('data-product-id');
                    if (!productId) {
                        console.warn('[Product Dashboard] No product_id found on button');
                        return;
                    }

                    var market = target.getAttribute('data-market') || '';
                    var locale = target.getAttribute('data-locale') || 'ar';
                    
                    // لاحقاً تقدر تجيب access_level من نظام الاشتراكات
                    var accessLevel = 'subscriber';

                    var url = buildDashboardUrl(productId, {
                        market: market,
                        locale: locale,
                        period: 'last_30d',
                        access_level: accessLevel
                    });

                    console.log('[Product Dashboard] Navigating to:', url);

                    // الانتقال للوحة المنتج
                    window.location.href = url;
                });
            })();
        </script>

        <!-- ===== Market & Period Filters Integration ===== -->
        <script>
            (function () {
                // استخدام API_BASE المحدد في الصفحة أو القيمة الافتراضية
                const API_BASE = window.API_BASE || '/api';
                
                const marketSelect = document.getElementById('tlMarketFilter');
                const periodSelect = document.getElementById('tlPeriodFilter');

                if (!marketSelect || !periodSelect) {
                    console.warn('[Filters] Filter elements not found');
                    return;
                }

                // =============================
                // قائمة Fallback موسعة للأسواق (حتى يتم تفعيل API)
                // =============================
                function getFallbackMarketsList() {
                    return [
                        { code: 'SA', name_ar: 'السعودية', name_en: 'Saudi Arabia', has_local: true },
                        { code: 'US', name_ar: 'أمريكا', name_en: 'United States', has_local: true },
                        { code: 'AE', name_ar: 'الإمارات', name_en: 'UAE', has_local: true },
                        { code: 'KW', name_ar: 'الكويت', name_en: 'Kuwait', has_local: false },
                        { code: 'EG', name_ar: 'مصر', name_en: 'Egypt', has_local: false },
                        { code: 'GB', name_ar: 'بريطانيا', name_en: 'United Kingdom', has_local: true },
                        { code: 'CA', name_ar: 'كندا', name_en: 'Canada', has_local: true },
                        { code: 'AU', name_ar: 'أستراليا', name_en: 'Australia', has_local: true },
                        { code: 'DE', name_ar: 'ألمانيا', name_en: 'Germany', has_local: true },
                        { code: 'FR', name_ar: 'فرنسا', name_en: 'France', has_local: true },
                        { code: 'IT', name_ar: 'إيطاليا', name_en: 'Italy', has_local: false },
                        { code: 'ES', name_ar: 'إسبانيا', name_en: 'Spain', has_local: false },
                        { code: 'NL', name_ar: 'هولندا', name_en: 'Netherlands', has_local: false },
                        { code: 'IN', name_ar: 'الهند', name_en: 'India', has_local: true },
                        { code: 'CN', name_ar: 'الصين', name_en: 'China', has_local: true },
                        { code: 'JP', name_ar: 'اليابان', name_en: 'Japan', has_local: true },
                        { code: 'KR', name_ar: 'كوريا الجنوبية', name_en: 'South Korea', has_local: false },
                        { code: 'BR', name_ar: 'البرازيل', name_en: 'Brazil', has_local: true },
                        { code: 'MX', name_ar: 'المكسيك', name_en: 'Mexico', has_local: false },
                        { code: 'AR', name_ar: 'الأرجنتين', name_en: 'Argentina', has_local: false },
                        { code: 'ZA', name_ar: 'جنوب أفريقيا', name_en: 'South Africa', has_local: false },
                        { code: 'NG', name_ar: 'نيجيريا', name_en: 'Nigeria', has_local: false },
                        { code: 'KE', name_ar: 'كينيا', name_en: 'Kenya', has_local: false },
                        { code: 'TR', name_ar: 'تركيا', name_en: 'Turkey', has_local: true },
                        { code: 'PL', name_ar: 'بولندا', name_en: 'Poland', has_local: false },
                        { code: 'SE', name_ar: 'السويد', name_en: 'Sweden', has_local: false },
                        { code: 'NO', name_ar: 'النرويج', name_en: 'Norway', has_local: false },
                        { code: 'DK', name_ar: 'الدنمارك', name_en: 'Denmark', has_local: false },
                        { code: 'FI', name_ar: 'فنلندا', name_en: 'Finland', has_local: false },
                        { code: 'SG', name_ar: 'سنغافورة', name_en: 'Singapore', has_local: true },
                        { code: 'MY', name_ar: 'ماليزيا', name_en: 'Malaysia', has_local: false },
                        { code: 'TH', name_ar: 'تايلاند', name_en: 'Thailand', has_local: false },
                        { code: 'ID', name_ar: 'إندونيسيا', name_en: 'Indonesia', has_local: false },
                        { code: 'PH', name_ar: 'الفلبين', name_en: 'Philippines', has_local: false },
                        { code: 'VN', name_ar: 'فيتنام', name_en: 'Vietnam', has_local: false },
                        { code: 'NZ', name_ar: 'نيوزيلندا', name_en: 'New Zealand', has_local: false },
                        { code: 'IE', name_ar: 'أيرلندا', name_en: 'Ireland', has_local: false },
                        { code: 'CH', name_ar: 'سويسرا', name_en: 'Switzerland', has_local: false },
                        { code: 'AT', name_ar: 'النمسا', name_en: 'Austria', has_local: false },
                        { code: 'BE', name_ar: 'بلجيكا', name_en: 'Belgium', has_local: false },
                        { code: 'PT', name_ar: 'البرتغال', name_en: 'Portugal', has_local: false },
                        { code: 'GR', name_ar: 'اليونان', name_en: 'Greece', has_local: false },
                        { code: 'CZ', name_ar: 'التشيك', name_en: 'Czech Republic', has_local: false },
                        { code: 'RO', name_ar: 'رومانيا', name_en: 'Romania', has_local: false },
                        { code: 'HU', name_ar: 'المجر', name_en: 'Hungary', has_local: false },
                        { code: 'IL', name_ar: 'إسرائيل', name_en: 'Israel', has_local: false },
                        { code: 'QA', name_ar: 'قطر', name_en: 'Qatar', has_local: false },
                        { code: 'BH', name_ar: 'البحرين', name_en: 'Bahrain', has_local: false },
                        { code: 'OM', name_ar: 'عمان', name_en: 'Oman', has_local: false },
                        { code: 'JO', name_ar: 'الأردن', name_en: 'Jordan', has_local: false },
                        { code: 'LB', name_ar: 'لبنان', name_en: 'Lebanon', has_local: false },
                        { code: 'PK', name_ar: 'باكستان', name_en: 'Pakistan', has_local: false },
                        { code: 'BD', name_ar: 'بنغلاديش', name_en: 'Bangladesh', has_local: false },
                        { code: 'LK', name_ar: 'سريلانكا', name_en: 'Sri Lanka', has_local: false },
                        { code: 'MG', name_ar: 'مدغشقر', name_en: 'Madagascar', has_local: false }
                    ];
                }

                // =============================
                // تحميل قائمة الأسواق ديناميكياً من API
                // =============================
                async function loadMarketsList() {
                    try {
                        const locale = (window.currentLang || window.__UICFG?.ui?.locale || 'ar') === 'en' ? 'en' : 'ar';
                        const response = await fetch(`${API_BASE}/markets/list?locale=${locale}`, {
                            credentials: 'include',
                            cache: 'no-store'
                        });

                        if (!response.ok) {
                            throw new Error(`Markets API error: ${response.status}`);
                        }

                        const markets = await response.json();
                        
                        // إزالة خيار "جاري التحميل..." وإعادة بناء القائمة
                        marketSelect.innerHTML = '';
                        
                        // إضافة خيار "كل الأسواق" حسب اللغة
                        const allMarketsText = locale === 'en' ? 'All markets (Global)' : 'كل الأسواق (عالمي)';
                        const allOption = document.createElement('option');
                        allOption.value = '';
                        allOption.textContent = allMarketsText;
                        marketSelect.appendChild(allOption);

                        // إضافة جميع الأسواق من API
                        if (Array.isArray(markets) && markets.length > 0) {
                            markets.forEach(market => {
                                const option = document.createElement('option');
                                option.value = market.code || market.country_code || '';
                                
                                // استخدام name_ar أو name_en حسب locale
                                const marketName = locale === 'en' 
                                    ? (market.name_en || market.name || market.code)
                                    : (market.name_ar || market.name || market.code);
                                
                                option.textContent = `${marketName} (${market.code || ''})`;
                                
                                // إضافة data attribute للتحقق من has_local لاحقاً
                                if (market.has_local !== undefined) {
                                    option.dataset.hasLocal = market.has_local;
                                }
                                
                                marketSelect.appendChild(option);
                            });
                            
                            console.log(`[Filters] Loaded ${markets.length} markets from API`);
                            
                            // بعد تحميل القائمة، نطبق القيمة المحفوظة
                            const savedMarket = localStorage.getItem('tl_filter_market') || '';
                            if (savedMarket && marketSelect.querySelector(`option[value="${savedMarket}"]`)) {
                                marketSelect.value = savedMarket;
                            }
                        } else {
                            // Fallback: إذا API لم يرجع بيانات، نستخدم قائمة أساسية موسعة
                            console.warn('[Filters] No markets from API, using fallback list');
                            // استخدام نفس قائمة Fallback الموسعة (يتم تعريفها في catch أيضاً)
                            const fallbackMarkets = getFallbackMarketsList();
                            
                            fallbackMarkets.forEach(market => {
                                const option = document.createElement('option');
                                option.value = market.code;
                                const marketName = locale === 'en' ? market.name_en : market.name_ar;
                                option.textContent = `${marketName} (${market.code})`;
                                option.dataset.hasLocal = market.has_local;
                                marketSelect.appendChild(option);
                            });
                        }
                    } catch (error) {
                        console.error('[Filters] Error loading markets list:', error);
                        // في حالة الخطأ، نستخدم قائمة Fallback موسعة
                        const locale = (window.currentLang || window.__UICFG?.ui?.locale || 'ar') === 'en' ? 'en' : 'ar';
                        const allMarketsText = locale === 'en' ? 'All markets (Global)' : 'كل الأسواق (عالمي)';
                        marketSelect.innerHTML = `<option value="">${allMarketsText}</option>`;
                        
                        // استخدام نفس قائمة Fallback الموسعة
                        const fallbackMarkets = getFallbackMarketsList();
                        fallbackMarkets.forEach(market => {
                            const option = document.createElement('option');
                            option.value = market.code;
                            const marketName = locale === 'en' ? market.name_en : market.name_ar;
                            option.textContent = `${marketName} (${market.code})`;
                            if (market.has_local !== undefined) {
                                option.dataset.hasLocal = market.has_local;
                            }
                            marketSelect.appendChild(option);
                        });
                    }
                }

                // مفاتيح التخزين في localStorage
                const STORAGE_KEYS = {
                    market: 'tl_filter_market',
                    period: 'tl_filter_period'
                };

                // تحميل آخر اختيار من localStorage للفترة (لا يعتمد على تحميل الأسواق)
                const savedPeriod = localStorage.getItem(STORAGE_KEYS.period) || 'last_7d';
                if (savedPeriod && periodSelect.querySelector('option[value="' + savedPeriod + '"]')) {
                    periodSelect.value = savedPeriod;
                }

                // تحميل قائمة الأسواق عند تحميل الصفحة (سيطبق القيمة المحفوظة داخلها)
                loadMarketsList().then(() => {
                    // بعد تحميل القائمة، نطبق القيمة المحفوظة للسوق
                    const savedMarket = localStorage.getItem(STORAGE_KEYS.market) || '';
                    if (savedMarket && marketSelect.querySelector(`option[value="${savedMarket}"]`)) {
                        marketSelect.value = savedMarket;
                    }
                });

                // عند تغيير الفلاتر
                marketSelect.addEventListener('change', onFiltersChange);
                periodSelect.addEventListener('change', onFiltersChange);

                // تطبيق الفلاتر مرة عند تحميل الصفحة (بعد تحميل الكروت الأولي)
                // ننتظر حتى يتم تحميل الكروت الأولي ثم نطبق الفلاتر
                let filtersApplied = false;
                const originalLoadTrendingCards = window.loadTrendingCards;
                if (originalLoadTrendingCards) {
                    window.loadTrendingCards = function() {
                        const result = originalLoadTrendingCards.apply(this, arguments);
                        if (!filtersApplied) {
                            setTimeout(() => {
                                applyFilters();
                                filtersApplied = true;
                            }, 500);
                        }
                        return result;
                    };
                } else {
                    setTimeout(() => {
                        if (!filtersApplied) {
                            applyFilters();
                            filtersApplied = true;
                        }
                    }, 2000);
                }

                function onFiltersChange() {
                    const market = marketSelect.value || '';
                    const period = periodSelect.value || 'last_7d';

                    localStorage.setItem(STORAGE_KEYS.market, market);
                    localStorage.setItem(STORAGE_KEYS.period, period);

                    applyFilters();
                }

                function applyFilters() {
                    const market = marketSelect.value || '';
                    const period = periodSelect.value || 'last_7d';

                    reloadExplodingCards(market, period);
                    reloadHomepageTrends(market, period);
                }

                // =============================
                // 1) كروت المنتجات المنفجرة
                // =============================
                function reloadExplodingCards(market, period) {
                    const container = document.getElementById('exploding-products-grid');
                    if (!container) return;

                    // إظهار حالة التحميل
                    container.innerHTML = '<div class="text-center py-8 text-gray-400 col-span-full"><i class="fas fa-spinner fa-spin"></i><span class="ml-2">جاري تحميل أفضل الانفجارات...</span></div>';

                    let url = `${API_BASE}/trends/explosions?limit=8&period=${encodeURIComponent(period)}`;
                    if (market) {
                        url += `&country=${encodeURIComponent(market)}`;
                    }

                    fetch(url, {
                        credentials: 'include',
                        cache: 'no-store'
                    })
                        .then(function (res) {
                            if (!res.ok) throw new Error('Explosions API error: ' + res.status);
                            return res.json();
                        })
                        .then(function (data) {
                            // نتوقع data.items أو data.products حسب الباكند
                            const items = data.items || data.products || [];
                            if (!items.length) {
                                container.innerHTML = '<div class="text-center py-8 text-gray-400 col-span-full">لا توجد منتجات منفجرة في هذه الفترة / السوق.</div>';
                                return;
                            }

                            // استخدام الدالة الموجودة لبناء الكروت
                            if (typeof loadTrendingCards === 'function') {
                                // إعادة استخدام الكود الموجود
                                container.innerHTML = '';
                                items.slice(0, 8).forEach((item, index) => {
                                    try {
                                        buildExplosionCard(item, index, container);
                                    } catch (err) {
                                        console.error('[Filters] Error building card:', err);
                                    }
                                });
                            } else {
                                // Fallback: بناء بسيط
                                container.innerHTML = items.map(renderExplosionCard).join('');
                            }
                        })
                        .catch(function (err) {
                            console.error('[Filters] Error loading explosions:', err);
                            container.innerHTML = '<div class="text-center py-8 text-gray-400 col-span-full">تعذر تحميل البيانات حالياً.</div>';
                        });
                }

                // دالة مساعدة لبناء كرت واحد (مبسطة)
                function renderExplosionCard(item) {
                    const name = item.name || item.title || 'منتج بدون اسم';
                    const market = item.primary_market || item.market || item.country || '-';
                    const category = item.category || item.category_name || '-';
                    const demand = item.demand_label || item.demand_score || '-';
                    const growth = item.growth || item.growth_rate || 0;
                    const productId = item.product_id || item.id;
                    const locale = (window.currentLang || 'ar') === 'en' ? 'en-US' : 'ar-SA';
                    const viewProductText = locale === 'en-US' ? 'Open Product Dashboard' : 'افتح لوحة المنتج';

                    return (
                        '<div class="tl-card tl-card--trend glass-effect rounded-xl p-4 flex flex-col gap-2" data-product-id="' + String(productId || '') + '">' +
                            '<div class="tl-card-header">' +
                                '<div class="tl-card-title">' +
                                    '<span class="tl-badge tl-badge--hot">ترند</span>' +
                                    '<h4>' + escapeHtml(name) + '</h4>' +
                                '</div>' +
                                '<div class="tl-card-meta">' +
                                    '<span class="tl-chip">السوق: ' + escapeHtml(market) + '</span>' +
                                    '<span class="tl-chip">' + escapeHtml(category) + '</span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="tl-card-body">' +
                                '<div class="tl-metric">' +
                                    '<span class="tl-metric-label">نمو</span>' +
                                    '<span class="tl-metric-value">' + escapeHtml(String(growth > 0 ? '+' : '') + growth + '%') + '</span>' +
                                '</div>' +
                                '<div class="tl-metric">' +
                                    '<span class="tl-metric-label">طلب</span>' +
                                    '<span class="tl-metric-value">' + escapeHtml(String(demand)) + '</span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="tl-card-footer">' +
                                (productId
                                    ? '<button class="tl-link-button js-open-product-dashboard" ' +
                                        'data-product-id="' + String(productId) + '" ' +
                                        'data-market="' + escapeAttr(market) + '" ' +
                                        'data-locale="' + escapeAttr(locale) + '">' +
                                        escapeHtml(viewProductText) +
                                      '</button>'
                                    : ''
                                ) +
                            '</div>' +
                        '</div>'
                    );
                }

                // دالة لبناء الكرت باستخدام DOM API (مثل الكود الموجود)
                function buildExplosionCard(item, index, container) {
                    const locale = (window.currentLang || window.__UICFG?.ui?.locale || 'ar') === 'en' ? 'en-US' : 'ar-SA';
                    const productId = item.product_id || item.id || item.productId || item._id || item.name || item.title || `product-${index}`;
                    const productName = item.name || item.title || item.product_name || item.productName || (locale === 'en-US' ? 'Product' : 'منتج');
                    const market = item.market || item.primary_market || item.country || item.dominant_country || item.country_code || '-';
                    const category = item.category || item.category_name || item.product_category || (locale === 'en-US' ? 'Unclassified' : 'غير مصنف');
                    
                    let growth = 0;
                    if (item.growth !== undefined && item.growth !== null) {
                        growth = parseFloat(item.growth) || 0;
                    } else if (item.search_growth !== undefined && item.search_growth !== null) {
                        growth = parseFloat(item.search_growth) || 0;
                    }

                    const demand = getDemandLevel(item.explosion_score || item.score || item.confidence || item.demand_level || item.demand_score);
                    const viewProductText = locale === 'en-US' ? 'Open Product Dashboard' : 'افتح لوحة المنتج';
                    const growthLabel = locale === 'en-US' ? '7-day growth' : 'نمو آخر ٧ أيام';
                    const demandLabel = locale === 'en-US' ? 'Demand strength' : 'قوة الطلب';
                    const trendBadge = locale === 'en-US' ? 'Trend' : 'ترند';

                    const card = document.createElement('div');
                    card.className = 'tl-card tl-card--trend glass-effect rounded-xl p-4 flex flex-col gap-2';
                    card.dataset.productId = productId;

                    // Header
                    const header = document.createElement('div');
                    header.className = 'tl-card-header';
                    
                    const title = document.createElement('div');
                    title.className = 'tl-card-title';
                    
                    const badge = document.createElement('span');
                    badge.className = 'tl-badge tl-badge--hot';
                    badge.textContent = trendBadge;
                    
                    const h4 = document.createElement('h4');
                    h4.textContent = productName;
                    
                    title.appendChild(badge);
                    title.appendChild(h4);
                    
                    const meta = document.createElement('div');
                    meta.className = 'tl-card-meta';
                    
                    const marketChip = document.createElement('span');
                    marketChip.className = 'tl-chip';
                    marketChip.textContent = 'السوق: ' + market;
                    
                    const categoryChip = document.createElement('span');
                    categoryChip.className = 'tl-chip';
                    categoryChip.textContent = category;
                    
                    meta.appendChild(marketChip);
                    meta.appendChild(categoryChip);
                    
                    header.appendChild(title);
                    header.appendChild(meta);

                    // Body
                    const body = document.createElement('div');
                    body.className = 'tl-card-body';
                    
                    const growthMetric = document.createElement('div');
                    growthMetric.className = 'tl-metric';
                    
                    const growthLabelEl = document.createElement('span');
                    growthLabelEl.className = 'tl-metric-label';
                    growthLabelEl.textContent = growthLabel;
                    
                    const growthValueEl = document.createElement('span');
                    growthValueEl.className = 'tl-metric-value';
                    growthValueEl.textContent = (growth > 0 ? '+' : '') + growth + '%';
                    
                    growthMetric.appendChild(growthLabelEl);
                    growthMetric.appendChild(growthValueEl);
                    
                    const demandMetric = document.createElement('div');
                    demandMetric.className = 'tl-metric';
                    
                    const demandLabelEl = document.createElement('span');
                    demandLabelEl.className = 'tl-metric-label';
                    demandLabelEl.textContent = demandLabel;
                    
                    const demandValueEl = document.createElement('span');
                    demandValueEl.className = 'tl-metric-value tl-metric-value--' + (demand.class || 'medium');
                    demandValueEl.textContent = demand.label || 'متوسط';
                    
                    demandMetric.appendChild(demandLabelEl);
                    demandMetric.appendChild(demandValueEl);
                    
                    body.appendChild(growthMetric);
                    body.appendChild(demandMetric);

                    // Footer
                    const footer = document.createElement('div');
                    footer.className = 'tl-card-footer';
                    
                    const button = document.createElement('button');
                    button.className = 'tl-link-button js-open-product-dashboard';
                    button.type = 'button';
                    button.textContent = viewProductText;
                    button.setAttribute('data-product-id', String(productId || ''));
                    button.setAttribute('data-market', String(market || ''));
                    button.setAttribute('data-locale', String(locale || 'ar'));
                    
                    footer.appendChild(button);

                    card.appendChild(header);
                    card.appendChild(body);
                    card.appendChild(footer);
                    
                    container.appendChild(card);
                }

                // =============================
                // 2) قسم Homepage Trends (Local / Global)
                // =============================
                function reloadHomepageTrends(market, period) {
                    const section = document.getElementById('homepage-trends-section');
                    if (!section) return;

                    // معرفة الـ scope (local/global) حسب الزر المفعّل
                    const btnLocal = document.getElementById('homepageScopeLocalBtn');
                    const btnGlobal = document.getElementById('homepageScopeGlobalBtn');
                    let scope = 'global';
                    
                    if (btnGlobal && btnGlobal.classList.contains('bg-primary')) {
                        scope = 'global';
                    } else if (btnLocal && btnLocal.classList.contains('bg-primary')) {
                        scope = 'local';
                    }

                    const listContainer = document.getElementById('homepageTrendsList');
                    if (!listContainer) return;

                    listContainer.innerHTML = '<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i><span class="ml-2">جاري تحديث الترندات...</span></div>';

                    const locale = (window.currentLang || window.__UICFG?.ui?.locale || 'ar') === 'en' ? 'en-US' : 'ar-SA';
                    let url = `${API_BASE}/trends/homepage?scope=${encodeURIComponent(scope)}&period=${encodeURIComponent(period)}&locale=${encodeURIComponent(locale)}`;
                    if (market) {
                        url += `&country=${encodeURIComponent(market)}`;
                    }

                    fetch(url, {
                        credentials: 'include',
                        cache: 'no-store'
                    })
                        .then(function (res) {
                            if (!res.ok) throw new Error('Homepage trends API error: ' + res.status);
                            return res.json();
                        })
                        .then(function (data) {
                            const items = data.items || data.products || [];
                            if (!items.length) {
                                listContainer.innerHTML = '<div class="text-center py-4 text-gray-400">لا توجد بيانات لهذه الإعدادات.</div>';
                                return;
                            }

                            // استخدام الدالة الموجودة renderItems إذا كانت متوفرة
                            if (typeof renderItems === 'function') {
                                const accessLevel = data.access_level || 'free';
                                renderItems(items, accessLevel);
                            } else {
                                // Fallback بسيط
                                listContainer.className = 'live-teaser-bar-pills';
                                listContainer.style.cssText = 'display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; -webkit-overflow-scrolling: touch;';
                                listContainer.innerHTML = items.map(renderHomepageTrendRow).join('');
                            }
                        })
                        .catch(function (err) {
                            console.error('[Filters] Error loading homepage trends:', err);
                            listContainer.innerHTML = '<div class="text-center py-4 text-gray-400">تعذر تحميل بيانات الترندات.</div>';
                        });
                }

                // شكل صف واحد في الـ homepage trends (بسيط)
                function renderHomepageTrendRow(item) {
                    const name = item.name || item.title || 'منتج';
                    const market = item.primary_market || item.market || '-';
                    const uts = item.uts || item.score || '-';
                    const lifespan = item.lifespan_days != null ? item.lifespan_days + ' يوم' : '-';

                    return (
                        '<div class="live-pill glass-effect rounded-full px-4 py-2 text-sm">' +
                            '<span class="font-semibold">' + escapeHtml(name) + '</span>' +
                            '<span class="text-gray-400 ml-2">' + escapeHtml(market) + '</span>' +
                            '<span class="text-primary ml-2">UTS: ' + escapeHtml(String(uts)) + '</span>' +
                            '<span class="text-gray-500 ml-2">العمر: ' + escapeHtml(String(lifespan)) + '</span>' +
                        '</div>'
                    );
                }

                // دوال مساعدة للهروب من HTML
                function escapeHtml(str) {
                    if (!str) return '';
                    return String(str)
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#039;');
                }

                function escapeAttr(str) {
                    if (!str) return '';
                    return String(str).replace(/"/g, '&quot;');
                }

                // دالة مساعدة للحصول على مستوى الطلب (من الكود الموجود)
                function getDemandLevel(score) {
                    if (score === null || score === undefined) {
                        return { label: 'غير محدد', class: 'medium' };
                    }
                    const num = parseFloat(score) || 0;
                    if (num >= 80) return { label: 'مرتفع جداً', class: 'high' };
                    if (num >= 60) return { label: 'مرتفع', class: 'high' };
                    if (num >= 40) return { label: 'متوسط', class: 'medium' };
                    if (num >= 20) return { label: 'منخفض', class: 'low' };
                    return { label: 'منخفض جداً', class: 'low' };
                }
            })();
        </script>

        <!-- Research Hub Script -->
        <script>
            // قاعدة API موحدة للكود الجديد
            const RESEARCH_HUB_API_BASE = window.API_BASE || '/api';

            // تعريف الأدوات داخل الـ Research Hub
            // تم إعادة التنظيم حسب المطلوب: 3 مجموعات رئيسية
            const RESEARCH_HUB_TOOLS = [
                // ===== 1. اكتشاف الترند (Trend Discovery) =====
                {
                    id: 'amazon_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-amazon',
                    title: 'ترند أمازون',
                    description: 'منتجات وكلمات صاعدة من بيانات أمازون المباشرة.',
                    level: 'live',
                    sourceCode: 'AMAZON_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/amazon-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?source=AMAZON_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?source=AMAZON_TRENDS',
                    cta: 'عرض ترندات أمازون'
                },
                {
                    id: 'pinterest_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-pinterest',
                    title: 'ترند Pinterest',
                    description: 'إشارات بصرية للترند تساعدك تفهم التريند سريعًا.',
                    level: 'beta',
                    sourceCode: 'PINTEREST_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/pinterest-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?source=PINTEREST_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?source=PINTEREST_TRENDS',
                    cta: 'استكشف ترند Pinterest'
                },
                {
                    id: 'tiktok_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-tiktok',
                    title: 'إشارات TikTok',
                    description: 'اقتراحات وكلمات تضرب على تيكتوك خلال الأيام الأخيرة.',
                    level: 'idea',
                    sourceCode: 'TIKTOK_SUGGEST',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/tiktok-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?source=TIKTOK_SUGGEST',
                    expandUrl: '/trendlens/dashboard.html?source=TIKTOK_SUGGEST',
                    cta: 'تحليل TikTok'
                },
                {
                    id: 'google_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-google',
                    title: 'Google Trends',
                    description: 'كلمات مفتاحية صاعدة من Google Trends.',
                    level: 'live',
                    sourceCode: 'GOOGLE_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/google-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?source=GOOGLE_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?source=GOOGLE_TRENDS',
                    cta: 'عرض Google Trends'
                },
                {
                    id: 'ebay_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-ebay',
                    title: 'ترند eBay',
                    description: 'منتجات صاعدة من eBay مع بيانات الطلب والأسعار.',
                    level: 'beta',
                    sourceCode: 'EBAY_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/ebay-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?source=EBAY_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?source=EBAY_TRENDS',
                    cta: 'استكشف eBay'
                },
                // ===== 2. تحليل السوق والمنتج (Market & Product Intelligence) =====
                {
                    id: 'exploding_products',
                    cluster: 'market',
                    icon: 'fas fa-rocket',
                    title: 'المنتجات المنفجرة',
                    description: 'منتجات قفز الطلب عليها فجأة في أسواق محددة.',
                    level: 'live',
                    sourceCode: 'EXPLODING_PRODUCTS',
                    endpoint: RESEARCH_HUB_API_BASE + '/exploding-products/summary',
                    dashboardUrl: '/trendlens/dashboard.html?source=EXPLODING_PRODUCTS',
                    expandUrl: '/trendlens/dashboard.html?source=EXPLODING_PRODUCTS',
                    cta: 'استكشف المنتجات'
                },
                {
                    id: 'best_sellers',
                    cluster: 'market',
                    icon: 'fas fa-crown',
                    title: 'أفضل البائعين',
                    description: 'قائمة بأكثر المنتجات ثباتاً في المبيعات عبر المنصات.',
                    level: 'beta',
                    sourceCode: 'BEST_SELLERS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/best-sellers/summary',
                    dashboardUrl: '/trendlens/dashboard.html?source=BEST_SELLERS',
                    expandUrl: '/trendlens/dashboard.html?source=BEST_SELLERS',
                    cta: 'عرض الأفضل'
                },
                {
                    id: 'price_evolution',
                    cluster: 'market',
                    icon: 'fas fa-chart-area',
                    title: 'تطوّر الأسعار',
                    description: 'كيف تغير سعر المنتج عبر الوقت في أكثر من سوق.',
                    level: 'beta',
                    sourceCode: 'PRICE_EVOLUTION',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/price-evolution',
                    dashboardUrl: '/trendlens/dashboard.html?source=PRICE_EVOLUTION',
                    expandUrl: '/trendlens/dashboard.html?source=PRICE_EVOLUTION',
                    cta: 'عرض الأسعار'
                },
                {
                    id: 'shipping_signals',
                    cluster: 'market',
                    icon: 'fas fa-ship',
                    title: 'إشارات الشحن',
                    description: 'قراءة حركة الموانئ والشحن وتأثيرها على توفر المنتجات.',
                    level: 'live',
                    sourceCode: 'SHIPPING_SIGNALS',
                    endpoint: RESEARCH_HUB_API_BASE + '/data-collection/shipping-signals',
                    dashboardUrl: '/trendlens/dashboard.html?source=SHIPPING_SIGNALS',
                    expandUrl: '/trendlens/dashboard.html?source=SHIPPING_SIGNALS',
                    cta: 'عرض الشحن'
                },
                // ===== 3. الذكاء الصناعي والقرارات (AI & Decision Tools) =====
                {
                    id: 'ai_decision',
                    cluster: 'ai',
                    icon: 'fas fa-brain',
                    title: 'Trend AI',
                    description: 'مساعد ذكي يدمج إشارات المنصات ويقترح عليك منتج واحد تبدأ به.',
                    level: 'live',
                    sourceCode: 'AI_DECISION',
                    endpoint: RESEARCH_HUB_API_BASE + '/ai/research/product',
                    dashboardUrl: '/trendlens/dashboard.html?source=AI_DECISION',
                    expandUrl: '/trendlens/dashboard.html?source=AI_DECISION',
                    cta: 'ابدأ مع AI'
                },
                {
                    id: 'social_scan',
                    cluster: 'ai',
                    icon: 'fas fa-mobile-alt',
                    title: 'فحص السوشيال',
                    description: 'تحليل حسابات إنستغرام / تيك توك لمعرفة سلوك الجمهور وأفضل المحتوى.',
                    level: 'live',
                    sourceCode: 'SOCIAL_SCAN',
                    endpoint: RESEARCH_HUB_API_BASE + '/social/scan',
                    dashboardUrl: '/trendlens/dashboard.html?source=SOCIAL_SCAN',
                    expandUrl: '/trendlens/dashboard.html?source=SOCIAL_SCAN',
                    cta: 'فحص السوشيال'
                },
                {
                    id: 'campaign_saver',
                    cluster: 'ai',
                    icon: 'fas fa-life-ring',
                    title: 'منقذ الحملات',
                    description: 'تحليل أداء الحملات الضعيفة وتقديم توصيات لإنقاذها.',
                    level: 'live',
                    sourceCode: 'CAMPAIGN_SAVER',
                    endpoint: RESEARCH_HUB_API_BASE + '/campaigns/saver',
                    dashboardUrl: '/trendlens/dashboard.html?source=CAMPAIGN_SAVER',
                    expandUrl: '/trendlens/dashboard.html?source=CAMPAIGN_SAVER',
                    cta: 'إنقاذ الحملة'
                },
                {
                    id: 'ai_ad_angles',
                    cluster: 'ai',
                    icon: 'fas fa-bullhorn',
                    title: 'زوايا الإعلانات',
                    description: 'اقتراح زوايا إعلانية مربوطة بسلوك الترند الحقيقي.',
                    level: 'beta',
                    sourceCode: 'AI_AD_ANGLES',
                    endpoint: RESEARCH_HUB_API_BASE + '/ai/research/ad-angles',
                    dashboardUrl: '/trendlens/dashboard.html?source=AI_AD_ANGLES',
                    expandUrl: '/trendlens/dashboard.html?source=AI_AD_ANGLES',
                    cta: 'توليد الزوايا'
                }
            ];

            // دالة مباشرة لفتح أداة Research Hub (يجب تعريفها قبل استخدامها)
            function openResearchHubTool(toolId) {
                if (!toolId) {
                    console.error('openResearchHubTool: toolId is missing');
                    return;
                }
                
                const toolConfig = RESEARCH_HUB_TOOLS.find(t => t.id === toolId);
                
                if (!toolConfig) {
                    console.error(`openResearchHubTool: Tool config not found for ${toolId}`);
                    // Fallback: إنشاء URL افتراضي مع mode=demo
                    const sourceCode = toolId.toUpperCase();
                    const fallbackUrl = `/trendlens/dashboard.html?mode=demo&feature=${sourceCode}`;
                    console.log('Using fallback URL:', fallbackUrl);
                    window.location.href = fallbackUrl;
                    return;
                }
                
                let dashboardUrl = toolConfig.dashboardUrl;
                
                // التأكد من أن المسار يبدأ بـ /
                if (dashboardUrl && !dashboardUrl.startsWith('/')) {
                    dashboardUrl = '/' + dashboardUrl;
                }
                
                if (dashboardUrl) {
                    // إضافة mode=demo&feature=SOURCE_CODE
                    const sourceCode = toolConfig.sourceCode || toolId.toUpperCase();
                    const url = new URL(dashboardUrl, window.location.origin);
                    url.searchParams.set('mode', 'demo');
                    url.searchParams.set('feature', sourceCode);
                    const finalUrl = url.pathname + url.search;
                    
                    console.log(`Opening dashboard for tool: ${toolId}`, finalUrl);
                    window.location.href = finalUrl;
                    return;
                }
                
                // Fallback: لو ما فيه dashboardUrl
                const sourceCode = toolConfig.sourceCode || toolId.toUpperCase();
                const fallbackUrl = `/trendlens/dashboard.html?mode=demo&feature=${sourceCode}`;
                console.warn(`No dashboard URL found for tool: ${toolId}, using fallback:`, fallbackUrl);
                window.location.href = fallbackUrl;
            }
            
            // جعل الدالة متاحة بشكل عام
            window.openResearchHubTool = openResearchHubTool;

            // رسم الكروت
            function renderResearchHubTools(activeCluster) {
                const grid = document.getElementById('researchHubToolsGrid');
                if (!grid) return;

                grid.innerHTML = '';

                const filtered = RESEARCH_HUB_TOOLS.filter(tool => {
                    if (!activeCluster || activeCluster === 'all') return true;
                    return tool.cluster === activeCluster;
                });

                filtered.forEach(tool => {
                    const badgeConfig = {
                        live: { text: 'بيانات حقيقية', classes: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/40' },
                        beta: { text: 'وضع تجريبي', classes: 'bg-sky-500/10 text-sky-300 border-sky-500/40' },
                        idea: { text: 'على خارطة الطريق', classes: 'bg-gray-500/10 text-gray-300 border-gray-500/40' }
                    }[tool.level] || { text: 'قريباً', classes: 'bg-gray-500/10 text-gray-300 border-gray-500/40' };

                    // كرت مصغّر - 3 أعمدة على الديسكتوب
                    const card = document.createElement('div');
                    card.className =
                        'glass-effect rounded-lg p-3 sm:p-4 border border-white/10 hover:border-yellow-400/60 hover:shadow-xl transition-all flex flex-col justify-between min-h-[120px] sm:min-h-[130px]';
                    card.setAttribute('data-tool-id', tool.id);
                    card.setAttribute('data-endpoint', tool.endpoint);
                    // منع أي click على الكرت نفسه - فقط الزر يعمل
                    card.addEventListener('click', function(e) {
                        // السماح فقط للزر بالعمل
                        if (!e.target.closest('button[data-open-tool]')) {
                            e.stopPropagation();
                        }
                    });

                    card.innerHTML = `
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-yellow-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="${tool.icon} text-yellow-400 text-xs sm:text-sm"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-xs sm:text-sm font-bold text-white mb-0.5 truncate">${tool.title}</h3>
                                </div>
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] sm:text-[9px] font-semibold border ${badgeConfig.classes} whitespace-nowrap flex-shrink-0">
                                    ${badgeConfig.text}
                                </span>
                            </div>
                            <p class="text-[10px] sm:text-[11px] text-gray-300 leading-relaxed mb-2 line-clamp-1">
                                ${tool.description}
                            </p>
                        </div>
                        <div class="mt-2">
                            <button
                                class="w-full btn-primary text-[10px] sm:text-xs py-1.5 sm:py-2 rounded-lg font-semibold flex items-center justify-center gap-1.5"
                                data-open-tool="${tool.id}"
                            >
                                <span class="truncate">${tool.cta}</span>
                                <i class="fas fa-arrow-left text-[9px] opacity-80 flex-shrink-0"></i>
                            </button>
                        </div>
                    `;

                    grid.appendChild(card);
                    
                    // إضافة event listener مباشرة للزر بعد إضافته للـ DOM
                    const button = card.querySelector('[data-open-tool]');
                    if (button) {
                        // وضع علامة أن هذا الزر تم التعامل معه
                        button.setAttribute('data-handled', 'true');
                        
                        // إزالة أي event listeners سابقة
                        const newButton = button.cloneNode(true);
                        button.parentNode.replaceChild(newButton, button);
                        
                        // التأكد من أن المسار يبدأ بـ /
                        const toolConfig = RESEARCH_HUB_TOOLS.find(t => t.id === tool.id);
                        let dashboardUrl = toolConfig ? toolConfig.dashboardUrl : null;
                        
                        // التأكد من أن المسار يبدأ بـ /
                        if (dashboardUrl && !dashboardUrl.startsWith('/')) {
                            dashboardUrl = '/' + dashboardUrl;
                        }
                        
                        if (!dashboardUrl) {
                            console.error('No dashboard URL found for tool:', tool.id);
                            dashboardUrl = `/trendlens/dashboard.html?source=${tool.sourceCode || tool.id.toUpperCase()}`;
                        }
                        
                        // إضافة mode=demo&feature=SOURCE_CODE
                        const sourceCode = toolConfig ? (toolConfig.sourceCode || tool.id.toUpperCase()) : tool.id.toUpperCase();
                        const url = new URL(dashboardUrl, window.location.origin);
                        url.searchParams.set('mode', 'demo');
                        url.searchParams.set('feature', sourceCode);
                        const finalUrl = url.pathname + url.search;
                        
                        // إضافة event listener جديد مباشر وقوي
                        newButton.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            
                            console.log('Button clicked for tool:', tool.id, 'Redirecting to:', finalUrl);
                            
                            // توجيه مباشر بدون أي تأخير
                            window.location.href = finalUrl;
                            
                            return false;
                        }, true); // استخدام capture phase للتأكد من التنفيذ قبل أي event listeners أخرى
                    }
                });
            }

            // Tabs
            function initResearchHubTabs() {
                const buttons = document.querySelectorAll('.rh-tab-btn');
                buttons.forEach(btn => {
                    btn.addEventListener('click', () => {
                        const cluster = btn.getAttribute('data-cluster');
                        buttons.forEach(b => {
                            b.classList.remove('border-yellow-500/70', 'bg-yellow-500/15', 'text-yellow-300');
                            b.classList.add('border-white/10', 'text-gray-300');
                        });
                        btn.classList.remove('border-white/10', 'text-gray-300');
                        btn.classList.add('border-yellow-500/70', 'bg-yellow-500/15', 'text-yellow-300');
                        renderResearchHubTools(cluster);
                    });
                });
            }

            // Snapshot حقيقي (أول خطوة للـ REAL DATA)
            function fetchResearchHubSnapshot() {
                const statusEl = document.getElementById('researchHubSnapshotStatus');
                const toolsEl = document.getElementById('snapshotToolsCount');
                const sourcesEl = document.getElementById('snapshotSourcesCount');
                const signalsEl = document.getElementById('snapshotSignalsCount');
                if (!statusEl || !toolsEl || !sourcesEl || !signalsEl) return;

                statusEl.textContent = 'جاري التحميل…';
                statusEl.classList.remove('text-red-400');
                statusEl.classList.add('text-emerald-400');

                fetch(RESEARCH_HUB_API_BASE + '/research-hub/summary')
                    .then(resp => resp.json())
                    .then(data => {
                        // توقع شكل الرد من الباكند:
                        // {
                        //   ok: true,
                        //   tools_active: 8,
                        //   sources_count: 5,
                        //   signals_24h: 1247
                        // }
                        if (!data || data.ok === false) {
                            statusEl.textContent = 'تعذر جلب الملخص';
                            statusEl.classList.remove('text-emerald-400');
                            statusEl.classList.add('text-red-400', 'text-[11px]');
                            return;
                        }

                        toolsEl.textContent = data.tools_active ?? '0';
                        sourcesEl.textContent = data.sources_count ?? '0';
                        signalsEl.textContent = data.signals_24h ?? '0';
                        statusEl.textContent = 'محدّث الآن';
                        statusEl.classList.remove('text-red-400');
                        statusEl.classList.add('text-emerald-400');
                    })
                    .catch(() => {
                        statusEl.textContent = 'تعذر جلب الملخص';
                        statusEl.classList.remove('text-emerald-400');
                        statusEl.classList.add('text-red-400');
                    });
            }

            // توجيه ضغط الزر (فتح الأداة) - للتوافق مع الكود القديم (fallback فقط)
            function initResearchHubActions() {
                // استخدام event delegation مع التحقق من أن الزر لم يتم التعامل معه مسبقاً
                document.addEventListener('click', (e) => {
                    // التحقق من أن الحدث لم يتم إيقافه مسبقاً
                    if (e.defaultPrevented) {
                        return;
                    }
                    
                    const openBtn = e.target.closest('[data-open-tool]');
                    const previewBtn = e.target.closest('[data-preview-tool]');

                    // زر "تفاصيل" → يوجه للصفحة التفصيلية (expandUrl) أو Overlay
                    if (previewBtn) {
                        const toolId = previewBtn.getAttribute('data-preview-tool');
                        if (toolId) {
                            e.preventDefault();
                            e.stopPropagation();
                            openResearchHubTool(toolId);
                        }
                        return;
                    }

                    // زر "فتح الأداة" → يروح للداشبورد مع باراميتر يحدد المصدر
                    // هذا يعمل كـ fallback فقط إذا لم يتم التعامل مع الحدث في event listener المباشر
                    if (openBtn && !openBtn.hasAttribute('data-handled')) {
                        const toolId = openBtn.getAttribute('data-open-tool');
                        if (toolId) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            openResearchHubTool(toolId);
                        }
                    }
                }, false); // استخدام bubble phase - بعد capture phase
            }

            // تهيئة الـ Research Hub عند تحميل الصفحة
            window.addEventListener('DOMContentLoaded', () => {
                // التأكد من وجود العناصر قبل التهيئة
                if (document.getElementById('researchHubToolsGrid')) {
                    renderResearchHubTools('all');
                    initResearchHubTabs();
                    initResearchHubActions();
                    fetchResearchHubSnapshot();
                }
            });
        </script>

        <!-- TikTok Trends Overlay Script -->
        <script>
            (function () {
                // تأمين النصوص
                function rhSafe(value) {
                    if (value === null || value === undefined) return '';
                    return String(value)
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;');
                }

                // تنسيق أرقام (مشاهدات/لايكات) بشكل مختصر
                function rhShortNumber(num) {
                    var n = Number(num) || 0;
                    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
                    if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
                    return n.toString();
                }

                // توحيد شكل الداتا القادمة من API
                function normalizeTiktokItems(data) {
                    if (!data) return [];
                    if (Array.isArray(data)) return data;
                    if (Array.isArray(data.items)) return data.items;
                    if (Array.isArray(data.videos)) return data.videos;
                    if (Array.isArray(data.results)) return data.results;
                    return [];
                }

                function buildTiktokCard(item, options) {
                    options = options || {};
                    var compact = !!options.compact; // true لشريط أعلى 5

                    var videoId =
                        item.video_id || item.id || item.tiktok_id || null;

                    var videoUrl =
                        item.video_url ||
                        item.url ||
                        (videoId ? 'https://www.tiktok.com/@_/video/' + encodeURIComponent(videoId) : null);

                    var title = rhSafe(
                        item.title ||
                        item.caption ||
                        item.description ||
                        'فيديو بدون عنوان'
                    );

                    var creator = rhSafe(
                        item.creator ||
                        item.author ||
                        item.username ||
                        ''
                    );

                    var views =
                        item.view_count ??
                        item.views ??
                        item.play_count ??
                        null;

                    var likes =
                        item.like_count ??
                        item.likes ??
                        null;

                    var trendScore =
                        item.trend_score ??
                        item.score ??
                        item.relevance_score ??
                        null;

                    var spark =
                        item.sparkline ||
                        item.view_spark ||
                        item.trend_curve ||
                        item.interest_over_time ||
                        item.spark ||
                        [];

                    if (!Array.isArray(spark)) spark = [];

                    var thumb =
                        item.thumbnail_url ||
                        item.thumbnail ||
                        item.cover ||
                        null;

                    // الكارت الرئيسي - تصميم جديد مثل dashboard-card
                    var card = document.createElement('article');
                    card.className = 'dashboard-card';
                    card.style.cssText = 'min-height: auto;';
                    
                    // استخدام نفس البيانات من normalizeVideoItems
                    var videoId = item.video_id || item.id || item.tiktok_id || null;
                    var videoUrl = item.video_url || item.url || (videoId ? 'https://www.tiktok.com/@_/video/' + encodeURIComponent(videoId) : null);
                    var title = item.title || item.caption || item.description || 'فيديو بدون عنوان';
                    var creator = item.creator || item.author || item.username || item.channel || '';
                    var views = item.view_count ?? item.views ?? item.play_count ?? null;
                    var likes = item.like_count ?? item.likes ?? null;
                    var trendScore = item.trend_score ?? item.score ?? item.relevance_score ?? null;

                    // تصميم جديد مثل dashboard-card
                    var chartId = 'videoChart_' + (videoId || Math.random().toString(36).substr(2, 9));
                    card.innerHTML =
                        '<div class="dashboard-card-header" style="padding-bottom: 0.5rem;">' +
                        '<div class="flex items-center gap-2">' +
                        '<i class="fab fa-tiktok text-primary"></i>' +
                        '<h4 class="dashboard-card-title text-sm line-clamp-1" style="margin: 0;">' +
                        title +
                        '</h4>' +
                        '</div>' +
                        (creator ? '<p class="text-xs mt-1" style="color: var(--text-muted);">@' + creator + '</p>' : '') +
                        '</div>' +
                        '<div class="flex items-center justify-between gap-2 mb-3 text-xs">' +
                        (views !== null
                            ? '<div class="flex items-center gap-1" style="color: var(--text-main);">' +
                              '<i class="fas fa-play text-primary"></i>' +
                              '<span>' + rhShortNumber(views) + '</span>' +
                              '</div>'
                            : '') +
                        (likes !== null
                            ? '<div class="flex items-center gap-1" style="color: var(--text-main);">' +
                              '<i class="fas fa-heart text-pink-400"></i>' +
                              '<span>' + rhShortNumber(likes) + '</span>' +
                              '</div>'
                            : '') +
                        (trendScore !== null
                            ? '<div class="flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">' +
                              '<i class="fas fa-bolt text-[10px]"></i>' +
                              '<span class="text-[10px] font-semibold">' + rhSafe(trendScore) + '</span>' +
                              '</div>'
                            : '') +
                        '</div>' +
                        '<div class="relative" style="min-height: 80px; margin-bottom: 0.5rem;">' +
                        '<canvas id="' + chartId + '" class="dashboard-chart" style="min-height: 80px; max-height: 80px;"></canvas>' +
                        '</div>' +
                        (videoUrl
                            ? '<a href="' + videoUrl + '" target="_blank" rel="noopener" ' +
                              'class="block text-center text-xs py-2 rounded-lg border border-primary/40 text-primary hover:bg-primary/10 transition-colors">' +
                              '<i class="fab fa-tiktok mr-1"></i>فتح على TikTok' +
                              '</a>'
                            : '');

                    return card;
                }

                function openTiktokTrendsOverlay() {
                    var overlay = document.getElementById('tiktokTrendsOverlay');
                    var statusEl = document.getElementById('tiktokTrendsStatus');
                    var topStrip = document.getElementById('tiktokTopStrip');
                    var grid = document.getElementById('tiktokTrendsGrid');

                    if (!overlay || !statusEl || !topStrip || !grid) return;

                    overlay.classList.remove('hidden');
                    overlay.classList.add('flex');

                    statusEl.textContent = 'جاري تحميل بيانات TikTok…';
                    statusEl.classList.remove('text-red-400', 'text-emerald-400', 'text-yellow-400');
                    statusEl.classList.add('text-gray-400');

                    topStrip.innerHTML = '';
                    grid.innerHTML = '';

                    var tkTool = (typeof RESEARCH_HUB_TOOLS !== 'undefined')
                        ? RESEARCH_HUB_TOOLS.find(function (t) { return t.id === 'tiktok_trends'; })
                        : null;

                    if (!tkTool || !tkTool.endpoint) {
                        statusEl.textContent = 'إعدادات إشارات TikTok غير موجودة.';
                        statusEl.classList.remove('text-gray-400');
                        statusEl.classList.add('text-red-400');
                        return;
                    }

                    fetch(tkTool.endpoint, { credentials: 'include' })
                        .then(function (resp) { return resp.json(); })
                        .then(function (data) {
                            var items = normalizeTiktokItems(data);

                            if (!items.length) {
                                statusEl.textContent = 'لا توجد إشارات جاهزة من TikTok حالياً.';
                                statusEl.classList.remove('text-gray-400');
                                statusEl.classList.add('text-yellow-400');
                                return;
                            }

                            statusEl.textContent = 'محدّث الآن • عدد المقاطع: ' + items.length;
                            statusEl.classList.remove('text-gray-400', 'text-red-400');
                            statusEl.classList.add('text-emerald-400');

                            // أعلى 5 في الشريط العلوي
                            items.slice(0, 5).forEach(function (item) {
                                var card = buildTiktokCard(item, { compact: true });
                                topStrip.appendChild(card);
                            });

                            // باقي الفيديوهات كشبكة (مثلاً أول 12)
                            items.slice(0, 12).forEach(function (item) {
                                var card = buildTiktokCard(item, { compact: false });
                                grid.appendChild(card);
                            });
                        })
                        .catch(function (err) {
                            console.warn('[TikTok Feed] Error loading data:', err);
                            // محاولة عرض آخر بيانات محفوظة أو placeholder رايق
                            statusEl.textContent = 'لا توجد بيانات TikTok جاهزة حالياً. جاري التحديث...';
                            statusEl.classList.remove('text-gray-400', 'text-emerald-400');
                            statusEl.classList.add('text-yellow-400');
                            
                            // إخفاء المحتوى أو عرض رسالة لطيفة
                            topStrip.innerHTML = '<div class="text-center py-4 text-gray-400 text-xs">جاري تحديث بيانات TikTok...</div>';
                            grid.innerHTML = '<div class="text-center py-8 text-gray-400 text-sm">سيتم تحديث البيانات قريباً</div>';
                        });
                }

                function closeTiktokTrendsOverlay() {
                    var overlay = document.getElementById('tiktokTrendsOverlay');
                    if (!overlay) return;
                    overlay.classList.add('hidden');
                    overlay.classList.remove('flex');
                }

                // ربط زر "تفاصيل" الخاص بـ TikTok
                document.addEventListener('DOMContentLoaded', function () {
                    document.addEventListener('click', function (e) {
                        var previewBtn = e.target.closest(
                            '[data-preview-tool="tiktok_trends"]'
                        );
                        if (!previewBtn) return;

                        e.preventDefault();
                        openTiktokTrendsOverlay();
                    });
                });

                // إتاحتها لـ HTML
                window.openTiktokTrendsOverlay = openTiktokTrendsOverlay;
                window.closeTiktokTrendsOverlay = closeTiktokTrendsOverlay;
            })();
        </script>

        <!-- Video Signals Script (Top 5 per platform) -->
        <script>
            (function () {
                // إعدادات المنصات
                var VIDEO_SIGNALS_SOURCES = {
                    tiktok: {
                        id: 'tiktok',
                        label: 'TikTok',
                        endpoint: (window.API_BASE || '/api') + '/research/tiktok-trends/snapshot',
                        dashboardUrl: '/trendlens/dashboard.html?source=TIKTOK_SUGGEST'
                    },
                    pinterest: {
                        id: 'pinterest',
                        label: 'Pinterest',
                        endpoint: (window.API_BASE || '/api') + '/research/pinterest-trends/snapshot',
                        dashboardUrl: '/trendlens/dashboard.html?source=PINTEREST_TRENDS'
                    }
                };

                // تأمين النصوص
                function vsSafe(value) {
                    if (value === null || value === undefined) return '';
                    return String(value)
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;');
                }

                // تبسيط الأرقام (مشاهدات/لايكات إلخ)
                function vsShortNumber(num) {
                    var n = Number(num) || 0;
                    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
                    if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
                    return n.toString();
                }

                // توحيد شكل الداتا من مختلف الـ APIs
                function normalizeVideoItems(raw) {
                    var data = raw || [];
                    if (Array.isArray(data.items)) data = data.items;
                    if (Array.isArray(data.videos)) data = data.videos;
                    if (Array.isArray(data.results)) data = data.results;
                    if (!Array.isArray(data)) data = [];

                    return data.map(function (item) {
                        var platform =
                            item.platform ||
                            item.source ||
                            (item.is_tiktok ? 'tiktok' : null);

                        var videoId =
                            item.video_id ||
                            item.id ||
                            item.tiktok_id ||
                            null;

                        var url =
                            item.video_url ||
                            item.url ||
                            (platform === 'tiktok' && videoId
                                    ? 'https://www.tiktok.com/@_/video/' + videoId
                                : null);

                        var title = item.title || item.caption || item.description || 'فيديو بدون عنوان';
                        var channel = item.channel_title || item.channel || item.creator || item.author || item.username || '';
                        var views = item.view_count ?? item.views ?? item.play_count ?? null;
                        var likes = item.like_count ?? item.likes ?? item.heart_count ?? null;
                        var revenue = item.revenue ?? item.estimated_revenue ?? null;
                        var trendScore = item.trend_score ?? item.score ?? item.relevance_score ?? null;
                        var thumb = item.thumbnail_url || item.thumbnail || item.cover || null;
                        var spark = item.sparkline || item.view_spark || item.trend_curve || item.interest_over_time || item.spark || [];
                        if (!Array.isArray(spark)) spark = [];

                        return {
                            raw: item,
                            platform: platform,
                            videoId: videoId,
                            url: url,
                            title: title,
                            channel: channel,
                            views: views,
                            likes: likes,
                            revenue: revenue,
                            trendScore: trendScore,
                            thumbnail: thumb,
                            spark: spark
                        };
                    });
                }

                function renderVideoSignals(sourceKey, rawData) {
                    var container = document.getElementById('videoSignalsBody');
                    var statusEl = document.getElementById('videoSignalsStatus');
                    var statusTextEl = document.getElementById('videoSignalsStatusText');
                    if (!container) return;

                    var items = normalizeVideoItems(rawData);
                    if (!items.length) {
                        container.innerHTML = '<div class="text-center py-8 col-span-full" style="color: var(--text-muted);">لا توجد بيانات متاحة حالياً لهذه المنصة.</div>';
                        if (statusTextEl) statusTextEl.textContent = 'لا توجد بيانات متاحة';
                        return;
                    }

                    // ترتيب: بالأولوية trendScore ثم views
                    items.sort(function (a, b) {
                        var sA = a.trendScore ?? -1;
                        var sB = b.trendScore ?? -1;
                        if (sA !== sB) return sB - sA;
                        var vA = a.views ?? -1;
                        var vB = b.views ?? -1;
                        return vB - vA;
                    });

                    var top5 = items.slice(0, 5);
                    container.innerHTML = '';

                    top5.forEach(function (item, index) {
                        // استخدام buildTiktokCard الجديد
                        var card = buildTiktokCard(item, { compact: false });
                        container.appendChild(card);
                        
                        // رسم الشارت بعد إضافة الكارت
                        setTimeout(function() {
                            var chartId = 'videoChart_' + (item.video_id || item.id || item.tiktok_id || index);
                            var chartCanvas = document.getElementById(chartId);
                            if (chartCanvas && typeof Chart !== 'undefined') {
                        var spark = item.spark || item.series || item.sparkline_series || [];
                        var videoId = item.video_id || item.id || item.tiktok_id;
                        
                                // محاولة جلب البيانات الحقيقية
                        if ((!spark || !spark.length) && videoId) {
                            var timeseriesUrl = sourceKey === 'tiktok' 
                                ? (window.API_BASE || '/api') + '/tiktok/videos/timeseries?tiktok_id=' + encodeURIComponent(videoId) + '&days=7'
                                : null;
                            
                                    if (timeseriesUrl) {
                            fetch(timeseriesUrl, { credentials: 'include', cache: 'no-store' })
                                .then(function(res) { return res.json(); })
                                .then(function(tsData) {
                                    if (tsData && tsData.data && Array.isArray(tsData.data) && tsData.data.length > 0) {
                                        var realSpark = tsData.data.map(function(record) {
                                            return record.views || record.avg_views || record.total_views || record.likes || record.avg_likes || 0;
                                        });
                                                    renderVideoChart(chartCanvas, realSpark, sourceKey);
                                    } else {
                                                    renderVideoChart(chartCanvas, [10, 20, 15, 30, 25, 40, 35], sourceKey);
                                    }
                                })
                                .catch(function(err) {
                                    console.warn('[Video Signals] Could not fetch timeseries:', err);
                                                renderVideoChart(chartCanvas, [10, 20, 15, 30, 25, 40, 35], sourceKey);
                                });
                        } else {
                                        renderVideoChart(chartCanvas, spark.length > 0 ? spark : [10, 20, 15, 30, 25, 40, 35], sourceKey);
                                    }
                                } else {
                                    renderVideoChart(chartCanvas, spark.length > 0 ? spark : [10, 20, 15, 30, 25, 40, 35], sourceKey);
                                }
                            }
                        }, 100);

                        // دالة مساعدة لرسم الشارت باستخدام Chart.js
                        function renderVideoChart(canvas, data, source) {
                            if (!canvas || !data || !data.length) return;
                            
                            var numericData = data.map(function (v) { return Number(v) || 0; }).filter(function (v) { return v >= 0; });
                            if (!numericData.length) return;
                            
                            // تدمير الشارت السابق إن وجد
                            if (canvas.chartInstance) {
                                canvas.chartInstance.destroy();
                            }
                            
                            var chartColor = source === 'tiktok' ? '#ec4899' : '#0ea5e9';
                            
                            canvas.chartInstance = new Chart(canvas, {
                                type: 'line',
                                data: {
                                    labels: numericData.map(function(_, i) { return ''; }),
                                    datasets: [{
                                        data: numericData,
                                        borderColor: chartColor,
                                        backgroundColor: chartColor + '20',
                                        borderWidth: 2,
                                        fill: true,
                                        tension: 0.4,
                                        pointRadius: 0,
                                        pointHoverRadius: 3
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    plugins: {
                                        legend: { display: false },
                                        tooltip: { enabled: false }
                                    },
                                    scales: {
                                        x: { display: false },
                                        y: { display: false }
                                    },
                                    animation: { duration: 0 }
                                }
                            });
                        }
                    });

                    if (statusTextEl) {
                        statusTextEl.textContent = 'تم تحميل أعلى 5 فيديوات من ' + (sourceKey === 'tiktok' ? 'TikTok' : '') + ' الآن.';
                    }
                }

                function loadVideoSignals(sourceKey) {
                    var src = VIDEO_SIGNALS_SOURCES[sourceKey];
                    var statusEl = document.getElementById('videoSignalsStatus');
                    var container = document.getElementById('videoSignalsBody');
                    var moreBtn = document.getElementById('videoSignalsMoreBtn');
                    if (!src || !statusEl || !container) return;

                    statusEl.textContent = 'جاري تحميل بيانات ' + src.label + '…';
                    statusEl.classList.remove('text-emerald-400', 'text-yellow-400', 'text-red-400');
                    statusEl.classList.add('text-gray-400');
                    container.innerHTML = '<div class="px-4 py-4 text-xs text-gray-400">…</div>';

                    if (moreBtn) {
                        moreBtn.onclick = function () {
                            if (src.dashboardUrl) {
                                window.location.href = src.dashboardUrl;
                            }
                        };
                    }

                    fetch(src.endpoint, { credentials: 'include' })
                        .then(function (resp) { return resp.json(); })
                        .then(function (data) {
                            renderVideoSignals(sourceKey, data);
                        })
                        .catch(function () {
                            container.innerHTML = '';
                            statusEl.textContent = 'تعذر جلب بيانات ' + src.label + ' حالياً.';
                            statusEl.classList.remove('text-gray-400', 'text-emerald-400');
                            statusEl.classList.add('text-red-400');
                        });
                }

                function setActiveTab(sourceKey) {
                    var tabs = document.querySelectorAll('#video-signals .vs-tab');
                    tabs.forEach(function (btn) {
                        var isActive = btn.getAttribute('data-source') === sourceKey;
                        if (isActive) {
                            btn.classList.add('bg-white/10', 'text-white', 'border-white/10');
                            btn.classList.remove('bg-transparent', 'text-gray-300');
                        } else {
                            btn.classList.remove('bg-white/10', 'text-white');
                            btn.classList.add('bg-transparent', 'text-gray-300');
                        }
                    });
                }

                document.addEventListener('DOMContentLoaded', function () {
                    var tabs = document.querySelectorAll('#video-signals .vs-tab');
                    tabs.forEach(function (btn) {
                        btn.addEventListener('click', function () {
                            var src = btn.getAttribute('data-source');
                            setActiveTab(src);
                            loadVideoSignals(src);
                        });
                    });

                    // البداية: TikTok
                    setActiveTab('tiktok');
                    loadVideoSignals('tiktok');
                });
            })();
        </script>

        <!-- ===== NEW DASHBOARD JAVASCRIPT ===== -->
        <script>
            // Dashboard Tab Switching
            function switchDashboardTab(tab) {
                // Hide all tabs
                document.querySelectorAll('.dashboard-tab-content').forEach(el => {
                    el.style.display = 'none';
                });

                // Remove active class from all nav items
                document.querySelectorAll('.dashboard-nav-item').forEach(el => {
                    el.classList.remove('active');
                });

                // Show selected tab
                const tabElement = document.getElementById('dashboardTab' + tab.charAt(0).toUpperCase() + tab.slice(1));
                if (tabElement) {
                    tabElement.style.display = 'block';
                }

                // Add active class to clicked nav item
                if (event && event.target) {
                    const navItem = event.target.closest('.dashboard-nav-item');
                    if (navItem) navItem.classList.add('active');
                } else {
                    // Fallback: find nav item by tab name
                    document.querySelectorAll('.dashboard-nav-item').forEach(item => {
                        if (item.getAttribute('onclick') && item.getAttribute('onclick').includes(tab)) {
                            item.classList.add('active');
                        }
                    });
                }

                // Load data for the tab
                if (tab === 'exploding' || tab === 'dashboard') {
                    loadDashboardExplodingProducts();
                    // Load charts for main dashboard
                    setTimeout(() => {
                        loadAllCharts();
                    }, 300);
                } else if (tab === 'ebooks') {
                    loadDashboardEbooks();
                } else if (tab === 'analytics') {
                    loadDashboardAnalytics();
                    // Load charts for analytics tab
                    setTimeout(() => {
                        loadAllCharts();
                    }, 300);
                } else if (tab === 'social') {
                    // Social audit tab - no additional loading needed
                }
            }

            // Load Exploding Products for Dashboard
            async function loadDashboardExplodingProducts() {
                const containers = ['dashboardExplodingProducts', 'dashboardExplodingProductsMain'];
                
                containers.forEach(containerId => {
                    const container = document.getElementById(containerId);
                    if (!container) return;

                    // Show loading state
                    container.innerHTML = `
                        <div class="text-center py-8 col-span-full" style="color: var(--text-muted);">
                            <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                            <div data-i18n="generic.loading">جاري التحميل...</div>
                        </div>
                    `;

                    // Dummy data
                    const dummyProducts = [
                        { name: 'Gaming Chair', growth: '+82%', image: 'https://picsum.photos/seed/gaming-chair/200/200', key: 'product_gaming_chair' },
                        { name: 'Smart Watch', growth: '+65%', image: 'https://picsum.photos/seed/smartwatch/200/200', key: 'product_smart_watch' },
                        { name: 'Wireless Earbuds', growth: '+58%', image: 'https://picsum.photos/seed/earbuds/200/200', key: 'product_wireless_earbuds' },
                        { name: 'Laptop Stand', growth: '+45%', image: 'https://picsum.photos/seed/laptopstand/200/200', key: 'product_laptop_stand' },
                        { name: 'Mechanical Keyboard', growth: '+38%', image: 'https://picsum.photos/seed/keyboard/200/200', key: 'product_mechanical_keyboard' },
                        { name: 'USB-C Hub', growth: '+32%', image: 'https://picsum.photos/seed/usbhub/200/200', key: 'product_usb_c_hub' }
                    ];

                    // Load dummy data after a short delay
                    setTimeout(() => {
                        container.innerHTML = dummyProducts.map(product => {
                            // ترجمة اسم المنتج
                            const productKey = product.key || `product_${product.name.toLowerCase().replace(/\s+/g, '_')}`;
                            const translatedName = window.t ? window.t(productKey) : product.name;
                            return `
                            <div class="exploding-product-card">
                                <img src="${product.image}" alt="${translatedName}" class="exploding-product-card-image" onerror="this.src='https://picsum.photos/200/200'">
                                <div class="exploding-product-card-title">${translatedName}</div>
                                <div class="exploding-product-card-growth">${product.growth}</div>
                            </div>
                        `;
                        }).join('');
                    }, 500);

                    // Try to load real data (async)
                    (async function() {
                        try {
                            const response = await fetch(`${API_BASE}/trends/explosions?limit=6&period=last_7d`);
                            if (response.ok) {
                                const data = await response.json();
                                if (data.items && data.items.length > 0) {
                                    container.innerHTML = data.items.slice(0, 6).map(product => {
                                        const rawName = product.name || 'Unknown';
                                        // استخدام دالة الترجمة إذا كانت متاحة
                                        const translateFn = window.translateProductName;
                                        const name = translateFn && typeof translateFn === 'function' 
                                            ? translateFn(rawName) 
                                            : rawName;
                                        const growth = product.growth || product.search_growth || '+0%';
                                        const image = product.image || `https://picsum.photos/seed/${encodeURIComponent(name)}/200/200`;
                                        return `
                                            <div class="exploding-product-card">
                                                <img src="${image}" alt="${name}" class="exploding-product-card-image" onerror="this.src='https://picsum.photos/200/200'">
                                                <div class="exploding-product-card-title">${escapeHtml(name)}</div>
                                                <div class="exploding-product-card-growth">${escapeHtml(String(growth))}</div>
                                            </div>
                                        `;
                                    }).join('');
                                }
                            }
                        } catch (error) {
                            console.error('Error loading exploding products:', error);
                        }
                    })();
                });
            }

            // Load E-books for Dashboard
            function loadDashboardEbooks() {
                const containers = ['dashboardEbooksGrid', 'dashboardEbooksGridMain'];
                
                // Dummy data
                const dummyBooks = [
                    { title: 'E-commerce Mastery', cover: 'https://picsum.photos/seed/book1/180/250', key: 'ebook_ecommerce_mastery' },
                    { title: 'Social Media Marketing', cover: 'https://picsum.photos/seed/book2/180/250', key: 'ebook_social_media_marketing' },
                    { title: 'Dropshipping Guide', cover: 'https://picsum.photos/seed/book3/180/250', key: 'ebook_dropshipping_guide' },
                    { title: 'Amazon FBA Secrets', cover: 'https://picsum.photos/seed/book4/180/250', key: 'ebook_amazon_fba_secrets' },
                    { title: 'Digital Marketing', cover: 'https://picsum.photos/seed/book5/180/250', key: 'ebook_digital_marketing' },
                    { title: 'Business Growth', cover: 'https://picsum.photos/seed/book6/180/250', key: 'ebook_business_growth' }
                ];

                containers.forEach(containerId => {
                    const container = document.getElementById(containerId);
                    if (!container) return;

                    // Show loading state
                    container.innerHTML = `
                        <div class="text-center py-8 col-span-full" style="color: var(--text-muted);">
                            <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                            <div data-i18n="generic.loading">جاري التحميل...</div>
                        </div>
                    `;

                    // Load dummy data after a short delay
                    setTimeout(() => {
                        container.innerHTML = dummyBooks.map(book => {
                            // ترجمة عنوان الكتاب
                            const bookKey = book.key || `ebook_${book.title.toLowerCase().replace(/\s+/g, '_')}`;
                            const translatedTitle = window.t ? window.t(bookKey) : book.title;
                            const downloadText = window.t ? window.t('download') : 'تحميل';
                            return `
                            <div class="ebook-card">
                                <img src="${book.cover}" alt="${translatedTitle}" class="ebook-card-cover" onerror="this.src='https://picsum.photos/180/250'">
                                <div class="ebook-card-body">
                                    <div class="ebook-card-title">${translatedTitle}</div>
                                    <button class="ebook-card-download" onclick="window.location.href='/trendlens/books.html'">${downloadText}</button>
                                </div>
                            </div>
                        `;
                        }).join('');
                    }, 500);
                });

                // Try to load real data from books API
                fetch('/trendlens/api/books/list?limit=6')
                    .then(res => {
                        if (!res.ok) throw new Error(`HTTP ${res.status}`);
                        return res.json();
                    })
                    .then(data => {
                        console.log('Books data received:', data);
                        if (data && Array.isArray(data) && data.length > 0) {
                            containers.forEach(containerId => {
                                const container = document.getElementById(containerId);
                                if (!container) return;
                                container.innerHTML = data.slice(0, 6).map(book => {
                                    // API يرجع title مباشرة كـ string، ليس object
                                    const title = typeof book.title === 'string' 
                                        ? book.title 
                                        : (book.title?.ar || book.title?.en || book.title || 'غير معروف');
                                    // API يرجع cover_image_url، ليس cover
                                    const cover = book.cover_image_url || book.cover || `https://picsum.photos/seed/${encodeURIComponent(title)}/180/250`;
                                    const downloadText = window.t ? window.t('download') : (window.currentLang === 'ar' ? 'تحميل' : 'Download');
                                    return `
                                        <div class="ebook-card">
                                            <img src="${cover}" alt="${title}" class="ebook-card-cover" onerror="this.src='https://picsum.photos/180/250'">
                                            <div class="ebook-card-body">
                                                <div class="ebook-card-title">${escapeHtml(title)}</div>
                                                <button class="ebook-card-download" onclick="window.location.href='/trendlens/books.html#${book.id || ''}'">${downloadText}</button>
                                            </div>
                                        </div>
                                    `;
                                }).join('');
                            });
                        }
                    })
                    .catch(err => {
                        console.error('Error loading books:', err);
                    });
            }

            // Load Analytics Charts
            function loadDashboardAnalytics() {
                loadAllCharts();
            }
            
            // Load all charts (for main dashboard and analytics tab)
            function loadAllCharts() {
                if (typeof Chart === 'undefined') {
                    console.warn('Chart.js not loaded yet, retrying...');
                    setTimeout(loadAllCharts, 500);
                    return;
                }
                
                // Revenue Chart (Main Dashboard)
                const revenueCtxMain = document.getElementById('revenueChartMain');
                if (revenueCtxMain) {
                    if (window.revenueChartMainInstance) {
                        window.revenueChartMainInstance.destroy();
                    }
                    window.revenueChartMainInstance = new Chart(revenueCtxMain, {
                        type: 'line',
                        data: {
                            labels: ['12 Aug', '13 Aug', '14 Aug', '15 Aug', '16 Aug', '17 Aug', '18 Aug', '19 Aug'],
                            datasets: [{
                                label: 'Revenue',
                                data: [12000, 13000, 11000, 14000, 14521, 13500, 15000, 14200],
                                borderColor: '#feba04',
                                backgroundColor: 'rgba(254, 186, 4, 0.1)',
                                tension: 0.4,
                                fill: true
                            }, {
                                label: 'Orders',
                                data: [8000, 8500, 7800, 9200, 9500, 8800, 10000, 9600],
                                borderColor: '#ff6b35',
                                borderDash: [5, 5],
                                backgroundColor: 'rgba(255, 107, 53, 0.05)',
                                tension: 0.4,
                                fill: true
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.5,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'top',
                                    labels: {
                                        color: '#f9fafb',
                                        padding: 10,
                                        font: {
                                            size: 12
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                x: {
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                }
                            }
                        }
                    });
                }
                
                // Revenue Chart (Analytics Tab)
                const revenueCtx = document.getElementById('revenueChart');
                if (revenueCtx && !revenueCtxMain) {
                    if (window.revenueChartInstance) {
                        window.revenueChartInstance.destroy();
                    }
                    window.revenueChartInstance = new Chart(revenueCtx, {
                        type: 'line',
                        data: {
                            labels: ['12 Aug', '13 Aug', '14 Aug', '15 Aug', '16 Aug', '17 Aug', '18 Aug', '19 Aug'],
                            datasets: [{
                                label: 'Revenue',
                                data: [12000, 13000, 11000, 14000, 14521, 13500, 15000, 14200],
                                borderColor: '#feba04',
                                backgroundColor: 'rgba(254, 186, 4, 0.1)',
                                tension: 0.4,
                                fill: true
                            }, {
                                label: 'Orders',
                                data: [8000, 8500, 7800, 9200, 9500, 8800, 10000, 9600],
                                borderColor: '#ff6b35',
                                borderDash: [5, 5],
                                backgroundColor: 'rgba(255, 107, 53, 0.05)',
                                tension: 0.4,
                                fill: true
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.5,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'top',
                                    labels: {
                                        color: '#f9fafb'
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        color: '#b8c5d1'
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                x: {
                                    ticks: {
                                        color: '#b8c5d1'
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                }
                            }
                        }
                    });
                }

                // Categories Chart (Main Dashboard)
                const categoriesCtxMain = document.getElementById('categoriesChartMain');
                if (categoriesCtxMain) {
                    if (window.categoriesChartMainInstance) {
                        window.categoriesChartMainInstance.destroy();
                    }
                    window.categoriesChartMainInstance = new Chart(categoriesCtxMain, {
                        type: 'doughnut',
                        data: {
                            labels: ['Electronics', 'Fashion', 'Home & Kitchen', 'Beauty'],
                            datasets: [{
                                data: [1200000, 950000, 750000, 500000],
                                backgroundColor: [
                                    '#feba04',
                                    '#ff6b35',
                                    '#ffb347',
                                    '#ffd700'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.5,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        color: '#f9fafb',
                                        padding: 12,
                                        font: {
                                            size: 11
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
                
                // Categories Chart (Analytics Tab)
                const categoriesCtx = document.getElementById('categoriesChart');
                if (categoriesCtx && !categoriesCtxMain) {
                    if (window.categoriesChartInstance) {
                        window.categoriesChartInstance.destroy();
                    }
                    window.categoriesChartInstance = new Chart(categoriesCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['Electronics', 'Fashion', 'Home & Kitchen', 'Beauty'],
                            datasets: [{
                                data: [1200000, 950000, 750000, 500000],
                                backgroundColor: [
                                    '#feba04',
                                    '#ff6b35',
                                    '#ffb347',
                                    '#ffd700'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.5,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        color: '#f9fafb',
                                        padding: 15
                                    }
                                }
                            }
                        }
                    });
                }
                
                // Target Gauge Chart - Perfect Circle
                const targetGaugeCtx = document.getElementById('targetGaugeChart');
                if (targetGaugeCtx) {
                    if (window.targetGaugeInstance) {
                        window.targetGaugeInstance.destroy();
                    }
                    
                    // Force canvas to be square
                    const isMobile = window.innerWidth <= 768;
                    const chartSize = isMobile ? 120 : 140;
                    targetGaugeCtx.width = chartSize;
                    targetGaugeCtx.height = chartSize;
                    targetGaugeCtx.style.width = chartSize + 'px';
                    targetGaugeCtx.style.height = chartSize + 'px';
                    
                    window.targetGaugeInstance = new Chart(targetGaugeCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['Completed', 'Remaining'],
                            datasets: [{
                                data: [85, 15],
                                backgroundColor: [
                                    '#feba04',  // Gold/Orange for completed
                                    'rgba(148, 163, 184, 0.3)'  // Light gray for remaining (works in both themes)
                                ],
                                borderWidth: 0
                            }]
                        },
                        options: {
                            responsive: false,
                            maintainAspectRatio: false,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            cutout: '75%',
                            plugins: {
                                legend: {
                                    display: false
                                },
                                tooltip: {
                                    enabled: false
                                }
                            }
                        }
                    });
                }
                
                // Conversion Rate Chart
                const conversionCtx = document.getElementById('conversionChart');
                if (conversionCtx) {
                    if (window.conversionChartInstance) {
                        window.conversionChartInstance.destroy();
                    }
                    window.conversionChartInstance = new Chart(conversionCtx, {
                        type: 'bar',
                        data: {
                            labels: ['Product Views', 'Add to Cart', 'Checkout', 'Purchases', 'Abandoned'],
                            datasets: [{
                                label: 'Count',
                                data: [25000, 12000, 8500, 6200, 3000],
                                backgroundColor: [
                                    '#feba04',
                                    '#ff6b35',
                                    '#ffb347',
                                    '#10b981',
                                    '#ef4444'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 2,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                x: {
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                }
                            }
                        }
                    });
                }
                
                // Traffic Sources Chart
                const trafficCtx = document.getElementById('trafficChart');
                if (trafficCtx) {
                    if (window.trafficChartInstance) {
                        window.trafficChartInstance.destroy();
                    }
                    window.trafficChartInstance = new Chart(trafficCtx, {
                        type: 'bar',
                        data: {
                            labels: ['Direct', 'Organic', 'Social', 'Referral', 'Email'],
                            datasets: [{
                                label: 'Percentage',
                                data: [40, 30, 15, 10, 5],
                                backgroundColor: [
                                    '#feba04',
                                    '#ff6b35',
                                    '#ffb347',
                                    '#ffd700',
                                    '#f59e0b'
                                ]
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.8,
                            resizeDelay: 0,
                            animation: {
                                duration: 0
                            },
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                x: {
                                    beginAtZero: true,
                                    max: 100,
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                y: {
                                    ticks: {
                                        color: '#b8c5d1',
                                        font: {
                                            size: 11
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                }
                            }
                        }
                    });
                }
            }

            // Perform Social Audit
            async function performSocialAudit(source = '') {
                const inputId = source === 'main' ? 'socialAuditInputMain' : 'socialAuditInput';
                const resultsId = source === 'main' ? 'socialAuditHistoryMain' : 'socialAuditHistory';
                
                const input = document.getElementById(inputId);
                const results = document.getElementById(resultsId);
                
                if (!input || !input.value.trim()) {
                    alert('يرجى إدخال رابط الحساب أو اسم المستخدم');
                    return;
                }

                const account = input.value.trim();
                
                // Show loading
                results.innerHTML = '<p class="text-gray-400 text-center py-4"><i class="fas fa-spinner fa-spin"></i> جاري الفحص...</p>';

                try {
                    const token = localStorage.getItem('authToken') || localStorage.getItem('auth_token');
                    const response = await fetch(`${API_BASE}/user/check-social`, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ account: account })
                    });

                    if (response.ok) {
                        const data = await response.json();
                        // Display results
                        results.innerHTML = `
                            <div class="social-audit-result-item">
                                <div>
                                    <div class="font-semibold text-white">${escapeHtml(account)}</div>
                                    <div class="text-sm text-gray-400">تم الفحص بنجاح</div>
                                </div>
                                <div class="text-primary font-bold">✓</div>
                            </div>
                        `;
                    } else {
                        // Dummy result for demo
                        results.innerHTML = `
                            <div class="social-audit-result-item">
                                <div>
                                    <div class="font-semibold text-white">${escapeHtml(account)}</div>
                                    <div class="text-sm text-gray-400">جودة الحساب: 85% | متابعين: 12.5K</div>
                                </div>
                                <div class="text-primary font-bold">✓</div>
                            </div>
                        `;
                    }
                } catch (error) {
                    console.error('Error performing social audit:', error);
                    // Dummy result for demo
                    results.innerHTML = `
                        <div class="social-audit-result-item">
                            <div>
                                <div class="font-semibold text-white">${escapeHtml(account)}</div>
                                <div class="text-sm text-gray-400">جودة الحساب: 85% | متابعين: 12.5K</div>
                            </div>
                            <div class="text-primary font-bold">✓</div>
                        </div>
                    `;
                }
            }

            // Initialize Dashboard on page load
            document.addEventListener('DOMContentLoaded', function() {
                // Load initial data
                loadDashboardExplodingProducts();
                loadDashboardEbooks();
                
                // Load charts after a short delay to ensure Chart.js is loaded
                setTimeout(() => {
                    loadAllCharts();
                }, 500);
                
                // Show dashboard if URL has ?dashboard=true
                const urlParams = new URLSearchParams(window.location.search);
                if (urlParams.get('dashboard') === 'true') {
                    document.getElementById('newDashboardLayout').style.display = 'flex';
                    // Hide other sections
                    document.querySelector('.intelligence-tabs-container')?.style.setProperty('display', 'none');
                    // Load charts when dashboard is shown
                    setTimeout(() => {
                        loadAllCharts();
                    }, 1000);
                }
            });
            
            // Make loadAllCharts globally available
            window.loadAllCharts = loadAllCharts;

            // Toggle Dashboard View
            function toggleDashboardView() {
                const dashboardLayout = document.getElementById('newDashboardLayout');
                const tabsContainer = document.querySelector('.intelligence-tabs-container');
                const mainContent = document.querySelector('main.container');
                
                if (dashboardLayout.style.display === 'none' || !dashboardLayout.style.display) {
                    // Show new dashboard
                    dashboardLayout.style.display = 'flex';
                    if (tabsContainer) tabsContainer.style.display = 'none';
                    if (mainContent) mainContent.style.display = 'none';
                    
                    // Update URL
                    const url = new URL(window.location);
                    url.searchParams.set('dashboard', 'true');
                    window.history.pushState({}, '', url);
                    
                    // Load data
                    loadDashboardExplodingProducts();
                    loadDashboardEbooks();
                    
                    // Load charts after a delay to ensure DOM is ready
                    setTimeout(() => {
                        loadAllCharts();
                    }, 500);
                } else {
                    // Show old layout
                    dashboardLayout.style.display = 'none';
                    if (tabsContainer) tabsContainer.style.display = 'block';
                    if (mainContent) mainContent.style.display = 'block';
                    
                    // Update URL
                    const url = new URL(window.location);
                    url.searchParams.delete('dashboard');
                    window.history.pushState({}, '', url);
                }
            }

            // Make functions globally available
            window.switchDashboardTab = switchDashboardTab;
            window.performSocialAudit = performSocialAudit;
            window.toggleDashboardView = toggleDashboardView;

            // Switch Main Tab Function
            function switchMainTab(tabName) {
                // Hide all tabs
                document.querySelectorAll('.main-tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // Remove active class from all tab buttons
                document.querySelectorAll('.tab-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // Show selected tab
                const selectedTab = document.getElementById(`mainTab-${tabName}`);
                if (selectedTab) {
                    setTimeout(() => {
                        selectedTab.classList.add('active');
                    }, 50);
                }
                
                // Add active class to selected button
                const selectedBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (selectedBtn) {
                    selectedBtn.classList.add('active');
                }
                
                // Load data for specific tabs
                setTimeout(() => {
                    if (tabName === 'overview') {
                        loadMainCharts();
                        loadTicker();
                    } else if (tabName === 'exploding') {
                        loadMainExplodingProducts();
                    } else if (tabName === 'shipping') {
                        loadMainShipping();
                    } else if (tabName === 'markets') {
                        loadMainMarkets();
                    } else if (tabName === 'ebooks') {
                        loadMainEbooks();
                    } else if (tabName === 'analytics') {
                        loadMainAnalytics();
                    }
                }, 200);
            }

            // Load Main Charts
            function loadMainCharts() {
                setTimeout(() => {
                    // Revenue Chart
                    const revenueCtx = document.getElementById('mainRevenueChart');
                    if (revenueCtx && typeof Chart !== 'undefined') {
                        if (window.mainRevenueChartInstance) {
                            window.mainRevenueChartInstance.destroy();
                        }
                        window.mainRevenueChartInstance = new Chart(revenueCtx, {
                            type: 'line',
                            data: {
                                labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7', 'Day 8'],
                                datasets: [{
                                    label: 'Revenue',
                                    data: [12000, 19000, 15000, 25000, 22000, 30000, 28000, 35000],
                                    borderColor: 'rgb(254, 186, 4)',
                                    backgroundColor: 'rgba(254, 186, 4, 0.1)',
                                    tension: 0.4
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { display: false } },
                                scales: {
                                    y: { beginAtZero: true, ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } },
                                    x: { ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } }
                                }
                            }
                        });
                    }
                    
                    // Categories Chart
                    const categoriesCtx = document.getElementById('mainCategoriesChart');
                    if (categoriesCtx && typeof Chart !== 'undefined') {
                        if (window.mainCategoriesChartInstance) {
                            window.mainCategoriesChartInstance.destroy();
                        }
                        window.mainCategoriesChartInstance = new Chart(categoriesCtx, {
                            type: 'doughnut',
                            data: {
                                labels: ['Electronics', 'Home', 'Fashion', 'Sports'],
                                datasets: [{
                                    data: [30, 25, 20, 15],
                                    backgroundColor: ['rgba(254, 186, 4, 0.8)', 'rgba(34, 197, 94, 0.8)', 'rgba(59, 130, 246, 0.8)', 'rgba(168, 85, 247, 0.8)']
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { position: 'bottom', labels: { color: 'rgba(255, 255, 255, 0.7)' } } }
                            }
                        });
                    }
                    
                    // Target Gauge
                    const targetGaugeCtx = document.getElementById('mainTargetGauge');
                    if (targetGaugeCtx && typeof Chart !== 'undefined') {
                        if (window.mainTargetGaugeInstance) {
                            window.mainTargetGaugeInstance.destroy();
                        }
                        window.mainTargetGaugeInstance = new Chart(targetGaugeCtx, {
                            type: 'doughnut',
                            data: {
                                datasets: [{
                                    data: [85, 15],
                                    backgroundColor: ['rgb(254, 186, 4)', 'rgba(255, 255, 255, 0.1)'],
                                    borderWidth: 0
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                cutout: '75%',
                                plugins: { legend: { display: false } }
                            }
                        });
                    }
                }, 300);
            }

            // Load Main Exploding Products
            async function loadMainExplodingProducts() {
                const container = document.getElementById('mainExplodingProducts');
                if (!container) return;
                
                try {
                    const response = await fetch(`${API_BASE}/trends/explosions?limit=6&period=last_7d`);
                    if (response.ok) {
                        const data = await response.json();
                        if (data.items && data.items.length > 0) {
                            container.innerHTML = data.items.slice(0, 6).map(product => {
                                const rawName = product.name || 'Unknown';
                                const translateFn = window.translateProductName;
                                const name = translateFn && typeof translateFn === 'function' ? translateFn(rawName) : rawName;
                                const growth = product.growth || product.search_growth || '+0%';
                                const image = product.image || `https://picsum.photos/seed/${encodeURIComponent(name)}/200/200`;
                                return `
                                    <div class="glass-effect rounded-xl p-4 hover:scale-105 transition-transform duration-300">
                                        <img src="${image}" alt="${name}" class="w-full h-32 object-cover rounded-lg mb-3" onerror="this.src='https://picsum.photos/200/200'">
                                        <h3 class="font-bold text-white mb-2">${escapeHtml(name)}</h3>
                                        <div class="text-lg font-bold text-primary">${escapeHtml(String(growth))}</div>
                                    </div>
                                `;
                            }).join('');
                        }
                    }
                } catch (error) {
                    console.error('Error loading exploding products:', error);
                }
            }

            // Load Main Shipping
            async function loadMainShipping() {
                try {
                    const response = await fetch('/trendlens/api/shipping/pulse');
                    const data = await response.json();
                    
                    if (data.ok) {
                        const portsList = document.getElementById('mainPortsList');
                        const vesselsList = document.getElementById('mainVesselsList');
                        const ratesList = document.getElementById('mainRatesList');
                        
                        if (portsList && data.ports) {
                            portsList.innerHTML = data.ports.slice(0, 5).map(port => `
                                <div class="bg-black/40 rounded-lg p-2 mb-2">
                                    <div class="text-sm font-semibold text-primary">${port.name || port.port_name || 'ميناء'}</div>
                                    <div class="text-xs text-gray-400">${port.status || 'مستقر'}</div>
                                </div>
                            `).join('');
                        }
                        
                        if (vesselsList && data.vessels) {
                            vesselsList.innerHTML = data.vessels.slice(0, 5).map(vessel => `
                                <div class="bg-black/40 rounded-lg p-2 mb-2">
                                    <div class="text-sm font-semibold text-primary">${vessel.name || vessel.vessel_name || 'سفينة'}</div>
                                    <div class="text-xs text-gray-400">${vessel.status || 'في الطريق'}</div>
                                </div>
                            `).join('');
                        }
                        
                        if (ratesList && data.rates) {
                            ratesList.innerHTML = data.rates.slice(0, 5).map(rate => `
                                <div class="bg-black/40 rounded-lg p-2 mb-2">
                                    <div class="text-sm font-semibold text-primary">${rate.route || 'مسار'}</div>
                                    <div class="text-xs text-gray-400">${rate.price || '--'}</div>
                                </div>
                            `).join('');
                        }
                    }
                } catch (error) {
                    console.error('Error loading shipping:', error);
                }
            }

            // Load Main Markets
            async function loadMainMarkets() {
                const tickerTrack = document.getElementById('mainMarketTickerTrack');
                const activeMarkets = document.getElementById('mainActiveMarkets');
                const newProducts = document.getElementById('mainNewProducts');
                const todayUpdates = document.getElementById('mainTodayUpdates');
                
                try {
                    const response = await fetch('/trendlens/api/ticker?lang=' + (window.currentLang || 'ar'));
                    const data = await response.json();
                    
                    if (data && data.items && tickerTrack) {
                        const items = data.items.map(item => `
                            <span class="tl-ticker-item">${item.text || item.message || ''}</span>
                        `).join('');
                        tickerTrack.innerHTML = items + items;
                    }
                    
                    if (activeMarkets) activeMarkets.textContent = '1,234';
                    if (newProducts) newProducts.textContent = '567';
                    if (todayUpdates) todayUpdates.textContent = '89';
                } catch (error) {
                    console.error('Error loading markets:', error);
                }
            }

            // Load Main Ebooks
            async function loadMainEbooks() {
                const container = document.getElementById('mainEbooksGrid');
                if (!container) return;
                
                try {
                    const response = await fetch('/trendlens/api/books/list?limit=6');
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    const data = await response.json();
                    
                    console.log('Books data received:', data);
                    
                    if (data && Array.isArray(data) && data.length > 0) {
                        const currentLang = window.currentLang || 'ar';
                        container.innerHTML = data.slice(0, 6).map(book => {
                            // API يرجع title مباشرة كـ string، ليس object
                            const title = typeof book.title === 'string' 
                                ? book.title 
                                : (book.title?.ar || book.title?.en || book.title || 'غير معروف');
                            // API يرجع cover_image_url، ليس cover
                            const cover = book.cover_image_url || book.cover || `https://picsum.photos/seed/${encodeURIComponent(title)}/180/250`;
                            const description = book.description || '';
                            const price = book.price ? `$${book.price.toFixed(2)}` : '';
                            const downloadText = window.t ? window.t('download') : (currentLang === 'ar' ? 'تحميل' : 'Download');
                            return `
                                <div class="glass-effect rounded-xl p-4 hover:scale-105 transition-transform duration-300 dashboard-data-card">
                                    <img src="${cover}" alt="${title}" class="w-full h-48 object-cover rounded-lg mb-3" onerror="this.src='https://picsum.photos/180/250'">
                                    <h3 class="font-bold text-white mb-2 line-clamp-2">${title}</h3>
                                    ${description ? `<p class="text-sm text-gray-400 mb-2 line-clamp-2">${description}</p>` : ''}
                                    ${price ? `<p class="text-primary font-semibold mb-3">${price}</p>` : ''}
                                    <button onclick="window.location.href='/trendlens/books.html#${book.id || ''}'" class="w-full bg-primary text-black py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors">
                                        ${downloadText}
                                    </button>
                                </div>
                            `;
                        }).join('');
                    } else {
                        container.innerHTML = '<p class="text-gray-400 text-center col-span-full">لا توجد كتب متاحة</p>';
                    }
                } catch (error) {
                    console.error('Error loading ebooks:', error);
                    container.innerHTML = '<p class="text-red-400 text-center col-span-full">حدث خطأ في تحميل الكتب</p>';
                }
            }

            // Load Main Analytics
            function loadMainAnalytics() {
                setTimeout(() => {
                    const revenueCtx = document.getElementById('mainAnalyticsRevenueChart');
                    if (revenueCtx && typeof Chart !== 'undefined') {
                        if (window.mainAnalyticsRevenueChartInstance) {
                            window.mainAnalyticsRevenueChartInstance.destroy();
                        }
                        window.mainAnalyticsRevenueChartInstance = new Chart(revenueCtx, {
                            type: 'line',
                            data: {
                                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                datasets: [{
                                    label: 'Revenue',
                                    data: [12000, 19000, 15000, 25000, 22000, 30000, 28000],
                                    borderColor: 'rgb(254, 186, 4)',
                                    backgroundColor: 'rgba(254, 186, 4, 0.1)',
                                    tension: 0.4
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { display: false } },
                                scales: {
                                    y: { beginAtZero: true, ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } },
                                    x: { ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } }
                                }
                            }
                        });
                    }
                    
                    const conversionCtx = document.getElementById('mainAnalyticsConversionChart');
                    if (conversionCtx && typeof Chart !== 'undefined') {
                        if (window.mainAnalyticsConversionChartInstance) {
                            window.mainAnalyticsConversionChartInstance.destroy();
                        }
                        window.mainAnalyticsConversionChartInstance = new Chart(conversionCtx, {
                            type: 'bar',
                            data: {
                                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                datasets: [{
                                    label: 'Conversion Rate',
                                    data: [2.5, 3.1, 2.8, 3.5, 3.2, 2.9, 3.4],
                                    backgroundColor: 'rgba(34, 197, 94, 0.8)'
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { display: false } },
                                scales: {
                                    y: { beginAtZero: true, ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } },
                                    x: { ticks: { color: 'rgba(255, 255, 255, 0.7)' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } }
                                }
                            }
                        });
                    }
                }, 300);
            }

            // Hide newDashboardLayout by default
            if (document.getElementById('newDashboardLayout')) {
                document.getElementById('newDashboardLayout').style.display = 'none';
            }

            // Hide intelligence-tabs-container if exists
            const oldTabsContainer = document.querySelector('.intelligence-tabs-container');
            if (oldTabsContainer) {
                oldTabsContainer.style.display = 'none';
            }

            // Ensure Full Width Tabs Bar is visible
            const mainTabsBar = document.getElementById('mainTabsBar');
            if (mainTabsBar) {
                mainTabsBar.style.display = 'block';
                mainTabsBar.style.visibility = 'visible';
                mainTabsBar.style.opacity = '1';
            }

            // Make switchMainTab globally available
            window.switchMainTab = switchMainTab;
            
            // Force show tabs bar immediately
            function forceShowTabsBar() {
                const tabsBar = document.getElementById('mainTabsBar');
                if (tabsBar) {
                    tabsBar.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; position: sticky !important; top: 0 !important; z-index: 100 !important;';
                    tabsBar.classList.add('full-width-tabs-bar');
                }
            }

            // Initialize on page load
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    forceShowTabsBar();
                    // Ensure tabs bar is visible
                    if (mainTabsBar) {
                        mainTabsBar.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; position: sticky !important; top: 0 !important; z-index: 100 !important;';
                    }
                    // Hide old tabs
                    if (oldTabsContainer) {
                        oldTabsContainer.style.display = 'none';
                    }
                    loadMainCharts();
                    if (typeof loadTicker === 'function') {
                        loadTicker();
                    }
                });
            } else {
                forceShowTabsBar();
                // Ensure tabs bar is visible
                if (mainTabsBar) {
                    mainTabsBar.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; position: sticky !important; top: 0 !important; z-index: 100 !important;';
                }
                // Hide old tabs
                if (oldTabsContainer) {
                    oldTabsContainer.style.display = 'none';
                }
                loadMainCharts();
                if (typeof loadTicker === 'function') {
                    loadTicker();
                }
            }

            // Also try after a short delay
            setTimeout(forceShowTabsBar, 100);
            setTimeout(forceShowTabsBar, 500);
            setTimeout(forceShowTabsBar, 1000);

            // Market Feed Functions
            async function loadMarketFeed() {
                const container = document.getElementById('market-feed-container');
                const lastUpdateEl = document.getElementById('market-feed-last-update');
                
                if (!container) {
                    console.warn('Market feed container not found');
                    return;
                }
                
                try {
                    container.innerHTML = `
                        <div class="text-center py-8 text-gray-400">
                            <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                            <div data-i18n="generic.loading">جاري التحميل...</div>
                        </div>
                    `;
                    
                    // استخدام نفس API_BASE المستخدم في باقي الصفحة
                    const API_BASE = window.API_BASE || '/api';
                    const url = `${API_BASE}/market-feed?limit_per_source=10`;
                    console.log('[Market Feed] Fetching from:', url);
                    
                    const response = await fetch(url);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    
                    const data = await response.json();
                    console.log('[Market Feed] Response:', data);
                    
                    if (data.ok && data.items && data.items.length > 0) {
                        // ترجمة النصوص
                        const isArabic = document.documentElement.lang === 'ar' || !document.documentElement.lang;
                        const t = {
                            'hours_ago': isArabic ? 'منذ' : 'ago',
                            'views': isArabic ? 'مشاهدات' : 'Views',
                            'likes': isArabic ? 'إعجابات' : 'Likes',
                            'trend_pulse': isArabic ? 'Trend Pulse' : 'Trend Pulse',
                            'competition': isArabic ? 'المنافسة' : 'Competition',
                            'keywords': isArabic ? 'الكلمات المفتاحية' : 'Keywords',
                            'details': isArabic ? 'تفاصيل' : 'Details',
                            'increase_decrease': isArabic ? 'ارتفاع / انخفاض المشاهدات:' : 'Views Trend:',
                            'low': isArabic ? 'منخفض' : 'Low',
                            'medium': isArabic ? 'متوسط' : 'Medium',
                            'high': isArabic ? 'عالي' : 'High'
                        };
                        console.log(`[Market Feed] Rendering ${data.items.length} items`);
                        renderMarketFeed(data.items, container);
                        
                        // تحديث وقت آخر تحديث
                        if (lastUpdateEl) {
                            const now = new Date();
                            lastUpdateEl.textContent = now.toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' });
                        }
                    } else {
                        console.warn('[Market Feed] No items in response:', data);
                        container.innerHTML = `
                            <div class="text-center py-8 text-gray-400">
                                <i class="fas fa-inbox text-3xl mb-2"></i>
                                <div>لا توجد بيانات متاحة حالياً</div>
                                <div class="text-xs mt-2">Response: ${JSON.stringify(data).substring(0, 100)}</div>
                            </div>
                        `;
                    }
                } catch (error) {
                    console.error('[Market Feed] Error loading market feed:', error);
                    container.innerHTML = `
                        <div class="text-center py-8 text-red-400">
                            <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                            <div>خطأ في تحميل البيانات</div>
                            <div class="text-xs mt-2 text-gray-500">${error.message}</div>
                        </div>
                    `;
                }
            }

            function renderMarketFeed(items, container) {
                if (!items || items.length === 0) {
                    container.innerHTML = '<div class="text-center py-8 text-gray-400">لا توجد بيانات</div>';
                    return;
                }
                
                // ترجمة النصوص
                const isArabic = document.documentElement.lang === 'ar' || !document.documentElement.lang;
                const t = {
                    'hours_ago': isArabic ? 'منذ' : 'ago',
                    'views': isArabic ? 'مشاهدات' : 'Views',
                    'likes': isArabic ? 'إعجابات' : 'Likes',
                    'trend_pulse': isArabic ? 'Trend Pulse' : 'Trend Pulse',
                    'competition': isArabic ? 'المنافسة' : 'Competition',
                    'keywords': isArabic ? 'الكلمات المفتاحية' : 'Keywords',
                    'details': isArabic ? 'تفاصيل' : 'Details',
                    'increase_decrease': isArabic ? 'ارتفاع / انخفاض المشاهدات:' : 'Views Trend:',
                    'low': isArabic ? 'منخفض' : 'Low',
                    'medium': isArabic ? 'متوسط' : 'Medium',
                    'high': isArabic ? 'عالي' : 'High'
                };
                
                // فلترة العناصر التجريبية بدون بيانات كافية
                const validItems = items.filter(item => {
                    // إخفاء العناصر التجريبية التي لا تحتوي على بيانات كافية
                    if (item.status === 'DUMMY' && (!item.trend_pulse || !item.competition || !item.keywords)) {
                        return false;
                    }
                    return true;
                });
                
                if (validItems.length === 0) {
                    container.innerHTML = '<div class="text-center py-8 text-gray-400">لا توجد بيانات متاحة</div>';
                    return;
                }
                
                const html = validItems.map((item, index) => {
                    const sourceBadge = getSourceBadge(item.source);
                    const metricDisplay = item.metric_value 
                        ? `${formatNumber(item.metric_value)} ${item.metric_label || ''}`
                        : '';
                    const timeAgo = item.hours_ago 
                        ? (item.hours_ago < 1 ? (isArabic ? 'الآن' : 'Now') : `${t.hours_ago} ${item.hours_ago} ${isArabic ? 'ساعة' : 'hours'}`)
                        : '';
                    
                    // Trend Pulse
                    const trendPulse = item.trend_pulse || 0;
                    const trendPulseColor = trendPulse >= 80 ? 'text-emerald-400' : trendPulse >= 60 ? 'text-yellow-400' : 'text-red-400';
                    
                    // Competition
                    const competition = item.competition || 'Medium';
                    const competitionColor = competition === 'Low' ? 'text-emerald-400' : competition === 'Medium' ? 'text-yellow-400' : 'text-red-400';
                    const competitionText = competition === 'Low' ? t.low : competition === 'Medium' ? t.medium : t.high;
                    
                    // Keywords
                    const keywords = item.keywords ? item.keywords.split(',').slice(0, 3).map(k => k.trim()) : [];
                    const keywordsDisplay = keywords.length > 0 ? keywords.join(' • ') : '';
                    
                    // TikTok خاص - عرض sparkline
                    const isTikTok = item.source === 'TIKTOK';
                    const sparklineId = `sparkline-${item.id || index}`;
                    const sparklineHtml = isTikTok && item.sparkline ? `
                        <div class="mt-2 mb-2">
                            <div class="text-[9px] text-gray-500 mb-1">${t.increase_decrease}</div>
                            <div class="market-feed-item-sparkline">
                                <canvas id="${sparklineId}" width="300" height="32" class="w-full h-8"></canvas>
                            </div>
                            <div class="text-[9px] text-gray-500 mt-1">${t.competition}: <span class="${competitionColor}">${competitionText}</span></div>
                        </div>
                    ` : '';
                    
                    // TikTok - عرض Creator و Views و Likes (مثل الصورة)
                    const tiktokInfo = isTikTok ? `
                        <div class="flex items-center gap-2 flex-wrap text-[10px] mb-2">
                            ${item.creator ? `<span class="text-gray-400">${escapeHtml(item.creator)}@</span>` : ''}
                            ${item.likes ? `<span class="text-red-400 font-semibold">${formatNumber(item.likes)}</span>` : ''}
                            ${item.views ? `<span class="text-primary font-semibold">👁 ${formatNumber(item.views)}</span>` : ''}
                        </div>
                        ${item.views ? `<div class="text-[10px] text-gray-400 mb-2">${formatNumber(item.views)} ${t.views}</div>` : ''}
                    ` : '';
                    
                    return `
                        <div class="market-feed-card glass-effect rounded-lg p-2.5 md:p-3 border border-white/10 hover:border-primary/40 hover:shadow-lg transition-all duration-200 bg-gradient-to-br from-gray-800/40 to-gray-900/40">
                            <div class="flex items-start gap-2.5 md:gap-3">
                                <!-- Content (Left) -->
                                <div class="flex-1 min-w-0">
                                    <!-- Title -->
                                    <h4 class="text-xs md:text-sm font-semibold text-white line-clamp-2 mb-1.5 leading-tight">
                                        ${escapeHtml(item.title)}
                                    </h4>
                                    
                                    <!-- Source, Country, Time -->
                                    <div class="flex items-center gap-1.5 flex-wrap text-[9px] md:text-[10px] text-gray-400 mb-1.5">
                                        ${timeAgo ? `<span>${timeAgo}</span>` : ''}
                                        ${item.country ? `<span class="px-1 py-0.5 rounded bg-white/5">${item.country}</span>` : ''}
                                        ${sourceBadge}
                                    </div>
                                    
                                    ${tiktokInfo}
                                    
                                    ${sparklineHtml}
                                    
                                    <!-- Trend Pulse & Competition -->
                                    <div class="flex items-center gap-2 text-[9px] md:text-[10px] mb-1.5">
                                        <span class="text-gray-400">${trendPulse}/100 :${t.trend_pulse}</span>
                                    </div>
                                    
                                    <!-- Keywords -->
                                    ${keywordsDisplay ? `
                                        <div class="text-[9px] md:text-[10px] text-gray-400 mb-1.5">
                                            <span class="text-gray-500">${t.keywords}:</span>
                                            <span class="text-gray-300">${escapeHtml(keywordsDisplay)}</span>
                                        </div>
                                    ` : ''}
                                    
                                    <!-- Details Button -->
                                    <button onclick="window.location.href='/trendlens/dashboard.html?source=${item.source}&item=${item.id}${isTikTok && item.video_id ? '&video=' + item.video_id : ''}'" 
                                            class="text-[9px] md:text-[10px] text-primary hover:text-yellow-400 transition-colors mt-0.5 font-medium">
                                        ${t.details} -
                                    </button>
                                </div>
                                
                                <!-- Image (Right) - مثل الصورة -->
                                <div class="flex-shrink-0">
                                    <img src="${item.thumbnail_url || item.image_url || 'https://picsum.photos/80/80'}" 
                                         alt="${escapeHtml(item.title)}"
                                         class="w-14 h-14 md:w-16 md:h-16 rounded-lg object-cover border border-white/10 shadow-md"
                                         onerror="this.src='https://picsum.photos/80/80'">
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');
                
                container.innerHTML = html;
                
                // رسم sparkline charts لـ TikTok (بعد إدراج HTML)
                setTimeout(() => {
                    validItems.forEach((item, index) => {
                        if (item.source === 'TIKTOK' && item.sparkline && Array.isArray(item.sparkline)) {
                            const sparklineId = `sparkline-${item.id || index}`;
                            const canvas = document.getElementById(sparklineId);
                            if (canvas) {
                                renderSparkline(canvas, item.sparkline);
                            }
                        }
                    });
                }, 100);
            }
            
            function renderSparkline(canvas, data) {
                if (!canvas || !data || !Array.isArray(data) || data.length === 0) return;
                
                const ctx = canvas.getContext('2d');
                const width = canvas.width || 300;
                const height = canvas.height || 32;
                const padding = 4;
                const chartWidth = width - (padding * 2);
                const chartHeight = height - (padding * 2);
                
                // تنظيف canvas
                ctx.clearRect(0, 0, width, height);
                
                // حساب القيم
                const maxValue = Math.max(...data);
                const minValue = Math.min(...data);
                const range = maxValue - minValue || 1;
                
                // حساب step (تجنب division by zero)
                const step = data.length > 1 ? (data.length - 1) : 1;
                
                // رسم الخط الأصفر (مثل الصورة - خط أصفر سميك)
                ctx.strokeStyle = '#FEB604'; // primary yellow color
                ctx.lineWidth = 2.5;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                ctx.beginPath();
                
                data.forEach((value, index) => {
                    const x = padding + (index / step) * chartWidth;
                    const normalizedValue = (value - minValue) / range;
                    const y = padding + chartHeight - (normalizedValue * chartHeight);
                    
                    if (index === 0) {
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                    }
                });
                
                ctx.stroke();
                
                // رسم النقاط الصغيرة (اختياري - مثل الصورة)
                ctx.fillStyle = '#FEB604';
                data.forEach((value, index) => {
                    const x = padding + (index / step) * chartWidth;
                    const normalizedValue = (value - minValue) / range;
                    const y = padding + chartHeight - (normalizedValue * chartHeight);
                    
                    ctx.beginPath();
                    ctx.arc(x, y, 1.5, 0, Math.PI * 2);
                    ctx.fill();
                });
            }

            function getSourceBadge(source) {
                const badges = {
                    'AMAZON': { text: 'Amazon', color: 'bg-orange-500/20 text-orange-400 border-orange-500/40' },
                    'TEMU': { text: 'Temu', color: 'bg-blue-500/20 text-blue-400 border-blue-500/40' },
                    'SHEIN': { text: 'Shein', color: 'bg-pink-500/20 text-pink-400 border-pink-500/40' },
                    'WALMART': { text: 'Walmart', color: 'bg-blue-600/20 text-blue-300 border-blue-600/40' },
                    'EBAY': { text: 'eBay', color: 'bg-green-500/20 text-green-400 border-green-500/40' },
                    'PINTEREST': { text: 'Pinterest', color: 'bg-red-500/20 text-red-400 border-red-500/40' },
                    'EXTERNAL_US': { text: 'US Store', color: 'bg-gray-500/20 text-gray-400 border-gray-500/40' },
                    'EXTERNAL_EU': { text: 'EU Store', color: 'bg-purple-500/20 text-purple-400 border-purple-500/40' },
                    'TIKTOK': { text: 'TikTok', color: 'bg-black/40 text-white border-white/40' }
                };
                
                const badge = badges[source] || { text: source, color: 'bg-gray-500/20 text-gray-400 border-gray-500/40' };
                return `<span class="px-2 py-0.5 rounded text-[10px] font-semibold border ${badge.color}">${badge.text}</span>`;
            }

            function formatNumber(num) {
                if (num >= 1000) {
                    return (num / 1000).toFixed(1) + 'K';
                }
                return num.toString();
            }

            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }

            function refreshMarketFeed() {
                loadMarketFeed();
            }

            // Make functions globally available
            window.loadMarketFeed = loadMarketFeed;
            window.refreshMarketFeed = refreshMarketFeed;
            
            // Market Feed Translations
            const marketFeedTranslations = {
                ar: {
                    'market_feed.title': 'مبيعات حقيقية مباشرة من:',
                    'market_feed.external_stores': 'متاجر خارجية'
                },
                en: {
                    'market_feed.title': 'Real sales from:',
                    'market_feed.external_stores': 'External stores'
                }
            };
            
            // Update market feed translations
            function updateMarketFeedTranslations(lang = 'ar') {
                const translations = marketFeedTranslations[lang] || marketFeedTranslations.ar;
                document.querySelectorAll('[data-i18n^="market_feed"]').forEach(el => {
                    const key = el.getAttribute('data-i18n');
                    if (translations[key]) {
                        el.textContent = translations[key];
                    }
                });
            }
            
            // Update translations on language change
            if (typeof switchLang === 'function') {
                const originalSwitchLang = window.switchLang;
                window.switchLang = function(lang) {
                    originalSwitchLang(lang);
                    updateMarketFeedTranslations(lang);
                };
            }
            
            // Initialize translations
            const currentLang = document.documentElement.lang || 'ar';
            updateMarketFeedTranslations(currentLang);

            // Load market feed on page load
            function initMarketFeed() {
                console.log('[Market Feed] Initializing...');
                const container = document.getElementById('market-feed-container');
                if (container) {
                    console.log('[Market Feed] Container found, loading data...');
                    setTimeout(loadMarketFeed, 1000);
                } else {
                    console.warn('[Market Feed] Container not found, retrying...');
                    setTimeout(initMarketFeed, 500);
                }
            }
            
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    initMarketFeed();
                });
            } else {
                initMarketFeed();
            }
        </script>
</body>
</html>