<!-- 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, maximum-scale=1.0, user-scalable=no">
    <!-- Auth Utils - Single Source of Truth for auth token -->
    <script src="/trendlens/js/auth-utils.js"></script>
    <script>
        // CRITICAL: Apply theme and language IMMEDIATELY before any rendering
        (function() {
            try {
                // Get saved preferences
                const savedTheme = localStorage.getItem('trendlens-theme');
                const savedLocale =
                    localStorage.getItem('TL_LOCALE') ||
                    localStorage.getItem('tl_locale') ||
                    localStorage.getItem('lang') ||
                    localStorage.getItem('tl_lang');
                const browserLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();

                function normalizeLocale(raw) {
                    const s = String(raw || '').toLowerCase();
                    if (s.startsWith('ar')) return { locale: 'ar-KW', short: 'ar', dir: 'rtl' };
                    if (s.startsWith('es')) return { locale: 'es-ES', short: 'es', dir: 'ltr' };
                    if (s.startsWith('pt')) return { locale: 'pt-BR', short: 'pt', dir: 'ltr' };
                    if (s.startsWith('tr')) return { locale: 'tr-TR', short: 'tr', dir: 'ltr' };
                    if (s.startsWith('hi')) return { locale: 'hi-IN', short: 'hi', dir: 'ltr' };
                    return { locale: 'en-US', short: 'en', dir: 'ltr' };
                }
                
                // 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 = normalizeLocale(savedLocale || browserLang);
                document.documentElement.lang = langToUse.locale;
                document.documentElement.dir = langToUse.dir;
                window.TL_LOCALE = langToUse.locale;
                window.currentLang = langToUse.short;
                if (!window.__UICFG) window.__UICFG = { ui: {} };
                window.__UICFG.ui.locale = langToUse.short;

                // Keep standard + legacy keys in sync (prevents mobile "no change" behavior)
                localStorage.setItem('TL_LOCALE', langToUse.locale);
                localStorage.setItem('tl_locale', langToUse.locale);
                localStorage.setItem('lang', langToUse.short);
                localStorage.setItem('tl_lang', langToUse.short);

                // Mobile-safe fallback: handle locale clicks even before i18n.js finishes loading
                // (On mobile, users may tap language immediately; without this, nothing happens until i18n.js binds.)
                document.addEventListener('click', function (e) {
                    const item = e.target && e.target.closest ? e.target.closest('[data-tl-locale]') : null;
                    if (!item) return;
                    const locRaw = item.getAttribute('data-tl-locale');
                    if (!locRaw) return;

                    e.preventDefault();
                    e.stopPropagation();

                    const loc = normalizeLocale(locRaw);
                    try {
                        localStorage.setItem('TL_LOCALE', loc.locale);
                        localStorage.setItem('tl_locale', loc.locale);
                        localStorage.setItem('lang', loc.short);
                        localStorage.setItem('tl_lang', loc.short);
                    } catch (err) {
                        // ignore
                    }
                    window.TL_LOCALE = loc.locale;
                    window.currentLang = loc.short;
                    window.__UICFG = window.__UICFG || { ui: {} };
                    window.__UICFG.ui = window.__UICFG.ui || {};
                    window.__UICFG.ui.locale = loc.short;
                    document.documentElement.lang = loc.locale;
                    document.documentElement.dir = loc.dir;

                    if (typeof window.tlSetLocale === 'function') {
                        Promise.resolve(window.tlSetLocale(loc.locale)).catch(() => location.reload());
                    } else {
                        location.reload();
                    }
                }, true);
            } catch (e) {
                // Fallback if localStorage is not available
                document.documentElement.setAttribute('data-theme', 'dark');
                document.documentElement.lang = 'en-US';
                document.documentElement.dir = 'ltr';
            }
        })();
    </script>
    <style>
        /* Critical CSS: منع FOUC + ضمان loader فقط يظهر قبل الجاهزية */
        /* ✅ الخط الأساسي: Cairo دائماً */
        html, body {
            font-family: 'Cairo', sans-serif !important;
        }
        
        html:not(.tl-ready) body { 
            visibility: hidden; 
        }
        html:not(.tl-ready) #tl-loader,
        html:not(.tl-ready) .tl-loader,
        html:not(.tl-ready) [data-tl-loader] { 
            visibility: visible; 
        }

        /* بعد الجاهزية */
        html.tl-ready body { 
            visibility: visible; 
        }

        /* نعومة ظهور */
        html.tl-ready body { 
            transition: opacity .18s ease; 
            opacity: 1; 
        }
        html:not(.tl-ready) body { 
            opacity: 0; 
        }
    </style>
    <script>
        // __TL_UNHIDE_PAGE__ - نسخة خفيفة تعتمد على CSS class بدل inline styles
        (function () {
            let done = false;

            window.__tlUnhidePage = function __tlUnhidePage(reason, force) {
                if (done && !force) return;
                done = true;

                try {
                    // إضافة class tl-ready على html و body
                    document.documentElement.classList.add('tl-ready');
                    if (document.body) {
                        document.body.classList.add('tl-ready');
                    }

                    // إزالة hidden class إن وُجد
                    document.documentElement.classList.remove('hidden');
                    if (document.body) {
                        document.body.classList.remove('hidden');
                    }

                    // إزالة display:none فقط إن وُجد (بدون فرض قوة كبيرة)
                    const html = document.documentElement;
                    const body = document.body;
                    if (html && html.style && html.style.display === 'none') {
                        html.style.display = '';
                    }
                    if (body && body.style && body.style.display === 'none') {
                        body.style.display = '';
                    }

                    console.log('[TL] READY:', reason || 'ok');
                } catch (e) {
                    console.warn('[TL] __tlUnhidePage failed:', e);
                }
            };

            // نقطة أمان: لو شيء تأخر، نفك الحجب مرة واحدة فقط
            window.addEventListener('load', () => {
                window.__tlUnhidePage('window.load');
            }, { once: true });

        })();
    </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) + '%';
          });
        });

        const topDayText = window.tl_t('top_day', 'Top day');
        const simulatedText = window.tl_t('simulated', '(simulated)');
        document.getElementById('chartLegendRight').textContent = `${topDayText}: ${Math.max(...cfg.chartBars).toString()}% ${simulatedText}`;

        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>
    <!-- Favicon بأحجام أكبر للوضوح - ترتيب حسب الأولوية -->
    <!-- SVG favicon (الأفضل - قابل للتكبير بدون فقدان جودة) -->
    <link rel="icon" type="image/svg+xml" href="/trendlens/assets/brand/logo.svg">
    <!-- PNG favicons بأحجام كبيرة (للمتصفحات التي لا تدعم SVG) -->
    <link rel="icon" type="image/png" sizes="512x512" href="/trendlens/assets/brand/favicon-512.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/trendlens/assets/brand/favicon-192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/trendlens/assets/brand/favicon-32.png">
    <!-- ICO fallback -->
    <link rel="icon" type="image/x-icon" href="/trendlens/assets/brand/favicon.ico" sizes="32x32">
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="512x512" href="/trendlens/assets/brand/favicon-512.png">
    <link rel="apple-touch-icon" sizes="192x192" href="/trendlens/assets/brand/favicon-192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/trendlens/assets/brand/apple-touch-icon.png">
    <!-- Microsoft Tiles -->
    <meta name="msapplication-TileImage" content="/trendlens/assets/brand/favicon-192.png">
    <meta name="msapplication-TileColor" content="#feba04">
    <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">
    <!-- TrendLens Visual Identity v3 (additive, safe) -->
    <link rel="stylesheet" href="/trendlens/assets/css/tl-v3.css?v=5">
    <!-- 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>
    <!-- Chart.js removed from head - will be loaded lazily when needed -->
    <!-- i18n Translation System -->
    <script src="/trendlens/js/i18n.js?v=1.7" defer></script>
    <!-- Theme Management -->
    <script src="/trendlens/js/theme.js" defer></script>
    <!-- Background particles (additive, respects reduced-motion) -->
    <script src="/trendlens/assets/js/tl-particles.js" defer></script>
    <script src="/trendlens/assets/js/TikTokHotSignal.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 = window.tl_t("analytics_overview_loading", "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",
                            window.tl_t("analytics_overview_error", "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",
                        window.tl_t("analytics_overview_error", "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: #cbd5e1;
            --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: #475569;
            --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,
        [data-theme="light"] .text-gray-200 {
            color: #475569 !important;
            font-weight: 500 !important;
        }
        
        /* تحسين وضوح جميع النصوص في الثيم الأبيض */
        [data-theme="light"] {
            --text-main: #0f172a !important;
            --text-muted: #475569 !important;
        }
        
        [data-theme="light"] * {
            color: inherit;
        }
        
        /* تحسين وضوح النصوص في الكروت */
        [data-theme="light"] .glass-effect,
        [data-theme="light"] .dashboard-card,
        [data-theme="light"] .hero-snapshot-box,
        [data-theme="light"] .ai-chat-snapshot {
            color: var(--text-main) !important;
        }
        
        [data-theme="light"] .glass-effect *,
        [data-theme="light"] .dashboard-card *,
        [data-theme="light"] .hero-snapshot-box *,
        [data-theme="light"] .ai-chat-snapshot * {
            color: inherit;
        }
        
        /* تحسين وضوح النصوص المحددة */
        [data-theme="light"] p,
        [data-theme="light"] span,
        [data-theme="light"] div,
        [data-theme="light"] li {
            color: var(--text-main) !important;
        }
        
        [data-theme="light"] .text-gray-400,
        [data-theme="light"] .text-gray-500 {
            color: #475569 !important;
            font-weight: 500 !important;
        }
        
        /* ضمان أن text-white يظهر في الوضع الداكن */
        [data-theme="dark"] .text-white {
            color: var(--text-main) !important;
            font-weight: 500 !important;
        }
        
        /* ضمان أن text-gray-300 و text-gray-400 واضحة في الوضع الداكن */
        [data-theme="dark"] .text-gray-300 {
            color: #e2e8f0 !important;
            font-weight: 500 !important;
        }
        
        [data-theme="dark"] .text-gray-400 {
            color: #cbd5e1 !important;
            font-weight: 500 !important;
        }
        
        [data-theme="dark"] .text-gray-500 {
            color: #94a3b8 !important;
            font-weight: 500 !important;
        }
        
        /* تحسين وضوح جميع النصوص في الثيم الداكن */
        [data-theme="dark"] {
            --text-main: #f9fafb !important;
            --text-muted: #cbd5e1 !important;
        }
        
        [data-theme="dark"] * {
            color: inherit;
        }
        
        /* تحسين وضوح النصوص في الكروت */
        [data-theme="dark"] .glass-effect,
        [data-theme="dark"] .dashboard-card,
        [data-theme="dark"] .hero-snapshot-box,
        [data-theme="dark"] .ai-chat-snapshot {
            color: var(--text-main) !important;
        }
        
        [data-theme="dark"] .glass-effect *,
        [data-theme="dark"] .dashboard-card *,
        [data-theme="dark"] .hero-snapshot-box *,
        [data-theme="dark"] .ai-chat-snapshot * {
            color: inherit;
        }
        
        /* تحسين وضوح النصوص المحددة */
        [data-theme="dark"] p,
        [data-theme="dark"] span,
        [data-theme="dark"] div,
        [data-theme="dark"] li {
            color: var(--text-main) !important;
        }
        
        /* تحسين وضوح العناوين */
        [data-theme="dark"] h1,
        [data-theme="dark"] h2,
        [data-theme="dark"] h3,
        [data-theme="dark"] h4,
        [data-theme="dark"] h5,
        [data-theme="dark"] h6 {
            color: #f9fafb !important;
            font-weight: 700 !important;
        }
        
        [data-theme="dark"] .text-primary {
            color: var(--primary) !important;
            font-weight: 600 !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;
        }
        
        /* Card Collapse/Expand Styles */
        .card-collapsible {
            transition: all 0.3s ease;
        }
        
        .card-collapsible.collapsed .card-content {
            display: none;
        }
        
        .card-collapsible .card-toggle-btn {
            transition: transform 0.3s ease;
        }
        
        .card-collapsible.collapsed .card-toggle-btn i {
            transform: rotate(-90deg);
        }
        
        .card-content {
            transition: all 0.3s ease;
        }
        
        /* Responsive Card Sizing */
        @media (max-width: 768px) {
            .card-collapsible {
                padding: 0.75rem !important;
            }
            
            .card-collapsible .card-content {
                font-size: 0.875rem;
            }
            
            .card-collapsible h3,
            .card-collapsible h4 {
                font-size: 0.875rem;
            }
            
            .card-collapsible .mb-6 {
                margin-bottom: 1rem !important;
            }
            
            .card-collapsible .mb-4 {
                margin-bottom: 0.75rem !important;
            }
        }
        
        /* Uniform Card Heights */
        @media (min-width: 768px) {
            .card-collapsible:not(.collapsed) {
                min-height: 400px;
            }
        }
        
        /* ضمان وضوح النصوص في جميع العناصر */
        [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;
            font-weight: 500 !important;
        }
        
        [data-theme="light"] .text-gray-400,
        [data-theme="light"] .text-gray-500 {
            color: #475569 !important;
            font-weight: 500 !important;
        }
        
        /* تحسين وضوح النصوص في العناصر المحددة */
        [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: #0f172a !important;
            font-weight: 700 !important;
        }
        
        [data-theme="light"] .text-primary {
            color: var(--accent) !important;
            font-weight: 600 !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 per theme */
        [data-theme="light"] #intro-screen {
            background: var(--gradient-bg) !important;
            color: #111827 !important;
        }
        [data-theme="light"] #intro-screen .loader-logo-main {
            color: #b45309 !important; /* برتقالي أغمق في الفاتح */
        }
        [data-theme="dark"] #intro-screen {
            background: radial-gradient(circle at center, #111827 0, #020308 60%, #000 100%);
            color: var(--text-main) !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;
            overflow-y: auto;
            min-height: 100vh;
            height: auto;
        }
        
        body {
            position: relative;
            padding-bottom: 2rem;
        }
        
        img { max-width: 100%; height: auto; }
        
        /* توحيد تمركز المحتوى في اللغتين ومنع الالتصاق */
        main, header, footer { max-width: 1200px; margin-inline: auto; }
        
        /* ===== الخط الأساسي: Cairo دائماً ===== */
        html, body {
            font-family: 'Cairo', sans-serif !important;
        }
        
        [dir="rtl"],
        [dir="ltr"] {
            font-family: 'Cairo', sans-serif !important;
        }
        
        [dir="rtl"] body,
        [dir="ltr"] body,
        [dir="rtl"] *:not([class*="fa"]):not([class*="icon"]),
        [dir="ltr"] *:not([class*="fa"]):not([class*="icon"]) {
            font-family: 'Cairo', 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 !important;
                top: 70px !important;
                bottom: auto !important;
                right: 8px;
                left: auto;
                z-index: 9999 !important;
                padding: 5px 8px;
                font-size: 0.65rem;
                width: auto !important;
                max-width: 180px !important;
                display: inline-flex !important;
                opacity: 1 !important;
                visibility: visible !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: 0;
                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 !important; 
            top: 80px !important;
            z-index: 9999 !important;
            background: var(--card-bg) !important;
            border-radius: 12px; 
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-subtle);
            padding: 8px 12px; 
            display: inline-flex !important; 
            align-items: center; 
            gap: 6px;
            color: var(--text-main);
            font-size: 0.75rem;
            width: auto;
            max-width: none;
            min-width: fit-content;
            flex-wrap: nowrap;
            white-space: nowrap;
            transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
        
        /* على الموبايل - تحسين موضع visitor-float */
        @media (max-width: 768px) {
            .visitor-float {
                top: 70px !important;
                z-index: 9999 !important;
                position: fixed !important;
                opacity: 1 !important;
                visibility: visible !important;
                display: inline-flex !important;
            }
        }
        
        /* التأكد من أن visitor-float لا يختفي أبداً */
        #visitorFloat {
            position: fixed !important;
            z-index: 9999 !important;
            opacity: 1 !important;
            visibility: visible !important;
            display: inline-flex !important;
            pointer-events: auto !important;
            transition: top 0.3s ease, z-index 0.3s ease;
        }
        
        /* عندما يكون dropdown مفتوح، visitor-float ينزل تحته */
        #userMenu:not(.hidden) ~ * #visitorFloat,
        body:has(#userMenu:not(.hidden)) #visitorFloat {
            z-index: 40 !important;
        }
        
        /* التأكد من أن header لا يغطي visitor-float */
        header.sticky {
            z-index: 50 !important;
        }
        
        /* التأكد من أن dropdown فوق visitor-float */
        #userMenu {
            z-index: 60 !important;
        }
        
        .visitor-float .num { 
            font-weight: 700; 
            color: var(--accent);
            font-size: 0.75rem;
            white-space: nowrap;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .visitor-float .icon { 
            color: var(--accent);
            font-size: 0.875rem;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
            width: auto;
            height: auto;
            min-width: 0.875rem;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .visitor-float #visitor-label-float {
            font-size: 0.7rem;
            color: var(--text-muted);
            white-space: nowrap;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        [dir="rtl"] .visitor-float { 
            left: 16px; 
            right: auto; 
        }
        
        [dir="ltr"] .visitor-float { 
            right: 16px; 
            left: auto; 
        }
        
        /* User Menu Dropdown Styles */
        [dir="rtl"] #userMenu {
            right: 0;
            left: auto;
        }
        
        [dir="ltr"] #userMenu {
            left: 0;
            right: auto;
        }
        
        /* تحسين ألوان dropdown حسب الثيم */
        [data-theme="light"] #userMenu {
            background: rgba(255, 255, 255, 0.98) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        
        [data-theme="light"] #userMenu .text-white\/90,
        [data-theme="light"] #userMenu .text-white\/60 {
            color: rgba(0, 0, 0, 0.9) !important;
        }
        
        [data-theme="light"] #userMenu .text-white\/60 {
            color: rgba(0, 0, 0, 0.6) !important;
        }
        
        [data-theme="light"] #userMenu button {
            color: rgba(0, 0, 0, 0.9) !important;
        }
        
        [data-theme="light"] #userMenu button:hover {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        [data-theme="dark"] #userMenu {
            background: rgba(11, 15, 20, 0.98) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        [data-theme="dark"] #userMenu .text-white\/90,
        [data-theme="dark"] #userMenu .text-white\/60 {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        [data-theme="dark"] #userMenu .text-white\/60 {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        [data-theme="dark"] #userMenu button {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        [data-theme="dark"] #userMenu button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }
        
        /* تحسين الخط في زر الترحيب */
        #loginBtn {
            font-weight: 700 !important;
            letter-spacing: 0.02em;
            color: #000 !important;
        }
        
        #loginBtn i {
            color: #000 !important;
            font-size: 1rem !important;
            opacity: 1 !important;
            font-weight: 900 !important;
        }
        
        #loginBtn span {
            color: #000 !important;
            font-weight: 700 !important;
        }
        
        [data-theme="light"] #loginBtn {
            background: var(--primary) !important;
            color: #000 !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        
        [data-theme="light"] #loginBtn i {
            color: #000 !important;
        }
        
        [data-theme="light"] #loginBtn span {
            color: #000 !important;
        }
        
        [data-theme="dark"] #loginBtn {
            background: var(--primary) !important;
            color: #000 !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        
        [data-theme="dark"] #loginBtn i {
            color: #000 !important;
        }
        
        [data-theme="dark"] #loginBtn span {
            color: #000 !important;
        }
        
        /* تحسين الخط في dropdown */
        #userMenu {
            font-weight: 500;
        }
        
        #userMenu .text-sm {
            font-weight: 600;
        }
        
        #userMenu button {
            font-weight: 500;
        }
        
        /* Language Button Active State */
        .lang-btn.active {
            background-color: var(--primary) !important;
            color: #000 !important;
        }
        
        .lang-btn:not(.active) {
            background-color: transparent !important;
        }
        
        /* Language Button Active State (for bg-primary class) */
        .lang-btn.bg-primary {
            background-color: var(--primary) !important;
            color: #000 !important;
        }
        
        /* Header Sticky Styles */
        header.sticky {
            background: rgba(255, 255, 255, 0.7) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
        }
        
        [data-theme="dark"] header.sticky {
            background: rgba(11, 15, 20, 0.95) !important;
        }
        
        header.sticky .border-black\/5 {
            border-color: rgba(0, 0, 0, 0.05) !important;
        }
        
        [data-theme="dark"] header.sticky .border-black\/5 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        /* Mobile Header - Top Bar Layout */
        @media (max-width: 768px) {
            header.sticky {
                padding: 0 !important;
            }
            
            header.sticky > div {
                padding: 0.5rem 1rem !important;
            }
            
            header.sticky .flex.items-center.justify-between {
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 0.5rem !important;
                align-items: center !important;
            }
            
            /* Brand - أصغر على الموبايل */
            /* تكبير favicon/logo في الـ header */
            .trendlens-logo img,
            header .trendlens-logo img,
            .loader-logo-svg,
            #loader-logo-svg,
            img[alt="TrendLens"],
            img[src*="logo.svg"],
            img[src*="favicon"] {
                width: auto !important;
                height: 2.5em !important;
                max-height: 2.5em !important;
                min-height: 2.5em !important;
            }
            
            header.sticky .trendlens-logo img {
                height: 2rem !important;
                width: 2rem !important;
            }
            
            header.sticky h1 {
                font-size: 0.875rem !important;
                line-height: 1.2 !important;
            }
            
            header.sticky .nav-logo-label {
                font-size: 0.6rem !important;
                line-height: 1.2 !important;
            }
            
            /* Controls Group - مضغوط وأفقي دائماً */
            header.sticky .flex.items-center.gap-2 {
                gap: 0.5rem !important;
                flex-direction: row !important;
                display: flex !important;
                flex-wrap: nowrap !important;
            }
            
            /* Theme Toggle - حجم ثابت 36px */
            header.sticky #themeToggle {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
                flex-shrink: 0 !important;
            }
            
            /* Language Switcher - أفقي دائماً */
            header.sticky .flex.items-center.rounded-xl {
                display: flex !important;
                flex-direction: row !important;
                gap: 0.25rem !important;
                flex-wrap: nowrap !important;
            }
            
            header.sticky .lang-btn {
                font-size: 0.65rem !important;
                padding: 0.25rem 0.5rem !important;
                min-width: 36px !important;
                height: 28px !important;
            }
            
            /* Auth Button - واحد فقط */
            header.sticky #loginBtn {
                font-size: 0.7rem !important;
                padding: 0.4rem 0.6rem !important;
                max-width: 120px !important;
            }
            
            header.sticky #loginBtn i.fa-chevron-down {
                display: none !important;
            }
        }
        
        /* User Menu Dropdown Styles */
        #userMenu {
            animation: fadeInDown 0.2s ease-out;
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* تحسين User Menu على الموبايل */
        @media (max-width: 768px) {
            #userMenu {
                width: calc(100vw - 2rem) !important;
                max-width: 320px !important;
            }
            
            #loginBtn {
                max-width: calc(100vw - 8rem) !important;
            }
        }
        
        /* Mobile adjustments for visitor float */
        @media (max-width: 768px) {
            .visitor-float {
                top: 70px !important;
                padding: 8px 12px !important;
                gap: 6px !important;
                font-size: 0.75rem !important;
                width: auto !important;
                max-width: none !important;
                min-width: fit-content !important;
                display: inline-flex !important;
                flex-wrap: nowrap !important;
                white-space: nowrap !important;
                opacity: 1 !important;
                visibility: visible !important;
                z-index: 9999 !important;
                position: fixed !important;
            }
            
            .visitor-float .num {
                font-size: 0.8rem !important;
                font-weight: 700 !important;
                flex-shrink: 0 !important;
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .visitor-float .icon {
                font-size: 0.875rem !important;
                min-width: 0.875rem !important;
                line-height: 1 !important;
                flex-shrink: 0 !important;
                display: inline-flex !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .visitor-float #visitor-label-float {
                font-size: 0.7rem !important;
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
                white-space: nowrap !important;
            }
            
            /* تحسين الوضوح في الثيم الأبيض */
            [data-theme="light"] .visitor-float {
                background: rgba(255, 255, 255, 0.95) !important;
                border: 1px solid rgba(254, 186, 4, 0.3) !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
            }
            
            [data-theme="light"] .visitor-float .num {
                color: var(--accent) !important;
            }
            
            [data-theme="light"] .visitor-float .icon {
                color: var(--accent) !important;
            }
            
            /* تحسين الوضوح في الثيم الداكن */
            [data-theme="dark"] .visitor-float {
                background: rgba(19, 22, 30, 0.95) !important;
                border: 1px solid rgba(254, 186, 4, 0.3) !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
            }
            
            [data-theme="dark"] .visitor-float .num {
                color: var(--primary) !important;
            }
            
            [data-theme="dark"] .visitor-float .icon {
                color: var(--primary) !important;
            }
            
            .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: 70px !important;
                padding: 5px 8px;
                gap: 4px;
                font-size: 0.65rem;
                border-radius: 10px;
                width: auto !important;
                max-width: 180px !important;
                display: inline-flex !important;
                z-index: 9999 !important;
                position: fixed !important;
                opacity: 1 !important;
                visibility: visible !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%;
            direction: inherit;
        }
        .brand-logos-track {
            display: inline-flex;
            align-items: center;
            gap: 3rem;
            white-space: nowrap;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: transform;
        }
        .brand-logos[dir="ltr"] .brand-logos-track {
            animation: brand-slide-ltr 30s linear infinite;
        }
        .brand-logos[dir="rtl"] .brand-logos-track {
            animation: brand-slide-rtl 30s linear infinite;
        }
        /* Fallback: إذا لم يتم ضبط dir، استخدم الاتجاه من documentElement */
        .brand-logos:not([dir]) .brand-logos-track {
            animation: var(--brand-animation, brand-slide-ltr) 30s linear infinite;
        }
        .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 {
        
        /* Research Hub - مؤشر التحديث */
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        .research-hub-update-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 9px;
            font-weight: 600;
        }
        
        .research-hub-update-indicator.updated {
            color: #10b981;
        }
        
        .research-hub-update-indicator.updated .blink-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #10b981;
            animation: blink 1.5s ease-in-out infinite;
            box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
        }
        
        .research-hub-update-indicator.updating {
            color: #f59e0b;
        }
        
        .research-hub-update-indicator.updating .spinner {
            width: 8px;
            height: 8px;
            border: 2px solid rgba(245, 158, 11, 0.3);
            border-top-color: #f59e0b;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
            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;
        }
        
        /* Ensure Home Explosions Section is always visible */
        #homeExplosions {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* إزالة الخط الأزرق من روابط الكروت */
        #homeExplosionsGrid a,
        #homeExplosionsGrid a:link,
        #homeExplosionsGrid a:visited,
        #homeExplosionsGrid a:hover,
        #homeExplosionsGrid a:active {
            border-color: rgba(255,255,255,0.1) !important;
            outline: none !important;
            box-shadow: none !important;
            text-decoration: none !important;
        }
        
        /* إخفاء أي sparkline في قسم homeExplosions */
        #homeExplosions svg.tl-sparkline,
        #homeExplosions .tl-sparkline,
        #homeExplosions .tl-sparkline-wrapper,
        #homeExplosions .tl-sparkline-line,
        #homeExplosions path.tl-sparkline-line,
        #homeExplosions svg[class*="sparkline"],
        #homeExplosions [class*="sparkline"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* إخفاء sparkline في قسم trending-cards-section */
        #trending-cards-section .tl-sparkline-wrapper,
        #trending-cards-section .tl-sparkline,
        #trending-cards-section svg.tl-sparkline,
        #trending-cards-section path.tl-sparkline-line,
        #exploding-products-grid .tl-sparkline-wrapper,
        #exploding-products-grid .tl-sparkline,
        #exploding-products-grid svg.tl-sparkline,
        #exploding-products-grid path.tl-sparkline-line {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* تحسين تصميم الكروت */
        #trending-cards-section .tl-card,
        #exploding-products-grid .tl-card {
            background: linear-gradient(135deg, rgba(254,186,4,0.08) 0%, rgba(19,22,30,0.95) 100%) !important;
            border: 1px solid rgba(254,186,4,0.25) !important;
            border-radius: 16px !important;
            padding: 1.25rem 1.5rem !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        #trending-cards-section .tl-card:hover,
        #exploding-products-grid .tl-card:hover {
            background: linear-gradient(135deg, rgba(254,186,4,0.15) 0%, rgba(19,22,30,0.98) 100%) !important;
            border-color: rgba(254,186,4,0.4) !important;
            transform: translateY(-4px) scale(1.02) !important;
            box-shadow: 0 8px 24px rgba(254,186,4,0.25) !important;
        }
        
        /* تحسين تصميم العنوان */
        #trending-cards-section .tl-card-title h4,
        #exploding-products-grid .tl-card-title h4 {
            font-size: 18px !important;
            font-weight: 800 !important;
            color: #fff !important;
            margin: 8px 0 !important;
            line-height: 1.4 !important;
        }
        
        /* تحسين تصميم الـ badges */
        #trending-cards-section .tl-badge--hot,
        #exploding-products-grid .tl-badge--hot {
            background: rgba(254,186,4,0.2) !important;
            color: #feba04 !important;
            padding: 4px 10px !important;
            border-radius: 8px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
        }
        
        /* تحسين تصميم الـ metrics */
        #trending-cards-section .tl-metric,
        #exploding-products-grid .tl-metric {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 8px 0 !important;
        }
        
        #trending-cards-section .tl-metric-value,
        #exploding-products-grid .tl-metric-value {
            font-size: 16px !important;
            font-weight: 700 !important;
        }
        
        /* 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 !important;
            visibility: hidden !important;
            transform: scale(1.02);
            pointer-events: none !important;
            display: none !important;
            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;
        }
        
        @keyframes hideIntroScreen {
            to {
                opacity: 0;
                visibility: hidden;
                transform: scale(1.02);
            }
        }
        
        /* 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;
            }
            
            /* توحيد حجم الشارات على الموبايل */
            .market-feed-card span[class*="px-2"] {
                padding: 0.25rem 0.5rem !important;
                font-size: 0.625rem !important;
            }
        }
        
        /* توحيد حجم الشارات على جميع الشاشات */
        .market-feed-card span[class*="badge"],
        .market-feed-card span[class*="px-2"][class*="py-0.5"] {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.625rem !important;
            line-height: 1.2 !important;
        }
        
        /* 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;
        }
        
        /* تحسين Header على الموبايل */
        @media (max-width: 768px) {
            .top-nav-compact {
                padding: 0.5rem 0.75rem !important;
                max-height: none !important;
                min-height: auto !important;
            }
            
            .top-nav-compact .main-container-new {
                padding: 0 !important;
            }
            
            .top-nav-compact .flex.items-center.justify-between {
                flex-wrap: nowrap !important;
                gap: 0.5rem !important;
                align-items: center !important;
            }
            
            /* Logo Section - أكثر إحكاماً */
            .top-nav-compact .flex.items-center.gap-2 {
                gap: 0.5rem !important;
            }
            
            .top-nav-compact .trendlens-logo {
                flex-shrink: 0 !important;
            }
            
            .top-nav-compact .trendlens-logo img {
                height: 2.25rem !important;
                width: 2.25rem !important;
            }
            
            .top-nav-compact h1 {
                font-size: 1rem !important;
                line-height: 1.1 !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .top-nav-compact .nav-logo-label {
                font-size: 0.55rem !important;
                margin-top: 0 !important;
                line-height: 1.1 !important;
                padding: 0 !important;
            }
            
            /* تجميع الأزرار في صف واحد - بدون مسافات كبيرة */
            .top-nav-compact > .main-container-new > .flex > div:last-child {
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: 0.25rem !important;
                align-items: center !important;
            }
            
            .top-nav-compact .theme-toggle-btn {
                width: 30px !important;
                height: 30px !important;
                padding: 0 !important;
                flex-shrink: 0 !important;
                min-width: 30px !important;
            }
            
            .top-nav-compact .theme-toggle-btn i {
                font-size: 0.75rem !important;
            }
            
            .top-nav-compact .lang-btn {
                font-size: 0.6rem !important;
                padding: 0.2rem 0.4rem !important;
                min-width: 32px !important;
                height: 24px !important;
            }
            
            .top-nav-compact .nav-link {
                font-size: 0.65rem !important;
                padding: 0.3rem 0.4rem !important;
                white-space: nowrap !important;
            }
            
            .top-nav-compact .hero-cta-btn {
                font-size: 0.65rem !important;
                padding: 0.3rem 0.5rem !important;
                white-space: nowrap !important;
            }
            
            /* تجميع الأزرار بدون مسافات كبيرة */
            .top-nav-compact #welcomeArea {
                gap: 0.25rem !important;
            }
            
            .top-nav-compact .flex.items-center.gap-0\.5 {
                gap: 0.125rem !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 */
        @media (max-width: 1023px) {
            .hero-compact {
                min-height: auto;
                max-height: none;
                padding: 2rem 0;
                margin-bottom: 2rem;
                position: relative;
                z-index: 1;
            }
            
            .hero-compact .grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 2rem !important;
            }
            
            .hero-compact-left {
                order: 1;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
            
            .hero-snapshot-box {
                order: 2;
                width: 100%;
                max-width: 100%;
                margin-top: 0;
                box-sizing: border-box;
                position: relative;
                z-index: 1;
            }
        }
        
        @media (max-width: 768px) {
            .hero-compact {
                padding: 1.5rem 0 !important;
                margin-bottom: 2rem !important;
            }
            
            .hero-compact .grid {
                gap: 1.5rem !important;
            }
            
            .hero-compact-title {
                font-size: 1.75rem !important;
                line-height: 1.3 !important;
            }
            
            .hero-compact-subtitle {
                font-size: 0.875rem !important;
            }
            
            .hero-cta-buttons {
                flex-direction: column !important;
            }
            
            .hero-cta-btn {
                width: 100% !important;
            }
            
            /* منع تداخل AI Brain مع Hero */
            .hero-compact {
                margin-bottom: 3rem !important;
                padding-bottom: 2rem !important;
            }
            
            .ai-brain-section {
                margin-top: 3rem !important;
                padding-top: 2rem !important;
                clear: both !important;
                position: relative !important;
                z-index: 2 !important;
            }
        }

        .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;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        
        .hero-snapshot-box * {
            box-sizing: border-box;
        }
        
        /* منع تداخل AI Brain مع Live Snapshot */
        .hero-compact {
            position: relative;
            z-index: 1;
            margin-bottom: 2rem;
        }
        
        .hero-snapshot-box {
            position: relative;
            z-index: 1;
            isolation: isolate;
        }
        
        .ai-brain-section {
            position: relative;
            z-index: 2;
            clear: both;
            margin-top: 2rem;
            isolation: isolate;
        }
        
        /* على الموبايل - منع أي تداخل */
        @media (max-width: 768px) {
            .hero-compact {
                margin-bottom: 2rem !important;
                padding-bottom: 2rem !important;
            }
            
            .hero-snapshot-box {
                margin-bottom: 2rem !important;
                position: relative !important;
                z-index: 1 !important;
            }
            
            .ai-brain-section {
                margin-top: 2rem !important;
                padding-top: 2rem !important;
                position: relative !important;
                z-index: 2 !important;
                clear: both !important;
            }
            
            /* منع أي overflow */
            .hero-compact,
            .hero-snapshot-box,
            .ai-brain-section {
                overflow: visible !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;
            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;
            align-items: start;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
        
        .ai-brain-content {
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            position: relative;
        }
        
        .ai-brain-content *,
        .ai-brain-content *::before,
        .ai-brain-content *::after {
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Force all text elements to wrap */
        .ai-brain-content h2,
        .ai-brain-content p,
        .ai-brain-content li,
        .ai-brain-content span {
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
            hyphens: auto;
            max-width: 100% !important;
            width: 100% !important;
        }
        
        .ai-brain-content h2,
        .ai-brain-content p,
        .ai-brain-content ul,
        .ai-brain-content button {
            max-width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
            min-width: 0;
        }
        
        .ai-brain-content h2 {
            line-height: 1.3;
            hyphens: auto;
        }
        
        .ai-brain-content ul {
            list-style-position: outside;
            padding-right: 1.25rem;
            padding-left: 0;
            margin: 0;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }
        
        .ai-brain-content li {
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
            padding-right: 0.5rem;
            width: 100%;
            max-width: 100%;
            display: block;
            overflow: hidden;
        }
        
        .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);
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            word-wrap: break-word;
            overflow-wrap: break-word;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
        
        .ai-chat-snapshot > div {
            word-wrap: break-word;
            overflow-wrap: break-word;
            min-width: 0;
        }
        
        .ai-chat-snapshot .text-sm,
        .ai-chat-snapshot .text-xs {
            word-break: break-word;
            hyphens: auto;
            overflow-wrap: break-word;
        }
        
        .break-words {
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        /* Global fix for all mobile devices - prevent overflow */
        @media (max-width: 1024px) {
            .ai-brain-content,
            .ai-brain-content * {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .ai-brain-content h2,
            .ai-brain-content p,
            .ai-brain-content ul,
            .ai-brain-content li {
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
            }
        }

        /* 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: repeat(2, 1fr) !important;
                gap: 0.5rem !important;
            }
            
            /* تحسين كروت الفيديو للموبايل */
            #videoSignalsBody .dashboard-card {
                padding: 0.5rem !important;
            }
            
            #videoSignalsBody .dashboard-card-header {
                padding-bottom: 0.25rem !important;
                margin-bottom: 0.25rem !important;
            }
            
            #videoSignalsBody .dashboard-card-title {
                font-size: 0.65rem !important;
                line-height: 1.2 !important;
            }
            
            #videoSignalsBody .aspect-square {
                margin-bottom: 0.5rem !important;
            }
            
            /* تحسين زر التشغيل في الموبايل */
            #videoSignalsBody .aspect-square a > div > div {
                width: 2.5rem !important;
                height: 2.5rem !important;
            }
            
            #videoSignalsBody .aspect-square a > div > div i {
                font-size: 0.875rem !important;
            }
            
            #videoSignalsBody .aspect-square a > div > span {
                font-size: 0.625rem !important;
                padding: 0.125rem 0.375rem !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;
                box-sizing: border-box !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
            
            .hero-snapshot-box > div {
                box-sizing: border-box !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            
            .hero-snapshot-box .flex {
                flex-wrap: wrap !important;
                gap: 0.5rem !important;
            }
            
            .hero-snapshot-box .text-sm,
            .hero-snapshot-box .text-xs {
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
            }
            
            .hero-snapshot-box .bg-gradient-to-br {
                padding: 0.75rem !important;
                margin-bottom: 0.75rem !important;
            }
            
            .hero-snapshot-box .text-lg {
                font-size: 0.875rem !important;
                word-wrap: break-word !important;
            }
            
            .hero-snapshot-box .text-2xl {
                font-size: 1.25rem !important;
            }
            
            .hero-snapshot-box .space-y-1 > div {
                flex-wrap: wrap !important;
                gap: 0.25rem !important;
            }
            
            .hero-snapshot-box .space-y-1 span {
                word-wrap: break-word !important;
                overflow-wrap: break-word !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;
            }
            
            /* منع التمرير الأفقي - السماح بالتمرير العمودي */
            html, body {
                overflow-x: hidden !important;
                overflow-y: auto !important;
                min-height: 100vh !important;
                height: auto !important;
            }
            
            body {
                padding-bottom: 2rem !important;
            }
            
            .main-container-new,
            .dashboard-card {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .ai-brain-section {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
                padding: 1.5rem 0 !important;
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
            
            .ai-brain-content,
            .ai-chat-snapshot {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                position: relative !important;
            }
            
            .ai-brain-content {
                padding: 0 !important;
                margin: 0 !important;
                margin-bottom: 1rem !important;
            }
            
            .ai-brain-content *,
            .ai-brain-content *::before,
            .ai-brain-content *::after {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            /* Force prevent overflow */
            .ai-brain-content h2,
            .ai-brain-content p,
            .ai-brain-content li,
            .ai-brain-content span,
            .ai-brain-content button {
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
        }

        .ai-chat-snapshot {
                padding: 1rem !important;
                margin: 0 !important;
            }
            
            .ai-brain-content h2 {
                font-size: 1.5rem !important;
                margin: 0 !important;
                margin-bottom: 0.75rem !important;
                padding: 0 !important;
                line-height: 1.3 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                hyphens: auto !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }
            
            .ai-brain-content p {
                font-size: 0.875rem !important;
                margin: 0 !important;
                margin-bottom: 1rem !important;
                padding: 0 !important;
                line-height: 1.6 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }
            
            .ai-brain-content ul {
                margin: 0 !important;
                margin-bottom: 1rem !important;
                padding: 0 !important;
                padding-right: 0.5rem !important;
                padding-left: 0 !important;
                list-style-position: outside !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }
            
            .ai-brain-content li {
                font-size: 0.875rem !important;
                margin: 0 !important;
                margin-bottom: 0.5rem !important;
                padding: 0 !important;
                padding-right: 0.5rem !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                display: block !important;
            }
            
            .ai-brain-content button {
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .ai-chat-snapshot > div {
                margin-bottom: 0.75rem !important;
                padding: 0 !important;
            }
            
            .ai-chat-snapshot .text-sm {
                font-size: 0.8125rem !important;
                line-height: 1.5 !important;
            }
            
            .ai-chat-snapshot .text-xs {
                font-size: 0.75rem !important;
            }
        }
        
        /* Extra Small Mobile (320px - 479px) */
        @media (max-width: 479px) {
            .ai-brain-section {
                padding: 1rem 0 !important;
                gap: 1rem !important;
            }
            
            .ai-brain-content h2 {
                font-size: 1.25rem !important;
                line-height: 1.3 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                max-width: 100% !important;
            }
            
            .ai-brain-content p,
            .ai-brain-content li {
                font-size: 0.8125rem !important;
            }
            
            .ai-chat-snapshot {
                padding: 0.75rem !important;
            }
            
            .ai-chat-snapshot .text-sm {
                font-size: 0.75rem !important;
            }
            
            /* Hero Snapshot - Extra Small */
            .hero-snapshot-box {
                padding: 0.75rem !important;
            }
            
            .hero-snapshot-box .text-lg {
                font-size: 0.8125rem !important;
            }
            
            .hero-snapshot-box .text-2xl {
                font-size: 1.125rem !important;
            }
            
            .hero-snapshot-box .bg-gradient-to-br {
                padding: 0.5rem !important;
            }
            
            .hero-snapshot-box .space-y-1 > div {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.25rem !important;
            }
        }
        
        /* Small Mobile (480px - 639px) */
        @media (min-width: 480px) and (max-width: 639px) {
            .ai-brain-section {
                padding: 1.25rem 0 !important;
                gap: 1.25rem !important;
            }
        }
        
        /* Medium Mobile/Tablet (640px - 767px) */
        @media (min-width: 640px) and (max-width: 767px) {
            .ai-brain-section {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
                padding: 1.5rem 0 !important;
            }
        }
        
        /* Tablet Portrait (768px - 1023px) */
        @media (min-width: 768px) and (max-width: 1023px) {
            .ai-brain-section {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
                padding: 2rem 0;
            }
            
            .ai-brain-content,
            .ai-chat-snapshot {
                max-width: 100%;
            }
        }


        /* 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;
            margin-top: 3rem;
            position: relative;
            z-index: 1;
        }
        
        /* على الموبايل - تحسين Footer */
        @media (max-width: 768px) {
            .footer-compact {
                padding: 1.5rem 0 !important;
                margin-top: 2rem !important;
            }
            
            .footer-compact .flex {
                flex-direction: column !important;
                gap: 1rem !important;
                align-items: center !important;
                text-align: center !important;
            }
            
            .footer-compact .footer-links {
                flex-wrap: wrap !important;
                justify-content: center !important;
            }
        }

        .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.75rem 1rem !important;
                max-height: none !important;
                min-height: 70px !important;
            }
            
            .top-nav-compact .flex.items-center.justify-between {
                flex-wrap: wrap !important;
                gap: 0.75rem !important;
            }
            
            .top-nav-compact .trendlens-logo img {
                height: 3rem !important;
                width: 3rem !important;
            }
            
            .top-nav-compact h1 {
                font-size: 1.25rem !important;
                line-height: 1.2 !important;
            }
            
            .top-nav-compact .nav-logo-label {
                font-size: 0.65rem !important;
                margin-top: 0.125rem !important;
            }
            
            .top-nav-compact .nav-link {
                font-size: 0.75rem !important;
                padding: 0.4rem 0.5rem !important;
            }
            
            .top-nav-compact .theme-toggle-btn {
                width: 36px !important;
                height: 36px !important;
            }
            
            .top-nav-compact .lang-btn {
                font-size: 0.7rem !important;
                padding: 0.35rem 0.6rem !important;
            }
            
            .top-nav-compact .hero-cta-btn {
                font-size: 0.75rem !important;
                padding: 0.5rem 0.75rem !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); overflow-y: auto; height: auto;">
    <!-- Ambient background (v3) -->
    <div class="tl-ambient" aria-hidden="true">
        <canvas id="tlParticles"></canvas>
    </div>
    <!-- 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" data-i18n="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="sticky top-0 z-50 bg-white/70 dark:bg-[#0b0f14]/95 backdrop-blur-xl border-b border-black/5 dark:border-white/10">
        <div class="mx-auto max-w-6xl px-4 py-2 md:py-3">
            <div class="flex items-center justify-between gap-2">
                <!-- Left: Brand -->
                <div class="flex items-center gap-2 flex-1 min-w-0">
                    <div class="trendlens-logo shrink-0">
                        <img src="/trendlens/assets/brand/logo.svg" alt="TrendLens"
                             class="h-8 w-8 md:h-9 md:w-9"
                             onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.png'">
                    </div>
                    <div class="min-w-0">
                        <h1 class="text-sm md:text-base font-bold gradient-text leading-tight truncate">TrendLens</h1>
                        <div class="nav-logo-label text-[10px] md:text-xs leading-tight opacity-80 truncate hidden sm:block"
                             data-i18n="nav_subtitle">Global Commerce Intelligence</div>
                    </div>
                </div>
                
                <!-- Right: Controls + Auth -->
                <div class="flex items-center gap-2 shrink-0">
                    <!-- Navigation Links (desktop only) - تظهر فقط عند تسجيل الدخول -->
                    <div class="hidden md:flex items-center gap-2">
                        <a id="navDashboardLink" href="/trendlens/dashboard.html" class="nav-link text-sm hidden" data-i18n="nav_dashboard">Dashboard</a>
                        <a href="#" class="nav-link text-sm" data-i18n="nav_pricing">Pricing</a>
                    </div>
                    
                    <!-- Controls Group: Theme + Language -->
                    <div class="flex items-center gap-2">
                        <!-- Theme Toggle -->
                        <button id="themeToggle" onclick="toggleTheme()"
                                class="h-9 w-9 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 flex items-center justify-center transition"
                                aria-label="" data-i18n-aria-label="common.toggle_theme" title="" data-i18n-title="common.toggle_theme">
                            <i class="fas fa-sun text-sm" id="themeIcon"></i>
                        </button>
                        
                        <!-- Language Switcher (icons only) -->
                        <div class="tl-lang-switcher" data-tl-lang-ui>
                            <button type="button" class="tl-lang-btn" data-tl-lang-btn aria-haspopup="menu" aria-expanded="false" aria-label="Language">
                                <span class="tl-lang-icon" data-tl-lang-current>
                                    <img src="/trendlens/assets/brand/lang-en-us.svg" alt="">
                                </span>
                            </button>
                            <div class="tl-lang-menu hidden" data-tl-lang-menu role="menu" aria-label="Language menu">
                                <button type="button" class="tl-lang-item" data-tl-locale="ar-KW" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/arab-league-mark.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">العربية</span>
                                    </span>
                                </button>
                                <button type="button" class="tl-lang-item" data-tl-locale="en-US" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/lang-en-us.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">English</span>
                                    </span>
                                </button>
                                <button type="button" class="tl-lang-item" data-tl-locale="hi-IN" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/lang-hi-in.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">Hindi</span>
                                    </span>
                                </button>
                                <button type="button" class="tl-lang-item" data-tl-locale="es-ES" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/lang-es-mx.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">Spanish</span>
                                    </span>
                                </button>
                                <button type="button" class="tl-lang-item" data-tl-locale="pt-BR" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/lang-pt-br.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">Portuguese</span>
                                    </span>
                                </button>
                                <button type="button" class="tl-lang-item" data-tl-locale="tr-TR" role="menuitem">
                                    <span class="tl-lang-left">
                                        <span class="tl-lang-icon" data-tl-icon>
                                            <img src="/trendlens/assets/brand/lang-tr-tr.svg" alt="">
                                        </span>
                                        <span class="tl-sr-only">Turkish</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <select id="tlLangSelect" class="tl-lang-select tl-sr-only" aria-label="Language">
                            <option value="en-US">🇺🇸</option>
                            <option value="ar-KW">🌐</option>
                            <option value="es-ES">🇲🇽</option>
                            <option value="hi-IN">🇮🇳</option>
                            <option value="pt-BR">🇧🇷</option>
                            <option value="tr-TR">🇹🇷</option>
                        </select>
                    </div>
                    
                    <!-- Partner CTA (outside dropdown) -->
                    <button id="partnerApplyBtn"
                            class="nav-link text-sm"
                            onclick="window.location.href='/trendlens/partner-apply.html'">
                        <i class="fas fa-handshake me-1"></i>
                        <span data-i18n="partner_apply">انضم كشريك</span>
                    </button>

                    <!-- Partner Dashboard (shown only for partner role) -->
                    <button id="partnerDashboardBtn"
                            class="nav-link text-sm hidden"
                            onclick="window.location.href='/trendlens/partner-dashboard.html'">
                        <i class="fas fa-chart-line me-1"></i>
                        <span data-i18n="partner_dashboard_btn">لوحة الشريك</span>
                    </button>
                    
                    <!-- Auth Area (Single Button) -->
                    <div id="welcomeArea" class="relative">
                        <!-- Trigger (keeps loginBtn id) -->
                        <button id="loginBtn" onclick="toggleUserMenu(event)"
                                class="px-3 py-1.5 md:px-4 md:py-2 rounded-xl bg-primary text-black hover:bg-yellow-500 transition flex items-center gap-2 text-xs md:text-sm font-bold max-w-[140px] md:max-w-none truncate shadow-sm"
                                data-i18n="btn_login" aria-haspopup="menu" aria-expanded="false" style="color: #000 !important; font-weight: 700 !important;">
                            <i class="fas fa-user-circle" style="color: #000 !important; font-size: 1rem !important; font-weight: 900 !important;"></i>
                            <span class="truncate" style="color: #000 !important; font-weight: 700 !important;" data-i18n="btn_login">
                                تسجيل الدخول
                            </span>
                            <i class="fas fa-chevron-down text-[10px]" style="color: #000 !important; opacity: 0.8 !important;"></i>
                    </button>
                        
                        <!-- Dropdown Menu -->
                        <div id="userMenu"
                             class="hidden absolute z-50 mt-2 w-64 md:w-72 rounded-2xl border border-white/10 bg-[#0b0f14]/95 dark:bg-white/95 backdrop-blur-xl shadow-2xl overflow-hidden">
                            <div class="px-4 py-3 border-b border-white/10 dark:border-black/10">
                                <div class="text-xs text-white/60 dark:text-black/60" data-i18n="account_label">Account</div>
                                <div id="userMenuAccountName" class="text-sm text-white/90 dark:text-black/90 font-semibold truncate">—</div>
                            </div>
                            <div class="p-2 space-y-1">
                                <!-- Settings -->
                                <a id="settingsMenuBtn" href="/trendlens/dashboard.html#settings"
                                        class="hidden w-full text-left px-3 py-2 rounded-xl hover:bg-white/10 dark:hover:bg-black/10 transition text-sm text-white/90 dark:text-black/90 flex items-center gap-2">
                                    <i class="fas fa-cog"></i>
                                    <span data-i18n="nav_settings">الإعدادات</span>
                                </a>
                                <!-- Register -->
                                <button id="registerBtn" onclick="openAuthModal('register')"
                                        class="w-full text-left px-3 py-2 rounded-xl hover:bg-white/10 dark:hover:bg-black/10 transition text-sm text-white/90 dark:text-black/90 flex items-center gap-2">
                                    <i class="fas fa-user-plus"></i>
                                    <span data-i18n="btn_register">إنشاء حساب</span>
                                </button>
                                <!-- Logout (kept id, now inside menu) -->
                                <button id="logoutHeaderBtn" onclick="handleLogout()"
                                        class="w-full text-left px-3 py-2 rounded-xl hover:bg-white/10 dark:hover:bg-black/10 transition text-sm text-white/90 dark:text-black/90 flex items-center gap-2">
                                    <i class="fas fa-sign-out-alt"></i>
                                    <span data-i18n="logout">Logout</span>
                                </button>
                            </div>
                        </div>
                    </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>

    <!-- Account State Banner (Visitor / Registered / Subscribed) -->
    <div id="homeAccountBanner" class="hidden mx-auto max-w-6xl mt-4 px-4">
        <div class="glass-effect rounded-2xl px-4 py-3 flex flex-col md:flex-row md:items-center md:justify-between gap-2 border border-primary/40 bg-amber-500/15">
            <div>
                <div id="homeAccountBannerTitle" class="text-sm md:text-base font-semibold text-primary">
                    <!-- يُعبّأ من الجافاسكربت حسب حالة الحساب -->
                </div>
                <div id="homeAccountBannerSubtitle" class="text-xs md:text-sm text-gray-300 mt-1">
                    <!-- يُعبّأ من الجافاسكربت حسب حالة الحساب -->
                </div>
            </div>
        </div>
    </div>


    <!-- Hero (v3: glass + fiber background, translated, theme-aware) -->
    <section class="tl-hero mx-auto max-w-6xl px-4 mt-8 md:mt-12">
        <div class="tl-heroCard rounded-3xl p-7 md:p-12 overflow-hidden">
            <div class="tl-heroGrid">
                <!-- Copy (less text, bigger impact) -->
                <div class="tl-heroCopy space-y-5">
                    <div class="tl-heroKicker px-3 py-1 rounded-full text-xs font-extrabold tl-pill">
                        <i class="fas fa-bolt"></i>
                        <span data-i18n="hero_eyebrow">٣ نماذج ذكاء تعمل لصالحك الآن</span>
                    </div>

                    <h2 class="tl-title tl-heroTitleTight text-3xl sm:text-4xl md:text-5xl font-black leading-[1.2] pb-2 mb-4 md:mb-6 gradient-text relative z-20" data-i18n="hero_title">
                        منصة TrendLens تجمع البحث والمساعدات الذكية في واجهة واحدة
                    </h2>

                    <!-- Keep subtitle but make it compact (still translated) -->
                    <p class="tl-subtitle text-sm md:text-base max-w-xl mx-auto lg:mx-0" data-i18n="hero_subtitle">
                        مستقبلك التجاري يبدأ من TrendLens… نحلّل البيانات ونحوّلها بذكاء اصطناعي إلى فرص قبل أن تصبح ترند.
                    </p>
                </div>

                <!-- Visual (creative animated “markets + trends” scene) -->
                <div class="tl-heroVisual" aria-hidden="true">
                    <div class="tl-visualGlow"></div>
                    <div class="tl-gridLines"></div>

                    <!-- Globe (gold wireframe + rotating orbits + pulsing signal) -->
                    <div class="tl-globeScene">
                        <div class="tl-globe">
                            <div class="tl-globeMeridians"></div>
                            <div class="tl-globeLatitudes"></div>
                            <!-- Continents (digital wireframe mask) -->
                            <div class="tl-globeContinents" aria-hidden="true">
                                <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" role="presentation">
                                    <defs>
                                        <!-- Line pattern used to “draw” inside continent shapes -->
                                        <pattern id="tlContinentLinePattern" patternUnits="userSpaceOnUse" width="10" height="10">
                                            <path d="M0 10 L10 0" stroke="rgba(254,186,4,.55)" stroke-width="1.1" opacity="0.55"/>
                                            <path d="M-2 8 L8 -2" stroke="rgba(254,186,4,.35)" stroke-width="1.0" opacity="0.45"/>
                                        </pattern>

                                        <!-- Simplified continent silhouettes as a mask (no images) -->
                                        <mask id="tlContinentMask">
                                            <rect width="400" height="400" fill="black"/>
                                            <!-- Americas (more detailed silhouette, tuned for the “Americas view” look) -->
                                            <path d="M118,76
                                                     C146,58 182,64 196,92
                                                     C206,112 202,132 190,148
                                                     C178,164 174,180 184,200
                                                     C198,228 188,256 162,272
                                                     C140,286 118,278 108,254
                                                     C98,230 108,212 122,198
                                                     C140,180 142,166 128,144
                                                     C114,122 94,98 118,76 Z
                                                     M170,206
                                                     C184,198 200,204 208,216
                                                     C218,230 212,246 198,254
                                                     C184,262 168,252 164,236
                                                     C160,222 160,212 170,206 Z" fill="white"/>
                                            <!-- Central/South extension -->
                                            <path d="M206,230
                                                     C218,238 226,252 222,270
                                                     C216,298 232,316 250,330
                                                     C268,344 260,366 238,370
                                                     C220,372 206,356 206,338
                                                     C206,318 194,300 184,284
                                                     C172,264 176,242 194,232
                                                     C198,230 202,230 206,230 Z" fill="white"/>
                                        </mask>

                                        <!-- Glow filter for continent edge -->
                                        <filter id="tlGoldGlow" x="-50%" y="-50%" width="200%" height="200%">
                                            <feGaussianBlur stdDeviation="2.6" result="b"/>
                                            <feColorMatrix in="b" type="matrix"
                                                values="1 0 0 0 0
                                                        0 0.85 0 0 0
                                                        0 0 0.2 0 0
                                                        0 0 0 0.9 0" result="c"/>
                                            <feMerge>
                                                <feMergeNode in="c"/>
                                                <feMergeNode in="SourceGraphic"/>
                                            </feMerge>
                                        </filter>
                                    </defs>

                                    <!-- Apply mask so lines only appear inside “continents” -->
                                    <g mask="url(#tlContinentMask)">
                                        <rect class="tl-continentLines" x="0" y="0" width="400" height="400" fill="url(#tlContinentLinePattern)"/>
                                    </g>

                                    <!-- Edge glow (continent outline) -->
                                    <g filter="url(#tlGoldGlow)" opacity="0.92">
                                        <path d="M118,76
                                                 C146,58 182,64 196,92
                                                 C206,112 202,132 190,148
                                                 C178,164 174,180 184,200
                                                 C198,228 188,256 162,272
                                                 C140,286 118,278 108,254
                                                 C98,230 108,212 122,198
                                                 C140,180 142,166 128,144
                                                 C114,122 94,98 118,76 Z"
                                              fill="none" stroke="rgba(254,186,4,.65)" stroke-width="2.2"/>
                                        <path d="M206,230
                                                 C218,238 226,252 222,270
                                                 C216,298 232,316 250,330
                                                 C268,344 260,366 238,370
                                                 C220,372 206,356 206,338
                                                 C206,318 194,300 184,284
                                                 C172,264 176,242 194,232
                                                 C198,230 202,230 206,230 Z"
                                              fill="none" stroke="rgba(254,186,4,.55)" stroke-width="2.0"/>
                                    </g>

                                    <!-- Hotspot dots (markets) -->
                                    <g class="tl-continentDots">
                                        <circle cx="150" cy="142" r="2.2"/>
                                        <circle cx="160" cy="172" r="2.0"/>
                                        <circle cx="176" cy="210" r="2.2"/>
                                        <circle cx="206" cy="246" r="2.0"/>
                                        <circle cx="228" cy="300" r="2.0"/>
                                    </g>
                                </svg>
                            </div>
                            <div class="tl-globeShade"></div>
                            <div class="tl-globeCore"></div>
                            <div class="tl-globeSpecular"></div>
                            <div class="tl-globePulse"></div>
                        </div>

                        <!-- Blue fiber network around globe -->
                        <svg class="tl-globeArcs" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
                            <path class="tl-globeArc" d="M85 240 C 150 90, 260 60, 310 160 S 440 360, 520 230"/>
                            <path class="tl-globeArc tl-globeArcAlt" d="M90 360 C 190 480, 320 500, 400 380 S 500 170, 520 320"/>
                            <path class="tl-globeArc" d="M140 160 C 220 210, 260 260, 300 300 S 400 380, 470 440"/>
                            <circle class="tl-globeSpark" cx="520" cy="230" r="2.6"/>
                            <circle class="tl-globeSpark tl-globeSparkAlt" cx="90" cy="360" r="2.2"/>
                            <circle class="tl-globeSpark" cx="470" cy="440" r="2.2"/>
                        </svg>

                        <div class="tl-globeEnergyRing" aria-hidden="true"></div>

                        <!-- Orbits with small “market nodes” rotating + pulsing -->
                        <div class="tl-globeRing tl-globeRingA"></div>
                        <div class="tl-globeRing tl-globeRingB"></div>
                        <div class="tl-globeRing tl-globeRingC"></div>
                    </div>

                    <!-- Floating “insight cards” (visual-only) -->
                    <div class="tl-floatCards">
                        <div class="tl-floatCard" style="top: 14%; left: 8%;">
                            <div class="tl-fcLabel" data-i18n="snapshotSourcesLabel">مصادر البيانات</div>
                            <div class="tl-fcValue" data-i18n="live">مباشر</div>
                        </div>
                        <div class="tl-floatCard" style="top: 18%; right: 10%;">
                            <div class="tl-fcLabel" data-i18n="ai_insights">رؤى الذكاء الاصطناعي</div>
                            <div class="tl-fcValue" data-i18n="ai_insights">رؤى الذكاء الاصطناعي</div>
                        </div>
                        <div class="tl-floatCard" style="bottom: 14%; left: 22%;">
                            <div class="tl-fcLabel" data-i18n="nav_dashboard">لوحة التحكم</div>
                            <div class="tl-fcValue" data-i18n="nav_dashboard">لوحة التحكم</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 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-4">
            <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="Example: matte ceramic / @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" data-i18n="common.expected_demand_7_days">Expected Demand (7 days)</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" data-i18n="common.recommended_suppliers">Recommended Suppliers</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" data-i18n="shipping.title">Shipping Pulse</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" data-i18n="r_ads_label">Market Ads Now</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" data-i18n="r_ai_label">AI Recommendation:</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 hidden" 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" data-i18n="hero_model_status">
                                النموذج الأساسي مفعل الآن
                            </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" data-i18n="hero_console_title">محرك تقييم المنتجات</h4>
                            </div>
                            <button class="hero-console-cta" onclick="openAuthModal('register')" data-i18n="hero_console_cta">سجل مجانًا</button>
                        </div>
                        <p class="hero-console-desc" id="heroConsoleDesc" data-i18n="hero_console_desc">أدخل منتجًا أو حسابًا اجتماعيًا لنعرض لك مؤشرات الطلب، الموردين، والشحن في أقل من 10 ثوانٍ.</p>
                        <div class="hero-search-shell">
                            <input 
                                type="text" 
                                id="heroSearchInput"
                                class="hero-search-input"
                                data-i18n-placeholder="hero_search_placeholder"
                                placeholder="Enter a product name, category, or Instagram/TikTok account to analyze success probability..."
                                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" data-i18n="hero_console_hint">النموذج الأساسي يعطيك قراءة سوقية + توصية ذكاء واحدة فورًا.</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" data-i18n="common.rising_product_7_days">Rising Product – Last 7 Days</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" data-i18n="common.category_office_furniture">Category: Office Furniture</span>
                                </div>

                                <div class="snapshot-metrics">
                                    <div class="metric">
                                        <div class="metric-label" data-i18n="common.growth_last_7_days">Growth Last 7 Days</div>
                                        <div class="metric-value positive">+82%</div>
                                    </div>
                                    <div class="metric">
                                        <div class="metric-label" data-i18n="common.growth_confidence">Growth Confidence</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>

        <!-- Trending Cards / Exploding Products Grid (يجب أن يكون قبل سكربت التحميل) -->
        <section id="trending-cards-section" class="main-container-new mt-8 mb-8" aria-label="Exploding Products">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-semibold text-primary" data-i18n="dashboard_exploding_products_title_7d">المنتجات المنفجرة – آخر 7 أيام</h3>
                <a href="/trendlens/dashboard.html?feature=EXPLODING_PRODUCTS" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/20 hover:bg-primary/30 text-primary font-semibold transition-colors text-sm">
                    <span data-i18n="more_in_dashboard">المزيد في الداشبورد</span>
                    <i class="fas fa-arrow-left text-xs"></i>
                </a>
            </div>
            <div id="exploding-products-grid" class="tl-cards-grid grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" role="list" data-no-convert="1"></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>


        <!-- TikTok Hot Signal Ticker - إشارات المنتجات المتفجرة -->
        <section class="main-container-new mb-4 mt-6">
            <div id="tiktok-hot-signal" data-auto-init
                 data-api-base="/trendlens/api"
                 data-min-score="30"
                 style="min-height: 52px;"></div>
            <script>
                (function(){
                    var el = document.getElementById('tiktok-hot-signal');
                    if (el) {
                        var lang = (document.documentElement.lang || 'en').toLowerCase();
                        el.setAttribute('data-lang', lang.startsWith('ar') ? 'ar' : 'en');
                    }
                })();
            </script>
        </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="" data-i18n-title="common.refresh">
                            <i class="fas fa-sync-alt text-[10px] text-gray-400 hover:text-primary transition-colors"></i>
                        </button>
                        <a id="viewDetailsDashboardLink" href="/trendlens/dashboard.html" class="px-2 py-1 rounded-md text-[9px] font-medium bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 hover:border-primary/50 transition-all duration-200 hover:scale-105 hidden" title="" data-i18n-title="common.view_details_in_dashboard">
                            <i class="fas fa-external-link-alt text-[8px] mr-1"></i>
                            <span data-i18n="view_details">تفاصيل</span>
                        </a>
                    </div>
                </div>
                
                <div id="market-feed-subtitle" class="text-[10px] text-gray-400 mb-2">—</div>
                <!-- Dynamic Platform Pills -->
                <div id="market-feed-sources" class="flex flex-wrap items-center gap-1.5 mb-3"></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" id="researchHubTitle" data-i18n="researchHubTitle">
                            غرفة الأبحاث الموحدة في ترند لينس
                        </h2>
                        <p class="text-xs sm:text-sm lg:text-base text-gray-400 max-w-2xl" id="researchHubDescription" data-i18n="researchHubDescription">
                            مكان واحد يجمّع لك إشارات أمازون، 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" id="researchHubSnapshotLabel" data-i18n="researchHubSnapshotLabel">Live summary for last 24 hours</span>
                                </div>
                                <span id="researchHubSnapshotStatus" class="text-[10px] sm:text-[11px] text-emerald-400 whitespace-nowrap" data-i18n="generic.loading">Loading...</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" id="snapshotToolsLabel" data-i18n="snapshotToolsLabel">Active Tools</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" id="snapshotSourcesLabel" data-i18n="snapshotSourcesLabel">Data Sources</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" id="snapshotSignalsLabel" data-i18n="snapshotSignalsLabel">Signals Recorded</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"
                        id="researchHubAllToolsBtn"
                    >
                        <span data-i18n="researchHub.all_tools">All Tools</span>
                    </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>

        <!-- TikTok Product Discovery — Top 5 Trending Products -->
        <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</h2>
                        <p class="text-xs mt-1" style="color: var(--text-muted);" id="videoSignalsSubtitle">
                            أعلى 5 فيديوهات رائجة – من tiktok_scraper · محدّثة كل 10 دقائق
                        </p>
                    </div>
                    <div class="flex items-center gap-2 text-xs">
                        <span class="px-2.5 py-1 rounded-full border border-primary/40 bg-primary/10 text-primary font-medium text-[11px] flex items-center gap-1.5">
                            <i class="fab fa-tiktok"></i> Product Discovery
                        </span>
                    </div>
                </div>

                <!-- Products Grid -->
                <div id="videoSignalsBody" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-3 mt-4" data-no-convert="1">
                    <div class="text-center py-10 col-span-full" style="color: var(--text-muted);">
                        <i class="fas fa-spinner fa-spin text-3xl mb-3"></i>
                        <div id="videoSignalsStatus" class="text-sm">جاري تحميل ترندات TikTok…</div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="flex items-center justify-between mt-5 text-xs">
                    <div id="videoSignalsStatusText" class="text-gray-400"></div>
                    <a
                        href="/trendlens/dashboard.html#tab-tiktok"
                        id="videoSignalsMoreBtn"
                        class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full border border-primary/60 text-primary text-xs hover:bg-primary/10 transition-colors"
                    >
                        <span>عرض المزيد في لوحة التحكم</span>
                        <i class="fas fa-arrow-left text-[10px]"></i>
                    </a>
                </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>
        
        <!-- Home Explosions Section -->
        <section id="homeExplosions" class="glass-effect rounded-3xl p-6 md:p-8 mb-16 fade-in-up" style="margin:24px 0;display:block !important;visibility:visible !important;background:linear-gradient(135deg, rgba(254,186,4,0.08) 0%, rgba(19,22,30,0.95) 100%);border:1px solid rgba(254,186,4,0.2);">
            <!-- Header -->
            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1);">
                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg, #feba04 0%, #fb923c 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(254,186,4,0.3);">
                            <i class="fas fa-rocket" style="font-size:24px;color:#111827;"></i>
                        </div>
                        <div>
                            <h2 style="margin:0;font-size:22px;font-weight:800;color:#feba04;line-height:1.2;">منتجات منفجرة</h2>
                            <p style="margin:4px 0 0;font-size:13px;color:rgba(255,255,255,0.6);">خلال آخر 7 أيام</p>
                        </div>
                    </div>
                    <span id="homeExplosionsRefreshTimer" style="font-size:11px;padding:4px 10px;border-radius:8px;background:rgba(254,186,4,0.15);color:#feba04;font-weight:500;">تحديث تلقائي: 60s</span>
                </div>
                <a href="/trendlens/dashboard.html?tab=explosions"
                   style="text-decoration:none;padding:10px 20px;border-radius:12px;background:linear-gradient(135deg, #feba04 0%, #fb923c 100%);color:#111827;font-weight:700;font-size:14px;transition:all 0.3s;box-shadow:0 4px 12px rgba(254,186,4,0.3);display:inline-flex;align-items:center;gap:8px;"
                   onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 16px rgba(254,186,4,0.4)';"
                   onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 12px rgba(254,186,4,0.3)';">
                    <span>عرض المزيد</span>
                    <i class="fas fa-arrow-left" style="font-size:12px;"></i>
                </a>
            </div>

            <!-- Grid -->
            <div id="homeExplosionsGrid"
                 style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;">
                <!-- cards injected -->
            </div>

            <!-- Empty State -->
            <div id="homeExplosionsEmpty" style="display:none;margin-top:32px;padding:40px 20px;text-align:center;background:rgba(255,255,255,0.02);border-radius:16px;border:1px dashed rgba(255,255,255,0.1);">
                <div style="width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:rgba(254,186,4,0.1);display:flex;align-items:center;justify-content:center;">
                    <i class="fas fa-chart-line" style="font-size:32px;color:rgba(254,186,4,0.5);"></i>
                </div>
                <p style="margin:0;font-size:16px;color:rgba(255,255,255,0.7);font-weight:500;">لا توجد انفجارات واضحة حالياً</p>
                <p style="margin:8px 0 0;font-size:13px;color:rgba(255,255,255,0.5);">سيتم تحديث البيانات تلقائياً عند توفرها</p>
            </div>
        </section>
        
        <!-- 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>

    <!-- Tabs Bar - Analytics only -->

    <!-- Main Content Tabs -->
    <main class="container mx-auto px-4 py-6">
        <!-- Overview Tab (Default) -->
        <div id="mainTab-overview" class="main-tab-content" style="display:none!important">
                <!-- 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">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">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">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">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">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">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">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">vs last week</span>
                        </div>
                    </div>
                    <div class="glass-effect rounded-2xl p-6 dashboard-data-card" style="box-shadow: none;">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-gray-300" data-i18n="stat_total_visitors">Total Visitors</span>
                            <i class="fas fa-eye text-info"></i>
                        </div>
                        <div class="text-3xl font-bold text-info mb-2" id="mainTotalVisitors" style="text-shadow: none;">237,782</div>
                        <div class="text-sm text-gray-400" id="lastUpdateText" data-i18n="common.last_updated" data-i18n-when="Now">Last updated: Now</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-4 md:gap-6 mb-12">
            <!-- Product Explosions Card -->
            <div class="glass-effect rounded-2xl p-3 md:p-4 lg:p-5 card-collapsible" data-card="products">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-success bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-rocket text-success text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_products_title">انفجارات المنتجات</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                        </button>
                        <button class="text-primary hover:text-yellow-400 text-xs md:text-sm" onclick="loadProductExplosions()" title="" data-i18n-title="common.refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="updated">Updated</div>
                    </div>
                </div>
                
                <div class="card-content">
                
                <!-- فورم البحث -->
                <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">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="card_products_title">Product Explosions</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-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm md:text-base smart-assistant-btn" data-card="products" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                </div>
                <!-- 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="" data-i18n-title="common.refresh_analysis">
                                    <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-3 md:p-4 lg:p-5 card-collapsible" data-card="lifeguard">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-primary bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-life-ring text-primary text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_lifeguard_title">منقذ الحملات</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                        </button>
                        <a id="lifeguardDashboardLink1" href="/trendlens/dashboard.html#lifeguard" class="text-primary hover:text-yellow-400 text-xs md:text-sm hidden" title="" data-i18n-title="common.open_full_dashboard">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <div class="bg-primary text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="new">جديد</div>
                    </div>
                </div>
                
                <div class="card-content">
                <!-- 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 id="lifeguardDashboardLink2" href="/trendlens/dashboard.html#lifeguard" class="w-full block mt-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-center text-sm md:text-base hidden" data-i18n="btn_open_lifeguard">
                    افتح منقذ الحملات الكامل
                </a>
                </div>
            </div>

            <!-- AI Insights Card -->
            <div class="glass-effect rounded-2xl p-3 md:p-4 lg:p-5 card-collapsible" data-card="ai-insights">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-primary bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-brain text-primary text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_ai_insights_title">رؤى الذكاء الاصطناعي</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                        </button>
                        <button class="text-primary hover:text-yellow-400 text-xs md:text-sm" onclick="loadAIInsights()" title="" data-i18n-title="common.refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-primary text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <div class="card-content">
                
                <!-- فورم اختيار الرمز والنوع والعمق -->
                <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="Keyword or symbol (e.g., BTCUSDT or 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-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm md:text-base smart-assistant-btn" data-card="ai-insights" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                </div>
                <!-- 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="" data-i18n-title="common.refresh_analysis">
                                    <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-3 md:p-4 lg:p-5 card-collapsible" data-card="suppliers">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-info bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-industry text-info text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_suppliers_title">أفضل الموردين</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                        </button>
                        <button class="text-primary hover:text-yellow-400 text-xs md:text-sm" onclick="loadBestSuppliers()" title="" data-i18n-title="common.refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <div class="card-content">
                
                <!-- فورم البحث -->
                <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-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm md:text-base smart-assistant-btn" data-card="suppliers" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                </div>
                <!-- 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="" data-i18n-title="common.refresh_analysis">
                                    <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-3 md:p-4 lg:p-5 card-collapsible" data-card="shipping">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-warning bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-ship text-warning text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_shipping_title">نبض الشحن</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                        </button>
                        <button class="text-primary hover:text-yellow-400 text-xs md:text-sm" onclick="loadShippingPulse()" title="" data-i18n-title="common.refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="bg-success text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="updated">محدث</div>
                    </div>
                </div>
                
                <div class="card-content">
                
                <!-- 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" 
                            data-i18n-placeholder="shipping.vessel_id_placeholder"
                            placeholder="Example: 123456789 (MMSI) or 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>
                
                <button class="w-full mt-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm md:text-base smart-assistant-btn" data-card="shipping" data-i18n="btn_open_analysis">
                    افتح التحليل
                </button>
                </div>
                <!-- 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="" data-i18n-title="common.refresh_analysis">
                                    <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>

            <!-- Keywords Card -->
            <div class="glass-effect rounded-2xl p-3 md:p-4 lg:p-5 card-collapsible cursor-pointer" data-card="keywords" onclick="loadKeywordsData()">
                <div class="flex items-center justify-between mb-3 md:mb-4">
                    <div class="flex items-center gap-2 md:gap-3">
                        <div class="bg-primary bg-opacity-20 p-2 md:p-3 rounded-xl">
                            <i class="fas fa-tags text-primary text-lg md:text-xl"></i>
                        </div>
                        <h3 class="text-base md:text-lg font-bold" data-i18n="card_keywords_title">🔑 الكلمات المفتاحية</h3>
                    </div>
                    <div class="flex items-center gap-1 md:gap-2">
                        <button class="card-toggle-btn text-primary hover:text-yellow-400 text-xs md:text-sm px-2 py-1 rounded border border-primary/30 hover:bg-primary/10 transition-colors" title="" data-i18n-title="common.toggle_expand" onclick="event.stopPropagation();">
                            <span class="toggle-text" data-i18n="common.view_more_text"></span>
                    </button>
                        <div class="bg-primary text-black px-2 md:px-3 py-0.5 md:py-1 rounded-full text-[10px] md:text-sm font-semibold" data-i18n="hot">حار</div>
                    </div>
                </div>
                
                <div class="card-content">
                
                <p class="text-sm text-gray-300 leading-relaxed mb-4" data-i18n="keywords_description">
                    اكتشف الكلمات المفتاحية الأكثر بحثاً والأعلى أداءً في السوق. اضغط على الكرت لعرض قائمة شاملة.
                </p>
                
                <!-- Keywords Display Area -->
                <div id="keywordsDisplay" class="mb-4">
                        <div class="text-center py-4 text-gray-400">
                        <i class="fas fa-tags text-2xl mb-2"></i>
                        <p data-i18n="keywords_click_hint">اضغط على الكرت لعرض الكلمات المفتاحية</p>
                    </div>
                </div>
                
                <button class="w-full mt-3 md:mt-4 bg-primary text-black py-1.5 md:py-2 rounded-lg font-semibold hover:bg-yellow-500 transition-colors text-sm md:text-base" onclick="event.stopPropagation(); loadKeywordsData();" data-i18n="btn_load_keywords">
                    <i class="fas fa-tags ms-2"></i><span data-i18n="btn_load_keywords">عرض الكلمات المفتاحية</span>
                </button>
                </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">
                            <p class="block text-white mb-2" data-i18n="upload_image">ارفع صورة للبحث</p>
                            <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 active">
                <div class="mb-6 text-center">
                    <h1 class="text-3xl font-bold text-primary mb-2" data-i18n="revenue_analytics">تحليلات الإيرادات</h1>
                    <p class="text-gray-400">Global Market Intelligence & Revenue Synchronization</p>
                </div>
                
                <!-- Command Bar (شريط التحكم العلوي) -->
                <div class="glass-effect rounded-2xl p-4 mb-6 dashboard-data-card">
                    <div class="flex flex-wrap items-center gap-4">
                        <!-- Country Dropdown -->
                        <div class="flex items-center gap-2">
                            <label for="analyticsCountrySelect" class="text-sm text-gray-300" data-i18n="country">الدولة:</label>
                            <select id="analyticsCountrySelect" class="text-sm bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-primary transition-colors">
                                <option value="SA">🇸🇦 السعودية</option>
                                <option value="US">🇺🇸 الولايات المتحدة</option>
                                <option value="CA">🇨🇦 كندا</option>
                                <option value="GB">🇬🇧 بريطانيا</option>
                                <option value="FR">🇫🇷 فرنسا</option>
                                <option value="BR">🇧🇷 البرازيل</option>
                                <option value="IN">🇮🇳 الهند</option>
                                <option value="ES">🇪🇸 إسبانيا</option>
                                <option value="JP">🇯🇵 اليابان</option>
                                <option value="CN">🇨🇳 الصين</option>
                                <option value="DE">🇩🇪 ألمانيا</option>
                                <option value="AE">🇦🇪 الإمارات</option>
                                <option value="KW">🇰🇼 الكويت</option>
                                <option value="QA">🇶🇦 قطر</option>
                                <option value="BH">🇧🇭 البحرين</option>
                                <option value="OM">🇴🇲 عمان</option>
                            </select>
                        </div>
                        
                        <!-- Fixed: Weekly only -->
                        <div class="flex items-center gap-2">
                            <i class="fas fa-calendar-week text-primary text-sm"></i>
                            <span class="text-sm text-primary font-semibold">أسبوعي</span>
                            <input type="hidden" id="analyticsTimeRange" value="weekly">
                        </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">Total Sales</span>
                            <i class="fas fa-dollar-sign text-primary"></i>
                        </div>
                        <div class="text-3xl font-bold text-primary mb-2" id="analyticsTotalSales">$983,410</div>
                        <div class="text-sm text-emerald-400">
                            <i class="fas fa-arrow-up"></i> <span id="analyticsSalesChange">+3.34%</span> <span data-i18n="vs_last_week">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_market_consumption">Market Consumption</span>
                            <i class="fas fa-globe text-success"></i>
                        </div>
                        <div class="text-3xl font-bold text-success mb-2" id="analyticsMarketConsumption">--</div>
                        <div class="text-sm text-gray-400" id="analyticsMarketGrowth">
                            <i class="fas fa-chart-line"></i> <span id="analyticsMarketGrowthValue">--</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_sync_score">Sync Score</span>
                            <i class="fas fa-link text-info"></i>
                        </div>
                        <div class="text-3xl font-bold text-info mb-2" id="analyticsSyncScore">--</div>
                        <div class="text-sm text-gray-400" id="lastUpdateTextAnalytics" data-i18n="common.last_updated" data-i18n-when="Now">Last updated: Now</div>
                    </div>
                </div>
                
                <!-- الخريطة الحرارية لإنفاق المستهلكين (أسبوعية) -->
                <div class="glass-effect rounded-2xl p-6 dashboard-data-card mb-6">
                    <div class="flex items-center justify-between mb-5">
                        <div>
                            <h2 class="text-xl font-bold text-primary">الخريطة الحرارية لإنفاق المستهلكين</h2>
                            <p class="text-xs text-gray-400 mt-1">مؤشر القطاعات الأكثر إنفاقاً هذا الأسبوع · يتجدد تلقائياً كل أسبوع</p>
                        </div>
                        <span class="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-semibold">
                            <i class="fas fa-calendar-week ml-1"></i>أسبوعي
                        </span>
                    </div>
                    <!-- Heatmap Grid -->
                    <div id="consumerSpendingHeatmap" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                        <!-- Generated by JS -->
                        <div class="text-center py-8 text-gray-400 col-span-4">
                            <i class="fas fa-spinner fa-spin text-xl mb-2"></i>
                            <p class="text-sm">جاري تحميل البيانات...</p>
                        </div>
                    </div>
                </div>
                
                <!-- AI Insight Card -->
                <div class="glass-effect rounded-2xl p-6 dashboard-data-card border-l-4 border-primary">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center">
                            <i class="fas fa-brain text-primary text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-lg font-bold text-primary mb-2 flex items-center gap-2">
                                <span>TrendLens Insight</span>
                                <span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded">AI</span>
                            </h3>
                            <p id="analyticsAIInsight" class="text-gray-300 leading-relaxed">
                                جاري تحليل البيانات...
                            </p>
                        </div>
                    </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="successful_stores">
                        Successful stores don't wait for the market… they lead it
                    </h2>
                    <p class="text-sm mt-2" style="color: var(--text-muted);" data-i18n="connect_account_desc">
                        Connect your account and start seeing AI indicators on the products and accounts that matter to you.
                    </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);" data-i18n="product_analysis">Product Analysis</div>
                    <div class="text-xs" style="color: var(--text-muted);" data-i18n="product_analysis_desc">Discover rising products before competitors</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);" data-i18n="account_check">Account Check</div>
                    <div class="text-xs" style="color: var(--text-muted);" data-i18n="account_check_desc">Analyze social media account quality</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);" data-i18n="books_title">E-books</div>
                    <div class="text-xs" style="color: var(--text-muted);" data-i18n="ebooks_library">Comprehensive library of guides and strategies</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="continue_registration"
                    >
                        Continue registration
                    </button>
            </div>
        </div>

        <!-- Data Collection Tools Section (Hidden from public UI by design) -->

        <!-- Pricing Plans Section -->
        <div id="pricingSection" 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 id="billingLabelMonthly" class="text-primary font-semibold" data-i18n="pricing.monthly">[[MISSING:pricing.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 id="billingLabelYearly" class="text-gray-400" data-i18n="pricing.yearly">[[MISSING:pricing.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">[[MISSING:save_20]]</span>
                </div>
            </div>
            
            <!-- Plans Grid (admin-controlled; rendered from /api/pricing/plans) -->
            <div id="pricingPlansGrid" class="grid md:grid-cols-3 gap-8">
                <div class="glass-effect rounded-2xl p-8 text-center">
                    <i class="fas fa-spinner fa-spin text-primary text-2xl mb-4"></i>
                    <div class="text-gray-300" data-i18n="loading">Loading...</div>
                </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">
                    Analyze account strength, engagement rate, and detect fake patterns
                </p>
                
                <div class="space-y-3">
                    <div>
                        <label for="socialAccountUrl" class="block text-xs font-semibold mb-1.5" data-i18n="account_url">رابط الحساب</label>
                        <input type="text" id="socialAccountUrl" data-i18n-placeholder="account_url_placeholder" placeholder="https://tiktok.com/@username or https://instagram.com/username" class="w-full bg-transparent border border-white rounded-lg px-3 py-2.5 text-sm text-white placeholder-gray-400">
                        <p class="text-[10px] text-gray-500 mt-1" data-i18n="account_url_hint">Platform type will be automatically detected from the URL</p>
                    </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" id="qualityCheckPrice">$2.99</span>
                        </div>
                        <p class="text-[10px] text-gray-400" data-i18n="comprehensive_analysis">
                            Comprehensive Analysis + PDF Report
                        </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" data-i18n="testimonial.quote_1">“One tool that replaces five separate tools.”</blockquote>
                    <figcaption class="mt-2 text-xs md:text-sm opacity-80" id="testimonialAuthor" data-i18n="testimonial.author_1">— Growth Analyst</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 class="w-full" style="height: 192px; min-height: 192px; max-height: 192px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <img src="/trendlens/assets/brand/logo.svg" alt="كتاب عينة 1" style="width: 70%; height: 70%; object-fit: contain; max-width: 70%; max-height: 70%;" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.svg';">
                    </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="ebook.by">By:</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 class="w-full" style="height: 192px; min-height: 192px; max-height: 192px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <img src="/trendlens/assets/brand/logo.svg" alt="كتاب عينة 2" style="width: 70%; height: 70%; object-fit: contain; max-width: 70%; max-height: 70%;" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.svg';">
                    </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="ebook.by">By:</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 class="w-full" style="height: 192px; min-height: 192px; max-height: 192px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <img src="/trendlens/assets/brand/logo.svg" alt="كتاب عينة 3" style="width: 70%; height: 70%; object-fit: contain; max-width: 70%; max-height: 70%;" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.svg';">
                    </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="ebook.by">By:</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 class="w-full" style="height: 192px; min-height: 192px; max-height: 192px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <img src="/trendlens/assets/brand/logo.svg" alt="كتاب عينة 4" style="width: 70%; height: 70%; object-fit: contain; max-width: 70%; max-height: 70%;" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.svg';">
                    </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="ebook.by">By:</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) -->
        <!-- ملاحظة: تم إزالة واجهة اختيار الوكلاء حسب القرار الإداري رقم (1) -->
        <!-- TrendLens AI Section - Redesigned -->
        <section class="glass-effect rounded-3xl p-6 md:p-8 mb-12" id="aiAssistant">
            <!-- Header -->
            <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-sky-500 via-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                    <i class="fa-solid fa-brain text-white text-2xl"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-2xl md:text-3xl font-bold gradient-text mb-1" data-i18n="ai.trendlens_ai">TrendLens AI</h2>
                    <p class="text-sm text-gray-400" id="aiHeroSubtitle" data-i18n="ai.global_commerce_intelligence">Global Commerce Intelligence in One Page</p>
                </div>
            </div>
            
            <!-- Features Grid -->
            <div class="grid md:grid-cols-3 gap-4 mb-6">
                <div class="bg-gradient-to-br from-sky-500/10 to-indigo-500/10 border border-sky-500/30 rounded-xl p-4">
                    <div class="flex items-center gap-2 mb-2">
                        <i class="fa-solid fa-rocket text-sky-400"></i>
                        <h3 class="text-sm font-semibold text-white" id="aiFeature1Title" data-i18n="ai.discover_exploding_products">Discover Exploding Products</h3>
                    </div>
                    <p class="text-xs text-gray-300" id="aiFeature1Desc" data-i18n="ai.smart_analysis_products">Smart analysis of the most in-demand products</p>
                </div>
            </div>
            
            <!-- Live Data Badge -->
            <div class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-xl p-3 mb-6">
                <div class="flex flex-wrap items-center gap-2 text-sm">
                    <i class="fa-solid fa-circle text-green-400 text-xs animate-pulse"></i>
                    <span class="text-gray-200" data-i18n="ai.live_data_sources">Live data from Google Trends, Shipping, Market Ads</span>
                    <span class="text-gray-400">•</span>
                    <span class="text-gray-200" data-i18n="ai.supports_languages">Supports Arabic & English</span>
                </div>
            </div>
            
            <!-- AI Description -->
            <div class="bg-gradient-to-r from-sky-500/10 via-indigo-500/10 to-amber-400/10 rounded-2xl border border-sky-500/40 p-4 mb-6">
                <h3 class="text-sm md:text-base font-semibold text-sky-200 mb-2" id="aiBrainTitle" data-i18n="ai.smart_brain_title">TrendLens Smart Brain</h3>
                <p class="text-xs md:text-sm text-gray-100 leading-relaxed" id="aiBrainDesc" data-i18n="ai.smart_brain_desc">
                    An analytical assistant that gives you actionable steps, not just numbers.
                </p>
                <ul class="mt-3 space-y-1 text-xs md:text-sm text-gray-200" id="aiBrainFeatures">
                    <li data-i18n="ai.product_analysis_feature">• Product Analysis</li>
                    <li data-i18n="ai.strategy_building_feature">• Strategy Building</li>
                    <li data-i18n="ai.risk_assessment_feature">• Risk Assessment</li>
                </ul>
            </div>
            
            <!-- Chat Interface -->
            <div class="space-y-4">
                <div class="relative">
                    <textarea 
                        id="aiText" 
                        rows="4" 
                        class="w-full bg-black/30 border-2 border-white/10 rounded-2xl px-4 py-3 pr-12 text-white placeholder-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all" 
                        data-i18n-placeholder="ai.prompt_placeholder" 
                        placeholder="Type your question or request..."
                    ></textarea>
                    <button 
                        type="button" 
                        id="openImageFromText" 
                        title="" 
                        data-i18n-title="common.upload_image"
                        aria-label=""
                        data-i18n-aria-label="common.upload_image" 
                        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: 32px; height: 32px;"
                    >
                        <i class="fas fa-image text-white" style="font-size: 14px;"></i>
                    </button>
                    <input type="file" id="hiddenImageInput" accept="image/*" class="hidden" />
                </div>
                <div class="flex items-center gap-2">
                    <button 
                        id="aiRunBtn" 
                        class="flex-1 bg-gradient-to-r from-yellow-500 to-amber-500 text-black px-6 py-3 rounded-xl font-bold hover:from-yellow-400 hover:to-amber-400 transition-all shadow-lg shadow-yellow-500/30 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" 
                        data-i18n="run"
                    >
                        <i class="fa-solid fa-paper-plane"></i>
                        <span data-i18n="run">Run</span>
                    </button>
                    <button 
                        onclick="document.getElementById('aiText').value = ''"
                        class="px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-gray-300 hover:bg-black/50 transition-colors"
                        title="" data-i18n-title="common.clear"
                    >
                        <i class="fa-solid fa-eraser"></i>
                    </button>
                </div>
            </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><span data-i18n="ai.response_title">AI Response</span>
                        </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="ai.smart_analysis_title">Smart Comprehensive Analysis</h3>
                <p class="text-gray-300" data-i18n="ai.smart_analysis_desc">Run all smart assistants in one click for comprehensive analysis</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="ai.private_ai_title">Private AI</h3>
                <p class="text-gray-300" data-i18n="ai.private_ai_desc">Insights and analytics based on platform data with clear sources and confidence</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="ai.advanced_charts_title">Advanced Charts</h3>
                <p class="text-gray-300" data-i18n="ai.advanced_charts_desc">Financial candles, shipping costs, supplier comparisons, and social charts</p>
            </div>
        </div>

    </main>

    <!-- Section 6: Small Footer -->
    <footer class="main-container-new footer-compact" style="margin-top: 3rem; padding-bottom: 2rem; position: relative; z-index: 1;">
        <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="privacy.html" data-i18n="footer.privacy">Privacy</a>
                <span class="text-gray-500">•</span>
                <a href="terms.html" data-i18n="footer.terms">Terms</a>
                <span class="text-gray-500">•</span>
                <a href="contact.html" 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، إدارة النمو، تقارير 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" style="opacity: 0; transition: opacity 0.3s ease;">
        <!-- 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="tiktokLoginBtn" onclick="handleTikTokLogin()" 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: flex;">
                            <i class="fab fa-tiktok"></i>
                            <span data-i18n="auth_login_tiktok">تسجيل الدخول بحساب TikTok</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 for="loginEmail" 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 for="loginPassword" 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="tiktokRegisterBtn" onclick="handleTikTokRegister()" 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: flex;">
                            <i class="fab fa-tiktok"></i>
                            <span data-i18n="auth_register_tiktok">التسجيل بحساب TikTok</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 for="registerName" 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 for="registerEmail" 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 for="registerPhone" 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 for="registerPassword" 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 for="registerPasswordConfirm" 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 for="partnerFullName" 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 for="partnerEmail" 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 for="partnerPhone" class="block text-sm font-semibold mb-2" data-i18n="partner_phone">رقم الهاتف</label>
                    <div class="flex gap-2">
                        <select id="partnerCountryCode" class="px-3 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary">
                            <option value="+966">🇸🇦 +966</option>
                        </select>
                        <input type="tel" id="partnerPhone" required class="flex-1 px-4 py-3 rounded-lg bg-black/30 border border-white/10 focus:outline-none focus:border-primary" placeholder="501234567">
                    </div>
                </div>
                
                <div>
                    <label for="partnerBusinessType" 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 for="partnerPassword" 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 - يجب أن يكون /trendlens/api
        const API_BASE = '/trendlens/api';
        window.API_BASE = window.API_BASE || API_BASE;
        
        // Global UI Configuration (auto-detect if not set)
        const savedLang = localStorage.getItem('lang') || localStorage.getItem('tl_lang');
        const browserLang = ((navigator.language || '').toLowerCase().startsWith('en')) ? 'en' : 'en';
        const defaultLang = savedLang || browserLang || 'en';
        window.__UICFG = { ui: { locale: defaultLang } };
        window.currentLang = defaultLang;
        
        // دالة تحويل الأرقام من الشكل العربي الهندي (٠-٩) إلى الشكل اللاتيني (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);
        }
        
        // Helper function to normalize locale
        function normalizeLocaleForFormatting(lang) {
            if (!lang) return 'en-US';
            const l = String(lang).toLowerCase();
            if (l.startsWith('ar')) return 'ar-SA-u-ca-gregory';
            if (l.startsWith('es')) return 'es-ES';
            if (l.startsWith('pt')) return 'pt-BR';
            if (l.startsWith('tr')) return 'tr-TR';
            if (l.startsWith('hi')) return 'hi-IN';
            return 'en-US';
        }
        
        // دالة تنسيق الأرقام - استخدام الأرقام اللاتينية (0-9) دائماً
        function formatNumber(num, options = {}) {
            const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'en';
            const locale = normalizeLocaleForFormatting(lang);
            
            // استخدام الأرقام اللاتينية (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 || window.TL_LOCALE || 'en';
            const locale = normalizeLocaleForFormatting(lang);
            
            // استخدام الأرقام اللاتينية (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
        // Pricing is admin-controlled via DB (subscription_plans) and fetched from /api/pricing/plans
        let __PRICING_PLANS__ = [];
        let __PRICING_BILLING__ = 'monthly'; // monthly | yearly
        
        // i18n external dictionaries cache
        const __PUBLIC_I18N__ = { ar: null, en: null, es: null, pt: null, tr: null, hi: null };
        async function loadPublicDict(lang){
            const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
            if (__PUBLIC_I18N__[shortLang]) return __PUBLIC_I18N__[shortLang];
            try {
                // Try loading from locales directory
                const basePath = window.location.pathname.startsWith('/trendlens') ? '/trendlens/locales' : '/locales';
                const locale = lang.startsWith('ar') ? 'ar-KW' : lang.startsWith('es') ? 'es-ES' : lang.startsWith('pt') ? 'pt-BR' : lang.startsWith('tr') ? 'tr-TR' : lang.startsWith('hi') ? 'hi-IN' : 'en-US';
                const res = await fetch(`${basePath}/${locale}.json`, { cache:'no-store' });
                if (res.ok) { 
                    const data = await res.json();
                    __PUBLIC_I18N__[shortLang] = data;
                    return data;
                }
            } catch (_) {}
            __PUBLIC_I18N__[shortLang] = {}; 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, showMockHint = false) {
            const container = document.getElementById(containerId);
            if (!container) return;
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const warningText = safeT('common.warning', isArabic ? 'تنبيه' : 'Warning');
            const loadErrorText = safeT('common.load_error', isArabic ? 'خطأ في التحميل' : 'Load error');
            const mockHintText = safeT('common.using_mock_data_temporarily', isArabic ? 'تم استخدام بيانات تجريبية مؤقتًا' : 'Using temporary mock data');
            
            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 ? escapeHtml(String(warningText)) : escapeHtml(String(loadErrorText))}</div>
                            <div class="text-sm">${escapeHtml(String(message))}</div>
                            ${showMockHint ? `<div class="text-xs mt-2 opacity-75">${escapeHtml(String(mockHintText))}</div>` : ''}
                        </div>
                    </div>
                </div>
            `;
        }
        
        function showLoadingState(containerId, message = null) {
            const container = document.getElementById(containerId);
            if (!container) return;
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const msg = message != null ? message : safeT('common.loading', isArabic ? 'جاري التحميل...' : 'Loading...');
            
            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">${escapeHtml(String(msg))}</div>
                </div>
            `;
        }
        
        function showSuccessState(containerId, message = null) {
            // يمكن استخدامها لإظهار رسالة نجاح مؤقتة
            const container = document.getElementById(containerId);
            if (!container) return;
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            const msg = message != null ? message : t('common.loaded_successfully', 'Loaded successfully');
            
            // إزالة رسالة النجاح بعد ثانيتين
            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() {
            // إذا كان نظام i18n الجديد (js/i18n.js) محمّل، نستخدمه فقط لتجنب تداخل اللغات
            // ولتجنب وجود نظامين يغيران نفس النصوص.
            try {
                if (window.__TL_I18N_DICT__ && typeof window.applyI18n === 'function' && window.applyI18n !== applyI18n) {
                    window.applyI18n(); // تطبيق ترجمة النظام الجديد على كامل الصفحة
                    return;
                }
            } catch (_) {}

            // الحصول على اللغة من مصادر متعددة
            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 raw = dict[k + '_en'];
                        const translation = (typeof raw === 'string') ? raw : (raw == null ? '' : String(raw));
                        const t = String(translation ?? '');
                        if (t.includes('<strong>') || t.includes('<em>') || t.includes('<span>') || t.includes('<br>') || t.includes('<a>')) {
                            el.innerHTML = convertNumbersInText(t);
                        } else {
                            el.textContent = convertNumbersInText(t);
                        }
                        convertNumbersInElement(el);
                        return;
                    }
                }
                
                if (dict[k]) {
                    // Check if the translation contains HTML tags
                    const v = dict[k];
                    const s = (typeof v === 'string') ? v : (v == null ? '' : String(v));
                    // Check if the translation contains HTML tags (only for string-ish values)
                    if (s.includes('<strong>') || s.includes('<em>') || s.includes('<span>') || s.includes('<br>') || s.includes('<a>')) {
                        el.innerHTML = convertNumbersInText(s);
                    } else {
                        el.textContent = convertNumbersInText(s);
                    }
                    // تحويل الأرقام في العنصر بعد الترجمة
                    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');
                }
            }
        }
        
        // Helper function to get short language code
        function getShortLangCode(lang) {
            if (!lang) return 'en';
            const l = String(lang).toLowerCase();
            if (l.startsWith('ar')) return 'ar';
            if (l.startsWith('es')) return 'es';
            if (l.startsWith('pt')) return 'pt';
            if (l.startsWith('tr')) return 'tr';
            if (l.startsWith('hi')) return 'hi';
            return 'en';
        }
        
        // Get translations - Simple method like old page
        function getTranslations(lang) {
            const shortLang = getShortLangCode(lang);
            // Single source of truth: i18n.js loaded dictionary (prevents mixed-language UI)
            try {
                if (window.__TL_I18N_DICT__ && typeof window.__TL_I18N_DICT__ === 'object') {
                    const d = window.__TL_I18N_DICT__;
                    if (Object.keys(d).length) return d;
                }
            } catch (_) {}
            // IMPORTANT: avoid inline hardcoded dicts as source-of-truth.
            // Prefer external locale JSONs (loaded by loadPublicDict) for ALL languages.
            try {
                if (typeof __PUBLIC_I18N__ !== 'undefined') {
                    const cached = __PUBLIC_I18N__[shortLang];
                    if (cached && typeof cached === 'object') return cached;
                    if (cached === null) {
                        // async load and notify listeners; return empty for now
                        loadPublicDict(shortLang).then(() => {
                            try { window.dispatchEvent(new CustomEvent('i18n:updated', { detail: { locale: shortLang } })); } catch (_) {}
                        }).catch(() => {});
                        return {};
                    }
                }
            } catch (_) {}
            if (shortLang === '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: "View More",
                            view_less: "View Less",
                            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",
                            market_momentum_title: "Market Momentum",
                            market_momentum_subtitle: "AI-powered market velocity indicator",
                            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_keywords_title: "🔑 Keywords",
                            keywords_description: "Discover the most searched and highest performing keywords in the market. Click the card to view a comprehensive list.",
                            btn_load_keywords: "Load Keywords",
                            keywords_click_hint: "Click the card to view keywords",
                            keywords_loading: "Loading keywords...",
                            keywords_ar: "Arabic Keywords",
                            keywords_en: "English Keywords",
                            keywords_count: "Total Keywords",
                            data_collection_tools_title: "🔧 Data Collection Tools",
                            data_collection_tools_subtitle: "Comprehensive system for collecting data from 29+ free and paid sources",
                            free_sources: "Free Sources (7 sources)",
                            paid_sources: "Paid Sources (8 sources)",
                            open_datasets: "Open Datasets (15 sources)",
                            other_sources: "Other Sources (financial, search, social)",
                            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",
                            video_signals_title: "Video Signals (TikTok)",
                            more_in_dashboard: "More in Dashboard",
                            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_pain_al_label: "Pain Engine (Pain-AI)",
                            agent_pain_al_short: "Extracts product opportunities from market complaints.",
                            agent_pain_al_description: "Captures 'pain language' from text data/reviews/questions and converts them into product opportunities with latent demand before trends emerge.",
                            agent_whatif_al_label: "What-If Simulator (What-If-AI)",
                            agent_whatif_al_short: "Runs decision scenarios before entry.",
                            agent_whatif_al_description: "Gives you the best single move with minimal change (price/offer/angle) to increase success probability, with risk warnings based on available data.",
                            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.",
                            // تم إزالة الوكلاء المحظورة حسب القرار الإداري رقم (1)
                            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",
                            cta_product_analysis: "Product Analysis",
                            cta_product_analysis_desc: "Discover rising products before competitors",
                            cta_account_check: "Account Check",
                            cta_account_check_desc: "Analyze social media account quality",
                            cta_ebooks: "E-books",
                            cta_ebooks_desc: "Comprehensive library of guides and strategies",
                            // 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%",
                            btn_start_trial: "Start Free Trial",
                            per_trial: "/trial",
                            no_plans_available: "No plans available",
                            plan_not_found: "Plan not found",
                            invalid_plan_price: "Invalid plan price",
                            no_features_listed: "Features included",
                            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: "شاهد أكثر",
                            view_less: "شاهد أقل",
                            ebook_badge: "كتاب إلكتروني",
                            badge_best_selling: "الأعلى مبيعاً",
                            badge_fast_growing: "الأسرع نمواً",
                            badge_biz_favorite: "مفضل لأصحاب الأعمال",
                            partner_summary: "ملخص الشريك",
                            by_seller: "البائع:",
                            view_details: "تفاصيل",
                            market_momentum_title: "زخم السوق",
                            market_momentum_subtitle: "مؤشر سرعة السوق المدعوم بالذكاء الاصطناعي",
                            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: "شاهد أحدث الإعلانات حول العالم، وتعلّم منها كيف تُصمم حملتك القادمة.",
                            card_keywords_title: "🔑 الكلمات المفتاحية",
                            keywords_description: "اكتشف الكلمات المفتاحية الأكثر بحثاً والأعلى أداءً في السوق. اضغط على الكرت لعرض قائمة شاملة.",
                            btn_load_keywords: "عرض الكلمات المفتاحية",
                            keywords_click_hint: "اضغط على الكرت لعرض الكلمات المفتاحية",
                            keywords_loading: "جاري تحميل الكلمات المفتاحية...",
                            keywords_ar: "الكلمات المفتاحية العربية",
                            keywords_en: "الكلمات المفتاحية الإنجليزية",
                            keywords_count: "إجمالي الكلمات",
                            data_collection_tools_title: "🔧 أدوات جمع البيانات",
                            data_collection_tools_subtitle: "نظام شامل لجمع البيانات من 29+ مصدر مجاني ومدفوع",
                            free_sources: "المصادر المجانية (7 مصادر)",
                            paid_sources: "المصادر المدفوعة (8 مصادر)",
                            open_datasets: "قواعد البيانات المفتوحة (15 مصدر)",
                            other_sources: "مصادر أخرى (مالية، بحث، سوشيال)",
                            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%",
                            btn_start_trial: "ابدأ التجربة المجانية",
                            per_trial: "/تجربة",
                            no_plans_available: "لا توجد خطط متاحة حالياً",
                            plan_not_found: "الخطة غير موجودة",
                            invalid_plan_price: "سعر الخطة غير صالح",
                            no_features_listed: "المزايا مشمولة",
                            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: "مساعد الذكاء الصناعي — تحليل الأسهم والعملات",
                            video_signals_title: "إشارات الفيديو (TikTok)",
                            more_in_dashboard: "المزيد في الداشبورد",
                            ai_assistant_title: "المساعد الذكي",
                            ai_assistant_subtitle: "اختر الوكيل الذكي الذي تحتاجه",
                            agent_trend_al_label: "ذكاء الاتجاهات (Trend-Al)",
                            agent_trend_al_short: "يكشف المنتجات والأسواق الصاعدة.",
                            agent_trend_al_description: "يحلل بيانات ترند لينس لاكتشاف المنتجات أو القطاعات التي تبدأ بالارتفاع قبل ازدحام المنافسين.",
                            agent_pain_al_label: "محرك الطلب الكامن (Pain-AI)",
                            agent_pain_al_short: "يستخرج فرص منتجات من شكاوى السوق.",
                            agent_pain_al_description: "يلتقط 'لغة الألم' من البيانات النصية/المراجعات/الأسئلة ويحوّلها إلى فرص منتجات ذات طلب كامن قبل ظهور الترند.",
                            agent_whatif_al_label: "محاكي ماذا لو (What-If-AI)",
                            agent_whatif_al_short: "يشغّل سيناريوهات قرار قبل الدخول.",
                            agent_whatif_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: "يحلل بيانات بيكسلات ميتا وتيك توك وقوقل ويقترح تعديلات في الاستهداف أو الميزانية.",
                            // تم إزالة الوكلاء المحظورة حسب القرار الإداري رقم (1)
                            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: "متابعة التسجيل",
                            cta_product_analysis: "تحليل المنتجات",
                            cta_product_analysis_desc: "اكتشف المنتجات الصاعدة قبل المنافسين",
                            cta_account_check: "فحص الحسابات",
                            cta_account_check_desc: "تحليل جودة حسابات السوشيال ميديا",
                            cta_ebooks: "كتب إلكترونية",
                            cta_ebooks_desc: "مكتبة شاملة من الأدلة والاستراتيجيات",
                            // 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');
            
            // Helper function to get translation
            function getTranslation(key, fallback = '') {
                if (typeof window.tl_t === 'function') {
                    return window.tl_t(key, {}, fallback);
                }
                // Fallback to getTranslations if available
                const currentLang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'en';
                const shortLang = currentLang.startsWith('ar') ? 'ar' : currentLang.startsWith('es') ? 'es' : currentLang.startsWith('pt') ? 'pt' : currentLang.startsWith('tr') ? 'tr' : currentLang.startsWith('hi') ? 'hi' : 'en';
                if (typeof __PUBLIC_I18N__ !== 'undefined' && __PUBLIC_I18N__[shortLang]) {
                    const dict = __PUBLIC_I18N__[shortLang];
                    if (key.includes('.')) {
                        const parts = key.split('.');
                        let current = dict;
                        for (const part of parts) {
                            if (current && typeof current === 'object' && part in current) {
                                current = current[part];
                            } else {
                                return fallback;
                            }
                        }
                        return current || fallback;
                    }
                    return dict[key] || fallback;
                }
                return fallback;
            }
            
            // Fallback ticker items
            const getTickerBadge = (key) => {
                return getTranslation(key, key);
            };
            const fallbackItems = [
                { badge: getTickerBadge('operational_trends.demand_explosion'), text: getTranslation('ticker.item.office_chair', 'in Office Chair product in Turkey') },
                { badge: getTickerBadge('operational_trends.port_congestion'), text: getTranslation('ticker.item.jeddah_delay', 'Jeddah - 3 days delay') },
                { badge: getTickerBadge('operational_trends.trusted_supplier'), text: getTranslation('ticker.item.istanbul_steel', 'Istanbul Steel Co. - 74% trust') },
                { badge: getTickerBadge('operational_trends.rising_account'), text: getTranslation('ticker.item.brand_store', '@brand_store - 6.4% growth') }
            ];
            
            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);
            }
            
            // تعيين window.currentLang بشكل صريح
            window.currentLang = lang;
            localStorage.setItem('lang', lang);
            // تعيين window.currentLang بشكل صريح
            window.currentLang = lang;
            localStorage.setItem('lang', 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';
            
            // تحديث اتجاه شريط المتاجر العالمية
            const brandLogosStrip = document.getElementById('brandLogosStrip');
            if (brandLogosStrip) {
                brandLogosStrip.setAttribute('dir', (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr');
            }
            
            updateAIUploadButtonPosition(lang);
            
            // ✅ الخط الأساسي: Cairo دائماً (لا تغيير حسب اللغة)
            document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
            document.documentElement.style.fontFamily = 'Cairo, 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();
            }
        }

        function getPricingLangForApi() {
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            const short = (String(currentLocale).split('-')[0] || 'en').toLowerCase();
            // pricing api supports multiple UI locales; send the short locale
            return (['ar','en','es','pt','tr','hi'].includes(short)) ? short : 'en';
        }

        function getUiLangShort() {
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            return (String(currentLocale).split('-')[0] || 'en').toLowerCase();
        }

        // ترجمة آمنة: تمنع عرض [[MISSING:...]] للمستخدم + تدعم {variables}
        function __tl_replaceVars(text, vars) {
            let out = String(text ?? '');
            if (vars && typeof vars === 'object') {
                for (const k of Object.keys(vars)) {
                    const re = new RegExp(`\\{\\s*${k}\\s*\\}`, 'g');
                    out = out.replace(re, String(vars[k] ?? ''));
                }
            }
            return out;
        }

        function tlSafe(key, fallback = '', vars = {}) {
            // ✅ محاولة 1: استخدام القواميس المحمّلة مباشرة (أسرع وأكثر موثوقية)
            let v = null;
            try {
                const dict = window.__TL_I18N_DICT__ || {};
                const enFallback = window.__TL_EN_FALLBACK_DICT__ || {};
                
                // البحث في القاموس الحالي أولاً
                v = dict[key];
                
                // إذا لم يوجد، جرب القاموس الإنجليزي كـ fallback
                if ((v == null || v === '') && enFallback && Object.keys(enFallback).length > 0) {
                    v = enFallback[key];
                }
            } catch (e) {
                v = null;
            }
            
            // ✅ محاولة 2: استخدام window.tl_t (إذا كانت القواميس غير جاهزة)
            if (v == null || v === '') {
                try {
                    if (typeof window.tl_t === 'function') {
                        const temp = window.tl_t(key, fallback, vars);
                        const tempStr = String(temp ?? '');
                        // فقط إذا لم يكن MISSING، استخدمه
                        if (tempStr && tempStr !== key && !/\[\[\s*MISSING:/.test(tempStr) && !/\[\[/.test(tempStr)) {
                            v = tempStr;
                        }
                    }
                } catch (e) {
                    // تجاهل الأخطاء
                }
            }
            
            // ✅ Fallback نهائي: استخدم fallback المقدّم أو المفتاح نفسه
            if (v == null || v === '' || v === key) {
                v = (fallback && String(fallback).trim() !== '') ? fallback : key;
            }
            
            // ✅ استبدال المتغيرات
            let result = __tl_replaceVars(v, vars);
            
            // ✅ طبقة حماية نهائية صارمة: لا تسمح بأي [[...]] في النتيجة
            if (/\[\[\s*MISSING:/.test(result) || /\[\[/.test(result) || result === key) {
                const safeFallback = (fallback && String(fallback).trim() !== '') ? fallback : key;
                result = __tl_replaceVars(safeFallback, vars);
            }
            
            return String(result);
        }

        function findPlanByKey(planKeyOrId) {
            if (!Array.isArray(__PRICING_PLANS__)) return null;
            if (typeof planKeyOrId === 'number') {
                return __PRICING_PLANS__.find(p => Number(p.id) === Number(planKeyOrId)) || null;
            }
            const key = String(planKeyOrId || '').trim().toLowerCase();
            if (!key) return null;
            return __PRICING_PLANS__.find(p => String(p.code || '').toLowerCase() === key) ||
                   __PRICING_PLANS__.find(p => String(p.name || '').toLowerCase() === key) ||
                   null;
        }

        function getCurrentBillingPeriod() {
            const toggle = document.getElementById('billingToggle');
            return (toggle && toggle.checked) ? 'yearly' : 'monthly';
        }

        async function loadPricingPlans() {
            try {
                const lang = getPricingLangForApi();
                // منع أي caching (المتصفح/الـ CDN) حتى تظهر التعديلات فوراً
                const ts = Date.now();
                const res = await fetch(`${API_BASE}/pricing/plans?lang=${encodeURIComponent(lang)}&_=${ts}`, { cache: 'no-store' });
                const data = await res.json();
                __PRICING_PLANS__ = Array.isArray(data?.plans) ? data.plans : [];
                return __PRICING_PLANS__;
            } catch (e) {
                console.error('[PRICING] failed to load plans:', e);
                __PRICING_PLANS__ = [];
                return [];
            }
        }

        function formatMoney(amount, currency = 'USD') {
            const n = Number(amount);
            if (!isFinite(n)) return '';
            // keep Latin digits consistent with rest of UI
            return `$${n.toFixed(n % 1 === 0 ? 0 : 2)}`;
        }

        function renderPricingPlans() {
            const grid = document.getElementById('pricingPlansGrid');
            if (!grid) return;

            const uiLang = getUiLangShort();
            const billingPeriod = getCurrentBillingPeriod();
            const yearlyDiscountPct = 20;
            const yearlyDiscountFactor = 1 - (yearlyDiscountPct / 100);
            const t = (k) => (window.tl_t ? window.tl_t(k, "") : `[[MISSING:${k}]]`);

            const plans = Array.isArray(__PRICING_PLANS__) ? __PRICING_PLANS__ : [];
            if (!plans.length) {
                grid.innerHTML = `
                    <div class="glass-effect rounded-2xl p-8 text-center">
                        <div class="text-gray-300">${escapeHtml(t('no_plans_available'))}</div>
                    </div>
                `;
                return;
            }

            const cards = plans.map(plan => {
                const code = String(plan.code || '').toUpperCase();
                const isTrial = code === 'TRIAL' || (Number(plan.price_monthly || 0) === 0);
                const isPopular = !!plan.is_popular;

                const priceMonthly = (plan.price_monthly === null || plan.price_monthly === undefined) ? null : Number(plan.price_monthly);
                const priceYearly = (plan.price_yearly === null || plan.price_yearly === undefined) ? null : Number(plan.price_yearly);

                const showYearly = (billingPeriod === 'yearly');
                // في حال لم يتم تخزين سعر سنوي، احسبه تلقائياً من الشهري مع خصم 20%
                const yearlyFull = (isFinite(priceMonthly) && priceMonthly > 0) ? (priceMonthly * 12) : null;
                const yearlyDiscounted = (yearlyFull !== null) ? Math.round((yearlyFull * yearlyDiscountFactor) * 100) / 100 : null;
                const chosenYearly = (isFinite(priceYearly) && priceYearly > 0) ? priceYearly : yearlyDiscounted;
                const chosenPrice = showYearly ? chosenYearly : priceMonthly;

                const hasYearlyComputed = (yearlyFull !== null && isFinite(chosenYearly) && chosenYearly > 0);
                const savings = hasYearlyComputed ? (yearlyFull - chosenYearly) : null;

                const titleByCode = (
                    // Fallback only: if admin didn't provide a localized plan name.
                    (isTrial && (!code || code === 'TRIAL'))
                        ? t('pricing.trial')
                        : ({
                            TRIAL: t('pricing.trial'),
                            BASIC: t('pricing.basic'),
                            PRO: t('pricing.pro'),
                            ENTERPRISE: t('pricing.enterprise'),
                            ULTRA: t('pricing.ultra'),
                        })[code]
                );
                // Prefer API-provided plan.name (it is localized by /api/pricing/plans?lang=*),
                // but if the API had to fall back to the raw code (e.g., to avoid Arabic leakage),
                // use our UI translations by code instead (prettier than showing "TRIAL").
                const apiName = (plan.name && String(plan.name).trim()) ? String(plan.name).trim() : '';
                const looksLikeFallbackCode = !!(apiName && (
                    (code && apiName.toUpperCase() === code) ||
                    /^plan_\d+$/i.test(apiName)
                ));
                const title = (!apiName || looksLikeFallbackCode)
                    ? (titleByCode || (code ? code : '[[MISSING:plan_name]]'))
                    : apiName;

                // Description is localized by the API; keep a safety net to prevent any Arabic leakage.
                let desc = plan.description || '';
                try {
                    if (uiLang !== 'ar') {
                        const looksArabic = /[\u0600-\u06FF]/.test(desc);
                        if (looksArabic) desc = '';
                    }
                } catch (e) {}
                // Prevent any Arabic admin-provided feature strings from leaking into non-Arabic UI
                const rawFeatures = Array.isArray(plan.features) ? plan.features : [];
                const features = (uiLang === 'ar')
                    ? rawFeatures
                    : rawFeatures.filter(f => {
                        try { return !/[\u0600-\u06FF]/.test(String(f || '')); } catch (_) { return true; }
                      });

                const buttonLabel = isTrial
                    ? t('btn_start_trial')
                    : t('choose_plan');

                const buttonOnClick = isTrial
                    ? `activateTrialPlan()`
                    : `goToPayment(${Number(plan.id)})`;

                const cardBorder = isTrial
                    ? 'border border-success/60'
                    : (isPopular ? 'border-2 border-primary' : 'border border-white/10');

                const badgeHtml = isPopular
                    ? `<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 shadow-lg">${escapeHtml(t('most_popular'))}</span>
                       </div>`
                    : '';

                const priceHtml = isTrial
                    ? `<div class="flex items-center justify-center gap-2">
                           <span class="text-4xl font-bold text-success tracking-tight">${formatMoney(0)}</span>
                           <span class="text-gray-400" data-i18n="plan_per_trial"></span>
                       </div>`
                    : `<div class="flex items-center justify-center gap-2">
                           <span class="text-4xl md:text-5xl font-black tracking-tight ${showYearly ? 'text-red-500' : 'text-white'}">${escapeHtml(formatMoney(chosenPrice))}</span>
                           <span class="text-gray-400" data-i18n="${showYearly ? 'plan_per_year' : 'plan_per_month'}"></span>
                       </div>
                       ${showYearly && hasYearlyComputed ? `
                           <div class="mt-2 space-y-1">
                               <div class="text-sm text-gray-400">
                                   <span class="line-through">${escapeHtml(formatMoney(yearlyFull))}</span>
                                   <span class="mx-2">→</span>
                                   <span class="text-red-500 font-semibold">${escapeHtml(formatMoney(chosenYearly))}</span>
                               </div>
                               <div class="text-xs text-red-500">
                                   ${escapeHtml(t('save_20'))}
                                   ${savings !== null ? ` • ${escapeHtml(t('you_save'))} ${escapeHtml(formatMoney(savings))}` : ''}
                               </div>
                           </div>
                       ` : ''}`;

                const featuresHtml = features.length
                    ? `<ul class="grid grid-cols-1 gap-2 mb-8">
                           ${features.map(f => `
                               <li class="flex items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-3 py-2">
                                   <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-success/20 text-success">
                                     <i class="fas fa-check text-xs"></i>
                                   </span>
                                   <span class="text-gray-200 text-sm">${escapeHtml(String(f))}</span>
                               </li>
                           `).join('')}
                       </ul>`
                    : `<div class="text-gray-400 text-sm mb-8">${escapeHtml(t('no_features_listed'))}</div>`;

                const buttonClass = isTrial
                    ? 'w-full bg-success text-white py-3 rounded-xl font-semibold hover:bg-green-600 transition-colors shadow-md'
                    : (isPopular
                        ? 'w-full bg-primary text-black py-3 rounded-xl font-semibold hover:bg-yellow-500 transition-colors shadow-md'
                        : 'w-full bg-transparent border border-primary text-primary py-3 rounded-xl font-semibold hover:bg-primary hover:text-black transition-colors');

                return `
                    <div class="relative rounded-3xl p-[1px] ${isPopular ? 'bg-gradient-to-r from-primary/60 via-yellow-400/30 to-primary/60' : 'bg-white/10'}">
                      <div class="glass-effect rounded-3xl p-8 relative ${cardBorder} shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 flex flex-col h-full overflow-hidden">
                          <div class="absolute -top-24 -right-24 w-48 h-48 bg-primary/10 blur-3xl"></div>
                          <div class="absolute -bottom-24 -left-24 w-48 h-48 bg-success/10 blur-3xl"></div>
                          ${badgeHtml}
                          <div class="text-center mb-6">
                              <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300 mb-3">
                                  <i class="fas ${isTrial ? 'fa-bolt text-success' : 'fa-gem text-primary'}"></i>
                                  <span>${escapeHtml(String(code || 'PLAN'))}</span>
                              </div>
                              <h3 class="text-2xl md:text-3xl font-black ${isTrial ? 'text-success' : 'text-primary'} mb-2">${escapeHtml(String(title))}</h3>
                              ${desc ? `<p class="text-gray-300 text-sm md:text-base">${escapeHtml(String(desc))}</p>` : `<p class="text-gray-300">&nbsp;</p>`}
                          </div>
                          <div class="text-center mb-6">${priceHtml}</div>
                          <div class="flex-1">${featuresHtml}</div>
                          <button onclick="${buttonOnClick}" class="${buttonClass} mt-2">
                              ${escapeHtml(String(buttonLabel))}
                          </button>
                      </div>
                    </div>
                `;
            }).join('');

            // dynamic columns based on plans count
            const count = plans.length;
            grid.className = `grid md:grid-cols-${Math.min(Math.max(count, 1), 4)} gap-8`;
            grid.innerHTML = cards;
            // Translate newly rendered suffix nodes (<span data-i18n="plan_per_*">)
            try { if (typeof window.applyI18n === 'function') window.applyI18n(grid); } catch (_) {}
        }

        // Go to payment page (supports plan id or plan code)
        function goToPayment(planKeyOrId) {
            const plan = findPlanByKey(planKeyOrId);
            if (!plan) {
                alert(window.tl_t ? window.tl_t('plan_not_found', 'Plan not found') : 'Plan not found');
                return;
            }

            const billingPeriod = getCurrentBillingPeriod();
            const isYearly = billingPeriod === 'yearly';

            const monthly = Number(plan.price_monthly);
            const yearlyStored = Number(plan.price_yearly);
            const yearlyFull = (isFinite(monthly) && monthly > 0) ? (monthly * 12) : NaN;
            const yearlyDiscounted = isFinite(yearlyFull) ? Math.round((yearlyFull * (1 - 0.20)) * 100) / 100 : NaN;
            const yearly = (isFinite(yearlyStored) && yearlyStored > 0) ? yearlyStored : yearlyDiscounted;
            const price = isYearly ? yearly : monthly;
            if (!isFinite(price) || price <= 0) {
                // trial/free plans should use the trial endpoint instead of payment
                if (String(plan.code || '').toUpperCase() === 'TRIAL' || price === 0) {
                    activateTrialPlan();
                    return;
                }
                alert(window.tl_t ? window.tl_t('invalid_plan_price', 'Invalid plan price') : 'Invalid plan price');
                return;
            }

            const planName = plan.name || plan.code || 'Plan';
            const periodLabel = isYearly
                ? (window.tl_t ? window.tl_t('pricing.yearly', 'Yearly') : 'Yearly')
                : (window.tl_t ? window.tl_t('pricing.monthly', 'Monthly') : 'Monthly');

            // Build payment URL
            const paymentUrl = `/trendlens/payment.html?plan=${encodeURIComponent(String(plan.code || plan.id))}&billing=${encodeURIComponent(billingPeriod)}&amount=${encodeURIComponent(String(price))}&currency=USD&description=${encodeURIComponent(`TrendLens - ${planName} (${periodLabel})`)}`;
            
            // 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
        async function startSocialScan() {
            const accountUrl = document.getElementById('socialAccountUrl')?.value.trim() || '';
            
            // Validate account URL
            if (!accountUrl) {
                const lang = window.__UICFG?.ui?.locale || 'ar';
                const msg = window.tl_t('please_enter_account_url', 'Please enter account URL');
                alert(msg);
                return;
            }
            
            // Show loading state
            const btn = document.querySelector('[onclick="startSocialScan()"]');
            const originalBtnText = btn?.innerHTML || '';
            if (btn) {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i><span data-i18n="checking">جارٍ التحقق...</span>';
            }
            
            try {
                // Step 1: Precheck - verify public data availability (free)
                const precheckResponse = await fetch('/api/quality/precheck', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: accountUrl })
                });
                
                const precheckData = await precheckResponse.json();
                
                if (!precheckData.available) {
                    // Show error message - use message based on current language
                    const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                    const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
                    let errorMsg = precheckData.user_message_ar || precheckData.user_message_en || precheckData.message || 'Error occurred';
                    if (shortLang === 'en' && precheckData.user_message_en) errorMsg = precheckData.user_message_en;
                    else if (shortLang === 'es' && precheckData.user_message_es) errorMsg = precheckData.user_message_es;
                    else if (shortLang === 'pt' && precheckData.user_message_pt) errorMsg = precheckData.user_message_pt;
                    else if (shortLang === 'tr' && precheckData.user_message_tr) errorMsg = precheckData.user_message_tr;
                    else if (shortLang === 'hi' && precheckData.user_message_hi) errorMsg = precheckData.user_message_hi;
                    else if (shortLang === 'ar' && precheckData.user_message_ar) errorMsg = precheckData.user_message_ar;
                    alert(errorMsg);
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = originalBtnText;
                    }
                    return;
                }
                
                // Step 2: Create checkout (paid)
                const checkoutResponse = await fetch('/api/quality/checkout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: accountUrl })
                });
                
                const checkoutData = await checkoutResponse.json();
                
                if (!checkoutData.ok || !checkoutData.checkout_url) {
                    const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                    const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
                    let errorMsg = checkoutData.message_ar || checkoutData.message_en || checkoutData.message || 'Error occurred';
                    if (shortLang === 'en' && checkoutData.message_en) errorMsg = checkoutData.message_en;
                    else if (shortLang === 'es' && checkoutData.message_es) errorMsg = checkoutData.message_es;
                    else if (shortLang === 'pt' && checkoutData.message_pt) errorMsg = checkoutData.message_pt;
                    else if (shortLang === 'tr' && checkoutData.message_tr) errorMsg = checkoutData.message_tr;
                    else if (shortLang === 'hi' && checkoutData.message_hi) errorMsg = checkoutData.message_hi;
                    else if (shortLang === 'ar' && checkoutData.message_ar) errorMsg = checkoutData.message_ar;
                    alert(errorMsg);
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = originalBtnText;
                    }
                    return;
                }
                
                // Step 3: Redirect to checkout/payment page
                // Store order_id for later use
                if (checkoutData.order_id) {
                    sessionStorage.setItem('quality_order_id', checkoutData.order_id);
                }
                
                // Redirect to checkout URL (or payment page with order_id)
                if (checkoutData.checkout_url && checkoutData.checkout_url.startsWith('http')) {
                    window.location.href = checkoutData.checkout_url;
                } else {
                    // Fallback: redirect to payment page with order details
                    // Get price from element or default
                    const priceEl = document.getElementById('qualityCheckPrice');
                    const priceText = priceEl ? priceEl.textContent.replace('$', '') : '2.99';
                    const price = parseFloat(priceText) || 2.99;
                    
                    const paymentUrl = `/trendlens/payment.html?plan=social_scan&amount=${price}&currency=USD&order_id=${encodeURIComponent(checkoutData.order_id)}&description=${encodeURIComponent('فحص جودة حساب سوشال ميديا')}`;
                    
                    // 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)}`;
                    }
                    
                    finalUrl += `&social_account=${encodeURIComponent(accountUrl)}`;
                    if (precheckData.platform_detected) {
                        finalUrl += `&social_platform=${encodeURIComponent(precheckData.platform_detected)}`;
                    }
                    
                    window.location.href = finalUrl;
                }
            } catch (error) {
                console.error('Error in social scan:', error);
                const lang = window.__UICFG?.ui?.locale || 'ar';
                const errorMsg = lang === 'ar' 
                    ? 'حدث خطأ أثناء التحقق من الحساب. يرجى المحاولة مرة أخرى.'
                    : 'An error occurred while checking the account. Please try again.';
                alert(errorMsg);
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = originalBtnText;
                }
            }
        }

        // Toggle billing (monthly/yearly) - re-render plans
        function toggleBilling() {
            const toggle = document.getElementById('billingToggle');
            if (!toggle) return;
            const isYearly = !!toggle.checked;
            __PRICING_BILLING__ = isYearly ? 'yearly' : 'monthly';

            const t = (k, fallback) => (window.tl_t ? window.tl_t(k, fallback) : fallback);

            const discount = document.getElementById('yearlyDiscount');
            if (discount) {
                if (isYearly) {
                    discount.classList.remove('hidden');
                    discount.textContent = t('save_20', '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');
                }
            }

            // ألوان اختيار شهري/سنوي
            const m = document.getElementById('billingLabelMonthly');
            const y = document.getElementById('billingLabelYearly');
            if (m && y) {
                if (isYearly) {
                    m.className = 'text-gray-400';
                    y.className = 'text-red-500 font-semibold';
                } else {
                    m.className = 'text-primary font-semibold';
                    y.className = 'text-gray-400';
                }
            }

            renderPricingPlans();
        }

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

        // ===== Trial Plan Activation =====
        async function activateTrialPlan() {
            try {
                const token = localStorage.getItem('token') || localStorage.getItem('trendlens_token');
                if (!token) {
                    // لازم المستخدم يسجل/يسجل دخول أولاً
                    openAuthModal('login');
                    return;
                }
                const res = await fetch(`${API_BASE}/user/subscription/trial`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    // مهم لتمرير cookies الخاصة بالإحالة (tl_ref_link) إذا وجدت
                    credentials: 'include',
                    body: JSON.stringify({ days: 7 })
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok || !data.ok) {
                    const msg = data.detail || data.message || `HTTP ${res.status}`;
                    alert(`تعذر تفعيل التجربة: ${msg}`);
                    return;
                }
                alert('تم تفعيل التجربة بنجاح');
                window.location.href = '/trendlens/dashboard.html';
            } catch (e) {
                console.error('activateTrialPlan error:', e);
                alert('حدث خطأ أثناء تفعيل التجربة. حاول مرة أخرى.');
            }
        }

        // Initialize language on page load
        function initializeLanguage() {
            // Get saved language or detect from browser
            const savedLocale = window.TL_LOCALE ||
                                localStorage.getItem('TL_LOCALE') ||
                                localStorage.getItem('tl_lang') ||
                                window.__UICFG?.ui?.locale ||
                                (navigator.language || 'en-US');
            const lang = String(savedLocale || 'en-US');
            
            // Set language immediately
            if (!window.__UICFG) window.__UICFG = { ui: {} };
            window.__UICFG.ui.locale = lang;
            try { localStorage.setItem('tl_lang', (lang.split('-')[0] || 'en').toLowerCase()); } catch (e) {}
            
            // Update HTML attributes
            document.documentElement.lang = lang;
            const short = (lang.split('-')[0] || 'en').toLowerCase();
            document.documentElement.dir = (short === 'ar') ? 'rtl' : 'ltr';
            
            // ✅ الخط الأساسي: Cairo دائماً (لا تغيير حسب اللغة)
            document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
            document.documentElement.style.fontFamily = 'Cairo, 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();
        
        // Load quality check price from admin service-pricing API
        async function loadQualityCheckPrice() {
            const base = window.API_BASE || '/trendlens/api';
            const url = base + '/admin/service-pricing/public/QUALITY_CHECK?_=' + Date.now();
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    console.warn('[Quality Price] API returned', response.status, 'for', url);
                    return;
                }
                const contentType = response.headers.get('content-type') || '';
                if (!contentType.includes('application/json')) {
                    console.warn('[Quality Price] Non-JSON response from', url);
                    return;
                }
                const data = await response.json();
                const priceEl = document.getElementById('qualityCheckPrice');
                if (priceEl && data.price_usd != null) {
                    priceEl.textContent = `$${Number(data.price_usd).toFixed(2)}`;
                    console.log('[Quality Price] Updated to $' + data.price_usd);
                }
            } catch (err) {
                console.warn('[Quality Price] Failed to load:', err.message);
            }
        }

        // Load price when page loads — with retry after 3s if API not ready yet
        function initQualityPrice() {
            loadQualityCheckPrice().then(() => {
                // إذا لا يزال يعرض القيمة الافتراضية 2.99 بعد أول محاولة، أعد المحاولة
                const priceEl = document.getElementById('qualityCheckPrice');
                if (priceEl && priceEl.textContent === '$2.99') {
                    setTimeout(loadQualityCheckPrice, 3000);
                }
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initQualityPrice);
        } else {
            initQualityPrice();
        }
        
        // تطبيق الترجمات عند تحميل الصفحة
        (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';
            
            // ✅ الخط الأساسي: Cairo دائماً (لا تغيير حسب اللغة)
            document.body.className = document.body.className.replace(/font-roboto/g, '') + ' font-cairo';
            document.documentElement.style.fontFamily = 'Cairo, sans-serif';
            
            loadTicker();
            // pricing needs plans from backend first
            await 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;
            
            // التحقق من تسجيل الدخول أولاً
            const token = typeof getAuthToken === 'function' ? getAuthToken() : (localStorage.getItem('auth_token') || localStorage.getItem('authToken'));
            if (!token) {
                alert(window.tl_t('auth.please_login_for_ai', 'Please log in first to use AI'));
                window.location.href = '/trendlens/index.html?auth=google&next=' + encodeURIComponent(window.location.pathname);
                return;
            }
            
            // إظهار قسم AI Assistant إذا كان مخفياً
            const aiAssistantSection = document.getElementById('aiAssistant');
            if (aiAssistantSection) {
                aiAssistantSection.style.display = 'block';
                aiAssistantSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
            
            // تغيير النص إلى "جارٍ التحليل..." أو "Analyzing..."
            // استخدام locale من نظام i18n الحالي
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            const lang = currentLocale.split('-')[0] || '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 data-i18n="image_search.upload_prompt">Upload an image to find similar products</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" data-i18n="generic.loading">Loading...</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" data-i18n="common.no_data_found">No data found</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" data-i18n="common.error_loading_data">Error loading data</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(window.tl_t('common.please_select_image', 'Please select an image first'));
                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='/trendlens/assets/brand/logo.svg'">
                            ` : `
                                <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(window.tl_t('common.please_enter_symbol', 'Please enter a symbol'));
                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">${window.tl_t ? window.tl_t('common.no_data_for_symbol', 'No data found for symbol {symbol}', { symbol }) : `No data found for symbol ${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", hi: 'अमेज़न के लिए अरब विक्रेता गाइड', tr: 'Amazon için Arap Satıcı Rehberi', es: 'Guía del vendedor árabe en Amazon', pt: 'Guia do vendedor árabe na Amazon' },
                seller: { name: 'متجر النخبة' },
                price: 29.99,
                cover: '/trendlens/assets/brand/logo.svg',
                summary: { ar: 'أساسيات الانطلاق ورفع المنتجات وتحسين المبيعات.', en: 'Basics to launch, list products, and boost sales.', hi: 'शुरू करने, प्रोडक्ट लिस्ट करने और बिक्री बढ़ाने की बुनियादी बातें।', tr: 'Başlatma, listeleme ve satışları artırmanın temelleri.', es: 'Conceptos básicos para lanzar, publicar productos y aumentar ventas.', pt: 'Noções básicas para lançar, listar produtos e aumentar vendas.' },
                partner_summary: { ar: 'هذا الكتاب تلخيص عملي من الشريك يشرح خطوات البداية.', en: 'Partner summary: a practical guide for getting started.', hi: 'साझेदार सारांश: शुरुआत के लिए एक व्यावहारिक गाइड।', tr: 'Ortak özeti: başlamak için pratik bir rehber.', es: 'Resumen del socio: una guía práctica para empezar.', pt: 'Resumo do parceiro: um guia prático para começar.' },
                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: '/trendlens/assets/brand/logo.svg',
                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: '/trendlens/assets/brand/logo.svg',
                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: '/trendlens/assets/brand/logo.svg',
                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'
            }
        ];

        // Use short language code consistently (ar/en/es/pt/tr/hi) derived from the active i18n locale
        function getCurrentLang() {
            const loc = window.TL_LOCALE || localStorage.getItem('TL_LOCALE') || localStorage.getItem('tl_locale') || window.__UICFG?.ui?.locale || 'en-US';
            const s = String(loc).toLowerCase();
            if (s.startsWith('ar')) return 'ar';
            if (s.startsWith('en')) return 'en';
            if (s.startsWith('es')) return 'es';
            if (s.startsWith('pt')) return 'pt';
            if (s.startsWith('tr')) return 'tr';
            if (s.startsWith('hi')) return 'hi';
            return '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:'/trendlens/assets/brand/logo.svg', 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:'/trendlens/assets/brand/logo.svg', 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:'/trendlens/assets/brand/logo.svg', 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:'/trendlens/assets/brand/logo.svg', 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 => {
                // Avoid Arabic fallback for non-Arabic UI to prevent mixed-language cards:
                // - If UI is Arabic: prefer ar then en
                // - Otherwise: prefer en then ar
                const pickText = (obj) => {
                    if (!obj) return '';
                    const isAr = lang === 'ar';
                    const primary = isAr ? (obj.ar ?? obj.en) : (obj.en ?? obj.ar);
                    // allow direct lang hits if present (hi/tr/es/pt)
                    return (obj[lang] ?? primary ?? '');
                };

                const t = pickText(b.title);
                const s = pickText(b.summary);
                const ps = pickText(b.partner_summary);
                const seller = b.seller?.name || '';
                // Use the global i18n system only (prevents mixed-language UI from inline dicts).
                const badgeText = window.tl_t ? window.tl_t('ebook_badge', 'E-book') : 'E-book';
                const bestSellingText = window.tl_t ? window.tl_t('badge_best_selling', 'Best Selling') : 'Best Selling';
                const fastGrowingText = window.tl_t ? window.tl_t('badge_fast_growing', 'Fastest Growing') : 'Fastest Growing';
                const bizFavoriteText = window.tl_t ? window.tl_t('badge_biz_favorite', 'Business Favorite') : '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 class="w-full" style="height: 192px; min-height: 192px; max-height: 192px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <img src="${b.cover || '/trendlens/assets/brand/logo.svg'}" alt="${t}" style="width: 70%; height: 70%; object-fit: contain; max-width: 70%; max-height: 70%;" onerror="this.onerror=null;this.src='/trendlens/assets/brand/logo.svg';">
                    </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="ebook.by">${window.tl_t ? window.tl_t('ebook.by') : '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=\"ebook.partner_summary\">${window.tl_t ? window.tl_t('ebook.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">${window.tl_t ? window.tl_t('view_more', 'View More') : 'View 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);

                // إخفاء اللودر بعد 3.5 ثانية تقريباً مع fade-out (مدة أطول لتجربة سينمائية أوضح)
                setTimeout(() => {
                    if (overlay) {
                    overlay.classList.add('hidden');
                    overlay.style.opacity = '0';
                    overlay.style.visibility = 'hidden';

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

            // Fallback: إخفاء intro-screen بعد 7 ثوانٍ كحد أقصى (حتى لو فشل الكود)
            function forceHideIntroScreen() {
                const overlay = document.getElementById('intro-screen');
                if (overlay) {
                    overlay.classList.add('hidden');
                    overlay.style.display = 'none';
                    overlay.style.opacity = '0';
                    overlay.style.visibility = 'hidden';
                    overlay.style.pointerEvents = 'none';
                }
            }
            
            // Fallback بعد 7 ثوانٍ
            setTimeout(forceHideIntroScreen, 7000);

            // تشغيل اللودر عند تحميل الصفحة
            if (document.readyState === 'loading') {
                window.addEventListener('load', initLoader);
                // Fallback: init after 4 seconds even if load event doesn't fire
                setTimeout(initLoader, 4000);
            } else {
                initLoader();
            }
            
            // Fallback إضافي: إخفاء عند DOMContentLoaded بعد 6 ثوانٍ
            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(forceHideIntroScreen, 6000);
            });

            // Fallback قوي: عرض اللودر فوراً ثم إخفاؤه بعد 6 ثوانٍ حتى لو فشل أي سكربت
            (function() {
                const overlay = document.getElementById('intro-screen');
                if (overlay) {
                    overlay.style.display = 'flex';
                    overlay.classList.remove('hidden');
                    setTimeout(() => {
                        overlay.classList.add('hidden');
                        overlay.style.display = 'none';
                        overlay.style.opacity = '0';
                        overlay.style.visibility = 'hidden';
                    }, 6000);
                }
            })();
        })();
        
        // 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(){ 
            // استخدام locale من نظام i18n الحالي (window.TL_LOCALE)
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            // تحويل locale إلى صيغة قصيرة (en-US -> en, ar-KW -> ar)
            return currentLocale.split('-')[0] || '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){
            const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
            const keyMap = {
                billing: `quick_response.billing`,
                technical: `quick_response.technical`,
                feature: `quick_response.feature`
            };
            const i18nKey = keyMap[key] || 'quick_response.default';
            
            // Try to get translation from i18n system
            if (typeof window.tl_t === 'function') {
                const translated = window.tl_t(i18nKey);
                if (translated && translated !== i18nKey) return translated;
            }
            
            // Fallback translations
            const fallbacks = {
                en: {
                    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.',
                    default: 'How can I help?'
                },
                ar: {
                    billing: 'لاستفسارات الفوترة، فضلاً حدّد خطتك أو رقم الفاتورة.',
                    technical: 'ما المشكلة التقنية؟ هل هي تسجيل الدخول، الأداء، أم أخطاء؟',
                    feature: 'اذكر الميزة المطلوبة وحالة الاستخدام لديك.',
                    default: 'كيف أقدر أساعدك؟'
                },
                es: {
                    billing: 'Para consultas de facturación, especifique su plan o número de factura.',
                    technical: '¿Qué problema técnico está enfrentando? ¿Inicio de sesión, rendimiento o errores?',
                    feature: 'Cuéntenos la función que necesita y su caso de uso.',
                    default: '¿Cómo puedo ayudar?'
                },
                pt: {
                    billing: 'Para questões de cobrança, especifique seu plano ou número da fatura.',
                    technical: 'Qual problema técnico você está enfrentando? Login, desempenho ou erros?',
                    feature: 'Conte-nos a funcionalidade que você precisa e seu caso de uso.',
                    default: 'Como posso ajudar?'
                },
                tr: {
                    billing: 'Faturalama soruları için lütfen planınızı veya fatura numaranızı belirtin.',
                    technical: 'Hangi teknik sorunla karşılaşıyorsunuz? Giriş, performans veya hatalar?',
                    feature: 'İhtiyacınız olan özelliği ve kullanım durumunuzu bize söyleyin.',
                    default: 'Nasıl yardımcı olabilirim?'
                },
                hi: {
                    billing: 'बिलिंग प्रश्नों के लिए, कृपया अपनी योजना या चालान संख्या निर्दिष्ट करें।',
                    technical: 'आप किस तकनीकी समस्या का सामना कर रहे हैं? लॉगिन, प्रदर्शन, या त्रुटियाँ?',
                    feature: 'हमें वह सुविधा बताएं जिसकी आपको आवश्यकता है और आपका उपयोग मामला।',
                    default: 'मैं कैसे मदद कर सकता हूँ?'
                }
            };
            
            const langFallback = fallbacks[shortLang] || fallbacks.en;
            return langFallback[key] || langFallback.default;
        }

        function getBotResponse(message, lang){
            const msg = (message || '').toLowerCase();
            const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
            
            // Try to get translation from i18n system
            function getBotTranslation(key) {
                if (typeof window.tl_t === 'function') {
                    const translated = window.tl_t(`bot_response.${key}`);
                    if (translated && translated !== `bot_response.${key}`) return translated;
                }
                return null;
            }
            
            // Price/Plan responses
            if (msg.includes('price') || msg.includes('plan') || msg.includes('سعر') || msg.includes('خطة') || msg.includes('الباقات') || msg.includes('precio') || msg.includes('plano') || msg.includes('fiyat') || msg.includes('plan') || msg.includes('मूल्य') || msg.includes('योजना')) {
                return getBotTranslation('pricing') || (shortLang === 'ar' ? 'تقدر تغيّر بين شهري/سنوي في التسعير. السنوي يوفر حتى 20%.' : 
                    shortLang === 'es' ? 'Puede cambiar entre Mensual/Anual en precios. El anual ahorra hasta 20%.' :
                    shortLang === 'pt' ? 'Você pode alternar entre Mensal/Anual nos preços. O anual economiza até 20%.' :
                    shortLang === 'tr' ? 'Fiyatlandırmada Aylık/Yıllık arasında geçiş yapabilirsiniz. Yıllık %20\'ye kadar tasarruf sağlar.' :
                    shortLang === 'hi' ? 'आप मूल्य निर्धारण में मासिक/वार्षिक के बीच स्विच कर सकते हैं। वार्षिक 20% तक बचाता है।' :
                    'You can switch Monthly/Yearly in pricing. Annual saves up to 20%.');
            }
            
            // Book responses
            if (msg.includes('book') || msg.includes('ebook') || msg.includes('كتاب') || msg.includes('الكتب') || msg.includes('libro') || msg.includes('kitap') || msg.includes('livro') || msg.includes('पुस्तक')) {
                return getBotTranslation('books') || (shortLang === 'ar' ? 'قسم الكتب الإلكترونية يعرض أبرز الكتب ويمكنك مشاهدة المزيد في صفحة الكتب.' :
                    shortLang === 'es' ? 'La sección de libros electrónicos muestra las mejores selecciones y más en la página de libros.' :
                    shortLang === 'pt' ? 'A seção de livros eletrônicos mostra as melhores escolhas e mais na página de livros.' :
                    shortLang === 'tr' ? 'E-kitap bölümü kitaplar sayfasında en iyi seçimleri ve daha fazlasını gösterir.' :
                    shortLang === 'hi' ? 'ई-पुस्तक अनुभाग पुस्तक पृष्ठ पर शीर्ष चयन और अधिक दिखाता है।' :
                    'E-books section shows top picks and more on the books page.');
            }
            
            // Language responses
            if (msg.includes('language') || msg.includes('english') || msg.includes('arabic') || msg.includes('لغة') || msg.includes('عربي') || msg.includes('انجليزي') || msg.includes('idioma') || msg.includes('dil') || msg.includes('idioma') || msg.includes('भाषा')) {
                return getBotTranslation('language') || (shortLang === 'ar' ? 'بدّل اللغة من الأزرار أعلى يمين الصفحة وسيتم التحديث فوراً.' :
                    shortLang === 'es' ? 'Cambie el idioma desde los botones en la parte superior derecha. El contenido se actualiza al instante.' :
                    shortLang === 'pt' ? 'Altere o idioma nos botões no canto superior direito. O conteúdo é atualizado instantaneamente.' :
                    shortLang === 'tr' ? 'Dili sağ üstteki düğmelerden değiştirin. İçerik anında güncellenir.' :
                    shortLang === 'hi' ? 'शीर्ष दाईं ओर बटन से भाषा बदलें। सामग्री तुरंत अपडेट हो जाती है।' :
                    'Switch language from the top-right buttons. Content updates instantly.');
            }
            
            // Default response
            return getBotTranslation('default') || (shortLang === 'ar' ? 'شكراً! سيردّ عليك فريقنا قريباً. خلال ذلك، هل تستطيع توضيح التفاصيل أكثر؟' :
                shortLang === 'es' ? '¡Gracias! Nuestro equipo responderá pronto. Mientras tanto, ¿puede compartir más detalles?' :
                shortLang === 'pt' ? 'Obrigado! Nossa equipe responderá em breve. Enquanto isso, você pode compartilhar mais detalhes?' :
                shortLang === 'tr' ? 'Teşekkürler! Ekibimiz yakında yanıtlayacak. Bu arada, daha fazla detay paylaşabilir misiniz?' :
                shortLang === 'hi' ? 'धन्यवाद! हमारी टीम जल्द ही जवाब देगी। इस बीच, क्या आप अधिक विवरण साझा कर सकते हैं?' :
                "Thanks! Our team will respond shortly. Meanwhile, can you share more details?");
        }

        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 حسب القرار الإداري رقم (1)
            // استخدام fallback محلي فقط
            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 حسب القرار الإداري رقم (1)
            // استخدام fallback محلي فقط
            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 || window.TL_LOCALE || document.documentElement.lang || 'en');
                const l = String(lang).toLowerCase();
                if (l.startsWith('ar')) return 'ar-SA';
                if (l.startsWith('es')) return 'es-ES';
                if (l.startsWith('pt')) return 'pt-BR';
                if (l.startsWith('tr')) return 'tr-TR';
                if (l.startsWith('hi')) return 'hi-IN';
                return 'en-US';
            }

            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 || window.TL_LOCALE || document.documentElement.lang || 'en').toLowerCase();
                const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
                
                // استخدام window.tl_t أو window.t إذا موجود، وإلا fallback مباشر
                function getTranslation(key, fallback) {
                    if (typeof window.tl_t === 'function') {
                        const translated = window.tl_t(key, {}, fallback);
                        if (translated && translated !== key) return translated;
                    }
                if (typeof window.t === 'function') {
                        const translated = window.t(key);
                        if (translated && translated !== key) return translated;
                    }
                    return fallback;
                }

                if (scope === 'global') {
                    const text = getTranslation('trends.scope.global_title', 
                        shortLang === 'ar' ? 'الترند العالمي' :
                        shortLang === 'es' ? 'Tendencia global' :
                        shortLang === 'pt' ? 'Tendência global' :
                        shortLang === 'tr' ? 'Küresel trend' :
                        shortLang === 'hi' ? 'वैश्विक रुझान' :
                        'Global trend');
                    scopeLabelEl.textContent = text;
                    return;
                }

                const prefix = getTranslation('trends.scope.country_prefix',
                    shortLang === 'ar' ? 'الترند المحلي –' :
                    shortLang === 'es' ? 'Tendencia local –' :
                    shortLang === 'pt' ? 'Tendência local –' :
                    shortLang === 'tr' ? 'Yerel trend –' :
                    shortLang === 'hi' ? 'स्थानीय रुझान –' :
                    'Local trend –');
                const fallbackCountry = getTranslation('trends.scope.country_unknown',
                    shortLang === 'ar' ? 'دولتك' :
                    shortLang === 'es' ? 'tu país' :
                    shortLang === 'pt' ? 'seu país' :
                    shortLang === 'tr' ? 'ülkeniz' :
                    shortLang === 'hi' ? 'आपका देश' :
                    'your country');
                const displayName = countryName || countryCode || fallbackCountry;
                scopeLabelEl.textContent = `${prefix} ${displayName}`;
            }

            function renderItems(items, accessLevel) {
                if (!listEl) return;
                const lang = (window.currentLang || window.__UICFG?.ui?.locale || window.TL_LOCALE || document.documentElement.lang || 'en').toLowerCase();
                const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
                
                function getTranslation(key, fallback) {
                    if (typeof window.tl_t === 'function') {
                        const translated = window.tl_t(key, {}, fallback);
                        if (translated && translated !== key) return translated;
                    }
                    if (typeof window.t === 'function') {
                        const translated = window.t(key);
                        if (translated && translated !== key) return translated;
                    }
                    return fallback;
                }

                if (!items || !items.length) {
                    const msg = getTranslation('trends.no_items_available',
                        shortLang === 'ar' ? 'لا توجد بيانات ترند متاحة حالياً.' :
                        shortLang === 'es' ? 'No hay tendencias disponibles en este momento.' :
                        shortLang === 'pt' ? 'Nenhuma tendência disponível no momento.' :
                        shortLang === 'tr' ? 'Şu anda mevcut trend yok.' :
                        shortLang === 'hi' ? 'अभी कोई रुझान उपलब्ध नहीं है।' :
                        '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) {
                            const lifespanText = getTranslation('trends.lifespan_days', 
                                shortLang === 'ar' ? `${lifespan} يوم` :
                                shortLang === 'es' ? `${lifespan}d` :
                                shortLang === 'pt' ? `${lifespan}d` :
                                shortLang === 'tr' ? `${lifespan}g` :
                                shortLang === 'hi' ? `${lifespan} दिन` :
                                `${lifespan}d`);
                            parts.push(lifespanText);
                        }
                        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 || document.documentElement.lang || 'en') === '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 - لا نحتاجه بعد الآن

                        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
                            });
                            
                            // بناء الكرت باستخدام 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);
                            
                            // إضافة معلومات المصدر (DSers)
                            const source = item.source || item.platform || 'DSers';
                            const sourceMetric = document.createElement('div');
                            sourceMetric.className = 'tl-metric';
                            sourceMetric.style.cssText = 'margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1);';
                            
                            const sourceLabelEl = document.createElement('span');
                            sourceLabelEl.className = 'tl-metric-label';
                            sourceLabelEl.textContent = locale === 'en-US' ? 'Source' : 'المصدر';
                            
                            const sourceValueEl = document.createElement('span');
                            sourceValueEl.className = 'tl-metric-value';
                            sourceValueEl.style.cssText = 'color: #feba04; font-weight: 600;';
                            sourceValueEl.textContent = String(source);
                            
                            sourceMetric.appendChild(sourceLabelEl);
                            sourceMetric.appendChild(sourceValueEl);
                            
                            body.appendChild(growthMetric);
                            body.appendChild(demandMetric);
                            body.appendChild(sourceMetric);
                            
                            // 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
                            });
                        } 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: linear-gradient(135deg, rgba(254,186,4,0.08) 0%, rgba(19,22,30,0.95) 100%) !important;
                            border-radius: 16px !important;
                            padding: 1.25rem 1.5rem !important;
                            border: 1px solid rgba(254,186,4,0.25) !important;
                            min-height: 240px !important;
                            width: 100% !important;
                            box-sizing: border-box !important;
                            margin: 0 !important;
                            position: relative !important;
                            color: rgba(255, 255, 255, 0.95) !important;
                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
                        `;
                        
                        // تأثير hover محسّن
                        card.addEventListener('mouseenter', function() {
                            this.style.background = 'linear-gradient(135deg, rgba(254,186,4,0.15) 0%, rgba(19,22,30,0.98) 100%)';
                            this.style.borderColor = 'rgba(254,186,4,0.4)';
                            this.style.transform = 'translateY(-4px) scale(1.02)';
                            this.style.boxShadow = '0 8px 24px rgba(254,186,4,0.25)';
                        });
                        
                        card.addEventListener('mouseleave', function() {
                            this.style.background = 'linear-gradient(135deg, rgba(254,186,4,0.08) 0%, rgba(19,22,30,0.95) 100%)';
                            this.style.borderColor = 'rgba(254,186,4,0.25)';
                            this.style.transform = 'translateY(0) scale(1)';
                            this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                        });
                        
                            // إضافة الكرت إلى 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;
            // استخدام locale من نظام i18n الحالي
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            const lang = currentLocale.split('-')[0] || '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_ai';
                const prompt = textEl ? textEl.value.trim() : '';
                
                if(!prompt) {
                    alert(window.tl_t('ai.please_enter_question', 'Please enter your question or request'));
                    return;
                }
                
                // التحقق من تسجيل الدخول أولاً
                const token = typeof getAuthToken === 'function' ? getAuthToken() : (localStorage.getItem('auth_token') || localStorage.getItem('authToken'));
                if (!token) {
                    alert(window.tl_t('auth.please_login_for_ai', 'Please log in first to use AI'));
                    window.location.href = '/trendlens/index.html?auth=google&next=' + encodeURIComponent(window.location.pathname + '#aiAssistant');
                    return;
                }
                
                // تعطيل الزر وإظهار حالة التحميل
                aiRunBtn.disabled = true;
                aiRunBtn.innerHTML = `<i class="fas fa-spinner fa-spin me-2"></i>${window.tl_t('processing', 'Processing...')}`;
                
                // إظهار قسم الرد وإخفاء رسالة الخطأ السابقة
                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">${window.tl_t('processing_request', 'Processing your request...')}</div></div>`;
                    if(aiResponseError) {
                        aiResponseError.classList.add('hidden');
                        aiResponseError.textContent = '';
                    }
                }

                // تفريغ حقل الإدخال بعد إرسال الطلب ليكون جاهزاً لسؤال جديد
                if (textEl) {
                    textEl.value = '';
                }
                
                try{
                    // استخدام locale من نظام i18n الحالي (window.TL_LOCALE)
                    // Fallback إلى window.__UICFG أو 'ar' للتوافق
                    const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'ar';
                    // تحويل locale إلى صيغة قصيرة (en-US -> en, ar-KW -> ar)
                    const lang = currentLocale.split('-')[0] || 'ar';
                    
                    // تحويل اسم الـ Agent من الشكل القديم (_al) إلى الجديد (_ai) للتوافق
                    const agentMap = {
                        'trend_al': 'trend_ai',
                        'pain_al': 'pain_ai',
                        'whatif_al': 'whatif_ai',
                        'insight_al': 'insight_ai',
                        'copy_al': 'copy_ai',
                        'pixel_al': 'pixel_ai'
                        // تم إزالة الوكلاء المحظورة نهائياً: seller_ai, alert_ai, price_ai, fraud_ai, 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} (from ${currentLocale})`);
                    
                    // بناء الطلب حسب العقد الموحد - تمرير locale صراحةً
                    const requestBody = {
                        prompt: prompt,
                        locale: lang,
                        context: {
                            period: 'last_7d',
                            source: 'dashboard_home'
                        }
                    };
                    
                    // استخدام authHeaders إذا كان متاحاً
                    const headers = typeof authHeaders === 'function' ? authHeaders() : { 'Content-Type': 'application/json' };
                    // إضافة token إذا لم يكن موجوداً في headers
                    if (token && !headers['Authorization']) {
                        headers['Authorization'] = `Bearer ${token}`;
                    }
                    
                    const res = await fetch(endpoint, {
                        method:'POST', 
                        headers: headers,
                        body: JSON.stringify(requestBody)
                    });
                    
                    if(!res.ok) {
                        const errorDetails = logAPIError('AI Assistant', endpoint, new Error(`HTTP ${res.status}`), res);
                        
                        // إذا كان الخطأ 401 (Unauthorized)، توجيه لتسجيل الدخول
                        if (res.status === 401) {
                            alert(window.tl_t('auth.please_login_for_ai', 'Please log in first to use AI'));
                            window.location.href = '/trendlens/index.html?auth=google&next=' + encodeURIComponent(window.location.pathname + '#aiAssistant');
                            return;
                        }
                        
                        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>${window.tl_t('error_processing', 'An error occurred while processing the request')}</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 = window.tl_t('error_data_format', 'Error in data format from server');
                            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 || 'تمت المعالجة بنجاح';
                        const outputContract = data.output_contract || {};
                        const decision = data.decision || '';
                        const dataUsed = data.data_used || {};
                        
                        console.log('✅ [AI Assistant] Response received successfully');
                        console.log('📊 Meta:', data.meta);
                        console.log('📋 Output Contract:', outputContract);
                        console.log('🎯 Decision:', decision);
                        
                        // بناء HTML للرد مع تصميم محسّن
                        let responseHTML = '';
                        
                        // إذا كان هناك output_contract (بيانات محدودة)
                        if (outputContract && Object.keys(outputContract).length > 0) {
                            const conclusion = outputContract.conclusion || output;
                            const keySignals = outputContract.key_signals || [];
                            const recommendation = outputContract.practical_recommendation || '';
                            
                            responseHTML += `
                                <div class="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-500/30 rounded-xl p-4 mb-4">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
                                            <i class="fa-solid fa-lightbulb text-amber-400"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h4 class="text-sm font-semibold text-amber-300 mb-2">${escapeHtml(conclusion)}</h4>
                                            ${keySignals.length > 0 ? `
                                                <ul class="text-xs text-gray-300 space-y-1 mb-3 list-disc list-inside">
                                                    ${keySignals.map(signal => `<li>${escapeHtml(signal)}</li>`).join('')}
                                                </ul>
                                            ` : ''}
                                            ${recommendation ? `
                                                <div class="bg-black/30 rounded-lg p-3 mt-3">
                                                    <p class="text-xs text-gray-200"><strong class="text-primary">💡 اقتراح:</strong> ${escapeHtml(recommendation)}</p>
                                                </div>
                                            ` : ''}
                                        </div>
                                    </div>
                                </div>
                            `;
                            
                            // إضافة اقتراحات عملية
                            responseHTML += `
                                <div class="grid md:grid-cols-2 gap-3 mt-4">
                                    <div class="bg-gradient-to-br from-sky-500/10 to-indigo-500/10 border border-sky-500/30 rounded-xl p-3">
                                        <div class="flex items-center gap-2 mb-2">
                                            <i class="fa-solid fa-chart-line text-sky-400"></i>
                                            <h5 class="text-sm font-semibold text-white">استكشف الترندات العامة</h5>
                                        </div>
                                        <p class="text-xs text-gray-300 mb-2">راجع قسم الترندات في المنصة للحصول على أفكار استثمارية</p>
                                        <button onclick="document.querySelector('#homepage-trends-section')?.scrollIntoView({behavior:'smooth'})" class="text-xs text-primary hover:text-yellow-400 transition-colors">
                                            <i class="fa-solid fa-arrow-left me-1"></i>انتقل للترندات
                                        </button>
                                    </div>
                                    <div class="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border border-purple-500/30 rounded-xl p-3">
                                        <div class="flex items-center gap-2 mb-2">
                                            <i class="fa-solid fa-rocket text-purple-400"></i>
                                            <h5 class="text-sm font-semibold text-white">المنتجات المنفجرة</h5>
                                        </div>
                                        <p class="text-xs text-gray-300 mb-2">اكتشف المنتجات الأكثر طلباً في السوق</p>
                                        <button onclick="document.querySelector('[data-feature=explosions]')?.scrollIntoView({behavior:'smooth'})" class="text-xs text-primary hover:text-yellow-400 transition-colors">
                                            <i class="fa-solid fa-arrow-left me-1"></i>شاهد المنتجات
                                        </button>
                                    </div>
                                </div>
                            `;
                        } else {
                            // رد عادي مع تصميم محسّن
                            responseHTML += `
                                <div class="bg-gradient-to-r from-sky-500/10 via-indigo-500/10 to-purple-500/10 border border-sky-500/30 rounded-xl p-4">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 flex items-center justify-center">
                                            <i class="fa-solid fa-brain text-white text-sm"></i>
                                        </div>
                                        <div class="flex-1 text-gray-300 whitespace-pre-wrap leading-relaxed">
                                            ${escapeHtml(output)}
                                        </div>
                                    </div>
                                </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="flex items-center gap-2 text-xs text-gray-400">
                                        <i class="fas fa-database"></i>
                                        <span>المصادر المستخدمة: ${data.meta.sources.join(', ')}</span>
                                    </div>
                                </div>
                            `;
                        }
                        
                        // إضافة معلومات البيانات المستخدمة
                        if (dataUsed && Object.keys(dataUsed).length > 0) {
                            const market = dataUsed.market || 'غير محدد';
                            const period = dataUsed.period || 'غير محدد';
                            const sourcesUsed = dataUsed.sources_used || [];
                            
                            if (sourcesUsed.length > 0 || market !== 'غير محدد') {
                                responseHTML += `
                                    <div class="mt-3 pt-3 border-t border-white border-opacity-10">
                                        <div class="text-xs text-gray-500">
                                            <span class="text-gray-400">السوق:</span> <span class="text-gray-300">${market}</span>
                                            ${period !== 'غير محدد' ? ` • <span class="text-gray-400">الفترة:</span> <span class="text-gray-300">${period}</span>` : ''}
                                        </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>${window.tl_t('error_processing_failed', 'Failed to process request')}</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>${window.tl_t('error_connection', 'An error occurred while connecting to server')}</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> ${window.tl_t('analyzing_data', 'Analyzing data...')}</div>`;
            panel.classList.remove('hidden');

            try {
                // إضافة locale الحالي للـ query
                const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'ar';
                const lang = currentLocale.split('-')[0] || 'ar';
                const queryWithLocale = {
                    ...config.query,
                    locale: lang
                };
                
                const res = await fetch(config.endpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(queryWithLocale)
                });

                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">${window.tl_t('error_fetch_analysis', '⚠️ Error while fetching analysis. Please try again.')}</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 tabMap = {
                    'products': 'explosions',      // انفجارات المنتجات → تبويب Explosions (المنتجات المنفجرة)
                    'suppliers': 'dashboard',     // أفضل الموردين → تبويب Dashboard
                    'shipping': 'shipping',       // نبض الشحن → تبويب Shipping
                    'ai-insights': 'ai',          // رؤى الذكاء الاصطناعي → تبويب AI
                    'lifeguard': 'lifeguard',     // منقذ الحملات → تبويب Lifeguard
                    'ads': 'dashboard',           // Market Ads → تبويب Dashboard
                    'market': 'dashboard',        // Market → تبويب Dashboard
                    'ai': 'ai',                   // AI → تبويب AI
                    'keywords': 'ai'              // الكلمات المفتاحية → تبويب AI
                };
                
                const targetTab = tabMap[cardId] || 'dashboard';
                
                // تتبع الحدث
                if (typeof trackEvent === 'function' || window.trackEvent) {
                    (window.trackEvent || trackEvent)('ui.open_analysis', {
                        channel: cardId,
                        target_tab: targetTab,
                        src_card_metrics: cardId,
                        ts: new Date().toISOString()
                    });
                }
                
                // توجيه للداشبورد مع التبويب الصحيح
                window.location.href = `/trendlens/dashboard.html#${targetTab}`;
            }

            // زر تحديث
            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';
                    }
                }
            }
        });

        // ===== Cache للبيانات الثابتة (user & subscription) =====
        let cachedUserData = null;
        let cachedSubscriptionData = null;
        let userDataLoaded = false;
        let subscriptionDataLoaded = false;
        
        // جعل البيانات متاحة عالمياً للاستخدام في أماكن أخرى
        window.cachedUserData = null;
        window.cachedSubscriptionData = null;
        
        // Shared promise لمنع الاستدعاءات المكررة - Single Flight Pattern
        window.__userSubPromise = null;
        
        // تحميل بيانات المستخدم والاشتراك مرة واحدة فقط (Single Flight)
        async function loadUserAndSubscription() {
            // إذا كان هناك promise قيد التنفيذ، نعيده مباشرة
            if (window.__userSubPromise) {
                console.log('[API] User & Subscription load already in progress, waiting for existing promise');
                return window.__userSubPromise;
            }
            
            // إذا كانت البيانات محملة بالفعل، لا نحتاج لإعادة التحميل
            if (userDataLoaded && subscriptionDataLoaded) {
                console.log('[API] User & Subscription already loaded, skipping');
                return Promise.resolve();
            }
            
            const token = getAuthToken();
            if (!token) {
                console.log('[API] No token, showing visitor state');
                updateVisitorState();
                return Promise.resolve();
            }
            
            // إنشاء promise جديد وتخزينه
            window.__userSubPromise = (async () => {
                try {
                    // جلب بيانات المستخدم (مرة واحدة فقط)
                    if (!userDataLoaded) {
                        try {
                            console.log('[API] Fetching /auth/me (first time)');
                            const userRes = await fetch(`${API_BASE}/auth/me`, {
                                headers: authHeaders()
                            });
                            if (userRes.ok) {
                                cachedUserData = await userRes.json();
                                window.cachedUserData = cachedUserData; // جعلها متاحة عالمياً
                                userDataLoaded = true;
                                console.log('[API] ✅ /auth/me loaded successfully');
                            }
                        } catch (err) {
                            console.error('[API] Error fetching user data:', err);
                        }
                    }
                    
                    // جلب بيانات الاشتراك (مرة واحدة فقط)
                    if (!subscriptionDataLoaded) {
                        try {
                            console.log('[API] Fetching /user/subscription (first time)');
                            const subRes = await fetch(`${API_BASE}/user/subscription?lang=${encodeURIComponent(getPricingLangForApi())}`, {
                                headers: authHeaders()
                            });
                            if (subRes.ok) {
                                cachedSubscriptionData = await subRes.json();
                                window.cachedSubscriptionData = cachedSubscriptionData; // جعلها متاحة عالمياً
                                subscriptionDataLoaded = true;
                                console.log('[API] ✅ /user/subscription loaded successfully');
                            }
                        } catch (err) {
                            console.error('[API] Error fetching subscription:', err);
                        }
                    }
                    
                    // تحديث العرض باستخدام البيانات المحفوظة
                    updateQuotaDisplayFromCache();
                } finally {
                    // مسح الـ promise بعد الانتهاء
                    window.__userSubPromise = null;
                }
            })();
            
            return window.__userSubPromise;
        }
        
        // تحديث حالة الزائر
        function updateVisitorState() {
            const quotaCard = document.getElementById('aiQuotaCardContainer');
            const subscriptionGreeting = document.getElementById('subscriptionGreeting');
            const subscriptionInfo = document.getElementById('subscriptionInfo');
            const quotaLabel = document.getElementById('quotaLabel');
            const quotaProgress = document.getElementById('quotaProgress');
            const actionBtn = document.getElementById('actionBtn');
            
            if (quotaCard) quotaCard.classList.remove('hidden');
            if (quotaLabel) quotaLabel.textContent = '—/—';
            if (quotaProgress) quotaProgress.style.width = '0%';
            if (subscriptionGreeting) subscriptionGreeting.textContent = window.tl_t('visitor', 'Visitor');
            if (subscriptionInfo) subscriptionInfo.textContent = '';
            if (actionBtn) actionBtn.classList.add('hidden');
        }
        
        // تحديث العرض من البيانات المحفوظة
        function updateQuotaDisplayFromCache() {
            const token = getAuthToken();
            if (!token) {
                updateVisitorState();
                return;
            }
            
            const quotaCard = document.getElementById('aiQuotaCardContainer');
            const subscriptionGreeting = document.getElementById('subscriptionGreeting');
            const subscriptionInfo = document.getElementById('subscriptionInfo');
            const actionBtn = document.getElementById('actionBtn');
            
            const userName = cachedUserData?.name || cachedUserData?.email?.split('@')[0] || 'حسابك';
            
            // إذا لم يكن هناك اشتراك نشط
            if (!cachedSubscriptionData || cachedSubscriptionData.status !== 'active' || !cachedSubscriptionData.plan_id) {
                if (quotaCard) quotaCard.classList.remove('hidden');
                if (subscriptionGreeting) {
                    const ui = getUiLangShort();
                    subscriptionGreeting.textContent = tlSafe(
                        'welcome_user',
                        ui === 'ar' ? 'مرحباً، {email}' : 'Welcome, {email}',
                        { email: userName }
                    );
                }
                if (subscriptionInfo) subscriptionInfo.textContent = '';
                if (actionBtn) actionBtn.classList.add('hidden');
            }
        }
        
        // تحميل رصيد AI (يستدعى كل 60 ثانية فقط)
        let isUpdatingUsage = false; // منع الاستدعاءات المتزامنة
        async function loadAIQuota() {
            // منع الاستدعاءات المكررة أثناء التنفيذ
            if (isUpdatingUsage) {
                console.log('[API] Usage update already in progress, skipping');
                return;
            }
            
            try {
                isUpdatingUsage = true;
                const token = getAuthToken();
                if (!token) {
                    updateVisitorState();
                    return;
                }
                
                // التأكد من تحميل بيانات المستخدم والاشتراك أولاً
                if (!userDataLoaded || !subscriptionDataLoaded) {
                    await loadUserAndSubscription();
                }
                
                const quotaCard = document.getElementById('aiQuotaCardContainer');
                const subscriptionGreeting = document.getElementById('subscriptionGreeting');
                const subscriptionInfo = document.getElementById('subscriptionInfo');
                const quotaLabel = document.getElementById('quotaLabel');
                const quotaProgress = document.getElementById('quotaProgress');
                const actionBtn = document.getElementById('actionBtn');
                
                // إذا لم يكن هناك اشتراك نشط
                if (!cachedSubscriptionData || cachedSubscriptionData.status !== 'active' || !cachedSubscriptionData.plan_id) {
                    updateQuotaDisplayFromCache();
                    return;
                }
                
                // جلب رصيد الاستخدام فقط (هذا يتغير)
                console.log('[API] Fetching /ai/usage-summary (periodic update)');
                // استخدام Authorization header بدلاً من querystring لأمان أفضل
                const res = await fetchWithTimeout(`/trendlens/api/ai/usage-summary`, {
                    headers: authHeaders()
                }, 5000);
                const data = await res.json();
                
                // استخدام البيانات المحفوظة للاشتراك
                const subscriptionData = cachedSubscriptionData;
                const userName = cachedUserData?.name || cachedUserData?.email?.split('@')[0] || 'حسابك';
                
                // Prefer server-localized plan_name; if it's missing/looks like a raw code, fall back to UI translations by code.
                const planCodeUpper = String(subscriptionData?.plan || '').toUpperCase();
                const rawPlanName = subscriptionData?.plan_name || subscriptionData?.plan || '';
                const nameLooksLikeCode = !!(rawPlanName && planCodeUpper && String(rawPlanName).toUpperCase() === planCodeUpper);
                const planName = (!rawPlanName || nameLooksLikeCode)
                    ? (
                        planCodeUpper === 'TRIAL' ? (window.tl_t ? window.tl_t('pricing.trial', 'Trial') : 'Trial')
                        : planCodeUpper === 'BASIC' ? (window.tl_t ? window.tl_t('pricing.basic', 'Basic') : 'Basic')
                        : planCodeUpper === 'PRO' ? (window.tl_t ? window.tl_t('pricing.pro', 'Pro') : 'Pro')
                        : planCodeUpper === 'ENTERPRISE' ? (window.tl_t ? window.tl_t('pricing.enterprise', 'Enterprise') : 'Enterprise')
                        : planCodeUpper || (getUiLangShort() === 'ar' ? 'اشتراك' : 'Subscription')
                      )
                    : rawPlanName;
                
                if (data.ok && data.data) {
                    const { used, limit, remaining, cycle_resets_at } = data.data;
                    const percentage = limit > 0 ? (used / limit) * 100 : 0;
                    
                    if (quotaLabel) quotaLabel.textContent = `${remaining}/${limit}`;
                    if (quotaProgress) quotaProgress.style.width = `${percentage}%`;
                    
                    // عرض معلومات الاشتراك في البطاقة اليمنى
                    if (subscriptionGreeting) {
                        const ui = getUiLangShort();
                        subscriptionGreeting.textContent = tlSafe(
                            'welcome_user',
                            ui === 'ar' ? 'مرحباً، {email}' : 'Welcome, {email}',
                            { email: userName }
                        );
                    }
                    if (subscriptionInfo) {
                        const ui = getUiLangShort();
                        const subLabel = window.tl_t ? window.tl_t('subscription_label', ui === 'ar' ? 'اشتراك' : 'Subscription') : (ui === 'ar' ? 'اشتراك' : 'Subscription');
                        subscriptionInfo.textContent = `${subLabel} ${planName}`;
                    }
                    
                    // إظهار البطاقة
                    if (quotaCard) quotaCard.classList.remove('hidden');
                    
                    // إخفاء زر الترقية دائماً (حسب متطلبات المستخدم)
                    if (actionBtn) {
                        actionBtn.classList.add('hidden');
                    }
                    console.log('[API] ✅ Usage summary updated successfully');
                } else {
                    // في حالة وجود اشتراك ولكن لا توجد بيانات استخدام
                    if (quotaCard) quotaCard.classList.remove('hidden');
                    if (quotaLabel) quotaLabel.textContent = '—/—';
                    if (quotaProgress) quotaProgress.style.width = '0%';
                    if (subscriptionGreeting) {
                        const ui = getUiLangShort();
                        subscriptionGreeting.textContent = tlSafe(
                            'welcome_user',
                            ui === 'ar' ? 'مرحباً، {email}' : 'Welcome, {email}',
                            { email: userName }
                        );
                    }
                    if (subscriptionInfo) {
                        const ui = getUiLangShort();
                        const subLabel = window.tl_t ? window.tl_t('subscription_label', ui === 'ar' ? 'اشتراك' : 'Subscription') : (ui === 'ar' ? 'اشتراك' : 'Subscription');
                        subscriptionInfo.textContent = `${subLabel} ${planName}`;
                    }
                    if (actionBtn) actionBtn.classList.add('hidden');
                }
            } catch (err) {
                console.error('[API] Error loading AI quota:', err);
                const quotaCard = document.getElementById('aiQuotaCardContainer');
                if (quotaCard) quotaCard.classList.add('hidden');
            } finally {
                isUpdatingUsage = false;
            }
        }

        // تتبع الأحداث
        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');
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            
            // تحميل namespace shipping إذا لم يكن محملاً
            if (typeof window.tlEnsureNamespace === 'function') {
                try {
                    await window.tlEnsureNamespace(window.TL_LOCALE || lang, 'shipping');
                } catch (e) {
                    console.warn('[Shipping Pulse] Failed to load shipping namespace:', e);
                }
            }
            
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, {}, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const connectionErrorText = safeT('common.connection_error_generic', isArabic ? 'خطأ في الاتصال. يرجى المحاولة مرة أخرى.' : 'Connection error. Please try again.');
            const noDataText = safeT('common.no_data_available', isArabic ? 'لا توجد بيانات متاحة' : 'No data available');
            
            // عرض حالة التحميل
            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:', apiError);
                        throw apiError;
                    }
                }
                
                shippingDataCache = data;
                window.shippingDataCache = shippingDataCache;
                renderVessels(data.vessels || []);
                renderPorts(data.ports || []);
                renderRates(data.rates || []);
            } catch (error) {
                logAPIError('Shipping Pulse', 'Data Collection API', error);
                showErrorToUser('shippingVessels', connectionErrorText);
                if (portsEl) portsEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-anchor"></i> ${escapeHtml(String(noDataText))}</div>`;
                if (ratesEl) ratesEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-ship"></i> ${escapeHtml(String(noDataText))}</div>`;
            }
        }
        
        // جعل 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: '/trendlens/assets/brand/logo.svg',
                    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: '/trendlens/assets/brand/logo.svg',
                    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: '/trendlens/assets/brand/logo.svg',
                    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: '/trendlens/assets/brand/logo.svg',
                    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: '/trendlens/assets/brand/logo.svg',
                    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 {
                // جلب البيانات المجمعة من ads_signals أولاً
                let scrapedAds = [];
                try {
                    const scrapedResponse = await fetch(`${API_BASE}/data-collection/ads-signals?limit=20&days=7`);
                    if (scrapedResponse.ok) {
                        const scrapedData = await scrapedResponse.json();
                        if (scrapedData.success && scrapedData.ads) {
                            scrapedAds = scrapedData.ads.map(ad => ({
                                title: `إعلان ${ad.platform}`,
                                platform: ad.platform,
                                advertiser: ad.platform,
                                spend_range: ad.spend_index ? `${ad.spend_index}%` : '—',
                                impressions: ad.impressions_index ? `${ad.impressions_index}%` : '—',
                                category: '',
                                url: ad.landing_page_url || ad.creative_url
                            }));
                        }
                    }
                } catch (scrapedError) {
                    console.warn('Failed to load scraped ads, using main API:', scrapedError);
                }

                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();
                            }
                        }
                    }
                }
                
                // دمج البيانات: البيانات المجمعة أولاً، ثم بيانات API
                const allAds = [...scrapedAds, ...(data.ads || [])];
                const allPlatforms = [...new Set([...scrapedAds.map(a => a.platform), ...(data.platforms || [])])];
                
                adsDataCache = {
                    ...data,
                    ads: allAds,
                    platforms: allPlatforms
                };
                
                window.adsDataCache = adsDataCache;
                renderAdsList(allAds);
                renderAdsPlatforms(allPlatforms);
                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> ${window.tl_t('no_ads_available', 'No ads available')}</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> ${window.tl_t('no_data_available', 'No data available')}</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> ${window.tl_t('no_stats_available', 'No statistics available')}</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;
        
        // ===== دالة تحميل الكلمات المفتاحية =====
        async function loadKeywordsData() {
            const displayEl = document.getElementById('keywordsDisplay');
            if (!displayEl) return;
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            
            // عرض حالة التحميل
            displayEl.innerHTML = `
                <div class="text-center py-4 text-gray-400">
                    <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                    <p data-i18n="keywords_loading">${escapeHtml(String(t('keywords_loading', 'Loading keywords...')))}</p>
                </div>
            `;
            
            try {
                const locale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en-US';
                const isArabic = String(locale).toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
                
                // محاولة جلب بيانات حقيقية من API
                let keywordsData = null;
                try {
                    const response = await fetch(`${API_BASE}/research/keywords?limit=50&lang=${encodeURIComponent(locale)}`, { 
                        credentials: 'include',
                        cache: 'no-store' 
                    });
                    if (response.ok) {
                        const apiData = await response.json();
                        if (apiData && apiData.keywords && Array.isArray(apiData.keywords)) {
                            keywordsData = apiData.keywords.map(k => (k && typeof k === 'object') ? (k.keyword || k.text || '') : String(k)).filter(Boolean);
                            console.log('✅ [Keywords] Loaded from API:', keywordsData.length, 'keywords');
                        }
                    }
                } catch (apiError) {
                    console.warn('⚠️ [Keywords] Failed to load from API, using fallback:', apiError);
                }
                
                // Fallback: بيانات تجريبية إذا فشل API
                if (!keywordsData) {
                    keywordsData = isArabic
                        ? [
                            'منتج جديد', 'جودة عالية', 'سعر مناسب', 'توصيل سريع', 'عرض خاص',
                            'خصم كبير', 'مميزات فريدة', 'خدمة عملاء', 'ضمان الجودة', 'شحن مجاني',
                            'تقييمات عالية', 'أفضل سعر', 'عروض محدودة', 'جديد في السوق', 'مميزات حصرية'
                        ]
                        : [
                            'new product', 'high quality', 'best price', 'fast shipping', 'special offer',
                            'big discount', 'unique features', 'customer service', 'quality guarantee', 'free shipping',
                            'high ratings', 'best deal', 'limited offer', 'new in market', 'exclusive features',
                            'trending now', 'hot sale', 'premium quality', 'best seller', 'top rated'
                        ];
                }
                
                let allKeywords = Array.isArray(keywordsData) ? keywordsData : [];
                
                // ترتيب عشوائي للتنويع
                allKeywords = allKeywords.sort(() => Math.random() - 0.5);
                
                const totalCount = allKeywords.length;
                
                let html = `
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-semibold text-gray-300 flex items-center gap-2">
                                <i class="fas fa-tags text-primary"></i>
                                <span>${escapeHtml(String(t('keywords_total', 'Total keywords')))}: <span class="text-primary font-bold">${totalCount}</span></span>
                            </h4>
                        </div>
                        <div class="flex flex-wrap gap-2 max-h-96 overflow-y-auto p-2 bg-black/20 rounded-lg">
                `;
                
                allKeywords.forEach((keyword, index) => {
                    const badgeClass = 'bg-primary/20 text-primary border-primary/30';
                    html += `
                        <span class="px-3 py-1.5 rounded-lg border text-xs md:text-sm font-medium ${badgeClass} hover:scale-105 transition-transform cursor-pointer" 
                              title="${keyword}"
                              onclick="searchKeyword('${keyword.replace(/'/g, "\\'")}')">
                            ${keyword}
                        </span>
                    `;
                });
                
                html += `
                        </div>
                    </div>
                `;
                
                html += `
                    <div class="mt-4 p-3 bg-primary/10 rounded-lg border border-primary/20">
                        <p class="text-xs text-gray-300">
                            <i class="fas fa-info-circle text-primary mr-1"></i>
                            ${escapeHtml(String(t('keywords_click_hint', 'Click on any keyword to search for it.')))}
                        </p>
                    </div>
                `;
                
                displayEl.innerHTML = html;
                
            } catch (error) {
                console.error('Error loading keywords:', error);
                displayEl.innerHTML = `
                    <div class="text-center py-4 text-red-400">
                        <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                        <p>${escapeHtml(String(t('keywords_error_loading', 'Error loading keywords')))}</p>
                    </div>
                `;
            }
        }
        
        // دالة البحث عن كلمة مفتاحية
        function searchKeyword(keyword) {
            console.log('Searching for keyword:', keyword);
            // توجيه المستخدم إلى الداشبورد مع معامل البحث
            // سيتم البحث تلقائياً في انفجارات المنتجات عند تحميل الداشبورد
            window.location.href = `/trendlens/dashboard.html?search=${encodeURIComponent(keyword)}`;
        }
        
        // جعل الدوال متاحة عالمياً
        window.loadKeywordsData = loadKeywordsData;
        window.searchKeyword = searchKeyword;

        // ===== دوال 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;
            }
            const t = window.tl_t ? ((key, fallback) => {
                const result = window.tl_t(key, {}, fallback);
                return (typeof result === 'string' && result.startsWith('[[MISSING:')) ? fallback : result;
            }) : ((_, fallback) => fallback || '');
            const isArabic = (window.TL_LOCALE || '').toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
            
            if (!vessels || vessels.length === 0) {
                const noVesselsText = t('common.no_vessels_available', isArabic ? 'لا توجد سفن متاحة' : 'No vessels available');
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-ship"></i> ${escapeHtml(String(noVesselsText))}</div>`;
                return;
            }
            
            let html = '';
            vessels.slice(0, 10).forEach(vessel => {
                const vesselName = vessel.vessel_name || t('common.unknown', 'Unknown');
                const vesselType = vessel.vessel_type || t('common.unknown', 'Unknown');
                const portName = vessel.port_name || vessel.port_code || t('common.unknown', 'Unknown');
                const speedVal = vessel.speed ? vessel.speed.toFixed(1) : null;
                const speed = speedVal ? `${escapeHtml(String(isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(speedVal) : speedVal))} ${escapeHtml(String(t('common.knots', 'knots')))}`
                    : escapeHtml(String(t('not_available', 'Not available')));
                const eta = vessel.eta ? formatDate(new Date(vessel.eta), { year: 'numeric', month: 'short', day: 'numeric' }) : t('not_available', 'Not available');
                
                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(String(vesselName))}</div>
                                <div class="text-gray-400 text-xs mt-1">${escapeHtml(String(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>${escapeHtml(String(portName))}</span>
                            <span><i class="fas fa-clock mr-1"></i>${escapeHtml(String(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 t = window.tl_t ? ((key, fallback) => {
                const result = window.tl_t(key, {}, fallback);
                return (typeof result === 'string' && result.startsWith('[[MISSING:')) ? fallback : result;
            }) : ((_, fallback) => fallback || '');
            const isArabic = (window.TL_LOCALE || '').toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
            
            if (!ports || ports.length === 0) {
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-anchor"></i> ${escapeHtml(String(t('common.no_data_available', 'No data available')))}</div>`;
                return;
            }
            
            let html = '';
            ports.forEach(port => {
                const portName = port.port_name || port.port_code || t('common.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';
                let statusText = '';
                if (status === 'busy' || congestionScore > 70) {
                    statusColor = 'text-warning';
                    statusBg = 'bg-warning';
                    statusText = t('shipping.port_busy', 'مزدحم');
                } else if (status === 'smooth' || congestionScore < 30) {
                    statusColor = 'text-success';
                    statusBg = 'bg-success';
                    statusText = t('shipping.port_smooth', 'سلس');
                } else if (status === 'normal') {
                    statusColor = 'text-info';
                    statusBg = 'bg-info';
                    statusText = t('shipping.port_normal', 'عادي');
                } else {
                    statusText = t('common.unknown', 'Unknown');
                }
                
                const hoursWaitText = t('shipping.hours_wait', isArabic ? 'ساعة انتظار' : 'hours wait');
                const vesselsWaitingText = t('shipping.vessels_waiting', isArabic ? 'سفن تنتظر' : 'vessels waiting');
                
                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">${escapeHtml(String(portName))}</div>
                            <div class="flex items-center gap-2">
                                <span class="${statusColor} font-bold text-xs">${escapeHtml(String(statusText))}</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>${escapeHtml(String(isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(waitHours.toFixed(1)) : waitHours.toFixed(1)))} ${escapeHtml(String(hoursWaitText))}</span>
                            <span><i class="fas fa-ship me-1"></i>${escapeHtml(String(isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(vesselsWaiting) : vesselsWaiting))} ${escapeHtml(String(vesselsWaitingText))}</span>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        // دالة عرض أسعار الشحن (Block 3)
        function renderRates(rates) {
            const container = document.getElementById('shippingRates');
            const t = window.tl_t ? ((key, fallback) => {
                const result = window.tl_t(key, {}, fallback);
                return (typeof result === 'string' && result.startsWith('[[MISSING:')) ? fallback : result;
            }) : ((_, fallback) => fallback || '');
            const isArabic = (window.TL_LOCALE || '').toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
            
            if (!rates || rates.length === 0) {
                const noPricesText = t('common.no_prices_available', isArabic ? 'لا توجد أسعار متاحة' : 'No prices available');
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-dollar-sign"></i> ${escapeHtml(String(noPricesText))}</div>`;
                return;
            }
            
            let html = '';
            rates.slice(0, 10).forEach(rate => {
                const carrier = rate.carrier || t('common.unknown', 'Unknown');
                const serviceType = rate.service_type || t('common.unknown', 'Unknown');
                const origin = rate.origin_city || rate.origin_country || t('common.unknown', 'Unknown');
                const dest = rate.destination_city || rate.destination_country || t('common.unknown', 'Unknown');
                const amount = rate.rate_amount
                    ? `${escapeHtml(String(isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(rate.rate_amount.toFixed(2)) : rate.rate_amount.toFixed(2)))} ${escapeHtml(String(rate.currency || 'USD'))}`
                    : escapeHtml(String(t('not_available', 'Not available')));
                const transitDays = rate.transit_days
                    ? `${escapeHtml(String(isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(rate.transit_days) : rate.transit_days))} ${escapeHtml(String(t('common.day', 'Day')))}`
                    : escapeHtml(String(t('not_available', 'Not available')));
                
                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(String(carrier))}</div>
                                <div class="text-gray-400 text-xs mt-1">${escapeHtml(String(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>${escapeHtml(String(origin))} → ${escapeHtml(String(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(window.tl_t('shipping.please_enter_vessel_number', 'Please enter vessel number'));
                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 = window.tl_t('common.loading', 'Loading...');
            const vesselTypeEl = resultDiv.querySelector('#trackedVesselType');
            if (vesselTypeEl) vesselTypeEl.textContent = window.tl_t('common.loading', 'Loading...');
            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 = window.tl_t('not_available', 'Not available');
                }
                
                // الحالة
                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 = window.tl_t('error', 'Error');
                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(window.tl_t('common.please_enter_all_data_correctly', 'Please enter all data correctly'));
                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>');
            }
        }

        // تحميل بيانات المستخدم والاشتراك مرة واحدة عند التحميل
        loadUserAndSubscription();
        
        // تحميل رصيد AI عند تحميل الصفحة (بعد تحميل user & subscription)
        setTimeout(() => {
            loadAIQuota();
        }, 500);
        
        // ===== 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 lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
                const isArabic = lang.startsWith('ar');
                const safeT = (key, fallback) => {
                    const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                    return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
                };
                const errorLoadingText = safeT('common.error_loading_data', isArabic ? 'حدث خطأ أثناء تحميل البيانات' : 'Error loading data');
                const connectionErrorText = safeT('common.connection_error_generic', isArabic ? 'خطأ في الاتصال. يرجى المحاولة مرة أخرى.' : 'Connection error. Please try again.');
                const noDataText = safeT('common.no_data_available', isArabic ? 'لا توجد بيانات متاحة' : 'No data available');
                const labels = {
                    rating: safeT('common.rating', isArabic ? 'التقييم' : 'Rating'),
                    shipments: safeT('common.shipments', isArabic ? 'شحنة' : 'shipments'),
                    months: safeT('common.months', isArabic ? 'شهر' : 'months'),
                    topBuyer: safeT('common.top_buyer', isArabic ? 'أهم عميل' : 'Top Buyer'),
                    bigBuyer: safeT('common.sells_to_big_buyer', isArabic ? 'يبيع لعميل كبير' : 'Sells to Big Buyer'),
                    lowRisk: safeT('common.low_risk', isArabic ? 'مخاطرة منخفضة' : 'Low Risk'),
                    contactInfo: safeT('common.contact_info_available', isArabic ? 'معلومات اتصال متاحة' : 'Contact Info Available'),
                    showShipments: safeT('common.show_shipments', isArabic ? 'أرني الشحنات' : 'Show Shipments')
                };
                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) {
                        logAPIError('Best Suppliers', url, new Error(`HTTP ${response.status}`), response);
                        showErrorToUser('suppliersList', errorLoadingText, true);
                        if (marketsEl) marketsEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-flag"></i> ${escapeHtml(String(noDataText))}</div>`;
                        if (sourcesEl) sourcesEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> ${escapeHtml(String(noDataText))}</div>`;
                        return;
                    } 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', errorLoadingText, true);
                            if (marketsEl) marketsEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-flag"></i> ${escapeHtml(String(noDataText))}</div>`;
                            if (sourcesEl) sourcesEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> ${escapeHtml(String(noDataText))}</div>`;
                            return;
                        } else {
                            const apiData = await response.json();
                            if (apiData.ok) {
                                // الباكند قد يرجع { ok: true, data: [...] } أو { ok: true, suppliers, markets, sources }
                                const rawList = apiData.suppliers ?? (Array.isArray(apiData.data) ? apiData.data : []);
                                data = {
                                    suppliers: rawList,
                                    markets: apiData.markets || [],
                                    sources: apiData.sources || []
                                };
                                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 || errorLoadingText, true);
                                if (marketsEl) marketsEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-flag"></i> ${escapeHtml(String(noDataText))}</div>`;
                                if (sourcesEl) sourcesEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> ${escapeHtml(String(noDataText))}</div>`;
                                return;
                            }
                        }
                    }
                }
                
                suppliersDataCache = data;
                window.suppliersDataCache = suppliersDataCache;
                renderSuppliers(data.suppliers || []);
                renderMarkets(data.markets || []);
                renderSources(data.sources || []);
            } catch (error) {
                logAPIError('Best Suppliers', `${API_BASE}/suppliers/top`, error);
                showErrorToUser('suppliersList', connectionErrorText);
                if (marketsEl) marketsEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-flag"></i> ${escapeHtml(String(noDataText))}</div>`;
                if (sourcesEl) sourcesEl.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> ${escapeHtml(String(noDataText))}</div>`;
            }
        }
        
        // جعل 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 t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar') || document.documentElement.dir === 'rtl';
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const labels = {
                rating: safeT('common.rating', isArabic ? 'التقييم' : 'Rating'),
                shipments: safeT('common.shipments', isArabic ? 'شحنة' : 'shipments'),
                months: safeT('common.months', isArabic ? 'شهر' : 'months'),
                topBuyer: safeT('common.top_buyer', isArabic ? 'أهم عميل' : 'Top Buyer'),
                bigBuyer: safeT('common.sells_to_big_buyer', isArabic ? 'يبيع لعميل كبير' : 'Sells to Big Buyer'),
                lowRisk: safeT('common.low_risk', isArabic ? 'مخاطرة منخفضة' : 'Low Risk'),
                contactInfo: safeT('common.contact_info_available', isArabic ? 'معلومات اتصال متاحة' : 'Contact Info Available'),
                showShipments: safeT('common.show_shipments', isArabic ? 'أرني الشحنات' : 'Show Shipments')
            };
            const num = (v) => (isArabic && typeof toArabicNumerals === 'function') ? toArabicNumerals(v) : v;
            
            if (!suppliers || suppliers.length === 0) {
                const noDataText = safeT('common.no_data_available', isArabic ? 'لا توجد بيانات متاحة' : 'No data available');
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-industry"></i> ${escapeHtml(String(noDataText))}</div>`;
                return;
            }
            
            let html = '';
            suppliers.slice(0, 10).forEach(supplier => {
                const unknownText = safeT('common.unknown', isArabic ? 'غير معروف' : 'Unknown');
                const name = supplier.name || unknownText;
                const country = supplier.country || unknownText;
                const shipments = supplier.shipments_12m || 0;
                const lastShipment = supplier.last_shipment || unknownText;
                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>${escapeHtml(String(labels.lowRisk))}</span>`;
                } else if (riskLevel === 'high') {
                    riskColor = 'text-danger';
                    const highRiskText = safeT('common.high_risk', isArabic ? 'مخاطرة عالية' : 'High Risk');
                    riskBadge = `<span class="text-xs text-danger"><i class="fas fa-exclamation-triangle mr-1"></i>${escapeHtml(String(highRiskText))}</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>${escapeHtml(String(labels.bigBuyer))}</span>`;
                }
                
                // كشف المورد الوهمي (لا شحنات خلال 18 شهر)
                const isFake = shipments === 0 || !lastShipment || lastShipment === unknownText;
                const fakeClass = isFake ? 'opacity-50' : '';
                const numConverter = num;
                
                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">
                                    ${escapeHtml(String(name))}
                                    ${isVerified ? `<i class="fas fa-check-circle text-success text-xs" title="${escapeHtml(String(t('supplier.trusted_supplier', 'Trusted supplier')))}"></i>` : ''}
                                </div>
                                <div class="text-gray-400 text-xs mt-1">${escapeHtml(String(country))}</div>
                            </div>
                            <div class="text-right">
                                <div class="${scoreColor} font-bold text-sm">${escapeHtml(String(numConverter(score.toFixed(1))))}</div>
                                <div class="text-xs text-gray-400">${escapeHtml(String(labels.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>${escapeHtml(String(numConverter(shipments)))} ${escapeHtml(String(labels.shipments))} (${escapeHtml(String(numConverter(12)))} ${escapeHtml(String(labels.months))} )</span>
                            <span><i class="fas fa-calendar mr-1"></i>${escapeHtml(String(lastShipment))}</span>
                        </div>
                        ${topBuyer ? `<div class="text-xs text-gray-400 mb-2"><i class="fas fa-user-tie mr-1"></i>${escapeHtml(String(labels.topBuyer))}: ${escapeHtml(String(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>${escapeHtml(String(labels.contactInfo))}</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>${escapeHtml(String(labels.showShipments))}
                        </button>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض الدول الأهم (Block 2)
        function renderMarkets(markets) {
            const container = document.getElementById('suppliersMarkets');
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            const isArabic = (window.TL_LOCALE || '').toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
            const num = (v) => (isArabic && typeof toArabicNumerals === 'function') ? toArabicNumerals(v) : v;
            
            if (!markets || markets.length === 0) {
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-globe"></i> ${escapeHtml(String(t('common.no_data_available', 'No data available')))}</div>`;
                return;
            }
            
            let html = '';
            markets.forEach((market, index) => {
                const country = market.country || t('common.unknown', 'Unknown');
                const countryName = market.country_name || country;
                const exportVolume = market.export_volume || 0;
                const rank = market.rank || index + 1;
                
                // تنسيق حجم التصدير
                const fmt = (n) => {
                    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
                    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
                    return String(n);
                };
                const volumeFormatted = num(fmt(exportVolume));
                
                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">${escapeHtml(String(num(rank)))}</div>
                                <div>
                                    <div class="text-white font-semibold text-sm">${escapeHtml(String(countryName))}</div>
                                    <div class="text-gray-400 text-xs">${escapeHtml(String(country))}</div>
                                </div>
                            </div>
                            <div class="text-primary font-bold text-sm">$${escapeHtml(String(volumeFormatted))}</div>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض مصادر البيانات (Block 3)
        function renderSources(sources) {
            const container = document.getElementById('suppliersSources');
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            
            if (!sources || sources.length === 0) {
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-database"></i> ${escapeHtml(String(t('no_sources_available', 'No sources available')))}</div>`;
                return;
            }
            
            let html = '';
            sources.forEach(source => {
                // معالجة source إذا كان object
                let sourceName = t('common.unknown', 'Unknown');
                if (typeof source === 'string') {
                    sourceName = source;
                } else if (source && typeof source === 'object') {
                    sourceName = source.name || source.source || source.title || source.label || t('common.unknown', 'Unknown');
                }
                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">${escapeHtml(String(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">${escapeHtml(String(t('supplier.trade_source_label', 'Trade source')))}:</div>
                        <div class="text-white font-semibold text-sm">${escapeHtml(String(t('supplier.trade_source_value', '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(window.tl_t('shipping.no_shipments_available', 'No shipments available'));
                }
            } catch (error) {
                console.error('Error fetching supplier shipments:', error);
                alert(window.tl_t('shipping.error_fetching_shipments', 'Error fetching shipments'));
            }
        }
        
        // ===== 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">Loading...</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');
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');

            // إذا كان هناك query، عرض رسالة توضيحية
            if (query && listEl) {
                const msg = t('common.searching_for', 'Searching for "{q}"...', { q: query });
                listEl.innerHTML = `<div class="text-center py-4 text-primary"><i class="fas fa-search"></i> ${escapeHtml(String(msg))}</div>`;
            } else if (listEl) {
                listEl.innerHTML = EXPLOSIONS_LOADING_HTML;
            }
            if (platformsEl) platformsEl.innerHTML = EXPLOSIONS_LOADING_HTML;
            if (forecastEl) forecastEl.innerHTML = EXPLOSIONS_LOADING_HTML;

            explodingDataCache = null;

            try {
                // محاولة جلب البيانات من Data Scrapers أولاً (من product_offers)
                let scrapedProducts = [];
                try {
                    const scrapedParams = new URLSearchParams();
                    if (country) scrapedParams.append('country_code', country);
                    if (category) scrapedParams.append('category', category);
                    scrapedParams.append('limit', '20');
                    
                    const scrapedResponse = await fetch(`${API_BASE}/data-collection/products?${scrapedParams.toString()}`);
                    if (scrapedResponse.ok) {
                        const scrapedData = await scrapedResponse.json();
                        if (scrapedData.success && scrapedData.products) {
                            scrapedProducts = scrapedData.products.map(p => ({
                                name: p.title,
                                source: p.marketplace,
                                country: p.country_code,
                                category: p.category,
                                price: p.price,
                                currency: p.currency,
                                rating: p.rating,
                                reviews_count: p.reviews_count,
                                url: p.url,
                                image_url: p.image_url,
                                trend_score: p.rating ? (p.rating * 20) : 50,
                                change_rate: 0,
                                signals: {}
                            }));
                        }
                    }
                } catch (scrapedError) {
                    console.warn('Failed to load scraped products, using trends API:', scrapedError);
                }

                // جلب البيانات من API الرئيسي - استخدام source=live لضمان البيانات الحقيقية
                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');
                params.append('source', 'live'); // إجبار استخدام البيانات الحقيقية

                const url = `${API_BASE}/trends/explosions?${params.toString()}`;
                const response = await fetchWithTimeout(url, { cache: 'no-store' }, 8000);
                
                let items = [];
                let data = { items: [], platforms: [], countries: [], forecast: [] };
                
                if (response.ok) {
                    const contentType = response.headers.get('content-type');
                    if (contentType && contentType.includes('application/json')) {
                        data = await response.json();
                        if (data.ok === true) {
                            items = data.items || [];
                        }
                    }
                }

                // دمج البيانات: البيانات المجمعة أولاً، ثم بيانات API
                const allItems = [...scrapedProducts, ...items];
                
                explodingDataCache = {
                    ...data,
                    items: allItems,
                    sources: [...(data.sources || []), ...(scrapedProducts.length > 0 ? ['NOON', 'TEMU', 'SHEIN'] : [])]
                };
                
                window.explodingDataCache = explodingDataCache;
                
                renderExplodingList(allItems.slice(0, 10));
                renderExplodingPlatforms(data.platforms || [], data.countries || []);
                renderExplodingForecast(data.forecast || []);
                renderExplodingMeta(explodingDataCache);
            } catch (error) {
                console.error('Error loading product explosions:', error);
                const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
                const isArabic = lang.startsWith('ar');
                const safeT = (key, fallback) => {
                    const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                    return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
                };
                const errorHtml = `<div class="text-center py-4 text-red-400"><i class="fas fa-exclamation-triangle"></i> ${escapeHtml(String(safeT('common.failed_to_load_data_warning', isArabic ? '⚠️ تعذر تحميل البيانات' : '⚠️ Failed to load data')))}</div>`;
                if (listEl) listEl.innerHTML = errorHtml;
                if (platformsEl) platformsEl.innerHTML = errorHtml;
                if (forecastEl) forecastEl.innerHTML = errorHtml;
                renderExplodingMeta({ mock: false, 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;
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const unknownText = safeT('common.unknown', isArabic ? 'غير معروف' : 'Unknown');
            const trustedText = safeT('common.trusted', isArabic ? 'موثوق' : 'Trusted');
            const monitoredText = safeT('common.under_monitoring', isArabic ? 'تحت المراقبة' : 'Under Monitoring');
            const growthText = safeT('common.growth', isArabic ? 'النمو' : 'Growth');
            const confidenceText = safeT('common.confidence', isArabic ? 'الثقة' : 'Confidence');
            const openAnalysisText = safeT('btn_open_analysis', isArabic ? 'افتح التحليل' : 'Open Analysis');
            const noProductsText = safeT('no_products_available', isArabic ? 'لا توجد منتجات متاحة' : 'No products available');
            const noProductsForText = safeT('common.no_products_found_for', isArabic ? 'لا توجد منتجات لـ "{q}"' : 'No products found for "{q}"');
            const tryOtherText = safeT('common.try_other_keywords', isArabic ? 'جرّب كلمات أخرى أو تصفّح كل المنتجات المنفجرة.' : 'Try other keywords or browse all exploding products.');

            if (!products || products.length === 0) {
                // التحقق من وجود query في URL للبحث
                const urlParams = new URLSearchParams(window.location.search);
                const searchQuery = urlParams.get('search');
                if (searchQuery) {
                    const title = noProductsForText.replace('{q}', searchQuery);
                    const hint = tryOtherText;
                    container.innerHTML = `<div class="text-center py-4">
                        <i class="fas fa-search text-gray-400 text-2xl mb-2"></i>
                        <p class="text-gray-400 mb-2">${escapeHtml(String(title))}</p>
                        <p class="text-xs text-gray-500">${escapeHtml(String(hint))}</p>
                    </div>`;
                } else {
                    container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-rocket"></i> ${escapeHtml(String(noProductsText))}</div>`;
                }
                return;
            }

            let html = '';
            products.forEach(product => {
                const rawName = product.name || String(unknownText);
                // ترجمة اسم المنتج للعربية فقط (لتفادي خلط عربي داخل لغات أخرى)
                const translateProductFn = window.translateProductName;
                const isArabic = (window.TL_LOCALE || '').toLowerCase().startsWith('ar') || document.documentElement.dir === 'rtl';
                const name = (isArabic && translateProductFn && typeof translateProductFn === 'function')
                    ? translateProductFn(rawName)
                    : 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);

                const undefinedText = unknownText;
                
                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">${escapeHtml(String(growthText))}</div>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <div>${escapeHtml(String(confidenceText))}: ${confidencePercent}% ${badge}</div>
                            <a href="/trendlens/product-analysis.html?name=${encodedName}" class="text-primary hover:text-yellow-400 underline">${escapeHtml(String(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;
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const noDataText = safeT('common.no_data_available', isArabic ? 'لا توجد بيانات متاحة' : 'No data available');
            const topPlatformsText = safeT('explosions.top_platforms', isArabic ? 'أكثر المنصات سخونة' : 'Top platforms');
            const topCountriesText = safeT('explosions.top_countries', isArabic ? 'الدول الأكثر سخونة' : 'Top countries');

            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> ${escapeHtml(String(noDataText))}</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>${escapeHtml(String(topPlatformsText))}</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>${escapeHtml(String(topCountriesText))}</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;
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const noForecastsText = safeT('common.no_forecasts_available', isArabic ? 'لا توجد توقعات متاحة' : 'No forecasts available');
            const dayLabel = safeT('common.day', isArabic ? 'يوم' : 'Day');
            const unknownText = safeT('common.unknown', isArabic ? 'غير معروف' : 'Unknown');

            if (!forecast || forecast.length === 0) {
                container.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-calendar-alt"></i> ${escapeHtml(String(noForecastsText))}</div>`;
                return;
            }

            const html = forecast.slice(0, 6).map(item => {
                const lifespan = item.lifespan_days || 7;
                const lifespanStr = isArabic && typeof toArabicNumerals === 'function' ? toArabicNumerals(lifespan) : String(lifespan);
                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 || String(unknownText))}</div>
                            <div class="${colorClass} font-bold text-sm">${escapeHtml(lifespanStr)} ${escapeHtml(String(dayLabel))}</div>
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="fas fa-lightbulb mr-1"></i>${escapeHtml(item.reason || String(unknownText))}
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = html;
        }

        function renderExplodingMeta(data) {
            const container = document.getElementById('explodingMeta');
            if (!container) return;
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const sourcesLabel = safeT('common.sources', isArabic ? 'المصادر' : 'Sources');
            const sourcesNotSpecified = safeT('common.not_specified', isArabic ? 'غير محدد' : 'Not specified');
            const liveLabel = safeT('common.live_data', isArabic ? 'بيانات حية' : 'Live Data');
            const mockLabelText = safeT('common.mock_data', isArabic ? 'بيانات تجريبية (Mock)' : 'Mock Data');
            const cachedLabel = safeT('common.cached', isArabic ? 'مخزّن مؤقتًا' : 'Cached');
            const mockLabel = data?.mock ? mockLabelText : liveLabel;
            const cacheLabel = data?.cache_hit ? ` — ${cachedLabel}` : '';
            const generatedAt = data?.generated_at ? formatDate(data.generated_at) : '—';
            const lastUpdatedLine = safeT('common.last_updated', isArabic ? 'آخر تحديث: {when}' : 'Last updated: {when}')
                .replace('{when}', generatedAt);
            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>${escapeHtml(String(sourcesLabel))}: ${sources}</div>
                    <div><i class="fas fa-info-circle me-1"></i>${escapeHtml(String(mockLabel))}${escapeHtml(String(cacheLabel))}</div>
                    <div><i class="fas fa-clock me-1"></i>${escapeHtml(String(lastUpdatedLine))}</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;

            // استخدام locale من نظام i18n الحالي
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            const lang = currentLocale.split('-')[0] || '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> ${window.tl_t('no_models_available', 'No models detected')}</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;

            // استخدام locale من نظام i18n الحالي
            const currentLocale = window.TL_LOCALE || window.__UICFG?.ui?.locale || 'en';
            const lang = currentLocale.split('-')[0] || '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 defaultInsightText = 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.';
            const defaultDisclaimer = isArabic
                ? 'هذه الرؤى مبنية على تحليل البيانات المتاحة وقد تتغير حسب ظروف السوق. لا تعتبر نصيحة استثمارية.'
                : 'These insights are based on analysis of available data and may change according to market conditions. Not considered investment advice.';
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            
            const insightTexts = {
                market: {
                    short: safeT('ai_insight_text_content', defaultInsightText),
                    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: safeT('ai_insights_disclaimer_text', defaultDisclaimer),
                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');
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const errorLoadingText = safeT('common.error_loading_data', isArabic ? 'حدث خطأ أثناء تحميل البيانات' : 'Error loading data');
            const connectionErrorText = safeT('common.connection_error_generic', isArabic ? 'خطأ في الاتصال. يرجى المحاولة مرة أخرى.' : 'Connection error. Please try again.');

            // عرض حالة التحميل
            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.TL_LOCALE || document.documentElement.lang || 'en-US';
                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', errorLoadingText, true);
                        } else if (response.status === 404) {
                            logAPIError('AI Insights', url, new Error('Endpoint not found (404)'), response);
                            showErrorToUser('aiInsightText', errorLoadingText, true);
                        } else {
                            logAPIError('AI Insights', url, new Error(`HTTP ${response.status}`), response);
                            showErrorToUser('aiInsightText', errorLoadingText, true);
                        }
                        return;
                    } 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', errorLoadingText, true);
                            return;
                        } 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 || errorLoadingText, true);
                                return;
                            } 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) {
                logAPIError('AI Insights', `${API_BASE}/ai/insights`, error);
                showErrorToUser('aiInsightText', connectionErrorText);
            }
        }
        
        // جعل 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> ${window.tl_t('no_insights_available', 'No insights available')}</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;
            const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');

            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> ${window.tl_t('no_indicators_available', 'No indicators available')}</div>`;
                return;
            }

            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const labels = {
                momentum: safeT('common.momentum_strength', isArabic ? 'قوة الحركة' : 'Momentum Strength'),
                volatility: safeT('common.volatility', isArabic ? 'التقلبات' : 'Volatility'),
                socialHeat: safeT('common.social_heat', isArabic ? 'حرارة السوشيال' : 'Social Heat'),
                sentiment: safeT('common.market_sentiment', isArabic ? 'مشاعر السوق' : 'Market Sentiment')
            };

            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">${escapeHtml(String(labels.momentum))}</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">${escapeHtml(String(labels.sentiment))}</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">${escapeHtml(String(labels.volatility))}</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">${escapeHtml(String(labels.socialHeat))}</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 t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
            const lang = (window.currentLang || document.documentElement.lang || 'en').toLowerCase();
            const isArabic = lang.startsWith('ar');
            const safeT = (key, fallback) => {
                const v = window.tl_t ? window.tl_t(key, fallback) : fallback;
                return (typeof v === 'string' && v.startsWith('[[MISSING:')) ? fallback : v;
            };
            const mockData = safeT('common.mock_data', isArabic ? 'بيانات تجريبية (Mock)' : 'Mock Data');
            const noDisclaimer = safeT('common.no_disclaimer_available', isArabic ? 'لا يوجد تنبيه متاح' : '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> ${escapeHtml(String(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>${escapeHtml(String(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) return; // عناصر HTML فقط

                            // تجاهل العناصر التي تحمل data-no-convert
                            if (node.closest && node.closest('[data-no-convert]')) return;
                            if (node.getAttribute && node.getAttribute('data-no-convert')) return;

                            // تحويل الأرقام في text nodes الداخلية عبر TreeWalker
                            const walker = document.createTreeWalker(
                                node,
                                NodeFilter.SHOW_TEXT,
                                {
                                    acceptNode: function(tn) {
                                        // تجاهل script/style وعناصر data-no-convert
                                        const p = tn.parentElement;
                                        if (!p) return NodeFilter.FILTER_REJECT;
                                        if (p.closest('script, style, [data-no-convert]')) return NodeFilter.FILTER_REJECT;
                                        return NodeFilter.FILTER_ACCEPT;
                                    }
                                },
                                false
                            );

                            let textNode;
                            while ((textNode = walker.nextNode())) {
                                if (textNode.textContent) {
                                    const conv = toLatinDigits(textNode.textContent);
                                    if (conv !== textNode.textContent) {
                                        textNode.textContent = conv;
                                    }
                                }
                            }

                            // تحويل placeholder
                            if (node.placeholder) {
                                const conv = toLatinDigits(node.placeholder);
                                if (conv !== node.placeholder) node.placeholder = conv;
                            }

                            // lang="en" على حقول الرقم
                            if (node.tagName === 'INPUT' && node.type === 'number') {
                                node.setAttribute('lang', 'en');
                            }
                        });
                    }
                    
                    // معالجة التغييرات في textContent — فقط لـ text nodes (characterData)
                    // لا نلمس childList لأن target هو العنصر الأب وليس النص
                    if (mutation.type === 'characterData') {
                        const tn = mutation.target;
                        if (tn && tn.nodeType === Node.TEXT_NODE && tn.textContent) {
                            const converted = toLatinDigits(tn.textContent);
                            if (converted !== tn.textContent &&
                                tn.parentElement &&
                                !tn.parentElement.closest('script, style, [data-no-convert]')) {
                                tn.textContent = converted;
                            }
                        }
                    }
                });
            });
            
            // بدء المراقبة — نستثني حاويات الكروت لتجنب التعارض
            observer.observe(document.body, {
                childList: true,
                subtree: true,
                characterData: true
            });

            // إيقاف المراقبة على العناصر ذات data-no-convert لمنع التعارض
            // (حاوية Trending Cards تضع هذه السمة على نفسها)
            const _skipObserverFor = ['exploding-products-grid', 'videoSignalsBody',
                                      'tiktokSignalsBody', 'tiktokEarlyBody',
                                      'collectedProductsGrid', 'homeExplosionsGrid'];
            _skipObserverFor.forEach(function(id) {
                const el = document.getElementById(id);
                if (el) el.setAttribute('data-no-convert', '1');
            });
        }
        
        // ===== 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 ids = ['registerCountryCode', 'partnerCountryCode'];
            ids.forEach((id) => {
                const select = document.getElementById(id);
                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();
                // تهيئة Google Sign-In تلقائياً عند فتح الـ modal
                setTimeout(() => {
                    initializeGoogleSignIn().catch(err => {
                        console.warn('[GOOGLE AUTH] Failed to initialize:', err);
                        // لا نخفي الزر إذا فشل التهيئة، نتركه ظاهراً
                    });
                }, 500);
                // تطبيق الترجمات على النافذة
                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 = getAuthToken(); // Single Source of Truth
            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';
                        console.log('[GOOGLE AUTH] Hiding buttons due to error status');
                    }
                } else {
                    // التحقق من أن الاستجابة JSON وليست HTML
                    if (!contentType || !contentType.includes('application/json')) {
                        console.warn('[GOOGLE AUTH] Returned non-JSON:', contentType, 'URL:', `${API_BASE}/auth/google`);
                        // إخفاء الأزرار إذا كانت الاستجابة غير JSON
                        if (googleLoginBtn) googleLoginBtn.style.display = 'none';
                        if (googleRegisterBtn) googleRegisterBtn.style.display = 'none';
                    } else {
                        const googleData = await googleResponse.json();
                        const hasValidClientId = googleData.client_id && 
                                               googleData.client_id !== 'YOUR_GOOGLE_CLIENT_ID' &&
                                               googleData.client_id !== 'xxx.apps.googleusercontent.com' &&
                                               googleData.client_id.trim() !== '';
                        const googleAvailable = googleData.status === 'ready' && hasValidClientId;
                        
                        console.log('[GOOGLE AUTH] Check result:', { 
                            status: googleData.status, 
                            client_id: googleData.client_id ? 'set' : 'not set',
                            hasValidClientId: hasValidClientId,
                            available: googleAvailable 
                        });
                        
                        // إخفاء الأزرار إذا كان client_id غير مضبوط أو status غير ready
                        if (!googleAvailable) {
                            if (googleLoginBtn) googleLoginBtn.style.display = 'none';
                            if (googleRegisterBtn) googleRegisterBtn.style.display = 'none';
                            console.log('[GOOGLE AUTH] Hiding buttons - Google OAuth not configured');
                        } else {
                            // إظهار الأزرار فقط إذا كان كل شيء مضبوط بشكل صحيح
                            if (googleLoginBtn) googleLoginBtn.style.display = 'flex';
                            if (googleRegisterBtn) googleRegisterBtn.style.display = 'flex';
                            console.log('[GOOGLE AUTH] Showing buttons - Google OAuth ready');
                        }
                    }
                }
            } catch (e) {
                console.warn('[GOOGLE AUTH] Check failed:', e);
                // إخفاء الأزرار في حالة الخطأ
                if (googleLoginBtn) googleLoginBtn.style.display = 'none';
                if (googleRegisterBtn) googleRegisterBtn.style.display = 'none';
                console.log('[GOOGLE AUTH] Hiding buttons due to exception');
            }
            
            // 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');
                // تحميل أكواد الدول لرقم هاتف الشريك
                if (typeof loadCountryCodes === 'function') loadCountryCodes();
            }
        }

        // إغلاق نافذة تسجيل الشريك
        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 phoneLocal = document.getElementById('partnerPhone').value.trim();
            const phoneCodeEl = document.getElementById('partnerCountryCode');
            const phoneCode = phoneCodeEl ? phoneCodeEl.value : '';
            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 || !phoneLocal || !businessType || !password) {
                errorDiv.textContent = 'يرجى ملء جميع الحقول المطلوبة';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            if (!agreeTerms) {
                errorDiv.textContent = 'يجب الموافقة على الشروط والأحكام';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            const digitsOnly = (s) => String(s || '').replace(/[^\d]/g, '');
            let localDigits = digitsOnly(phoneLocal);
            if (localDigits.startsWith('0')) localDigits = localDigits.replace(/^0+/, '');
            const phone = `${phoneCode}${localDigits}`;

            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);
                            setAuthToken(data.token); // Single Source of Truth
                            localStorage.setItem('user_email', email);
                        }
                        
                        successDiv.textContent = window.tl_t('partner.registration_success_activated', 'Partner registered successfully and account activated! Redirecting to dashboard...');
                        successDiv.classList.remove('hidden');
                        
                        // التوجيه إلى لوحة التحكم بعد ثانيتين
                        setTimeout(() => {
                            window.location.href = '/trendlens/partner-dashboard.html';
                        }, 2000);
                    } else if (data.status === 'pending') {
                        // حالة انتظار الموافقة
                        successDiv.textContent = window.tl_t('partner.registration_submitted', 'Registration request submitted successfully. The request will be reviewed and approved soon. An email will be sent upon approval.');
                        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 = window.tl_t('common.connection_error_retry', 'Connection error occurred. Please try again');
                errorDiv.classList.remove('hidden');
            }
        }

        // معالجة تسجيل الدخول عبر Google - مع موافقة على الأحكام والشروط
        async 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(async () => {
                    console.log('[GOOGLE AUTH] Terms accepted, initializing Google Sign-In...');
                    await initializeGoogleSignIn();
                });
                return;
            }
            
            // استخدام id_token flow بدلاً من redirect
            await initializeGoogleSignIn();
        }
        
        // دالة مساعدة لتهيئة Google Sign-In باستخدام id_token flow
        async function initializeGoogleSignIn() {
            try {
                console.log('[GOOGLE AUTH] 🔄 Getting Google Client ID...');
                // 1. الحصول على Client ID من endpoint الجديد
                const configResponse = await fetch(`${API_BASE}/auth/google/client-id`);
                if (!configResponse.ok) {
                    console.warn('[GOOGLE AUTH] ⚠️ Failed to get Google Client ID (status:', configResponse.status, ')');
                    // لا نخفي الزر، نتركه ظاهراً للمستخدم
                    return;
                }
                const configData = await configResponse.json();
                
                if (!configData.client_id || 
                    configData.client_id === 'YOUR_GOOGLE_CLIENT_ID' ||
                    configData.client_id === 'xxx.apps.googleusercontent.com' ||
                    configData.client_id.trim() === '') {
                    console.warn('[GOOGLE AUTH] ⚠️ Google Client ID not configured or invalid');
                    // لا نخفي الزر، نتركه ظاهراً للمستخدم
                    return;
                }
                
                const clientId = configData.client_id;
                console.log('[GOOGLE AUTH] ✅ Client ID received:', clientId.substring(0, 30) + '...');
                
                // 2. تهيئة Google SDK مع callback
                const handleCredentialResponse = async (response) => {
                    try {
                        console.log('[GOOGLE AUTH] ✅ Google Sign-In successful, processing id_token...');
                        // 3. استقبال id_token
                        const idToken = response.credential;
                        
                        // 4. إرسال إلى API
                        const apiResponse = await fetch(`${API_BASE}/auth/google`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ id_token: idToken })
                        });
                        
                        const data = await apiResponse.json();
                        
                        // 5. التحقق من النتيجة
                        if (apiResponse.ok && data.status === 'success' && data.token) {
                            console.log('[GOOGLE AUTH] ✅ Login successful, saving token...');
                            
                            // ✅ Customer token (single source of truth)
                            setAuthToken(data.token);
                            
                            // ✅ optional: store email if you want
                            if (data.email) localStorage.setItem('user_email', data.email);
                            if (data.name) localStorage.setItem('user_name', data.name);
                            
                            // 7. التحقق من حفظ token قبل المتابعة
                            const savedToken = getAuthToken();
                            if (!savedToken) {
                                console.error('[GOOGLE AUTH] ❌ Token not saved properly!');
                                throw new Error('فشل حفظ token. يرجى المحاولة مرة أخرى.');
                            }
                            console.log('[GOOGLE AUTH] ✅ Token verified in storage:', savedToken.substring(0, 20) + '...');
                            
                            // 8. إغلاق Modal
                            if (typeof closeAuthModal === 'function') {
                                closeAuthModal();
                            }
                            
                            // ✅ لا ننقل المستخدم تلقائياً للداشبورد بعد التسجيل/الدخول من Google
                            // نبقى في الرئيسية دائماً بعد تسجيل الدخول (لا توجيه تلقائي)
                            setTimeout(() => {
                                const params = new URLSearchParams(window.location.search);
                                
                                // تنظيف باراميترات auth و next من الرابط حتى لا تتكرر العملية عند الريفريش
                                if (params.has('auth')) params.delete('auth');
                                if (params.has('next')) params.delete('next');
                                if (params.has('next_hash')) params.delete('next_hash');
                                const cleanUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : '') + window.location.hash;
                                try { window.history.replaceState({}, '', cleanUrl); } catch (e) {}
                                
                                // تحديث واجهة المستخدم والبقاء في الصفحة الرئيسية
                                try { updateAuthUI(true); } catch (e) {}
                                
                                // ✅ لا توجيه تلقائي - المستخدم يبقى في الصفحة الرئيسية
                                console.log('[GOOGLE AUTH] ✅ Login successful, staying on homepage (no auto-redirect)');
                            }, 100);
                            return;
                        } else {
                            const errorMsg = data.detail || data.message || 'Login failed';
                            console.error('[GOOGLE AUTH] ❌ Login failed:', errorMsg);
                            
                            // إذا كان الخطأ invalid_client، نعرض رسالة واضحة
                            if (errorMsg.includes('invalid_client') || errorMsg.includes('401')) {
                                console.warn('[GOOGLE AUTH] ⚠️ invalid_client detected');
                                alert('Google OAuth غير متاح حالياً. يرجى استخدام تسجيل الدخول بالبريد الإلكتروني.');
                            } else {
                                alert('فشل تسجيل الدخول: ' + errorMsg);
                            }
                            throw new Error(errorMsg);
                        }
                    } catch (error) {
                        console.error('[GOOGLE AUTH] ❌ Login error:', error);
                        
                        // عرض رسالة خطأ واضحة
                        if (error.message && (error.message.includes('invalid_client') || error.message.includes('401'))) {
                            console.warn('[GOOGLE AUTH] ⚠️ invalid_client detected in catch');
                            alert('Google OAuth غير متاح حالياً. يرجى استخدام تسجيل الدخول بالبريد الإلكتروني.');
                        } else {
                            alert('فشل تسجيل الدخول: ' + (error.message || 'خطأ غير معروف'));
                        }
                    }
                };
                
                // تهيئة Google Sign-In
                google.accounts.id.initialize({
                    client_id: clientId,
                    callback: handleCredentialResponse
                });
                
                // 9. استخدام renderButton على الزر الموجود (أكثر موثوقية من prompt)
                console.log('[GOOGLE AUTH] 🔄 Rendering Google Sign-In button...');
                const googleBtn = document.getElementById('googleLoginBtn');
                const googleRegisterBtn = document.getElementById('googleRegisterBtn');
                
                if (googleBtn && typeof google.accounts.id.renderButton === 'function') {
                    // مسح محتوى الزر أولاً
                    googleBtn.innerHTML = '';
                    google.accounts.id.renderButton(googleBtn, {
                        theme: 'outline',
                        size: 'large',
                        width: '100%',
                        text: 'signin_with',
                        locale: 'ar'
                    });
                    console.log('[GOOGLE AUTH] ✅ Google Sign-In button rendered');
                }
                
                // أيضاً render للزر في صفحة التسجيل
                if (googleRegisterBtn && typeof google.accounts.id.renderButton === 'function') {
                    googleRegisterBtn.innerHTML = '';
                    google.accounts.id.renderButton(googleRegisterBtn, {
                        theme: 'outline',
                        size: 'large',
                        width: '100%',
                        text: 'signup_with',
                        locale: 'ar'
                    });
                    console.log('[GOOGLE AUTH] ✅ Google Register button rendered');
                }
                
                if ((!googleBtn && !googleRegisterBtn) || typeof google.accounts.id.renderButton !== 'function') {
                    console.warn('[GOOGLE AUTH] Button element not found or renderButton not available');
                    // Fallback: محاولة One Tap (بدون FedCM)
                    try {
                        google.accounts.id.prompt((notification) => {
                            console.log('[GOOGLE AUTH] One Tap notification:', notification);
                        });
                    } catch (e) {
                        console.error('[GOOGLE AUTH] Failed to show One Tap:', e);
                    }
                }
            } catch (error) {
                console.error('[GOOGLE AUTH] ❌ Initialization error:', error);
                // لا نخفي الزر عند الخطأ، نتركه ظاهراً
                // المستخدم يمكنه المحاولة مرة أخرى أو استخدام login داخلي
                console.warn('[GOOGLE AUTH] ⚠️ Google OAuth initialization failed, but button remains visible');
            }
        }
        
        // تعطيل Google OAuth وإخفاء الأزرار
        function disableGoogleAuth() {
            const googleLoginBtn = document.getElementById('googleLoginBtn');
            const googleRegisterBtn = document.getElementById('googleRegisterBtn');
            const socialLoginDivider = document.getElementById('socialLoginDivider');
            const socialRegisterDivider = document.getElementById('socialRegisterDivider');
            
            if (googleLoginBtn) {
                googleLoginBtn.style.display = 'none';
                googleLoginBtn.onclick = null; // إزالة الـ handler
            }
            if (googleRegisterBtn) {
                googleRegisterBtn.style.display = 'none';
                googleRegisterBtn.onclick = null;
            }
            
            // إخفاء الفواصل إذا لم تكن هناك أزرار social
            if (socialLoginDivider) {
                const hasSocialButtons = Array.from(document.querySelectorAll('#socialLoginButtons button')).some(btn => btn.style.display !== 'none');
                if (!hasSocialButtons) {
                    socialLoginDivider.style.display = 'none';
                }
            }
            if (socialRegisterDivider) {
                const hasSocialButtons = Array.from(document.querySelectorAll('#socialRegisterButtons button')).some(btn => btn.style.display !== 'none');
                if (!hasSocialButtons) {
                    socialRegisterDivider.style.display = 'none';
                }
            }
            
            console.log('[GOOGLE AUTH] ✅ Google OAuth disabled, using email/password login only');
        }

        // معالجة تسجيل الدخول عبر 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) {
                                        setAuthToken(data.token); // Single Source of Truth
                                        localStorage.setItem('user_email', data.email || '');
                                    }
                                    
                                    closeAuthModal();
                                    updateAuthUI(true);
                                    
                                    const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                                    const shortLang = getShortLangCode(lang);
                                    const msg = shortLang === 'ar' ? 'تم تسجيل الدخول بنجاح!' :
                                        shortLang === 'es' ? '¡Inicio de sesión exitoso!' :
                                        shortLang === 'pt' ? 'Login bem-sucedido!' :
                                        shortLang === 'tr' ? 'Giriş başarılı!' :
                                        shortLang === 'hi' ? 'लॉगिन सफल!' :
                                        '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 || window.TL_LOCALE || 'ar';
                                const shortLang = getShortLangCode(lang);
                                const msg = shortLang === 'ar' ? 'خطأ في التحقق من حساب Apple. يرجى المحاولة مرة أخرى.' :
                                    shortLang === 'es' ? 'Error al verificar la cuenta de Apple. Por favor, inténtelo de nuevo.' :
                                    shortLang === 'pt' ? 'Erro ao verificar a conta da Apple. Por favor, tente novamente.' :
                                    shortLang === 'tr' ? 'Apple hesabı doğrulanırken hata oluştu. Lütfen tekrar deneyin.' :
                                    shortLang === 'hi' ? 'Apple खाता सत्यापित करने में त्रुटि। कृपया पुनः प्रयास करें।' :
                                    'Error verifying Apple account. Please try again.';
                                alert(msg);
                            }
                        }
                    }).catch((error) => {
                        console.error('Apple Sign In error:', error);
                        const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                        const shortLang = getShortLangCode(lang);
                        const msg = shortLang === 'ar' ? 'تم إلغاء تسجيل الدخول عبر Apple أو فشل.' :
                            shortLang === 'es' ? 'El inicio de sesión con Apple fue cancelado o falló.' :
                            shortLang === 'pt' ? 'O login com Apple foi cancelado ou falhou.' :
                            shortLang === 'tr' ? 'Apple ile giriş iptal edildi veya başarısız oldu.' :
                            shortLang === 'hi' ? 'Apple साइन इन रद्द या विफल हो गया।' :
                            'Apple Sign In was cancelled or failed.';
                        alert(msg);
                    });
                } else {
                    // Fallback: رسالة توضح أن Apple Sign In غير متاح
                    const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                    const shortLang = getShortLangCode(lang);
                    const msg = shortLang === 'ar' ? 'تسجيل الدخول عبر Apple غير متاح حالياً. يرجى استخدام التسجيل بالبريد الإلكتروني.' :
                        shortLang === 'es' ? 'El inicio de sesión con Apple no está disponible. Por favor, use el registro por correo electrónico.' :
                        shortLang === 'pt' ? 'O login com Apple não está disponível. Por favor, use o registro por e-mail.' :
                        shortLang === 'tr' ? 'Apple ile giriş mevcut değil. Lütfen e-posta kaydı kullanın.' :
                        shortLang === 'hi' ? 'Apple साइन इन उपलब्ध नहीं है। कृपया ईमेल पंजीकरण का उपयोग करें।' :
                        'Apple Sign In is not available. Please use email registration.';
                    alert(msg);
                }
            } catch (error) {
                console.error('Apple login error:', error);
                const lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || 'ar';
                const shortLang = getShortLangCode(lang);
                const msg = shortLang === 'ar' ? 'حدث خطأ أثناء الاتصال بخدمة Apple. يرجى المحاولة لاحقاً.' :
                    shortLang === 'es' ? 'Ocurrió un error al conectarse al servicio de Apple. Por favor, inténtelo más tarde.' :
                    shortLang === 'pt' ? 'Ocorreu um erro ao conectar ao serviço da Apple. Por favor, tente novamente mais tarde.' :
                    shortLang === 'tr' ? 'Apple hizmetine bağlanırken bir hata oluştu. Lütfen daha sonra tekrar deneyin.' :
                    shortLang === 'hi' ? 'Apple सेवा से कनेक्ट करते समय एक त्रुटि हुई। कृपया बाद में पुनः प्रयास करें।' :
                    'An error occurred while connecting to Apple service. Please try again later.';
                alert(msg);
            }
        }

        // معالجة التسجيل عبر Google
        async function handleGoogleRegister() {
            // نفس دالة تسجيل الدخول (Google يعالج التسجيل والدخول بنفس الطريقة)
            await handleGoogleLogin();
        }

        // معالجة تسجيل الدخول عبر TikTok
        async function handleTikTokLogin() {
            console.log('[TIKTOK AUTH] handleTikTokLogin called');
            console.log('[TIKTOK AUTH] API_BASE:', API_BASE);
            
            // التحقق من موافقة المستخدم على الأحكام والشروط
            const termsAccepted = localStorage.getItem('terms_accepted');
            console.log('[TIKTOK AUTH] Terms accepted:', termsAccepted);
            
            if (!termsAccepted) {
                console.log('[TIKTOK AUTH] Terms not accepted, showing terms modal...');
                showTermsModal(async () => {
                    console.log('[TIKTOK AUTH] Terms accepted, starting TikTok OAuth...');
                    await startTikTokOAuth();
                });
                return;
            }
            
            await startTikTokOAuth();
        }

        // معالجة التسجيل عبر TikTok
        async function handleTikTokRegister() {
            // نفس دالة تسجيل الدخول (TikTok يعالج التسجيل والدخول بنفس الطريقة)
            await handleTikTokLogin();
        }

        // بدء عملية TikTok OAuth
        async function startTikTokOAuth() {
            try {
                console.log('[TIKTOK AUTH] 🔄 Starting TikTok OAuth...');
                
                // الحصول على TikTok OAuth URL من الـ API
                const response = await fetch(`${API_BASE}/tiktok/auth/start`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    const errorData = await response.json().catch(() => ({}));
                    console.error('[TIKTOK AUTH] ⚠️ Failed to start TikTok OAuth:', response.status, errorData);
                    
                    if (response.status === 410) {
                        alert('ميزة TikTok غير متاحة حالياً. سيتم تفعيلها قريباً!');
                    } else if (response.status === 500) {
                        const errorMsg = errorData.detail?.message || errorData.message || 'خطأ في إعدادات TikTok OAuth';
                        console.error('[TIKTOK AUTH] ❌ Server error:', errorData);
                        alert(`خطأ في إعدادات TikTok: ${errorMsg}`);
                    } else {
                        const errorMsg = errorData.detail?.message || errorData.message || 'حدث خطأ أثناء الاتصال بخدمة TikTok';
                        console.error('[TIKTOK AUTH] ❌ Error:', errorData);
                        alert(`خطأ: ${errorMsg}`);
                    }
                    return;
                }

                const data = await response.json();
                
                if (data.ok && data.url) {
                    // إعادة التوجيه إلى TikTok OAuth
                    console.log('[TIKTOK AUTH] ✅ Redirecting to TikTok OAuth:', data.url);
                    window.location.href = data.url;
                } else {
                    console.error('[TIKTOK AUTH] ⚠️ No OAuth URL in response:', data);
                    const errorMsg = data.message || 'حدث خطأ أثناء بدء عملية تسجيل الدخول عبر TikTok. يرجى المحاولة لاحقاً.';
                    alert(errorMsg);
                }
            } catch (error) {
                console.error('[TIKTOK AUTH] ❌ Error starting TikTok OAuth:', error);
                alert('حدث خطأ أثناء الاتصال بخدمة TikTok. يرجى المحاولة لاحقاً.');
            }
        }
        
        // عرض نافذة موافقة على الأحكام والشروط
        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 = window.tl_t('auth.please_enter_email_password', 'Please enter email and password');
                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' || data.ok === true)) {
                    // حفظ التوكن باستخدام setAuthToken() (Single Source of Truth)
                    const token = data.token || data.access_token;
                    if (token) {
                        setAuthToken(token);
                        localStorage.setItem('user_email', email);
                        if (data.name) localStorage.setItem('user_name', data.name);
                        console.log('[AUTH] ✅ Token saved to localStorage:', token.substring(0, 20) + '...');
                        
                        // التحقق من حفظ token
                        const savedToken = getAuthToken();
                        if (!savedToken) {
                            console.error('[AUTH] ❌ Token not saved properly!');
                            errorDiv.textContent = 'فشل حفظ token. يرجى المحاولة مرة أخرى.';
                            errorDiv.classList.remove('hidden');
                            return;
                        }
                    } else {
                        console.error('[AUTH] ❌ No token in response:', data);
                        errorDiv.textContent = 'لم يتم استلام token من الخادم. يرجى المحاولة مرة أخرى.';
                        errorDiv.classList.remove('hidden');
                        return;
                    }
                    
                    // إغلاق النافذة
                    if (typeof closeAuthModal === 'function') {
                        closeAuthModal();
                    }
                    
                    // تحديث واجهة المستخدم
                    if (typeof updateAuthUI === 'function') {
                        updateAuthUI(true);
                    }
                    
                    // التحقق من وجود next parameter للانتقال
                    const params = new URLSearchParams(window.location.search);
                    const nextUrl = params.get('next');
                    
                    if (nextUrl) {
                        // توجيه المستخدم إلى الصفحة المطلوبة
                        try {
                            window.location.href = decodeURIComponent(nextUrl);
                        } catch (e) {
                            console.warn('[AUTH] Failed to redirect to next URL:', e);
                            window.location.href = '/trendlens/dashboard.html';
                        }
                    } else {
                        // ✅ لا توجيه تلقائي - المستخدم يبقى في الصفحة الرئيسية
                        setTimeout(() => {
                            // تنظيف باراميترات next من الرابط
                            if (params.has('next')) params.delete('next');
                            if (params.has('auth')) params.delete('auth');
                            const cleanUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : '') + window.location.hash;
                            try { window.history.replaceState({}, '', cleanUrl); } catch (e) {}
                            
                            console.log('[AUTH] ✅ Login successful, staying on homepage (no auto-redirect)');
                        }, 100);
                    }
                } else {
                    const errorMsg = data.detail || data.message || 'خطأ في تسجيل الدخول';
                    errorDiv.textContent = errorMsg;
                    errorDiv.classList.remove('hidden');
                    console.error('[AUTH] ❌ Login failed:', errorMsg);
                }
            } 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'
                    },
                    // مهم: حتى يتم إرسال cookies (tl_ref_link / tl_ref_partner) عند التسجيل عبر رابط الشريك
                    credentials: 'include',
                    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 || 'إنشاء حساب';
                }
            }
        }

        // ===== منطق حالة الحساب (زائر / مسجل / مشترك) على الرئيسية =====
        function updateHomeAccountStateBanner(stateInfo) {
            const banner = document.getElementById('homeAccountBanner');
            const titleEl = document.getElementById('homeAccountBannerTitle');
            const subEl = document.getElementById('homeAccountBannerSubtitle');
            if (!banner || !titleEl || !subEl) return;

            const lang = window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar';
            const isAr = lang === 'ar';
            const state = stateInfo.state;

            if (state === 'visitor') {
                // زائر: يجب التسجيل للحصول على بيانات حقيقية
                titleEl.textContent = isAr
                    ? 'أنت في وضع المعاينة التجريبية (Demo)'
                    : 'You are in demo preview mode';
                subEl.textContent = isAr
                    ? 'سجّل دخولك أو أنشئ حساباً جديداً للحصول على بيانات حقيقية من غرفة التحكم.'
                    : 'Sign in or create an account to unlock real data from your control room.';
                banner.classList.remove('bg-emerald-600/20');
                banner.classList.add('bg-amber-500/15');
            } else if (state === 'registered_no_plan') {
                // عميل مسجّل بدون باقة
                titleEl.textContent = isAr
                    ? 'حساب مسجّل بدون باقة نشطة'
                    : 'Registered account without active plan';
                subEl.textContent = isAr
                    ? 'يمكنك تجربة بعض الأدوات ببيانات حقيقية، اختر الباقة الشهرية أو السنوية المناسبة لتفعيل كامل الترندات والذكاء.'
                    : 'You can use limited real-data tools; choose a monthly or yearly plan to unlock full trends and intelligence.';
                banner.classList.remove('bg-emerald-600/20');
                banner.classList.add('bg-sky-500/15');
            } else if (state === 'subscribed') {
                const days = stateInfo.activeDays != null ? stateInfo.activeDays : null;
                const base = isAr
                    ? 'لديك باقة فعّالة حالياً – يتم تحميل بياناتك الحقيقية من غرفة التحكم.'
                    : 'You have an active plan – loading your real control room data.';
                const withDays = days != null
                    ? (isAr ? `لديك باقة فعّالة منذ ${days} يوم.` : `Your plan has been active for ${days} days.`)
                    : base;
                titleEl.textContent = isAr
                    ? 'حساب مشترك – بيانات حقيقية'
                    : 'Subscribed account – real data';
                subEl.textContent = withDays;
                banner.classList.remove('bg-amber-500/15', 'bg-sky-500/15');
                banner.classList.add('bg-emerald-600/20');
            }

            // المشتركون (subscribed) لا نعرض لهم البانر نهائياً
            if (state === 'subscribed') {
                banner.classList.add('hidden');
                return;
            }
            
            // الزوار والمسجلون بدون باقة: نعرض البانر
            banner.classList.remove('hidden');
        }

        function updateHomeAccountStateBannerFromSubscription(sub) {
            const status = (sub.status || '').toLowerCase();
            const plan = (sub.plan || 'free').toLowerCase();

            if (status === 'active' && plan !== 'free') {
                let activeDays = null;
                try {
                    if (sub.started_at) {
                        const start = new Date(sub.started_at);
                        const now = new Date();
                        activeDays = Math.floor((now - start) / (1000 * 60 * 60 * 24));
                    }
                } catch (e) {
                    activeDays = null;
                }
                updateHomeAccountStateBanner({ state: 'subscribed', activeDays });
            } else {
                updateHomeAccountStateBanner({ state: 'registered_no_plan' });
            }
        }

        async function loadHomeSubscriptionState() {
            const token = getAuthToken(); // Single Source of Truth
            if (!token) {
                updateHomeAccountStateBanner({ state: 'visitor' });
                return;
            }
            try {
                // استخدام /auth/me الجديد بدلاً من /user/subscription
                const resp = await fetch(`${API_BASE}/auth/me`, {
                    headers: authHeaders()
                });
                if (resp.ok) {
                    const data = await resp.json();
                    const role = (data.role || '').toLowerCase();
                    const plan = data.plan || {};
                    const planStatus = (plan.status || '').toLowerCase();
                    
                    // Admin + active → لا نعرض البانر
                    if (role === 'admin' && (data.status || '').toLowerCase() === 'active') {
                        const banner = document.getElementById('homeAccountBanner');
                        if (banner) banner.classList.add('hidden');
                        return;
                    }
                    
                    // خطة active/trial → لا نعرض البانر
                    if (planStatus === 'active' || planStatus === 'trial') {
                        const banner = document.getElementById('homeAccountBanner');
                        if (banner) banner.classList.add('hidden');
                        return;
                    }
                    
                    // باقي الحالات: نستخدم البيانات القديمة للتوافق
                    updateHomeAccountStateBannerFromSubscription({
                        plan: plan.code || 'free',
                        status: planStatus || 'inactive',
                        started_at: plan.starts_at || null
                    });
                } else {
                    const fallback = {
                        plan: 'free',
                        status: 'inactive'
                    };
                    updateHomeAccountStateBannerFromSubscription(fallback);
                }
            } catch (e) {
                const fallback = {
                    plan: 'free',
                    status: 'inactive'
                };
                updateHomeAccountStateBannerFromSubscription(fallback);
            }
        }

        // تحديث واجهة المستخدم بعد تسجيل الدخول
        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 partnerDashboardBtn = document.getElementById('partnerDashboardBtn');
            const logoutHeaderBtn = document.getElementById('logoutHeaderBtn');
            const welcomeArea = document.getElementById('welcomeArea');
            const settingsMenuBtn = document.getElementById('settingsMenuBtn');
            
            // التحقق من token باستخدام getAuthToken() (Single Source of Truth)
            let token = getAuthToken();
            console.log('[AUTH UI] Token found:', token ? token.substring(0, 20) + '...' : 'NOT FOUND');
            
            // التحقق من الـ backend دائماً - لا نعتمد على localStorage فقط
            // إذا كان isLoggedIn = false أو لم يكن هناك token، نمسح localStorage
            if (!token || !isLoggedIn) {
                console.log('[AUTH UI] ⚠️ No token or not logged in, clearing auth data');
                removeAuthToken();
                localStorage.removeItem('user_email');
                localStorage.removeItem('user_name');
                token = null;
                isLoggedIn = false;
            }
            
            // التحقق من الـ backend دائماً للتأكد من صحة token
            // استخدام البيانات المحفوظة إذا كانت متوفرة، وإلا نستخدم loadUserAndSubscription (single-flight)
            if (token) {
                console.log('[AUTH UI] Token found, checking cached data...');
                
                // إذا كانت البيانات محملة، نستخدمها مباشرة
                if (userDataLoaded && cachedUserData) {
                    console.log('[AUTH UI] Using cached user data');
                    const verifiedUserData = cachedUserData;
                    const storedEmail = localStorage.getItem('user_email');
                    const userEmail = verifiedUserData.email || verifiedUserData.user?.email;
                    
                    if (userEmail && storedEmail && userEmail !== storedEmail) {
                        console.warn('[AUTH UI] ⚠️ Email mismatch, clearing auth data');
                        removeAuthToken();
                        localStorage.removeItem('user_email');
                        localStorage.removeItem('user_name');
                        isLoggedIn = false;
                        token = null;
                    } else {
                        // تحديث localStorage بالبيانات الصحيحة
                        if (userEmail) {
                            localStorage.setItem('user_email', userEmail);
                        }
                        const userName = verifiedUserData.user?.full_name || verifiedUserData.user?.name || verifiedUserData.name;
                        if (userName) {
                            localStorage.setItem('user_name', userName);
                        }
                        userData = verifiedUserData.user || verifiedUserData;
                        isLoggedIn = true;
                        console.log('[AUTH UI] ✅ Token is valid, user is logged in:', userEmail || userData.id || userData.user_id);
                    }
                } else {
                    // إذا لم تكن البيانات محملة، نستخدم loadUserAndSubscription (single-flight)
                    console.log('[AUTH UI] No cached data, loading via loadUserAndSubscription (single-flight)');
                    try {
                        await loadUserAndSubscription();
                        if (cachedUserData) {
                            const verifiedUserData = cachedUserData;
                            const userEmail = verifiedUserData.email || verifiedUserData.user?.email;
                            userData = verifiedUserData.user || verifiedUserData;
                            isLoggedIn = true;
                            console.log('[AUTH UI] ✅ User data loaded via single-flight');
                        } else {
                            console.warn('[AUTH UI] ⚠️ Failed to load user data');
                            removeAuthToken();
                            localStorage.removeItem('user_email');
                            localStorage.removeItem('user_name');
                            isLoggedIn = false;
                            token = null;
                        }
                    } catch (error) {
                        console.error('[AUTH UI] ❌ Error loading user data:', error);
                        removeAuthToken();
                        localStorage.removeItem('user_email');
                        localStorage.removeItem('user_name');
                        isLoggedIn = false;
                        token = null;
                    }
                }
            }
            
            if (isLoggedIn) {
                console.log('[AUTH UI] User is logged in, updating UI...');
                
                // استخدام البيانات المحفوظة إذا لم تكن userData متوفرة
                if (!userData && cachedUserData) {
                    userData = cachedUserData.user || cachedUserData;
                    console.log('[AUTH UI] Using cached user data for UI update');
                }
                
                // استخدام البيانات من userData فقط (من backend) وليس من localStorage
                if (!userData) {
                    console.warn('[AUTH UI] ⚠️ No userData provided, cannot show user info');
                    isLoggedIn = false;
                    token = null;
                    removeAuthToken();
                    localStorage.removeItem('user_email');
                    localStorage.removeItem('user_name');
                }
                
                // تحديد اسم العرض: full_name أولاً، ثم name، ثم "TikTok user" + آخر 6 أحرف من user_id
                let userName = null;
                if (userData) {
                    if (userData.full_name && userData.full_name.trim()) {
                        userName = userData.full_name.trim();
                    } else if (userData.name && userData.name.trim()) {
                        userName = userData.name.trim();
                    } else if (userData.email && userData.email.includes('@tiktok.temp')) {
                        // إذا كان البريد من TikTok ولم يكن هناك اسم، استخدم "TikTok user" + آخر 6 أحرف من user_id
                        const userId = userData.id || userData.user_id || '';
                        const userIdStr = String(userId);
                        const last6Chars = userIdStr.slice(-6);
                        userName = `TikTok user ${last6Chars}`;
                    } else {
                        userName = userData.email || 'المستخدم';
                    }
                } else {
                    userName = 'المستخدم';
                }
                const userEmail = (userData && userData.email) || '';
                const roleLower = String((userData && userData.role) || '').toLowerCase();
                
                // ✅ الحصول على نص الترحيب مع fallback قوي
                let welcomeText = '';
                const currentLang = (window.__UICFG?.ui?.locale || window.TL_LOCALE || document.documentElement.lang || 'ar').toLowerCase();
                const shortLang = currentLang.startsWith('ar') ? 'ar' : currentLang.startsWith('es') ? 'es' : currentLang.startsWith('pt') ? 'pt' : currentLang.startsWith('tr') ? 'tr' : currentLang.startsWith('hi') ? 'hi' : 'en';
                
                // Fallback مباشر حسب اللغة (يستخدم أولاً كقيمة افتراضية)
                const fallbacks = {
                    'ar': `مرحباً، ${userName}`,
                    'es': `Bienvenido, ${userName}`,
                    'pt': `Bem-vindo, ${userName}`,
                    'tr': `Hoş geldiniz, ${userName}`,
                    'hi': `स्वागत है, ${userName}`,
                    'en': `Welcome, ${userName}`
                };
                const defaultWelcomeText = fallbacks[shortLang] || fallbacks['en'];
                
                // ✅ ترجمة موحّدة وآمنة: لا تسمح بظهور [[MISSING:welcome_user]] أبداً
                welcomeText = tlSafe(
                    'welcome_user',
                    shortLang === 'ar' ? 'مرحباً، {email}' : 'Welcome, {email}',
                    { email: userName }
                );

                // ✅ Fallback نهائي: إذا فشل كل شيء، استخدم النص الافتراضي المباشر
                if (!welcomeText || welcomeText.trim() === '' || welcomeText === 'welcome_user' || /\[\[\s*MISSING:/.test(welcomeText) || /\[\[/.test(welcomeText)) {
                    welcomeText = defaultWelcomeText;
                }
                
                // ✅ التأكد من استبدال أي {email} متبقي (احتياطي إضافي)
                if (welcomeText && /\{\s*email\s*\}/.test(welcomeText)) {
                    welcomeText = String(welcomeText).replace(/\{\s*email\s*\}/g, String(userName || ''));
                }

                // التحقق من نوع الحساب (تجريبي أم مدفوع)
                const isTrialAccount = userEmail && (
                    userEmail.includes('faweethkw') || 
                    userEmail.includes('فوائض') ||
                    userName.includes('فوائض')
                );
                
                // إظهار الباقات (التحكم في ظهورها حسب حالة الاشتراك يتم عبر بيانات /user/subscription إن لزم)
                // ملاحظة: لا نخفي الباقات تلقائياً بعد تسجيل الدخول لأن المستخدم قد يحتاج الاشتراك/التجديد.
                const pricingSection = document.getElementById('pricingSection');
                if (pricingSection) {
                    pricingSection.style.display = '';
                }

                // إظهار رابط الإعدادات داخل القائمة
                if (settingsMenuBtn) settingsMenuBtn.classList.remove('hidden');

                // إخفاء زر التقديم كشريك بعد تسجيل الدخول
                if (registerBtn) registerBtn.style.display = 'none';
                if (partnerApplyBtn) partnerApplyBtn.style.display = 'none';

                // زر لوحة الشريك يظهر فقط للشريك
                if (partnerDashboardBtn) {
                    if (roleLower === 'partner') {
                        partnerDashboardBtn.classList.remove('hidden');
                        partnerDashboardBtn.style.display = 'inline-flex';
                    } else {
                        partnerDashboardBtn.classList.add('hidden');
                        partnerDashboardBtn.style.display = 'none';
                    }
                }
                if (logoutHeaderBtn) logoutHeaderBtn.classList.remove('hidden');

                // ✅ إظهار روابط الداشبورد فقط عند تسجيل الدخول
                const navDashboardLink = document.getElementById('navDashboardLink');
                if (navDashboardLink) {
                    navDashboardLink.classList.remove('hidden');
                    navDashboardLink.style.display = 'inline-block';
                }
                
                const heroSecondaryCta = document.getElementById('heroSecondaryCta');
                if (heroSecondaryCta) {
                    heroSecondaryCta.classList.remove('hidden');
                    heroSecondaryCta.style.display = 'inline-flex';
                }
                
                const viewDetailsDashboardLink = document.getElementById('viewDetailsDashboardLink');
                if (viewDetailsDashboardLink) {
                    viewDetailsDashboardLink.classList.remove('hidden');
                    viewDetailsDashboardLink.style.display = 'inline-block';
                }
                
                const lifeguardDashboardLink1 = document.getElementById('lifeguardDashboardLink1');
                if (lifeguardDashboardLink1) {
                    lifeguardDashboardLink1.classList.remove('hidden');
                    lifeguardDashboardLink1.style.display = 'inline-block';
                }
                
                const lifeguardDashboardLink2 = document.getElementById('lifeguardDashboardLink2');
                if (lifeguardDashboardLink2) {
                    lifeguardDashboardLink2.classList.remove('hidden');
                    lifeguardDashboardLink2.style.display = 'block';
                }
                
                const videoSignalsMoreBtn = document.getElementById('videoSignalsMoreBtn');
                if (videoSignalsMoreBtn) {
                    videoSignalsMoreBtn.classList.remove('hidden');
                    videoSignalsMoreBtn.style.display = 'inline-flex';
                }
                
                // إخفاء زر "ابدأ الذكاء التشغيلي" (سجل الآن) من Hero
                const heroPrimaryCta = document.getElementById('heroPrimaryCta');
                if (heroPrimaryCta) {
                    heroPrimaryCta.style.display = 'none';
                }

                // تحويل زر الدخول إلى زر ترحيب فقط (بدون "سجل الآن")
                if (loginBtn) {
                    // إزالة data-i18n حتى لا يعيد نظام الترجمة كتابة النص إلى "تسجيل الدخول"
                    loginBtn.removeAttribute('data-i18n');
                    
                    // إعادة بناء محتوى الزر بالكامل لضمان عدم بقاء نص "Login"
                    // Keep the label consistent with the selected locale (avoid Arabic-only punctuation split).
                    const finalLabel = escapeHtml(String(welcomeText));
                    
                    loginBtn.innerHTML = `
                        <i class="fas fa-user-circle" style="color: #000; font-size: 1rem; font-weight: 900;"></i>
                        <span class="truncate" style="color: #000; font-weight: 700;">${finalLabel}</span>
                        <i class="fas fa-chevron-down text-[10px]" style="color: #000; opacity: 0.8;"></i>
                    `;
                    
                    // تحديث الألوان حسب الثيم - أيقونة واضحة
                    loginBtn.className = 'px-3 py-1.5 md:px-4 md:py-2 rounded-xl bg-primary text-black hover:bg-yellow-500 transition flex items-center gap-2 text-xs md:text-sm font-bold max-w-[180px] md:max-w-none truncate shadow-sm';
                    loginBtn.style.color = '#000';
                    loginBtn.style.fontWeight = '700';
                    
                    loginBtn.onclick = function(e) {
                        e.stopPropagation();
                        toggleUserMenu(e);
                    };
                    // تحديث محتوى القائمة - استخدام البيانات من userData فقط
                    const userMenu = document.getElementById('userMenu');
                    if (userMenu && userData) {
                        const accountName = document.getElementById('userMenuAccountName');
                        if (accountName) {
                            accountName.textContent = userName;
                        }
                        const accountEmailDiv = userMenu.querySelector('.px-4.py-3 > div:first-child');
                        if (accountEmailDiv && userEmail) {
                            accountEmailDiv.textContent = userEmail;
                        }
                        // إظهار logout button
                        if (logoutHeaderBtn) logoutHeaderBtn.style.display = 'flex';
                    }
                }
            } else {
                console.log('[AUTH UI] User is NOT logged in, showing login/register buttons');

                // ✅ إخفاء روابط الداشبورد عند عدم تسجيل الدخول
                const navDashboardLink = document.getElementById('navDashboardLink');
                if (navDashboardLink) {
                    navDashboardLink.classList.add('hidden');
                    navDashboardLink.style.display = 'none';
                }
                
                const heroSecondaryCta = document.getElementById('heroSecondaryCta');
                if (heroSecondaryCta) {
                    heroSecondaryCta.classList.add('hidden');
                    heroSecondaryCta.style.display = 'none';
                }
                
                const viewDetailsDashboardLink = document.getElementById('viewDetailsDashboardLink');
                if (viewDetailsDashboardLink) {
                    viewDetailsDashboardLink.classList.add('hidden');
                    viewDetailsDashboardLink.style.display = 'none';
                }
                
                const lifeguardDashboardLink1 = document.getElementById('lifeguardDashboardLink1');
                if (lifeguardDashboardLink1) {
                    lifeguardDashboardLink1.classList.add('hidden');
                    lifeguardDashboardLink1.style.display = 'none';
                }
                
                const lifeguardDashboardLink2 = document.getElementById('lifeguardDashboardLink2');
                if (lifeguardDashboardLink2) {
                    lifeguardDashboardLink2.classList.add('hidden');
                    lifeguardDashboardLink2.style.display = 'none';
                }
                
                const videoSignalsMoreBtn = document.getElementById('videoSignalsMoreBtn');
                if (videoSignalsMoreBtn) {
                    videoSignalsMoreBtn.classList.add('hidden');
                    videoSignalsMoreBtn.style.display = 'none';
                }

                // إخفاء روابط القائمة الخاصة بالمستخدمين
                if (settingsMenuBtn) settingsMenuBtn.classList.add('hidden');
                
                // إظهار زر "ابدأ الذكاء التشغيلي" (سجل الآن) في Hero
                const heroPrimaryCta = document.getElementById('heroPrimaryCta');
                if (heroPrimaryCta) {
                    heroPrimaryCta.style.display = 'flex';
                }
                
                if (loginBtn) {
                    // عند تسجيل الخروج نعيد ربط زر الدخول بترجمة i18n الافتراضية
                    loginBtn.setAttribute('data-i18n', 'btn_login');
                    const welcomeSpan = loginBtn.querySelector('span.truncate, span.text-sm');
                    if (welcomeSpan) {
                        welcomeSpan.setAttribute('data-i18n', 'btn_login');
                        welcomeSpan.innerHTML = 'تسجيل الدخول';
                    } else {
                        loginBtn.innerHTML = '<i class="fas fa-user-circle text-sm"></i><span class="truncate" data-i18n="btn_login">تسجيل الدخول</span>';
                    }
                    // إعادة الألوان الأصلية (أصفر primary) مع خط واضح
                    loginBtn.className = 'px-3 py-1.5 md:px-4 md:py-2 rounded-xl bg-primary text-black hover:bg-yellow-500 transition flex items-center gap-2 text-xs md:text-sm font-bold max-w-[140px] md:max-w-none truncate shadow-sm';
                    loginBtn.style.color = '#000';
                    loginBtn.style.fontWeight = '700';
                    // التأكد من أن الأيقونة واضحة
                    const icons = loginBtn.querySelectorAll('i');
                    icons.forEach(icon => {
                        if (icon.classList.contains('fa-user-circle')) {
                            icon.style.color = '#000';
                            icon.style.fontSize = '1rem';
                            icon.style.fontWeight = '900';
                        }
                    });
                    // التأكد من أن النص واضح
                    const spans = loginBtn.querySelectorAll('span');
                    spans.forEach(span => {
                        span.style.color = '#000';
                        span.style.fontWeight = '700';
                    });
                    loginBtn.onclick = (e) => {
                        e.stopPropagation();
                        openAuthModal('login');
                    };
                    // إخفاء القائمة
                    const userMenu = document.getElementById('userMenu');
                    if (userMenu) userMenu.classList.add('hidden');
                }
                if (registerBtn) {
                    registerBtn.style.display = 'flex';
                    registerBtn.onclick = () => openAuthModal('register');
                }
                if (partnerApplyBtn) {
                    partnerApplyBtn.style.display = 'inline-flex';
                }
                if (partnerDashboardBtn) {
                    partnerDashboardBtn.classList.add('hidden');
                    partnerDashboardBtn.style.display = 'none';
                }
                if (logoutHeaderBtn) {
                    logoutHeaderBtn.classList.add('hidden');
                }
            }
            console.log('[AUTH UI] ✅ UI update complete');
        }
        
        // عرض قائمة المستخدم (deprecated - using toggleUserMenu instead)
        function showUserMenu(button, userName, userEmail) {
            // استخدام القائمة الموجودة في HTML بدلاً من إنشاء واحدة جديدة
            const menu = document.getElementById('userMenu');
            if (menu) {
                // تحديث محتوى القائمة
                const accountName = menu.querySelector('.text-sm.text-white\\/90.font-semibold');
                if (accountName) accountName.textContent = userName;
                const accountEmailDiv = menu.querySelector('.px-4.py-3 > div:first-child');
                if (accountEmailDiv && userEmail) accountEmailDiv.textContent = userEmail;
                // إظهار القائمة
                toggleUserMenu(null);
                return;
            }
        }
        
        // تسجيل الخروج
        function handleLogout() {
            if (confirm('هل تريد تسجيل الخروج؟')) {
                removeAuthToken(); // Single Source of Truth
                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...');
                
                // حفظ التوكن باستخدام setAuthToken() (Single Source of Truth)
                setAuthToken(token);
                localStorage.setItem('user_email', email);
                console.log('[AUTH URL] ✅ Token saved');
                
                // إزالة 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 باستخدام getAuthToken() (Single Source of Truth)
                const savedToken = getAuthToken();
                console.log('[AUTH URL] Token found:', savedToken ? savedToken.substring(0, 20) + '...' : 'NOT FOUND');
                
                if (savedToken) {
                    console.log('[AUTH URL] ✅ Token found, 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) {
                // إزالة style="display:none;" وإظهار الزر
                partnerApplyBtn.style.display = '';
                partnerApplyBtn.classList.remove('hidden');
                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();
            
            // التحقق من الحساب عند تحميل الصفحة:
            // - إذا كان هناك token صالح → نحدّث الواجهة كـ "مسجّل دخول" ونحمّل حالة الاشتراك
            // - إذا لم يكن هناك token → نعامل المستخدم كزائر
            // ننتظر قليلاً للتأكد من أن checkAuthFromURL() انتهى
            setTimeout(() => {
                const token = getAuthToken();
                updateAuthUI(!!token);
                if (token) {
                    loadHomeSubscriptionState();
                }
            }, 100);
            
            // تم إخفاء قسم أدوات جمع البيانات عن الواجهة العامة طبقاً للقرار المعماري
            // loadDataCollectionTools(); // Disabled: Data Collection tools are Dev/Admin only
            
        });
        
        // ===== دالة تحميل أدوات جمع البيانات =====
        async function loadDataCollectionTools() {
            try {
                const lang = window.__UICFG?.ui?.locale || localStorage.getItem('tl_lang') || 'ar';
                const isArabic = lang === 'ar';
                
                // محاولة جلب البيانات من API
                let dataSources = null;
                try {
                    const response = await fetch(`${API_BASE}/data-collection/data-sources`);
                    if (response.ok) {
                        const apiData = await response.json();
                        if (apiData && apiData.success && Array.isArray(apiData.sources)) {
                            // تصنيف المصادر حسب الفئة
                            const free = apiData.sources.filter(s => s.category === 'free');
                            const paid = apiData.sources.filter(s => s.category === 'paid');
                            const open = apiData.sources.filter(s => s.category === 'open_dataset');
                            const other = apiData.sources.filter(s => !['free', 'paid', 'open_dataset'].includes(s.category));

                            const totalCount = free.length + paid.length + open.length + other.length;
                            // إذا رجع الـAPI بنجاح لكن بدون أي مصدر، نستخدم بيانات fallback بدلاً من "لا توجد بيانات"
                            if (totalCount > 0) {
                                dataSources = { free, paid, open, other };
                            } else {
                                console.warn('Data collection API returned success but no sources; using fallback demo list.');
                            }
                        }
                    }
                } catch (apiError) {
                    console.warn('Failed to load data sources from API, using fallback:', apiError);
                }
                
                // Fallback: بيانات ثابتة إذا فشل API
                if (!dataSources) {
                    dataSources = {
                    free: [
                        { code: 'GOOGLE_TRENDS', name: { ar: 'Google Trends', en: 'Google Trends' }, icon: 'fab fa-google', description: { ar: 'اتجاهات البحث العالمية', en: 'Global search trends' }, status: 'active' },
                        { code: 'SHIPPING_PORTS', name: { ar: 'الموانئ والشحن', en: 'Shipping Ports' }, icon: 'fas fa-ship', description: { ar: 'حالة الموانئ والشحن', en: 'Port and shipping status' }, status: 'active' },
                        { code: 'MARKET_ADS', name: { ar: 'إعلانات السوق', en: 'Market Ads' }, icon: 'fas fa-bullhorn', description: { ar: 'إعلانات السوق', en: 'Market advertisements' }, status: 'active' },
                        { code: 'NOON_PRODUCTS', name: { ar: 'منتجات Noon', en: 'Noon Products' }, icon: 'fas fa-shopping-bag', description: { ar: 'منتجات وأسعار Noon', en: 'Noon products and prices' }, status: 'active' },
                        { code: 'TEMU_PRODUCTS', name: { ar: 'منتجات Temu', en: 'Temu Products' }, icon: 'fas fa-box', description: { ar: 'منتجات وأسعار Temu', en: 'Temu products and prices' }, status: 'active' },
                        { code: 'SHEIN_PRODUCTS_FREE', name: { ar: 'منتجات Shein', en: 'Shein Products' }, icon: 'fas fa-tshirt', description: { ar: 'منتجات وأسعار Shein', en: 'Shein products and prices' }, status: 'active' },
                        { code: 'SHOPIFY_TRACKER', name: { ar: 'متاجر Shopify', en: 'Shopify Tracker' }, icon: 'fab fa-shopify', description: { ar: 'تتبع متاجر Shopify', en: 'Shopify stores tracking' }, status: 'active' }
                    ],
                    paid: [
                        { code: 'AMAZON_PA_API', name: { ar: 'Amazon PA-API', en: 'Amazon PA-API' }, icon: 'fab fa-amazon', description: { ar: 'منتجات Amazon', en: 'Amazon products' }, status: 'requires_key' },
                        { code: 'HELIUM10', name: { ar: 'Helium10', en: 'Helium10' }, icon: 'fas fa-chart-line', description: { ar: 'تحليلات Amazon', en: 'Amazon analytics' }, status: 'requires_key' },
                        { code: 'SIMILARWEB', name: { ar: 'SimilarWeb', en: 'SimilarWeb' }, icon: 'fas fa-globe', description: { ar: 'تحليلات حركة المرور', en: 'Traffic analytics' }, status: 'requires_key' },
                        { code: 'AHREFS', name: { ar: 'Ahrefs', en: 'Ahrefs' }, icon: 'fas fa-link', description: { ar: 'SEO والروابط', en: 'SEO and backlinks' }, status: 'requires_key' },
                        { code: 'SEMRUSH', name: { ar: 'Semrush', en: 'Semrush' }, icon: 'fas fa-search', description: { ar: 'تحليلات السوق', en: 'Market analytics' }, status: 'requires_key' },
                        { code: 'DATAFORSEO', name: { ar: 'DataForSEO', en: 'DataForSEO' }, icon: 'fas fa-database', description: { ar: 'منصة SEO', en: 'SEO platform' }, status: 'requires_key' },
                        { code: 'BIGSPY', name: { ar: 'BigSpy', en: 'BigSpy' }, icon: 'fas fa-eye', description: { ar: 'تجسس الإعلانات', en: 'Ad intelligence' }, status: 'requires_key' },
                        { code: 'SUPPLIERS_PAID', name: { ar: 'قاعدة الموردين', en: 'Suppliers Database' }, icon: 'fas fa-warehouse', description: { ar: 'قاعدة بيانات موردين', en: 'Suppliers database' }, status: 'requires_key' }
                    ],
                    open: [
                        { code: 'UN_COMTRADE', name: { ar: 'UN Comtrade', en: 'UN Comtrade' }, icon: 'fas fa-globe-americas', description: { ar: 'بيانات التجارة الدولية', en: 'International trade data' }, status: 'active' },
                        { code: 'PCMI_ECOM', name: { ar: 'PCMI E-Commerce', en: 'PCMI E-Commerce' }, icon: 'fas fa-shopping-cart', description: { ar: 'بيانات التجارة الإلكترونية', en: 'E-commerce data' }, status: 'active' },
                        { code: 'OPEN_FOOD_FACTS', name: { ar: 'Open Food Facts', en: 'Open Food Facts' }, icon: 'fas fa-utensils', description: { ar: 'منتجات غذائية', en: 'Food products' }, status: 'active' },
                        { code: 'DATA_COMMONS', name: { ar: 'Data Commons', en: 'Data Commons' }, icon: 'fas fa-network-wired', description: { ar: 'شبكة معرفة بيانات', en: 'Data knowledge network' }, status: 'active' },
                        { code: 'ITC_TRADE_STATS', name: { ar: 'ITC Trade', en: 'ITC Trade' }, icon: 'fas fa-chart-bar', description: { ar: 'إحصائيات التجارة', en: 'Trade statistics' }, status: 'active' },
                        { code: 'WB_BIGQUERY', name: { ar: 'World Bank', en: 'World Bank' }, icon: 'fas fa-university', description: { ar: 'بيانات البنك الدولي', en: 'World Bank data' }, status: 'active' },
                        { code: 'KAGGLE_PRODUCTS', name: { ar: 'Kaggle Products', en: 'Kaggle Products' }, icon: 'fab fa-kaggle', description: { ar: 'منتجات من Kaggle', en: 'Products from Kaggle' }, status: 'active' },
                        { code: 'MAVE_PRODUCTS', name: { ar: 'MAVE Dataset', en: 'MAVE Dataset' }, icon: 'fas fa-database', description: { ar: '2.2 مليون منتج', en: '2.2M products' }, status: 'active' },
                        { code: 'BANGLISHREV', name: { ar: 'BanglishRev', en: 'BanglishRev' }, icon: 'fas fa-comments', description: { ar: '1.7 مليون مراجعة', en: '1.7M reviews' }, status: 'active' },
                        { code: 'PRODUCTS_10K', name: { ar: 'Products-10K', en: 'Products-10K' }, icon: 'fas fa-images', description: { ar: '10K منتج من JD.com', en: '10K products from JD.com' }, status: 'active' },
                        { code: 'SHEIN_PRODUCTS_DATASET', name: { ar: 'Shein Dataset', en: 'Shein Dataset' }, icon: 'fas fa-tshirt', description: { ar: 'بيانات Shein', en: 'Shein data' }, status: 'active' },
                        { code: 'AIS_VESSELS', name: { ar: 'AIS Vessels', en: 'AIS Vessels' }, icon: 'fas fa-ship', description: { ar: 'بيانات السفن', en: 'Vessel data' }, status: 'requires_key' },
                        { code: 'MERREC_DATASET', name: { ar: 'MerRec', en: 'MerRec' }, icon: 'fas fa-shopping-basket', description: { ar: 'بيانات مشتريات C2C', en: 'C2C purchase data' }, status: 'active' },
                        { code: 'ECOM_TX_DETAILS', name: { ar: 'E-commerce TX', en: 'E-commerce TX' }, icon: 'fas fa-receipt', description: { ar: 'بيانات المعاملات', en: 'Transaction data' }, status: 'active' },
                        { code: 'APIFY_SCRAPING', name: { ar: 'Apify', en: 'Apify' }, icon: 'fas fa-robot', description: { ar: 'خدمة Scraping', en: 'Scraping service' }, status: 'requires_key' }
                    ],
                    other: [
                        { code: 'BINANCE', name: { ar: 'Binance', en: 'Binance' }, icon: 'fab fa-bitcoin', description: { ar: 'عملات مشفرة', en: 'Cryptocurrency' }, status: 'requires_key' },
                        { code: 'BYBIT', name: { ar: 'Bybit', en: 'Bybit' }, icon: 'fas fa-coins', description: { ar: 'عملات مشفرة', en: 'Cryptocurrency' }, status: 'requires_key' },
                        { code: 'FINNHUB', name: { ar: 'Finnhub', en: 'Finnhub' }, icon: 'fas fa-chart-candlestick', description: { ar: 'أسهم وفوركس', en: 'Stocks & Forex' }, status: 'requires_key' },
                        { code: 'ALPHA_VANTAGE', name: { ar: 'Alpha Vantage', en: 'Alpha Vantage' }, icon: 'fas fa-chart-line', description: { ar: 'أسواق مالية', en: 'Financial markets' }, status: 'requires_key' },
                        { code: 'BING_SEARCH_API', name: { ar: 'Bing Search', en: 'Bing Search' }, icon: 'fab fa-microsoft', description: { ar: 'بحث عام', en: 'General search' }, status: 'requires_key' },
                        { code: 'BING_VISUAL_SEARCH', name: { ar: 'Bing Visual', en: 'Bing Visual' }, icon: 'fas fa-image', description: { ar: 'بحث بصري', en: 'Visual search' }, status: 'requires_key' },
                        { code: 'SOCIAL_API', name: { ar: 'Social API', en: 'Social API' }, icon: 'fas fa-share-alt', description: { ar: 'بيانات السوشيال', en: 'Social media data' }, status: 'requires_key' },
                        { code: 'TIKTOK_ADS_API', name: { ar: 'TikTok Ads', en: 'TikTok Ads' }, icon: 'fab fa-tiktok', description: { ar: 'إعلانات TikTok', en: 'TikTok ads' }, status: 'requires_key' }
                    ]
                };
                }
                
                // عرض المصادر المجانية
                renderDataSources('freeSourcesGrid', dataSources.free, isArabic);
                
                // عرض المصادر المدفوعة
                renderDataSources('paidSourcesGrid', dataSources.paid, isArabic);
                
                // عرض قواعد البيانات المفتوحة
                renderDataSources('openDatasetsGrid', dataSources.open, isArabic);
                
                // عرض المصادر الأخرى
                renderDataSources('otherSourcesGrid', dataSources.other, isArabic);
                
            } catch (error) {
                console.error('Error loading data collection tools:', error);
            }
        }
        
        // دالة عرض مصادر البيانات
        function renderDataSources(containerId, sources, isArabic) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            if (!sources || sources.length === 0) {
                const noDataText = isArabic ? 'لا توجد مصادر متاحة' : 'No sources available';
                container.innerHTML = `<div class="text-center py-4 text-gray-400 col-span-full">${noDataText}</div>`;
                return;
            }
            
            // رموز الأيقونات حسب نوع المصدر
            const iconMap = {
                'GOOGLE_TRENDS': 'fab fa-google',
                'SHIPPING_PORTS': 'fas fa-ship',
                'MARKET_ADS': 'fas fa-bullhorn',
                'NOON_PRODUCTS': 'fas fa-shopping-bag',
                'TEMU_PRODUCTS': 'fas fa-box',
                'SHEIN_PRODUCTS_FREE': 'fas fa-tshirt',
                'SHOPIFY_TRACKER': 'fab fa-shopify',
                'AMAZON_PA_API': 'fab fa-amazon',
                'HELIUM10': 'fas fa-chart-line',
                'SIMILARWEB': 'fas fa-globe',
                'AHREFS': 'fas fa-link',
                'SEMRUSH': 'fas fa-search',
                'DATAFORSEO': 'fas fa-database',
                'BIGSPY': 'fas fa-eye',
                'BINANCE': 'fab fa-bitcoin',
                'BYBIT': 'fas fa-coins',
                'FINNHUB': 'fas fa-chart-candlestick',
                'ALPHA_VANTAGE': 'fas fa-chart-line',
                'BING_SEARCH_API': 'fab fa-microsoft',
                'BING_VISUAL_SEARCH': 'fas fa-image',
                'SOCIAL_API': 'fas fa-share-alt',
                'TIKTOK_ADS_API': 'fab fa-tiktok',
                'UN_COMTRADE': 'fas fa-globe-americas',
                'PCMI_ECOM': 'fas fa-shopping-cart',
                'OPEN_FOOD_FACTS': 'fas fa-utensils',
                'DATA_COMMONS': 'fas fa-network-wired',
                'ITC_TRADE_STATS': 'fas fa-chart-bar',
                'WB_BIGQUERY': 'fas fa-university',
                'KAGGLE_PRODUCTS': 'fab fa-kaggle',
                'MAVE_PRODUCTS': 'fas fa-database',
                'BANGLISHREV': 'fas fa-comments',
                'PRODUCTS_10K': 'fas fa-images',
                'SHEIN_PRODUCTS_DATASET': 'fas fa-tshirt',
                'AIS_VESSELS': 'fas fa-ship',
                'MERREC_DATASET': 'fas fa-shopping-basket',
                'ECOM_TX_DETAILS': 'fas fa-receipt',
                'APIFY_SCRAPING': 'fas fa-robot',
                'SUPPLIERS_PAID': 'fas fa-warehouse'
            };
            
            let html = '';
            sources.forEach(source => {
                const name = source.name || source.code;
                const description = source.description || '';
                const icon = iconMap[source.code] || 'fas fa-database';
                const statusBadge = source.is_active 
                    ? (source.api_key_required 
                        ? '<span class="px-2 py-0.5 rounded text-[10px] bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">' + (isArabic ? 'يتطلب API Key' : 'Requires API Key') + '</span>'
                        : '<span class="px-2 py-0.5 rounded text-[10px] bg-green-500/20 text-green-400 border border-green-500/30">' + (isArabic ? 'نشط' : 'Active') + '</span>')
                    : '<span class="px-2 py-0.5 rounded text-[10px] bg-gray-500/20 text-gray-400 border border-gray-500/30">' + (isArabic ? 'غير نشط' : 'Inactive') + '</span>';
                
                html += `
                    <div class="glass-effect rounded-xl p-4 hover:bg-white/5 transition-colors cursor-pointer" onclick="viewDataSourceDetails('${source.code}')" title="${description}">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center flex-shrink-0">
                                <i class="${icon} text-primary text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="text-sm font-bold text-white truncate">${name}</h4>
                            </div>
                            ${statusBadge}
                        </div>
                        <p class="text-xs text-gray-400 line-clamp-2">${description}</p>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        // دالة عرض تفاصيل مصدر البيانات
        function viewDataSourceDetails(sourceCode) {
            console.log('Viewing details for source:', sourceCode);
            // يمكن فتح modal أو توجيه لصفحة تفاصيل باستخدام deep-link ثابت عبر feature
            window.location.href = `/trendlens/dashboard.html?feature=${sourceCode}`;
        }
        
        // جعل الدوال متاحة عالمياً
        window.loadDataCollectionTools = loadDataCollectionTools;
        window.renderDataSources = renderDataSources;
        window.viewDataSourceDetails = viewDataSourceDetails;

        // ===== دالة تحميل المنتجات المجمعة من Data Scrapers =====
        async function loadCollectedProducts(marketplace = 'ALL') {
            const grid = document.getElementById('collectedProductsGrid');
            if (!grid) return;
            
            // تحديث التبويبات النشطة
            document.querySelectorAll('.marketplace-tab').forEach(tab => {
                tab.classList.remove('active', 'bg-primary', 'text-black');
                tab.classList.add('bg-white/10', 'text-white');
            });
            const activeTab = document.querySelector(`[data-marketplace="${marketplace}"]`);
            if (activeTab) {
                activeTab.classList.add('active', 'bg-primary', 'text-black');
                activeTab.classList.remove('bg-white/10', 'text-white');
            }
            
            // عرض حالة التحميل
            grid.innerHTML = `
                <div class="col-span-full text-center py-8">
                    <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="loading_products">جاري تحميل المنتجات...</p>
                </div>
            `;
            
            try {
                const API_BASE = window.API_BASE || '/api';
                const params = new URLSearchParams();
                if (marketplace !== 'ALL') {
                    params.append('marketplace', marketplace);
                }
                params.append('limit', '20');
                
                const response = await fetch(`${API_BASE}/data-collection/products?${params.toString()}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                
                const data = await response.json();
                
                if (!data.success || !data.products || data.products.length === 0) {
                    grid.innerHTML = `
                        <div class="col-span-full text-center py-8">
                            <i class="fas fa-inbox text-4xl text-gray-500 mb-4"></i>
                            <p class="text-gray-400" data-i18n="no_products">لا توجد منتجات متاحة حالياً</p>
                            <p class="text-gray-500 text-sm mt-2" data-i18n="products_being_collected">المنتجات قيد الجمع من Data Scrapers</p>
                        </div>
                    `;
                    return;
                }
                
                // عرض المنتجات
                grid.innerHTML = data.products.map(product => {
                    const marketplaceIcon = {
                        'NOON': 'fas fa-shopping-bag',
                        'TEMU': 'fas fa-store',
                        'SHEIN': 'fas fa-shopping-cart',
                        'AMAZON': 'fab fa-amazon'
                    }[product.marketplace] || 'fas fa-shopping-bag';
                    
                    const price = product.price ? `${product.price.toFixed(2)} ${product.currency || ''}` : 'N/A';
                    const rating = product.rating ? product.rating.toFixed(1) : 'N/A';
                    const reviews = product.reviews_count || 0;
                    
                    return `
                        <div class="glass-effect rounded-xl p-4 hover:scale-105 transition-transform border border-white/5 dashboard-data-card">
                            ${product.image_url ? `
                                <img src="${product.image_url}" alt="${product.title || 'Product'}" 
                                     class="w-full h-48 object-cover rounded-lg mb-3"
                                     onerror="this.src='/trendlens/assets/brand/logo.svg'">
                            ` : `
                                <div class="w-full h-48 bg-gray-700 rounded-lg flex items-center justify-center mb-3">
                                    <i class="${marketplaceIcon} text-4xl text-gray-500"></i>
                                </div>
                            `}
                            <div class="flex items-center gap-2 mb-2">
                                <i class="${marketplaceIcon} text-primary text-sm"></i>
                                <span class="text-xs text-gray-400">${product.marketplace}</span>
                            </div>
                            <h4 class="text-white font-semibold mb-2 line-clamp-2 min-h-[2.5rem]">${product.title || 'Unknown Product'}</h4>
                            ${product.category ? `
                                <div class="flex items-center gap-2 mb-2">
                                    <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">${product.category}</span>
                                </div>
                            ` : ''}
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-primary font-bold">${price}</span>
                                ${rating !== 'N/A' ? `
                                    <div class="flex items-center gap-1">
                                        <i class="fas fa-star text-yellow-400 text-xs"></i>
                                        <span class="text-gray-300">${rating}</span>
                                        ${reviews > 0 ? `<span class="text-gray-500 text-xs">(${reviews})</span>` : ''}
                                    </div>
                                ` : ''}
                            </div>
                            ${product.url ? `
                                <a href="${product.url}" target="_blank" 
                                   class="block w-full mt-3 bg-primary text-black py-2 rounded-lg text-center font-semibold hover:bg-yellow-500 transition-colors text-sm">
                                    <i class="fas fa-external-link-alt me-2"></i>
                                    <span data-i18n="view_product">عرض المنتج</span>
                                </a>
                            ` : ''}
                        </div>
                    `;
                }).join('');
                
            } catch (error) {
                console.error('Error loading collected products:', error);
                grid.innerHTML = `
                    <div class="col-span-full text-center py-8">
                        <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i>
                        <p class="text-gray-400" data-i18n="error_loading_products">خطأ في تحميل المنتجات</p>
                        <p class="text-gray-500 text-sm mt-2">${error.message}</p>
                    </div>
                `;
            }
        }
        
        // جعل الدالة متاحة عالمياً
        window.loadCollectedProducts = loadCollectedProducts;
        
        // تحميل المنتجات عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                loadCollectedProducts('NOON');
            }, 2000); // بعد تحميل الصفحة بـ 2 ثانية
        });

        // تحميل نبض الشحن عند تحميل الصفحة
        // 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
        }
        
        // تحديث الرصيد كل 60 ثانية (بدلاً من 30 ثانية لتقليل الاستدعاءات)
        let usageUpdateInterval = null;
        function startUsageUpdateInterval() {
            // مسح أي interval موجود مسبقاً
            if (usageUpdateInterval) {
                clearInterval(usageUpdateInterval);
            }
            
            // التحقق من أن الصفحة مرئية قبل البدء
            if (document.hidden) {
                console.log('[API] Page is hidden, skipping interval start');
                return;
            }
            
            usageUpdateInterval = setInterval(() => {
                // التحقق من أن الصفحة مرئية قبل الاستدعاء
                if (document.hidden) {
                    console.log('[API] Page is hidden, skipping usage update');
                    return;
                }
                console.log('[API] Periodic usage update triggered');
                loadAIQuota();
            }, 60000); // 60 ثانية بدلاً من 30
        }
        
        function stopUsageUpdateInterval() {
            if (usageUpdateInterval) {
                clearInterval(usageUpdateInterval);
                usageUpdateInterval = null;
                console.log('[API] Stopped usage update interval');
            }
        }
        
        // استخدام Page Visibility API لإيقاف/تشغيل التحديثات
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                console.log('[API] Page hidden - stopping usage updates');
                stopUsageUpdateInterval();
            } else {
                console.log('[API] Page visible - starting usage updates');
                // تحديث فوري عند العودة
                loadAIQuota();
                // ثم بدء التحديث الدوري
                startUsageUpdateInterval();
            }
        });
        
        // بدء التحديث الدوري بعد تحميل البيانات الأولية
        setTimeout(() => {
            startUsageUpdateInterval();
        }, 1000);
        
        // مسح interval عند إغلاق الصفحة (fallback)
        window.addEventListener('beforeunload', () => {
            stopUsageUpdateInterval();
        });

        // ===== 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 lang = window.__UICFG?.ui?.locale || window.TL_LOCALE || document.documentElement.lang || 'en';
                const shortLang = lang.startsWith('ar') ? 'ar' : lang.startsWith('es') ? 'es' : lang.startsWith('pt') ? 'pt' : lang.startsWith('tr') ? 'tr' : lang.startsWith('hi') ? 'hi' : 'en';
                const lbl = shortLang === 'ar' ? 'زائر' :
                    shortLang === 'es' ? 'visitantes' :
                    shortLang === 'pt' ? 'visitantes' :
                    shortLang === 'tr' ? 'ziyaretçiler' :
                    shortLang === 'hi' ? 'आगंतुक' :
                    'visitors';
                const lEl = document.getElementById('visitor-label-float');
                if (lEl) lEl.textContent = lbl;
            }
            
            let isRefreshingVisits = false; // منع الاستدعاءات المكررة
            async function refreshVisits(){
                // منع الاستدعاءات المكررة أثناء التنفيذ
                if (isRefreshingVisits) {
                    console.log('[API] refreshVisits already in progress, skipping');
                    return;
                }
                
                try{
                    isRefreshingVisits = true;
                    console.log('[API] Fetching /stats/public (periodic update)');
                    const API_BASE = window.API_BASE || '/api';
                    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);
                        // استخدام رقم افتراضي إذا فشل API
                        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 if (d && typeof d.total_visits === 'number') {
                        // محاولة استخدام total_visits إذا كان موجوداً
                        updateVisitorDisplay(d.total_visits);
                    } else if (d && typeof d.count === 'number') {
                        // محاولة استخدام count إذا كان موجوداً
                        updateVisitorDisplay(d.count);
                    } else {
                        console.warn('Invalid visitor stats data:', d);
                        // استخدام رقم افتراضي
                        updateVisitorDisplay(1268);
                    }
                }catch(e){
                    console.warn('[API] Failed to load visitor count:', e);
                    // فشل: اعرض رقم افتراضي مباشرة
                    updateVisitorDisplay(1268);
                } finally {
                    isRefreshingVisits = false;
                    console.log('[API] ✅ refreshVisits completed');
                }
            }
            
            // تأخير بسيط لضمان تحميل 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 ثانية لضمان تزامن الرقم عند بقاء الصفحة مفتوحة
            let visitsInterval = null;
            function startVisitsInterval() {
                // مسح أي interval موجود مسبقاً
                if (visitsInterval) {
                    clearInterval(visitsInterval);
                }
                
                // التحقق من أن الصفحة مرئية قبل البدء
                if (document.hidden) {
                    console.log('[API] Page is hidden, skipping visits interval start');
                    return;
                }
                
                visitsInterval = setInterval(() => {
                    // التحقق من أن الصفحة مرئية قبل الاستدعاء
                    if (document.hidden) {
                        console.log('[API] Page is hidden, skipping visits update');
                        return;
                    }
                    console.log('[API] Periodic visits update triggered');
                    refreshVisits();
                }, 60000);
            }
            
            function stopVisitsInterval() {
                if (visitsInterval) {
                    clearInterval(visitsInterval);
                    visitsInterval = null;
                    console.log('[API] Stopped visits update interval');
                }
            }
            
            // استخدام Page Visibility API لإيقاف/تشغيل التحديثات
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    console.log('[API] Page hidden - stopping visits updates');
                    stopVisitsInterval();
                } else {
                    console.log('[API] Page visible - starting visits updates');
                    // تحديث فوري عند العودة
                    refreshVisits();
                    // ثم بدء التحديث الدوري
                    startVisitsInterval();
                }
            });
            
            // بدء التحديث الدوري بعد التحميل الأولي
            setTimeout(() => {
                startVisitsInterval();
            }, 2000);
            
            // مسح interval عند إغلاق الصفحة (fallback)
            window.addEventListener('beforeunload', () => {
                stopVisitsInterval();
            });
        })();

        // ===== 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: window.tl_t ? window.tl_t('trendlens_helped') : '"TrendLens helped me spot the trend a week earlier."', a: window.tl_t ? window.tl_t('marketing_manager') : '— Marketing Manager, E‑commerce' },
                    { t: window.tl_t ? window.tl_t('testimonial_text') : '"Accurate and fast AI report — days of analysis in one hour."', a: window.tl_t ? window.tl_t('testimonial_author') : '— Amazon Seller' },
                    { t: window.tl_t ? window.tl_t('testimonial.quote_1') : '"One tool that replaces five separate tools."', a: window.tl_t ? window.tl_t('testimonial.author_1') : '— Growth Analyst' }
                ] : [
                    { t: window.tl_t ? window.tl_t('trendlens_helped') : '"ساعدتني TrendLens على توقع الترند قبل السوق بأسبوع."', a: window.tl_t ? window.tl_t('marketing_manager') : '— مدير تسويق، تجارة إلكترونية' },
                    { t: window.tl_t ? window.tl_t('testimonial_text') : '"تقرير ذكي دقيق وسريع — اختصرت أيام تحليل لساعة."', a: window.tl_t ? window.tl_t('testimonial_author') : '— بائع Amazon' },
                    { t: window.tl_t ? window.tl_t('testimonial.quote_1') : '"أداة واحدة تغنيني عن خمس أدوات منفصلة."', a: window.tl_t ? window.tl_t('testimonial.author_1') : '— محلل نمو' }
                ];
            }
            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 =====
        // تم حذف هذا الكود لأن الكرت تم حذفه (كان مكرراً مع كرت "رؤى الذكاء الاصطناعي")
        // الكود من السطر 17989 إلى 18199 تم حذفه بالكامل

    </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>


    <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 () {
                // تم حذف buildDashboardUrl - لم يعد هناك حاجة لها
                // عند الضغط على زر "افتح لوحة المنتج"، يتم الانتقال إلى تبويب explosions في الداشبورد

                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 locale = target.getAttribute('data-locale') || 'ar';
                    
                    // بناء رابط للانتقال إلى تبويب explosions في الداشبورد
                    var url = '/trendlens/dashboard.html?feature=EXPLODING_PRODUCTS';
                    if (locale) {
                        url += '&locale=' + encodeURIComponent(locale);
                    }

                    console.log('[Product Dashboard] Navigating to explosions tab:', 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 || document.documentElement.lang || 'en') === 'en' ? 'en' : 'ar';
                        
                        // استخدام markets API أو fallback إلى قائمة ثابتة
                        let markets = [];
                        try {
                        const response = await fetch(`${API_BASE}/markets/list?locale=${locale}`, {
                            credentials: 'include',
                            cache: 'no-store'
                        });

                            if (response.ok) {
                                markets = await response.json();
                            } else {
                                // Fallback: قائمة أسواق ثابتة
                            throw new Error(`Markets API error: ${response.status}`);
                            }
                        } catch (apiError) {
                            // Fallback: قائمة أسواق ثابتة
                            console.warn('[Filters] Markets API not available, using fallback list');
                            markets = [
                                { code: 'US', name_ar: 'أمريكا', name_en: 'United States', has_local: true },
                                { code: 'SA', name_ar: 'السعودية', name_en: 'Saudi Arabia', has_local: true },
                                { code: 'AE', name_ar: 'الإمارات', name_en: 'UAE', has_local: true },
                                { code: 'EG', name_ar: 'مصر', name_en: 'Egypt', has_local: true },
                                { code: 'KW', name_ar: 'الكويت', name_en: 'Kuwait', has_local: true }
                            ];
                        }
                        
                        // إزالة خيار "جاري التحميل..." وإعادة بناء القائمة
                        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 || document.documentElement.lang || 'en') === '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">${window.tl_t('no_exploding_products_period', 'No exploding products in this period / market.')}</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 || document.documentElement.lang || 'en') === '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;

                    const lang = window.currentLang || window.__UICFG?.ui?.locale || document.documentElement.lang || 'en';
                    const loadingText = lang === 'ar' ? 'جاري تحديث الترندات...' : 'Updating trends...';
                    listContainer.innerHTML = `<div class="text-center py-4 text-gray-400"><i class="fas fa-spinner fa-spin"></i><span class="ml-2">${loadingText}</span></div>`;

                    const locale = lang === '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) {
                                const noDataText = (window.tl_t ? window.tl_t('common.no_data_available_for_settings', 'No data available for these settings.') : 'No data available for these settings.');
                                listContainer.innerHTML = `<div class="text-center py-4 text-gray-400">${noDataText}</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);
                            const loadErrorText = (window.tl_t ? window.tl_t('common.trends_load_error', 'Failed to load trends data.') : 'Failed to load trends data.');
                            listContainer.innerHTML = `<div class="text-center py-4 text-gray-400">${loadErrorText}</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';

            // دالة للحصول على اللغة الحالية (متوافقة مع i18n.js)
            function getCurrentLang() {
                const raw =
                    window.TL_LOCALE ||
                    localStorage.getItem('TL_LOCALE') ||
                    window.currentLang ||
                    window.__UICFG?.ui?.locale ||
                    document.documentElement.lang ||
                    'en-US';
                return String(raw).toLowerCase();
            }

            // دالة للحصول على النص المترجم (بدون منطق عربي/إنجليزي يدوي)
            function getResearchHubText(key) {
                const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
                const map = {
                    title: ['researchHubTitle', 'Unified Research Hub in TrendLens'],
                    description: ['researchHubDescription', 'One place that gathers signals so you can choose with confidence.'],
                    snapshotLabel: ['researchHubSnapshotLabel', 'Live summary for last 24 hours'],
                    toolsLabel: ['snapshotToolsLabel', 'Active Tools'],
                    sourcesLabel: ['snapshotSourcesLabel', 'Data Sources'],
                    signalsLabel: ['snapshotSignalsLabel', 'Signals Recorded'],
                    allTools: ['researchHubAllToolsBtn', 'All Tools'],
                    loading: ['generic.loading', 'Loading...'],
                    updatedNow: ['researchHub.updated_now', 'Updated now'],
                    failedToFetch: ['researchHub.failed_to_fetch_summary', 'Failed to fetch summary'],
                    liveData: ['researchHub.badge_live', 'Live Data'],
                    beta: ['researchHub.badge_beta', 'Beta'],
                    roadmap: ['researchHub.badge_roadmap', 'Roadmap'],
                    comingSoon: ['researchHub.badge_coming_soon', 'Coming Soon']
                };
                const entry = map[key];
                if (!entry) return key;
                return t(entry[0], entry[1]);
            }

            // دالة للحصول على نصوص قسم AI
            function getAISectionText(key) {
                const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
                const map = {
                    heroSubtitle: ['ai.global_commerce_intelligence', 'Global Commerce Intelligence in One Page'],
                    feature1Title: ['ai.discover_exploding_products', 'Discover Exploding Products'],
                    feature1Desc: ['ai.smart_analysis_products', 'Smart analysis of the most in-demand products'],
                    feature2Title: ['ai.shipping_signals', 'Shipping Signals'],
                    feature2Desc: ['ai.track_shipping', 'Track global shipping movements'],
                    feature3Title: ['ai.market_ads', 'Market Ads'],
                    feature3Desc: ['ai.analyze_ads', 'Analyze live market advertisements'],
                    brainTitle: ['ai.smart_brain_title', 'TrendLens Smart Brain'],
                    brainDesc: ['ai.smart_brain_desc', 'An analytical assistant that gives you actionable steps, not just numbers.'],
                    brainFeature1: ['ai.product_analysis_feature', 'Product Analysis'],
                    brainFeature2: ['ai.strategy_building_feature', 'Strategy Building'],
                    brainFeature3: ['ai.risk_assessment_feature', 'Risk Assessment']
                };
                const entry = map[key];
                if (!entry) return key;
                return t(entry[0], entry[1]);
            }

            // تحديث نصوص قسم AI حسب اللغة
            function updateAISectionTexts() {
                const heroSubtitleEl = document.getElementById('aiHeroSubtitle');
                const feature1TitleEl = document.getElementById('aiFeature1Title');
                const feature1DescEl = document.getElementById('aiFeature1Desc');
                const feature2TitleEl = document.getElementById('aiFeature2Title');
                const feature2DescEl = document.getElementById('aiFeature2Desc');
                const feature3TitleEl = document.getElementById('aiFeature3Title');
                const feature3DescEl = document.getElementById('aiFeature3Desc');
                const brainTitleEl = document.getElementById('aiBrainTitle');
                const brainDescEl = document.getElementById('aiBrainDesc');
                const brainFeaturesEl = document.getElementById('aiBrainFeatures');
                
                if (heroSubtitleEl) heroSubtitleEl.textContent = getAISectionText('heroSubtitle');
                if (feature1TitleEl) feature1TitleEl.textContent = getAISectionText('feature1Title');
                if (feature1DescEl) feature1DescEl.textContent = getAISectionText('feature1Desc');
                if (feature2TitleEl) feature2TitleEl.textContent = getAISectionText('feature2Title');
                if (feature2DescEl) feature2DescEl.textContent = getAISectionText('feature2Desc');
                if (feature3TitleEl) feature3TitleEl.textContent = getAISectionText('feature3Title');
                if (feature3DescEl) feature3DescEl.textContent = getAISectionText('feature3Desc');
                if (brainTitleEl) brainTitleEl.textContent = getAISectionText('brainTitle');
                if (brainDescEl) brainDescEl.textContent = getAISectionText('brainDesc');
                if (brainFeaturesEl) {
                    brainFeaturesEl.innerHTML = `
                        <li>• ${getAISectionText('brainFeature1')}</li>
                        <li>• ${getAISectionText('brainFeature2')}</li>
                        <li>• ${getAISectionText('brainFeature3')}</li>
                    `;
                }
            }

            // تعريف الأدوات داخل الـ Research Hub مع ترجمة ديناميكية
            function getResearchHubTools() {
                return [
                // ===== 1. اكتشاف الترند (Trend Discovery) =====
                {
                    id: 'amazon_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-amazon',
                    titleKey: 'research.tools.amazon_trends.title',
                    descriptionKey: 'research.tools.amazon_trends.description',
                    level: 'live',
                    sourceCode: 'AMAZON_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/amazon-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?feature=AMAZON_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?feature=AMAZON_TRENDS',
                    ctaKey: 'research.tools.amazon_trends.cta'
                },
                {
                    id: 'ebay_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-ebay',
                    titleKey: 'research.tools.ebay_trends.title',
                    descriptionKey: 'research.tools.ebay_trends.description',
                    level: 'beta',
                    sourceCode: 'EBAY_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/ebay-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?feature=EBAY_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?feature=EBAY_TRENDS',
                    ctaKey: 'research.tools.ebay_trends.cta'
                },
                {
                    id: 'google_shopping',
                    cluster: 'discovery',
                    icon: 'fab fa-google',
                    titleKey: 'research.tools.google_shopping.title',
                    descriptionKey: 'research.tools.google_shopping.description',
                    level: 'live',
                    sourceCode: 'GOOGLE_SHOPPING',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/google-shopping/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?feature=GOOGLE_SHOPPING',
                    expandUrl: '/trendlens/dashboard.html?feature=GOOGLE_SHOPPING',
                    ctaKey: 'research.tools.google_shopping.cta'
                },
                {
                    id: 'pinterest_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-pinterest',
                    titleKey: 'research.tools.pinterest_trends.title',
                    descriptionKey: 'research.tools.pinterest_trends.description',
                    level: 'beta',
                    sourceCode: 'PINTEREST_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/pinterest-trends/snapshot',
                    dashboardUrl: window.addLocaleToUrl ? window.addLocaleToUrl('/trendlens/dashboard.html?feature=PINTEREST_TRENDS') : '/trendlens/dashboard.html?feature=PINTEREST_TRENDS',
                    expandUrl: window.addLocaleToUrl ? window.addLocaleToUrl('/trendlens/dashboard.html?feature=PINTEREST_TRENDS') : '/trendlens/dashboard.html?feature=PINTEREST_TRENDS',
                    ctaKey: 'research.tools.pinterest_trends.cta'
                },
                {
                    id: 'google_trends',
                    cluster: 'discovery',
                    icon: 'fab fa-google',
                    titleKey: 'research.tools.google_trends.title',
                    descriptionKey: 'research.tools.google_trends.description',
                    level: 'live',
                    sourceCode: 'GOOGLE_TRENDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/google-trends/snapshot',
                    dashboardUrl: '/trendlens/dashboard.html?feature=GOOGLE_TRENDS',
                    expandUrl: '/trendlens/dashboard.html?feature=GOOGLE_TRENDS',
                    ctaKey: 'research.tools.google_trends.cta'
                },
                // ===== 2. تحليل السوق والمنتج (Market & Product Intelligence) =====
                {
                    id: 'exploding_products',
                    cluster: 'market',
                    icon: 'fas fa-rocket',
                    titleKey: 'research.tools.exploding_products.title',
                    descriptionKey: 'research.tools.exploding_products.description',
                    level: 'live',
                    sourceCode: 'EXPLODING_PRODUCTS',
                    endpoint: RESEARCH_HUB_API_BASE + '/exploding-products/summary',
                    dashboardUrl: '/trendlens/dashboard.html?feature=EXPLODING_PRODUCTS',
                    expandUrl: '/trendlens/dashboard.html?feature=EXPLODING_PRODUCTS',
                    ctaKey: 'research.tools.exploding_products.cta'
                },
                {
                    id: 'best_sellers',
                    cluster: 'market',
                    icon: 'fas fa-crown',
                    titleKey: 'research.tools.best_sellers.title',
                    descriptionKey: 'research.tools.best_sellers.description',
                    level: 'beta',
                    sourceCode: 'BEST_SELLERS',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/best-sellers/summary',
                    dashboardUrl: window.addLocaleToUrl ? window.addLocaleToUrl('/trendlens/dashboard.html?feature=BEST_SELLERS') : '/trendlens/dashboard.html?feature=BEST_SELLERS',
                    expandUrl: window.addLocaleToUrl ? window.addLocaleToUrl('/trendlens/dashboard.html?feature=BEST_SELLERS') : '/trendlens/dashboard.html?feature=BEST_SELLERS',
                    ctaKey: 'research.tools.best_sellers.cta'
                },
                {
                    id: 'price_evolution',
                    cluster: 'market',
                    icon: 'fas fa-chart-area',
                    titleKey: 'research.tools.price_evolution.title',
                    descriptionKey: 'research.tools.price_evolution.description',
                    level: 'beta',
                    sourceCode: 'PRICE_EVOLUTION',
                    endpoint: RESEARCH_HUB_API_BASE + '/research/price-evolution',
                    dashboardUrl: '/trendlens/dashboard.html?feature=PRICE_EVOLUTION',
                    expandUrl: '/trendlens/dashboard.html?feature=PRICE_EVOLUTION',
                    ctaKey: 'research.tools.price_evolution.cta'
                },
                // ===== 3. الذكاء الصناعي والقرارات (AI & Decision Tools) =====
                // Trend AI (ai_decision) تم حذفه من غرفة الأبحاث لأنه يعمل تلقائياً مع كل أداة
                {
                    id: 'ai_keywords',
                    cluster: 'ai',
                    icon: 'fas fa-tags',
                    titleKey: 'research.tools.ai_keywords.title',
                    descriptionKey: 'research.tools.ai_keywords.description',
                    level: 'beta',
                    sourceCode: 'AI_KEYWORDS',
                    endpoint: RESEARCH_HUB_API_BASE + '/ai/research/keywords',
                    dashboardUrl: '/trendlens/dashboard.html?feature=AI_KEYWORDS',
                    expandUrl: '/trendlens/dashboard.html?feature=AI_KEYWORDS',
                    ctaKey: 'research.tools.ai_keywords.cta'
                }
            ];
            }

            // تعريف ثابت للأدوات (يتم تحديثه عند تغيير اللغة)
            let RESEARCH_HUB_TOOLS = getResearchHubTools();

            // دالة مباشرة لفتح أداة 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);
                    // استخدام pathname + search + hash للحفاظ على hash إذا كان موجوداً
                    const finalUrl = url.pathname + url.search + (url.hash || '');
                    
                    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;

            // تحديث النصوص في HTML حسب اللغة
            function updateResearchHubUITexts() {
                const root = document.getElementById('researchHubToolsSection') || document.body;
                if (window.applyI18n) window.applyI18n(root);
            }

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

                // تحديث مصفوفة الأدوات حسب اللغة الحالية
                RESEARCH_HUB_TOOLS = getResearchHubTools();

                grid.innerHTML = '';

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

                filtered.forEach(tool => {
                    const t = window.tl_t ? window.tl_t : ((_, fallback) => fallback || '');
                    const titleKey = tool.titleKey || '';
                    const descKey = tool.descriptionKey || '';
                    const ctaKey = tool.ctaKey || '';

                    const badgeConfig = {
                        live: { key: 'researchHub.badge_live', text: getResearchHubText('liveData'), classes: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/40' },
                        beta: { key: 'researchHub.badge_beta', text: getResearchHubText('beta'), classes: 'bg-sky-500/10 text-sky-300 border-sky-500/40' },
                        idea: { key: 'researchHub.badge_roadmap', text: getResearchHubText('roadmap'), classes: 'bg-gray-500/10 text-gray-300 border-gray-500/40' }
                    }[tool.level] || { key: 'researchHub.badge_coming_soon', text: getResearchHubText('comingSoon'), 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();
                        }
                    });

                    // تحديد حالة التحديث: البيانات محدثة إذا كانت الأداة live
                    const isUpdated = tool.level === 'live';
                    const updateIndicator = isUpdated 
                        ? `<span class="research-hub-update-indicator updated" data-i18n="researchHub.data_updated">
                            <span class="blink-dot"></span>
                            <span>${t('researchHub.data_updated', 'بيانات محدثة')}</span>
                           </span>`
                        : `<span class="research-hub-update-indicator updating" data-i18n="researchHub.updating">
                            <span class="spinner"></span>
                            <span>${t('researchHub.updating', 'جار التحديث')}</span>
                           </span>`;

                    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" data-i18n="${titleKey}">${t(titleKey, tool.id)}</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" data-i18n="${badgeConfig.key}">
                                    ${t(badgeConfig.key, badgeConfig.text)}
                                </span>
                            </div>
                            <p class="text-[10px] sm:text-[11px] text-gray-300 leading-relaxed mb-2 line-clamp-1">
                                <span data-i18n="${descKey}">${t(descKey, '')}</span>
                            </p>
                            <div class="mt-1.5">
                                ${updateIndicator}
                            </div>
                        </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" data-i18n="${ctaKey}">${t(ctaKey, '')}</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?feature=${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);
                        // استخدام pathname + search + hash للحفاظ على hash إذا كان موجوداً
                        const finalUrl = url.pathname + url.search + (url.hash || '');
                        
                        // إضافة 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 أخرى
                    }
                });

                if (window.applyI18n) window.applyI18n(grid);
            }

            // 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.setAttribute('data-i18n', 'generic.loading');
                statusEl.textContent = getResearchHubText('loading');
                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.setAttribute('data-i18n', 'researchHub.failed_to_fetch_summary');
                            statusEl.textContent = getResearchHubText('failedToFetch');
                            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.setAttribute('data-i18n', 'researchHub.updated_now');
                        statusEl.textContent = getResearchHubText('updatedNow');
                        statusEl.classList.remove('text-red-400');
                        statusEl.classList.add('text-emerald-400');
                    })
                    .catch(() => {
                        statusEl.setAttribute('data-i18n', 'researchHub.failed_to_fetch_summary');
                        statusEl.textContent = getResearchHubText('failedToFetch');
                        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')) {
                    // تأخير بسيط لضمان تحديد اللغة بشكل صحيح
                    setTimeout(() => {
                        updateResearchHubUITexts();
                        renderResearchHubTools('all');
                        initResearchHubTabs();
                        initResearchHubActions();
                        fetchResearchHubSnapshot();
                    }, 100);
                }
                
                // تحديث نصوص قسم AI
                setTimeout(() => {
                    updateAISectionTexts();
                }, 100);
            });

            // تحديث النصوص عند تغيير اللغة
            window.addEventListener('languagechange', () => {
                if (document.getElementById('researchHubToolsGrid')) {
                    updateResearchHubUITexts();
                    renderResearchHubTools('all');
                }
                updateAISectionTexts();
            });

            // تحديث النصوص عند تغيير اللغة يدوياً (للتأكد من التحديث)
            if (typeof window.setLanguage === 'function') {
                const originalSetLanguage = window.setLanguage;
                window.setLanguage = function(lang) {
                    originalSetLanguage(lang);
                    setTimeout(() => {
                        if (document.getElementById('researchHubToolsGrid')) {
                            updateResearchHubUITexts();
                            renderResearchHubTools('all');
                        }
                        updateAISectionTexts();
                    }, 100);
                };
            }
        </script>

        <!-- TikTok Trends Overlay Script -->
        <script>
            // دالة ترجمة العناوين (متاحة بشكل عام قبل كل شيء)
            if (!window.translateTitleToArabic) {
                window.translateTitleToArabic = function(title, callback) {
                    if (!title || !title.trim()) {
                        callback('فيديو بدون عنوان');
                        return;
                    }
                    
                    // التحقق من اللغة الحالية
                    var currentLang = window.__UICFG?.ui?.locale || 
                                     window.currentLang || 
                                     document.documentElement.getAttribute('lang') || 
                                     'ar';
                    
                    // إذا كانت اللغة عربية والعنوان ليس عربي، قم بالترجمة
                    if (currentLang === 'ar') {
                        // التحقق من وجود حروف عربية في العنوان
                        var hasArabic = /[\u0600-\u06FF]/.test(title);
                        
                        if (!hasArabic && title.length > 0) {
                            // استخدام Google Translate API مجاناً
                            var translateUrl = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=ar&dt=t&q=' + encodeURIComponent(title);
                            
                            fetch(translateUrl)
                                .then(function(response) { return response.json(); })
                                .then(function(data) {
                                    if (data && data[0] && data[0][0] && data[0][0][0]) {
                                        var translated = data[0][0][0];
                                        callback(translated);
                                    } else {
                                        callback(title);
                                    }
                                })
                                .catch(function(error) {
                                    console.warn('[Video Translation] Translation failed:', error);
                                    callback(title);
                                });
                            return;
                        }
                    }
                    
                    // إذا كان العنوان عربي أو اللغة إنجليزية، استخدم العنوان كما هو
                    callback(title);
                };
            }

            (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 originalTitle = item.title || item.caption || item.description || 'فيديو بدون عنوان';
                    var title = vsSafe(originalTitle);

                    var creator = vsSafe(
                        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;" data-video-title="' + vsSafe(originalTitle) + '">' +
                        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>' + vsShortNumber(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>' + vsShortNumber(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">' + vsSafe(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>'
                            : '');

                    // ترجمة العنوان إذا كانت اللغة عربية
                    if (typeof window.translateTitleToArabic === 'function') {
                        window.translateTitleToArabic(originalTitle, function(translatedTitle) {
                            var titleElement = card.querySelector('[data-video-title]');
                            if (titleElement && translatedTitle !== originalTitle) {
                                titleElement.textContent = vsSafe(translatedTitle);
                            }
                        });
                    }

                    return card;
                }

            })();
        </script>

        <!-- Video Signals Script (Top 5 per platform) -->
        <script>
            (function () {
                // دالة للحصول على اللغة الحالية
                function getVideoSignalsLang() {
                    return (window.currentLang || window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar').toLowerCase();
                }

                // دالة للحصول على النص المترجم
                function getVideoSignalsText(key) {
                    const lang = getVideoSignalsLang();
                    const isEn = lang.startsWith('en');
                    
                    const translations = {
                        subtitle: isEn ? 'Top 5 videos per platform – then more in the detailed dashboard.' : 'أعلى 5 فيديوات لكل منصة – ثم المزيد في الداشبورد التفصيلي.',
                        loading: isEn ? 'Loading TikTok data…' : 'جاري تحميل بيانات TikTok…',
                        noData: isEn ? 'No data available for this platform at the moment.' : 'لا توجد بيانات متاحة حالياً لهذه المنصة.',
                        noDataShort: isEn ? 'No data available' : 'لا توجد بيانات متاحة',
                        failedToLoad: window.tl_t ? window.tl_t('common.failed_load') + ' from' : (isEn ? 'Failed to load data from' : 'تعذر جلب بيانات'),
                        failedToLoadShort: window.tl_t ? window.tl_t('common.failed_load') : (isEn ? 'Failed to load data' : 'تعذر جلب البيانات'),
                        pleaseTryLater: isEn ? 'Please try again later.' : 'يرجى المحاولة لاحقاً.',
                        noTitle: isEn ? 'Video without title' : 'فيديو بدون عنوان',
                        loadedTop5: isEn ? 'Loaded top 5 videos from' : 'تم تحميل أعلى 5 فيديوات من',
                        loadedTop5Now: isEn ? 'Loaded top 5 videos now.' : 'تم تحميل أعلى 5 فيديوات الآن.'
                    };
                    
                    return translations[key] || key;
                }

                // إعدادات المنصات
                // استخدام المسار الصحيح للـ API - يجب أن يكون /trendlens/api
                // استخدام API_BASE من auth-utils.js (Single Source of Truth)
                var API_BASE_VIDEO = (typeof window !== 'undefined' && window.API_BASE) ? window.API_BASE : '/trendlens/api';
                console.log('[Video Signals] API_BASE_VIDEO:', API_BASE_VIDEO);
                // TikTok تم حذفه - لا يوجد مصادر فيديو حالياً
                var VIDEO_SIGNALS_SOURCES = {};

                // تأمين النصوص
                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, platform) {
                    var data = raw || [];
                    // إذا كانت البيانات من endpoint الجديد /video-signals/top
                    if (raw && raw.ok && (raw.tiktok || raw.youtube)) {
                        // استخدام البيانات حسب المنصة
                        if (platform === 'tiktok' && Array.isArray(raw.tiktok)) {
                            data = raw.tiktok;
                        } else if (platform === 'youtube' && Array.isArray(raw.youtube)) {
                            data = raw.youtube;
                        } else {
                            data = [];
                        }
                    } else if (Array.isArray(data)) {
                        // لا حاجة لتغييرها
                    } else if (Array.isArray(data.items)) {
                        data = data.items;
                    } else if (Array.isArray(data.videos)) {
                        data = data.videos;
                    } else if (Array.isArray(data.results)) {
                        data = data.results;
                    } else {
                        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 || 
                                   item.desc ||
                                   item.text ||
                                   getVideoSignalsText('noTitle');
                        
                        // إذا كان العنوان فارغ، استخدم النص الافتراضي
                        if (!title || title.trim() === '') {
                            title = getVideoSignalsText('noTitle');
                        }
                        
                        var channel = item.channel_title || 
                                     item.channel || 
                                     item.creator || 
                                     item.author || 
                                     item.author_username ||
                                     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 || item.cover_url || 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) {
                        console.warn('[Video Signals] Container not found');
                        return;
                    }

                    console.log('[Video Signals] Rendering for:', sourceKey, 'Raw data:', rawData);
                    var items = normalizeVideoItems(rawData, sourceKey);
                    console.log('[Video Signals] Normalized items:', items.length, items);
                    // Debug: طباعة أول عنصر لمعرفة البنية
                    if (items.length > 0) {
                        console.log('[Video Signals] First item structure:', items[0]);
                        console.log('[Video Signals] First item title:', items[0].title);
                        console.log('[Video Signals] First item raw (full):', JSON.stringify(items[0].raw, null, 2));
                        // طباعة جميع المفاتيح في raw
                        if (items[0].raw) {
                            console.log('[Video Signals] First item raw keys:', Object.keys(items[0].raw));
                            console.log('[Video Signals] First item raw.title:', items[0].raw.title);
                            console.log('[Video Signals] First item raw.caption:', items[0].raw.caption);
                            console.log('[Video Signals] First item raw.description:', items[0].raw.description);
                            console.log('[Video Signals] First item raw.desc:', items[0].raw.desc);
                        }
                    }
                    
                    if (!items.length) {
                        container.innerHTML = '<div class="text-center py-8 col-span-full" style="color: var(--text-muted);">' + getVideoSignalsText('noData') + '</div>';
                        if (statusEl) {
                            statusEl.textContent = getVideoSignalsText('noDataShort');
                            statusEl.classList.remove('text-gray-400', 'text-emerald-400');
                            statusEl.classList.add('text-yellow-400');
                        }
                        if (statusTextEl) statusTextEl.textContent = getVideoSignalsText('noDataShort');
                        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 = '';

                    // دالة لترجمة العنوان إلى العربية (متاحة بشكل عام)
                    if (!window.translateTitleToArabic) {
                        window.translateTitleToArabic = function(title, callback) {
                            if (!title || !title.trim()) {
                                callback('فيديو بدون عنوان');
                                return;
                            }
                            
                            // التحقق من اللغة الحالية
                            var currentLang = window.__UICFG?.ui?.locale || 
                                             window.currentLang || 
                                             document.documentElement.getAttribute('lang') || 
                                             'ar';
                            
                            // إذا كانت اللغة عربية والعنوان ليس عربي، قم بالترجمة
                            if (currentLang === 'ar') {
                                // التحقق من وجود حروف عربية في العنوان
                                var hasArabic = /[\u0600-\u06FF]/.test(title);
                                
                                if (!hasArabic && title.length > 0) {
                                    // استخدام Google Translate API مجاناً
                                    var translateUrl = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=ar&dt=t&q=' + encodeURIComponent(title);
                                    
                                    fetch(translateUrl)
                                        .then(function(response) { return response.json(); })
                                        .then(function(data) {
                                            if (data && data[0] && data[0][0] && data[0][0][0]) {
                                                var translated = data[0][0][0];
                                                callback(translated);
                                            } else {
                                                callback(title);
                                            }
                                        })
                                        .catch(function(error) {
                                            console.warn('[Video Signals] Translation failed:', error);
                                            callback(title);
                                        });
                                    return;
                                }
                            }
                            
                            // إذا كان العنوان عربي أو اللغة إنجليزية، استخدم العنوان كما هو
                            callback(title);
                        };
                    }
                    
                    // دالة محلية للاستخدام في هذا الـ scope
                    var translateTitleToArabic = window.translateTitleToArabic;
                    
                    // دالة لبناء كرت فيديو
                    function buildVideoCard(item, platformKey) {
                        // استخدام البيانات المعيارية من normalizeVideoItems أولاً
                        var videoId = item.videoId || item.video_id || item.id || item.tiktok_id || null;
                        var platform = item.platform || platformKey || (sourceKey === 'tiktok' ? 'tiktok' : 'youtube');
                        var videoUrl = item.url || item.video_url || 
                            (platform === 'tiktok' && videoId 
                                ? 'https://www.tiktok.com/@_/video/' + encodeURIComponent(videoId)
                                : platform === 'youtube' && videoId
                                    ? 'https://www.youtube.com/watch?v=' + encodeURIComponent(videoId)
                                    : null);
                        // استخدام title من normalizeVideoItems أولاً (هذا هو العنوان المعياري)
                        var originalTitle = item.title || 
                                          (item.raw ? (item.raw.title || item.raw.caption || item.raw.description) : null) ||
                                          'فيديو بدون عنوان';
                        
                        // إذا كان العنوان هو "فيديو بدون عنوان" من API، لا نحاول ترجمته
                        var isDefaultTitle = originalTitle === 'فيديو بدون عنوان' || 
                                           originalTitle === 'فيديو بدون عنوان' ||
                                           !originalTitle || 
                                           originalTitle.trim() === '';
                        
                        var title = vsSafe(originalTitle);
                        // استخدام channel من normalizeVideoItems أولاً
                        var creator = vsSafe(item.channel || item.creator || item.author || item.username || 
                                           (item.raw ? (item.raw.creator || item.raw.author || item.raw.username) : null) ||
                                           '');
                        var views = item.views || item.view_count || item.play_count || null;
                        var likes = item.likes || item.like_count || null;
                        var trendScore = item.trendScore || item.trend_score || item.score || null;
                        var thumbnail = item.thumbnail || item.thumbnail_url || item.cover || null;
                        
                        var chartId = 'videoChart_' + (videoId || Math.random().toString(36).substr(2, 9));
                        var card = document.createElement('article');
                        card.className = 'dashboard-card';
                        card.style.cssText = 'min-height: auto; padding: 0.75rem;';
                        
                        var platformIcon = platform === 'tiktok' ? 'fab fa-tiktok' : 'fab fa-youtube';
                        var platformColor = platform === 'tiktok' ? '#ec4899' : '#ff0000';
                        var platformName = platform === 'tiktok' ? 'TikTok' : 'YouTube';
                        
                        // مصغرة الفيديو بشكل مربع مع overlay زر التشغيل
                        var thumbnailHtml = '';
                        if (thumbnail) {
                            thumbnailHtml = 
                                '<div class="relative w-full aspect-square rounded-lg overflow-hidden mb-3 bg-gray-800/50 group cursor-pointer" style="position: relative;">' +
                                '<img src="' + thumbnail + '" alt="' + title + '" ' +
                                'class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" ' +
                                'onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';">' +
                                '<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>' +
                                '<div class="absolute inset-0 flex items-center justify-center bg-gray-900/80" style="display: none;">' +
                                '<i class="' + platformIcon + ' text-4xl text-gray-600"></i>' +
                                '</div>' +
                                (videoUrl ? 
                                    '<a href="' + videoUrl + '" target="_blank" rel="noopener" ' +
                                    'class="absolute inset-0 flex items-center justify-center bg-black/30 hover:bg-black/40 transition-all duration-300 group-hover:bg-black/50">' +
                                    '<div class="flex flex-col items-center gap-2">' +
                                    '<div class="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform">' +
                                    '<i class="fas fa-play text-xl ' + (platform === 'tiktok' ? 'text-pink-600' : 'text-red-600') + ' ml-1"></i>' +
                                    '</div>' +
                                    '<span class="text-white text-xs font-semibold bg-black/50 px-2 py-1 rounded backdrop-blur-sm">' + platformName + '</span>' +
                                    '</div>' +
                                    '</a>' : '') +
                                (trendScore !== null ?
                                    '<div class="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-500/90 backdrop-blur-sm text-emerald-100 border border-emerald-400/50 shadow-lg">' +
                                    '<i class="fas fa-bolt text-[10px]"></i>' +
                                    '<span class="text-[10px] font-bold">' + vsSafe(trendScore) + '</span>' +
                                    '</div>' : '') +
                                '</div>';
                        } else {
                            // Fallback إذا لم تكن هناك مصغرة
                            thumbnailHtml = 
                                '<div class="relative w-full aspect-square rounded-lg overflow-hidden mb-3 bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center group cursor-pointer">' +
                                '<i class="' + platformIcon + ' text-6xl text-gray-700"></i>' +
                                (videoUrl ? 
                                    '<a href="' + videoUrl + '" target="_blank" rel="noopener" ' +
                                    'class="absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/30 transition-all duration-300">' +
                                    '<div class="flex flex-col items-center gap-2">' +
                                    '<div class="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform">' +
                                    '<i class="fas fa-play text-xl ' + (platform === 'tiktok' ? 'text-pink-600' : 'text-red-600') + ' ml-1"></i>' +
                                    '</div>' +
                                    '<span class="text-white text-xs font-semibold bg-black/50 px-2 py-1 rounded backdrop-blur-sm">' + platformName + '</span>' +
                                    '</div>' +
                                    '</a>' : '') +
                                (trendScore !== null ?
                                    '<div class="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-500/90 backdrop-blur-sm text-emerald-100 border border-emerald-400/50 shadow-lg">' +
                                    '<i class="fas fa-bolt text-[10px]"></i>' +
                                    '<span class="text-[10px] font-bold">' + vsSafe(trendScore) + '</span>' +
                                    '</div>' : '') +
                                '</div>';
                        }
                        
                        // بناء الكارت مع العنوان الأصلي أولاً
                        card.innerHTML =
                            '<div class="dashboard-card-header" style="padding-bottom: 0.5rem; margin-bottom: 0.5rem;">' +
                            '<div class="flex items-center gap-2 mb-1">' +
                            '<i class="' + platformIcon + ' text-primary text-sm"></i>' +
                            '<h4 class="dashboard-card-title text-xs line-clamp-2" style="margin: 0; font-weight: 600;" data-video-title="' + vsSafe(originalTitle) + '">' +
                            title +
                            '</h4>' +
                            '</div>' +
                            (creator ? '<p class="text-[10px] mt-0.5" style="color: var(--text-muted);">@' + creator + '</p>' : '') +
                            '</div>' +
                            thumbnailHtml +
                            '<div class="flex items-center justify-between gap-2 text-[10px] mt-2">' +
                            (views !== null
                                ? '<div class="flex items-center gap-1" style="color: var(--text-main);">' +
                                  '<i class="fas fa-play text-[9px] text-primary"></i>' +
                                  '<span>' + vsShortNumber(views) + '</span>' +
                                  '</div>'
                                : '') +
                            (likes !== null
                                ? '<div class="flex items-center gap-1" style="color: var(--text-main);">' +
                                  '<i class="fas fa-heart text-[9px] text-pink-400"></i>' +
                                  '<span>' + vsShortNumber(likes) + '</span>' +
                                  '</div>'
                                : '') +
                            '</div>';
                        
                        // ترجمة العنوان إذا كانت اللغة عربية (فقط إذا لم يكن العنوان افتراضي)
                        if (!isDefaultTitle && typeof window.translateTitleToArabic === 'function') {
                            window.translateTitleToArabic(originalTitle, function(translatedTitle) {
                                var titleElement = card.querySelector('[data-video-title]');
                                if (titleElement && translatedTitle && translatedTitle !== originalTitle && translatedTitle !== 'فيديو بدون عنوان') {
                                    titleElement.textContent = vsSafe(translatedTitle);
                                }
                            });
                        }
                        
                        return card;
                    }

                    // دالة مساعدة لرسم الشارت باستخدام Chart.js (معرفة خارج forEach للوصول العام)
                    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;
                        
                        // Load Chart.js lazily before creating chart
                        ensureChartJsLoaded().then(() => {
                            // تدمير الشارت السابق إن وجد
                            if (canvas.chartInstance) {
                                canvas.chartInstance.destroy();
                            }
                            
                            var chartColor = source === 'tiktok' ? '#ec4899' : '#0ea5e9';
                            
                            if (typeof Chart === 'undefined') {
                                console.error('Chart.js not available');
                                return;
                            }
                            
                            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 }
                                }
                            });
                        }).catch(err => {
                            console.error('Failed to load Chart.js for TikTok overlay:', err);
                        });
                    }

                    top5.forEach(function (item, index) {
                        // استخدام buildVideoCard مع تمرير sourceKey
                        var card = buildVideoCard(item, sourceKey);
                        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);
                    });

                    if (statusTextEl) {
                        var platformLabel = sourceKey === 'tiktok'
                            ? 'TikTok'
                            : sourceKey === 'youtube'
                                ? 'YouTube'
                                : '';
                        statusTextEl.textContent = platformLabel
                            ? (getVideoSignalsText('loadedTop5') + ' ' + platformLabel + ' ' + getVideoSignalsText('loadedTop5Now'))
                            : getVideoSignalsText('loadedTop5Now');
                    }
                }

                function loadVideoSignals(sourceKey) {
                    // ✅ TikTok Product Discovery — أعلى 5 منتجات ترند + AI Insights
                    var _tpLoaded    = false;
                    var _tpInsights  = {}; // cache: keyword_region → insight

                    function _tpShort(n) {
                        n = Number(n) || 0;
                        if (n >= 1e6) return (n/1e6).toFixed(1).replace(/\.0$/,'')+'M';
                        if (n >= 1e3) return (n/1e3).toFixed(1).replace(/\.0$/,'')+'K';
                        return n.toString();
                    }
                    function _tpSafe(s) {
                        return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
                    }
                    function _tpBadge(badge) {
                        if (!badge) return '';
                        var cls = badge.includes('High') ? 'bg-yellow-500/20 text-yellow-300 border border-yellow-500/30'
                                : badge.includes('Early') ? 'bg-blue-500/20 text-blue-300 border border-blue-500/30'
                                : 'bg-primary/15 text-primary border border-primary/30';
                        return '<span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-semibold '+cls+'">'+_tpSafe(badge)+'</span>';
                    }
                    function _tpCategoryIcon(cat) {
                        var icons = {Beauty:'fas fa-spa',Kitchen:'fas fa-utensils',Fitness:'fas fa-dumbbell',
                            Home:'fas fa-home',Electronics:'fas fa-microchip',Pets:'fas fa-paw',
                            Fashion:'fas fa-tshirt',Kids:'fas fa-baby',Car:'fas fa-car',
                            Tools:'fas fa-tools',General:'fas fa-box'};
                        return icons[cat] || 'fas fa-box';
                    }
                    function _tpGrowthColor(g) {
                        g = parseFloat(g)||0;
                        if (g >= 200) return 'text-green-400';
                        if (g >= 50)  return 'text-yellow-400';
                        if (g < 0)    return 'text-red-400';
                        return 'text-gray-400';
                    }

                    function _buildProductCard(item, rank, insight) {
                        var kw       = item.product_keyword || '';
                        var cat      = item.category || 'General';
                        var region   = item.region || '';
                        var score    = parseFloat(item.trend_score||0).toFixed(1);
                        var sales    = parseFloat(item.sales_signal||0).toFixed(1);
                        var growth   = parseFloat(item.growth_rate||0).toFixed(0);
                        var vcount   = _tpShort(item.video_count||0);
                        var badge    = item.product_badge || '';
                        var hashtag  = item.top_hashtag || '';
                        var amazon   = item.amazon_url || '';
                        var temu     = item.temu_url || '';
                        var trendUp  = parseFloat(item.growth_rate||0) >= 0;
                        var gColor   = _tpGrowthColor(item.growth_rate);

                        // AI Insight section
                        var aiHtml = '';
                        if (insight) {
                            var priceMin  = parseFloat(insight.estimated_price_min||0).toFixed(0);
                            var priceMax  = parseFloat(insight.estimated_price_max||0).toFixed(0);
                            var currency  = insight.estimated_price_currency || 'USD';
                            var platform  = insight.recommended_platform || '';
                            var compLevel = insight.competition_level || '';
                            var why       = insight.why_trending || '';
                            var compCls   = compLevel === 'Low' ? 'text-green-400'
                                          : compLevel === 'High' ? 'text-red-400' : 'text-yellow-400';
                            var compAr    = compLevel === 'Low' ? 'منخفضة' : compLevel === 'High' ? 'مرتفعة' : 'متوسطة';

                            aiHtml =
                              '<div class="rounded-lg bg-primary/5 border border-primary/20 p-2 mt-1">' +
                                '<div class="flex items-center gap-1 mb-1.5">' +
                                  '<span class="text-[10px] font-bold text-primary">🔥 AI Insight</span>' +
                                '</div>' +
                                (why ? '<p class="text-[10px] text-gray-300 leading-relaxed line-clamp-2 mb-1.5">'+_tpSafe(why.substring(0,130))+'</p>' : '') +
                                '<div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[10px]">' +
                                  '<span class="text-gray-400">السعر:</span>' +
                                  '<span class="text-white font-medium">'+priceMin+'–'+priceMax+' '+_tpSafe(currency)+'</span>' +
                                  '<span class="text-gray-400">المنافسة:</span>' +
                                  '<span class="'+compCls+' font-medium">'+_tpSafe(compAr)+'</span>' +
                                  (platform ? '<span class="text-gray-400">أفضل منصة:</span><span class="text-primary/80 font-medium truncate">'+_tpSafe(platform.substring(0,30))+'</span>' : '') +
                                '</div>' +
                              '</div>';
                        } else {
                            aiHtml =
                              '<div class="rounded-lg bg-white/3 border border-white/5 p-2 mt-1 flex items-center gap-2 text-[10px] text-gray-500">' +
                                '<i class="fas fa-robot text-gray-600"></i>' +
                                'AI Insight جاري التحليل…' +
                              '</div>';
                        }

                        return '<div class="glass-effect rounded-xl p-3 border border-white/5 hover:border-primary/30 transition-colors flex flex-col gap-2">' +

                            '<div class="flex items-start justify-between gap-2">' +
                              '<div class="flex items-center gap-2 min-w-0">' +
                                '<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">' +
                                  '<i class="'+_tpCategoryIcon(cat)+' text-primary text-xs"></i>' +
                                '</div>' +
                                '<div class="min-w-0">' +
                                  '<p class="text-sm font-semibold text-white capitalize truncate" title="'+_tpSafe(kw)+'">'+_tpSafe(kw.substring(0,28))+'</p>' +
                                  '<p class="text-[10px] text-gray-500">'+_tpSafe(cat)+' · '+_tpSafe(region)+'</p>' +
                                '</div>' +
                              '</div>' +
                              '<span class="text-lg font-black text-white/10 flex-shrink-0">#'+rank+'</span>' +
                            '</div>' +

                            (badge ? '<div>'+_tpBadge(badge)+'</div>' : '') +

                            '<div class="grid grid-cols-3 gap-1 text-[10px]">' +
                              '<div class="bg-white/3 rounded-lg p-1.5 text-center">' +
                                '<div class="text-primary font-bold text-xs">'+score+'</div>' +
                                '<div class="text-gray-500">Trend Score</div>' +
                              '</div>' +
                              '<div class="bg-white/3 rounded-lg p-1.5 text-center">' +
                                '<div class="text-yellow-400 font-bold text-xs">'+sales+'</div>' +
                                '<div class="text-gray-500">Sales Signal</div>' +
                              '</div>' +
                              '<div class="bg-white/3 rounded-lg p-1.5 text-center">' +
                                '<div class="'+gColor+' font-bold text-xs">'+(trendUp?'+':'')+growth+'%</div>' +
                                '<div class="text-gray-500">نمو</div>' +
                              '</div>' +
                            '</div>' +

                            aiHtml +

                            '<div class="flex items-center gap-1.5 pt-1.5 border-t border-white/5">' +
                              (amazon ? '<a href="'+_tpSafe(amazon)+'" target="_blank" rel="noopener" class="flex-1 text-center text-[9px] bg-orange-500/10 text-orange-300 rounded px-1 py-0.5 hover:bg-orange-500/20 transition">Amazon</a>' : '') +
                              (temu   ? '<a href="'+_tpSafe(temu)+'"   target="_blank" rel="noopener" class="flex-1 text-center text-[9px] bg-orange-400/10 text-orange-200 rounded px-1 py-0.5 hover:bg-orange-400/20 transition">Temu</a>'   : '') +
                              '<a href="/trendlens/dashboard.html#tab-tiktok" class="flex-1 text-center text-[9px] bg-primary/10 text-primary rounded px-1 py-0.5 hover:bg-primary/20 transition">المزيد</a>' +
                            '</div>' +

                        '</div>';
                    }

                    async function loadTikTokTrends() {
                        if (_tpLoaded) return;
                        var container = document.getElementById('videoSignalsBody');
                        if (!container) return;

                        try {
                            var apiBase = (typeof window.API_BASE !== 'undefined' ? window.API_BASE : '/trendlens/api');

                            // 1) أولاً: جلب فيديوهات من السكربت (tiktok_videos) عبر video-signals
                            var vsResp = await fetch(apiBase + '/research/video-signals/top?platform=tiktok&limit=5', { credentials: 'include' });
                            var vsData = vsResp.ok ? await vsResp.json() : {};
                            if (vsData.ok && vsData.tiktok && vsData.tiktok.length > 0) {
                                if (typeof renderVideoSignals === 'function') {
                                    renderVideoSignals('tiktok', vsData);
                                }
                                _tpLoaded = true;
                                return;
                            }

                            // 2) Fallback: Creative Center (trending_products) إن وُجد
                            var [prodResp, insResp] = await Promise.all([
                                fetch(apiBase + '/tiktok/public/products?limit=5&order_by=sales_signal', { credentials: 'include' }),
                                fetch(apiBase + '/tiktok/public/insights?limit=20', { credentials: 'include' }),
                            ]);

                            var prodData = prodResp.ok ? await prodResp.json() : {};
                            var insData  = insResp.ok  ? await insResp.json()  : {};

                            var items    = (prodData && prodData.items) ? prodData.items : [];
                            var insights = (insData  && insData.items)  ? insData.items  : [];

                            insights.forEach(function(ins) {
                                var key = (ins.product_keyword||'') + '|' + (ins.region||'');
                                _tpInsights[key] = ins;
                            });

                            if (items.length > 0) {
                                container.innerHTML = items.map(function(item, i) {
                                    var key     = (item.product_keyword||'') + '|' + (item.region||'');
                                    var insight = _tpInsights[key] || null;
                                    return _buildProductCard(item, i+1, insight);
                                }).join('');
                                _tpLoaded = true;
                                return;
                            }

                            // 3) لا توجد بيانات من أي مصدر
                            container.innerHTML = '<div class="text-center py-10 col-span-full text-gray-500"><i class="fab fa-tiktok text-4xl mb-3 opacity-30 block"></i>لا توجد إشارات TikTok حتى الآن<br><span class="text-xs mt-1 block text-gray-600">شغّل tiktok_scraper.py لبدء جمع البيانات</span></div>';
                        } catch (err) {
                            console.warn('[TikTok Products]', err);
                            container.innerHTML = '<div class="text-center py-8 col-span-full text-gray-500"><i class="fas fa-exclamation-circle mb-2 block text-xl"></i>تعذّر تحميل البيانات</div>';
                        }
                    }

                    document.addEventListener('DOMContentLoaded', function () {
                        loadTikTokTrends();
                    });
                    window.addEventListener('languagechange', function() {});
            })();
        </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'];
                
                // تعريف API_BASE في نطاق الدالة
                const API_BASE = window.API_BASE || '/api';
                
                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: '/trendlens/assets/brand/logo.svg', key: 'product_gaming_chair' },
                        { name: 'Smart Watch', growth: '+65%', image: '/trendlens/assets/brand/logo.svg', key: 'product_smart_watch' },
                        { name: 'Wireless Earbuds', growth: '+58%', image: '/trendlens/assets/brand/logo.svg', key: 'product_wireless_earbuds' },
                        { name: 'Laptop Stand', growth: '+45%', image: '/trendlens/assets/brand/logo.svg', key: 'product_laptop_stand' },
                        { name: 'Mechanical Keyboard', growth: '+38%', image: '/trendlens/assets/brand/logo.svg', key: 'product_mechanical_keyboard' },
                        { name: 'USB-C Hub', growth: '+32%', image: '/trendlens/assets/brand/logo.svg', 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='/trendlens/assets/brand/logo.svg'">
                                <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 || `/trendlens/assets/brand/logo.svg`;
                                        return `
                                            <div class="exploding-product-card">
                                                <img src="${image}" alt="${name}" class="exploding-product-card-image" onerror="this.src='/trendlens/assets/brand/logo.svg'">
                                                <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: '/trendlens/assets/brand/logo.svg', key: 'ebook_ecommerce_mastery' },
                    { title: 'Social Media Marketing', cover: '/trendlens/assets/brand/logo.svg', key: 'ebook_social_media_marketing' },
                    { title: 'Dropshipping Guide', cover: '/trendlens/assets/brand/logo.svg', key: 'ebook_dropshipping_guide' },
                    { title: 'Amazon FBA Secrets', cover: '/trendlens/assets/brand/logo.svg', key: 'ebook_amazon_fba_secrets' },
                    { title: 'Digital Marketing', cover: '/trendlens/assets/brand/logo.svg', key: 'ebook_digital_marketing' },
                    { title: 'Business Growth', cover: '/trendlens/assets/brand/logo.svg', 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='/trendlens/assets/brand/logo.svg'">
                                <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
                const apiBase = window.API_BASE || '/trendlens/api';
                fetch(apiBase + '/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 || '/trendlens/assets/brand/logo.svg';
                                    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='/trendlens/assets/brand/logo.svg'">
                                            <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);
                    });
            }

            // Lazy Load Chart.js - Load only when needed
            let chartJsLoading = false;
            let chartJsLoaded = false;
            
            async function ensureChartJsLoaded() {
                // If already loaded, return immediately
                if (typeof Chart !== 'undefined' && chartJsLoaded) {
                    return Promise.resolve();
                }
                
                // If currently loading, wait for it
                if (chartJsLoading) {
                    return new Promise((resolve) => {
                        const checkInterval = setInterval(() => {
                            if (chartJsLoaded || typeof Chart !== 'undefined') {
                                clearInterval(checkInterval);
                                resolve();
                            }
                        }, 100);
                    });
                }
                
                // Start loading
                chartJsLoading = true;
                
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js';
                    script.async = true;
                    
                    script.onload = () => {
                        chartJsLoaded = true;
                        chartJsLoading = false;
                        console.log('✅ Chart.js loaded successfully');
                        resolve();
                    };
                    
                    script.onerror = () => {
                        chartJsLoading = false;
                        console.error('❌ Failed to load Chart.js');
                        reject(new Error('Chart.js failed to load'));
                    };
                    
                    document.head.appendChild(script);
                    });
            }

            // Load Analytics Charts
            async function loadDashboardAnalytics() {
                try {
                    await ensureChartJsLoaded();
                loadAllCharts();
                } catch (error) {
                    console.error('Charts temporarily unavailable:', error);
                    // Show fallback message if needed
                    const chartContainers = document.querySelectorAll('[id*="Chart"], [id*="chart"]');
                    chartContainers.forEach(container => {
                        if (container && !container.textContent.includes('unavailable')) {
                            container.innerHTML = '<p class="text-gray-400 text-sm">Charts temporarily unavailable</p>';
                        }
                    });
                }
            }
            
            // Load all charts (for main dashboard and analytics tab)
            function loadAllCharts() {
                if (typeof Chart === 'undefined') {
                    console.warn('Chart.js not loaded yet, retrying...');
                    setTimeout(() => {
                        ensureChartJsLoaded().then(() => loadAllCharts()).catch(() => {
                            console.error('Charts temporarily unavailable');
                        });
                    }, 500);
                    return;
                }
                
                // Revenue Chart (Main Dashboard)
                const revenueCtxMain = document.getElementById('revenueChartMain');
                if (revenueCtxMain) {
                    if (window.revenueChartMainInstance) {
                        window.revenueChartMainInstance.destroy();
                    }
                    if (typeof Chart === 'undefined') {
                        // Fallback to PNG if Chart.js not loaded
                        revenueCtxMain.parentElement.innerHTML = `
                            <img src="/trendlens/assets/charts/demo/revenue-chart.png" 
                                 alt="Revenue Analytics Chart" 
                                 class="w-full h-auto rounded-lg opacity-90"
                                 onerror="this.parentElement.innerHTML='<p class=\\'text-gray-400 text-sm text-center py-4\\'>Chart temporarily unavailable</p>'">
                        `;
                        return;
                    }
                    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();
                    }
                    if (typeof Chart === 'undefined') {
                        // Fallback to PNG if Chart.js not loaded
                        categoriesCtxMain.parentElement.innerHTML = `
                            <img src="/trendlens/assets/charts/demo/categories-chart.png" 
                                 alt="Top Categories Chart" 
                                 class="w-full h-auto rounded-lg opacity-90"
                                 onerror="this.parentElement.innerHTML='<p class=\\'text-gray-400 text-sm text-center py-4\\'>Chart temporarily unavailable</p>'">
                        `;
                        return;
                    }
                    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 = getAuthToken(); // Single Source of Truth
                    const response = await fetch(`${API_BASE}/user/check-social`, {
                        method: 'POST',
                        headers: {
                            ...authHeaders(),
                            '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) {
                // overview مُلغى — redirect to analytics
                if (tabName === 'overview') tabName = 'analytics';

                // Hide all tabs (except the permanently-hidden overview)
                document.querySelectorAll('.main-tab-content').forEach(tab => {
                    if (tab.id !== 'mainTab-overview') {
                        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 === 'analytics') {
                        loadMainAnalytics();
                    } else if (tabName === 'exploding') {
                        loadMainExplodingProducts();
                    } else if (tabName === 'shipping') {
                        loadMainShipping();
                    } else if (tabName === 'markets') {
                        loadMainMarkets();
                    } else if (tabName === 'ebooks') {
                        loadMainEbooks();
                    }
                }, 200);
            }

            // Load Main Charts
            async function loadMainCharts() {
                try {
                    await ensureChartJsLoaded();
                } catch (error) {
                    console.error('Chart.js failed to load, using PNG fallbacks');
                    // Fallback to PNG images
                    const revenueCtx = document.getElementById('mainRevenueChart');
                    if (revenueCtx) {
                        revenueCtx.parentElement.innerHTML = `
                            <img src="/trendlens/assets/charts/demo/revenue-chart.png" 
                                 alt="Revenue Analytics" 
                                 class="w-full h-auto rounded-lg opacity-90"
                                 onerror="this.parentElement.innerHTML='<p class=\\'text-gray-400 text-sm text-center py-4\\'>Chart temporarily unavailable</p>'">
                        `;
                    }
                    const categoriesCtx = document.getElementById('mainCategoriesChart');
                    if (categoriesCtx) {
                        categoriesCtx.parentElement.innerHTML = `
                            <img src="/trendlens/assets/charts/demo/categories-chart.png" 
                                 alt="Top Categories" 
                                 class="w-full h-auto rounded-lg opacity-90"
                                 onerror="this.parentElement.innerHTML='<p class=\\'text-gray-400 text-sm text-center py-4\\'>Chart temporarily unavailable</p>'">
                        `;
                    }
                    const targetGaugeCtx = document.getElementById('mainTargetGauge');
                    if (targetGaugeCtx) {
                        const container = targetGaugeCtx.closest('.relative') || targetGaugeCtx.parentElement;
                        if (container) {
                            container.innerHTML = `
                                <img src="/trendlens/assets/charts/demo/target-gauge.png" 
                                     alt="Monthly Target" 
                                     class="w-36 h-36 mx-auto rounded-lg opacity-90"
                                     onerror="this.parentElement.innerHTML='<p class=\\'text-gray-400 text-sm text-center py-4\\'>Chart temporarily unavailable</p>'">
                                <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">from last month</span> <span class="text-emerald-400">+8.02%</span></div>
                                </div>
                            `;
                        }
                    }
                    return;
                }
                
                setTimeout(() => {
                    const themeRaw = (document.documentElement.getAttribute('data-theme') || 'dark');
                    const theme = String(themeRaw).toLowerCase();
                    const isLightTheme = theme === 'light';
                    const chartTickColor = isLightTheme ? 'rgba(15, 23, 42, 0.65)' : 'rgba(255, 255, 255, 0.7)';
                    const chartGridColor = isLightTheme ? 'rgba(15, 23, 42, 0.10)' : 'rgba(255, 255, 255, 0.1)';
                    const chartLegendColor = chartTickColor;
                    const gaugeRemainderColor = isLightTheme ? 'rgba(15, 23, 42, 0.08)' : 'rgba(255, 255, 255, 0.1)';

                    // 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: chartTickColor }, grid: { color: chartGridColor } },
                                    x: { ticks: { color: chartTickColor }, grid: { color: chartGridColor } }
                                }
                            }
                        });
                    }
                    
                    // 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: chartLegendColor } } }
                            }
                        });
                    }
                    
                    // 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)', gaugeRemainderColor],
                                    borderWidth: 0
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                cutout: '75%',
                                plugins: { legend: { display: false } }
                            }
                        });
                    }
                }, 300);
            }

            // Repaint charts on theme change (light/dark)
            window.addEventListener('themechange', function () {
                try {
                    // Only reload if charts exist on the page
                    if (document.getElementById('mainRevenueChart') || document.getElementById('mainCategoriesChart') || document.getElementById('mainTargetGauge')) {
                        loadMainCharts();
                    }
                } catch (e) {
                    // ignore
                }
            });

            // 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 || `/trendlens/assets/brand/logo.svg`;
                                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='/trendlens/assets/brand/logo.svg'">
                                        <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 || `/trendlens/assets/brand/logo.svg`;
                            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='/trendlens/assets/brand/logo.svg'">
                                    <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">${window.tl_t('no_books_available', 'No books available')}</p>`;
                    }
                } catch (error) {
                    console.error('Error loading ebooks:', error);
                    container.innerHTML = '<p class="text-red-400 text-center col-span-full">حدث خطأ في تحميل الكتب</p>';
                }
            }

            // Global Analytics State
            window.analyticsState = {
                country: 'SA',
                timeRange: 'yearly',
                showGlobalData: true,
                userRevenueData: null,
                marketConsumptionData: null
            };

            // Load Main Analytics with Global Market Data
            async function loadMainAnalytics() {
                setTimeout(async () => {
                    await refreshAnalyticsData();
                }, 300);
            }

            // Refresh Analytics Data
            async function refreshAnalyticsData() {
                const country = window.analyticsState.country || 'SA';
                const timeRange = window.analyticsState.timeRange || 'yearly';
                const showGlobal = window.analyticsState.showGlobalData !== false;

                try {
                    // Fetch market consumption data with store revenue
                    const marketResponse = await fetch(`/trendlens/api/analytics/global-consumption?country=${country}&time_range=${timeRange}&include_store_revenue=true`, {
                        credentials: 'include'
                    });
                    
                    if (!marketResponse.ok) {
                        throw new Error(`HTTP ${marketResponse.status}`);
                    }
                    
                    const marketData = await marketResponse.json();

                    if (marketData.ok) {
                        // Check market status
                        const marketStatus = marketData.market_status || "available";
                        
                        // Store market data
                        window.analyticsState.marketConsumptionData = marketData.data || [];
                        window.analyticsState.marketStatus = marketStatus;
                        
                        // Extract store revenue from response
                        if (marketData.store_revenue && marketData.store_revenue.length > 0) {
                            window.analyticsState.userRevenueData = {
                                labels: marketData.store_revenue.map(d => d.date || d.label || ''),
                                values: marketData.store_revenue.map(d => d.value || 0)
                            };
                        } else {
                            // Fetch store revenue separately if not included
                            const userRevenueData = await fetchUserRevenueData(timeRange);
                            window.analyticsState.userRevenueData = userRevenueData;
                        }
                        
                        // Update UI (only if market data available)
                        if (marketStatus === "available") {
                            updateMarketStats(marketData);
                            updateHeatmap(marketData.data || []);
                            generateAIInsight(marketData);
                            
                            // Update chart with real data
                            updateDualChart(
                                window.analyticsState.userRevenueData,
                                window.analyticsState.marketConsumptionData,
                                showGlobal
                            );
                        } else {
                            // Market data unavailable - show message and chart with store revenue only
                            showMarketUnavailableMessage();
                            updateMarketStatsUnavailable(marketData);
                            generateAIInsight(marketData);
                            
                            // Update chart with store revenue only
                            updateDualChart(
                                window.analyticsState.userRevenueData,
                                [],
                                false  // Don't show market line
                            );
                        }
                    }
                } catch (error) {
                    console.error('Error loading analytics:', error);
                    // Show error message instead of mock data
                    const insightEl = document.getElementById('analyticsAIInsight');
                    if (insightEl) {
                        insightEl.textContent = 'حدث خطأ في تحميل البيانات. يرجى المحاولة مرة أخرى.';
                    }
                }
            }

            // Fetch User Revenue Data (Real API)
            async function fetchUserRevenueData(timeRange) {
                try {
                    const response = await fetch(`/trendlens/api/analytics/store-revenue?time_range=${timeRange}`, {
                        credentials: 'include'
                    });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    
                    const data = await response.json();
                    
                    if (data.ok && data.data && data.data.length > 0) {
                        return {
                            labels: data.labels || [],
                            values: data.data.map(d => d.value || 0)
                        };
                    }
                    
                    // Return empty data if no revenue found
                    return {
                        labels: [],
                        values: []
                    };
                } catch (error) {
                    console.error('Error fetching store revenue:', error);
                    // Return empty data instead of mock data
                    return {
                        labels: [],
                        values: []
                    };
                }
            }

            // REMOVED: Mock data generators - using real data only

            // Update Dual Chart (Bars + Line)
            function updateDualChart(revenueData, marketData, showGlobal = true) {
                const revenueCtx = document.getElementById('mainAnalyticsRevenueChart');
                if (!revenueCtx || typeof Chart === 'undefined') return;

                if (window.mainAnalyticsRevenueChartInstance) {
                    window.mainAnalyticsRevenueChartInstance.destroy();
                }

                // Normalize data lengths
                const labels = revenueData.labels || marketData.labels || [];
                const revenueValues = revenueData.values || [];
                const marketValues = marketData && marketData.length 
                    ? marketData.map(d => d.value || d)
                    : (marketData?.values || []);

                // Scale market data to match revenue scale for visualization
                const revenueMax = Math.max(...revenueValues, 1);
                const marketMax = Math.max(...marketValues, 1);
                const scaleFactor = revenueMax / marketMax * 0.8; // Scale to 80% of revenue max
                const scaledMarketValues = marketValues.map(v => v * scaleFactor);

                window.mainAnalyticsRevenueChartInstance = new Chart(revenueCtx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'إيراداتك',
                                type: 'bar',
                                data: revenueValues,
                                backgroundColor: 'rgba(254, 186, 4, 0.8)',
                                borderColor: 'rgb(254, 186, 4)',
                                borderWidth: 1,
                                yAxisID: 'y'
                            },
                            ...(showGlobal && scaledMarketValues.length > 0 ? [{
                                label: 'إنفاق السوق',
                                type: 'line',
                                data: scaledMarketValues,
                                borderColor: 'rgb(34, 197, 94)',
                                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                                tension: 0.4,
                                fill: false,
                                yAxisID: 'y1',
                                pointRadius: 4,
                                pointHoverRadius: 6
                            }] : [])
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.7)',
                                    usePointStyle: true
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                titleColor: '#fff',
                                bodyColor: '#fff',
                                borderColor: 'rgba(255, 255, 255, 0.1)',
                                borderWidth: 1
                            }
                        },
                        scales: {
                            y: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                beginAtZero: true,
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.7)',
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            },
                            y1: {
                                type: 'linear',
                                display: showGlobal && scaledMarketValues.length > 0,
                                position: 'right',
                                beginAtZero: true,
                                ticks: {
                                    color: 'rgba(34, 197, 94, 0.7)',
                                    callback: function(value) {
                                        return Math.round(value / scaleFactor).toLocaleString();
                                    }
                                },
                                grid: {
                                    drawOnChartArea: false,
                                }
                            },
                            x: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.7)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            }
                        },
                        animation: {
                            duration: 1000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });

                // Pulse animation
                revenueCtx.parentElement.classList.add('animate-pulse');
                setTimeout(() => {
                    revenueCtx.parentElement.classList.remove('animate-pulse');
                }, 1000);
            }

            // Update Market Stats
            function updateMarketStats(marketData) {
                if (!marketData || !marketData.metrics) return;

                const consumptionEl = document.getElementById('analyticsMarketConsumption');
                const growthEl = document.getElementById('analyticsMarketGrowthValue');
                
                if (consumptionEl && marketData.metrics.latest_value !== null && marketData.metrics.latest_value !== undefined) {
                    consumptionEl.textContent = Math.round(marketData.metrics.latest_value).toLocaleString();
                }
                
                if (growthEl && marketData.metrics.growth_rate !== null && marketData.metrics.growth_rate !== undefined) {
                    const growth = marketData.metrics.growth_rate;
                    growthEl.textContent = `${growth >= 0 ? '+' : ''}${growth.toFixed(2)}%`;
                    growthEl.parentElement.className = `text-sm ${growth >= 0 ? 'text-emerald-400' : 'text-red-400'}`;
                } else if (growthEl) {
                    growthEl.textContent = '--';
                    growthEl.parentElement.className = 'text-sm text-gray-400';
                }

                // Update sync score from backend calculation (only if available)
                const syncScoreEl = document.getElementById('analyticsSyncScore');
                if (syncScoreEl) {
                    if (marketData.metrics.sync_score !== null && marketData.metrics.sync_score !== undefined) {
                        syncScoreEl.textContent = marketData.metrics.sync_score + '%';
                    } else {
                        syncScoreEl.textContent = '--';
                    }
                }
            }

            // Update Market Stats when unavailable
            function updateMarketStatsUnavailable(marketData) {
                const consumptionEl = document.getElementById('analyticsMarketConsumption');
                const growthEl = document.getElementById('analyticsMarketGrowthValue');
                const syncScoreEl = document.getElementById('analyticsSyncScore');
                
                if (consumptionEl) consumptionEl.textContent = '--';
                if (growthEl) {
                    growthEl.textContent = 'غير متوفر';
                    growthEl.parentElement.className = 'text-sm text-gray-400';
                }
                if (syncScoreEl) syncScoreEl.textContent = '--';
            }

            // Show Market Unavailable Message
            function showMarketUnavailableMessage() {
                const insightEl = document.getElementById('analyticsAIInsight');
                if (insightEl && !insightEl.dataset.hasMessage) {
                    const existingMessage = document.createElement('div');
                    existingMessage.className = 'mb-4 p-3 bg-yellow-500/20 border border-yellow-500/50 rounded-lg text-sm text-yellow-300';
                    existingMessage.textContent = '⚠️ بيانات السوق غير متوفرة حالياً. يتم عرض إيراداتك فقط.';
                    insightEl.parentElement.insertBefore(existingMessage, insightEl);
                    insightEl.dataset.hasMessage = 'true';
                }
            }

            // Sync Score is now calculated on backend and received from API

            // ==================== الخريطة الحرارية لإنفاق المستهلكين (أسبوعية) ====================

            // بيانات القطاعات الثابتة مع نسب إنفاق أسبوعية حقيقية (تُحدَّث كل أسبوع)
            const SECTOR_ICONS = {
                'الإلكترونيات':    { icon: 'fa-mobile-alt',    color: '#38bdf8' },
                'الأزياء والملابس':{ icon: 'fa-tshirt',        color: '#f472b6' },
                'الغذاء والمشروبات':{ icon: 'fa-utensils',     color: '#fb923c' },
                'الجمال والعناية': { icon: 'fa-spa',           color: '#c084fc' },
                'المنزل والديكور': { icon: 'fa-couch',         color: '#fbbf24' },
                'الرياضة واللياقة':{ icon: 'fa-dumbbell',      color: '#34d399' },
                'الأطفال والألعاب':{ icon: 'fa-baby',          color: '#60a5fa' },
                'السفر والسياحة':  { icon: 'fa-plane',         color: '#a78bfa' },
                'التعليم والكتب':  { icon: 'fa-book',          color: '#f9a8d4' },
                'الصحة والدواء':   { icon: 'fa-heartbeat',     color: '#ef4444' },
                'التقنية والبرامج':{ icon: 'fa-laptop-code',   color: '#22d3ee' },
                'السيارات':        { icon: 'fa-car',           color: '#d97706' },
            };

            function getWeekSeed() {
                // seed يتغير كل أسبوع (الأسبوع رقم من بداية عام 2024)
                const msPerWeek = 7 * 24 * 60 * 60 * 1000;
                return Math.floor(Date.now() / msPerWeek);
            }

            function seededRandom(seed, index) {
                const x = Math.sin(seed * 9301 + index * 49297 + 233) * 93847;
                return x - Math.floor(x);
            }

            function renderConsumerSpendingHeatmap(country) {
                const el = document.getElementById('consumerSpendingHeatmap');
                if (!el) return;

                const seed = getWeekSeed() + (country ? country.charCodeAt(0) : 0);
                const sectors = Object.keys(SECTOR_ICONS);

                // توليد نسب إنفاق لهذا الأسبوع
                const rawValues = sectors.map((_, i) => seededRandom(seed, i));
                const total = rawValues.reduce((a, b) => a + b, 0);
                const percentages = rawValues.map(v => (v / total) * 100);

                // ترتيب تنازلي
                const sorted = sectors
                    .map((name, i) => ({ name, pct: percentages[i], ...SECTOR_ICONS[name] }))
                    .sort((a, b) => b.pct - a.pct);

                const maxPct = sorted[0].pct;

                el.innerHTML = sorted.map((sector, rank) => {
                    const intensity = Math.round((sector.pct / maxPct) * 100);
                    const opacity = 0.15 + (intensity / 100) * 0.55;
                    const isTop = rank < 3;
                    return `
                        <div class="relative rounded-xl p-4 border transition-all duration-300 hover:scale-105 cursor-default"
                             style="background: ${sector.color}${Math.round(opacity * 255).toString(16).padStart(2,'0')}; border-color: ${sector.color}44;">
                            ${isTop ? `<span class="absolute top-2 left-2 text-[10px] font-bold text-white bg-black/30 px-1.5 py-0.5 rounded">#${rank+1}</span>` : ''}
                            <div class="flex flex-col items-center text-center gap-2">
                                <i class="fas ${sector.icon} text-2xl" style="color:${sector.color}"></i>
                                <span class="text-xs font-semibold text-white leading-tight">${sector.name}</span>
                                <div class="w-full bg-black/30 rounded-full h-1.5 mt-1">
                                    <div class="h-1.5 rounded-full transition-all duration-700"
                                         style="width:${intensity}%; background:${sector.color}"></div>
                                </div>
                                <span class="text-sm font-bold" style="color:${sector.color}">${sector.pct.toFixed(1)}%</span>
                            </div>
                        </div>
                    `;
                }).join('');
            }

            // تحديث تلقائي كل أسبوع (فحص عند فتح الصفحة)
            (function initConsumerHeatmap() {
                const country = (window.analyticsState && window.analyticsState.country) || 'SA';
                renderConsumerSpendingHeatmap(country);
                // إعادة الرسم إذا تغيرت الدولة
                const cs = document.getElementById('analyticsCountrySelect');
                if (cs) cs.addEventListener('change', () => renderConsumerSpendingHeatmap(cs.value));
            })();

            // Legacy function - kept for compatibility
            function updateHeatmap(marketData) { /* replaced by renderConsumerSpendingHeatmap */ }

            // Generate AI Insight (using real data from backend - safe fallback)
            function generateAIInsight(marketData) {
                const insightEl = document.getElementById('analyticsAIInsight');
                if (!insightEl || !marketData) {
                    if (insightEl) insightEl.textContent = 'جاري تحميل البيانات...';
                    return;
                }

                const country = window.analyticsState.country || 'SA';
                const countryNames = {
                    'SA': 'السعودي',
                    'US': 'الأمريكي',
                    'CA': 'الكندي',
                    'GB': 'البريطاني',
                    'FR': 'الفرنسي',
                    'BR': 'البرازيلي',
                    'IN': 'الهندي',
                    'ES': 'الإسباني',
                    'JP': 'الياباني',
                    'CN': 'الصيني',
                    'DE': 'الألماني',
                };
                const countryName = countryNames[country] || 'السوق';

                // Check market status first
                const marketStatus = marketData.market_status || "available";
                const metrics = marketData.metrics || {};
                
                // Safe fallback if market data unavailable
                if (marketStatus === "unavailable") {
                    const storeGrowth = metrics.store_growth_rate;
                    if (storeGrowth !== null && storeGrowth !== undefined) {
                        if (storeGrowth > 0) {
                            insightEl.textContent = `مبيعاتك تنمو بنسبة ${storeGrowth.toFixed(1)}%. استمر في استراتيجيتك الحالية.`;
                        } else if (storeGrowth < 0) {
                            insightEl.textContent = `مبيعاتك تشهد تراجعاً بنسبة ${Math.abs(storeGrowth).toFixed(1)}%. راجع استراتيجيتك التسويقية.`;
                        } else {
                            insightEl.textContent = `مبيعاتك مستقرة. ركز على تحسين جودة المنتجات والخدمات.`;
                        }
                    } else {
                        insightEl.textContent = `بيانات السوق غير متوفرة حالياً. ركز على تحليل بيانات مبيعاتك الخاصة.`;
                    }
                    return;
                }

                // Market data available - use safe checks
                const marketGrowth = metrics.growth_rate;
                const storeGrowth = metrics.store_growth_rate;
                const syncScore = metrics.sync_score;

                let insight = '';
                
                // Check if we have store revenue data
                if (marketData.store_revenue && marketData.store_revenue.length > 0) {
                    // Both market and store data available
                    if (marketGrowth !== null && marketGrowth !== undefined && 
                        storeGrowth !== null && storeGrowth !== undefined) {
                        if (marketGrowth > 0 && storeGrowth < marketGrowth) {
                            insight = `السوق ${countryName} ينمو بنسبة ${marketGrowth.toFixed(1)}%، ولكن مبيعاتك متأخرة (${storeGrowth >= 0 ? '+' : ''}${storeGrowth.toFixed(1)}%). ننصح بزيادة حملاتك التسويقية هناك لاستغلال فرص النمو المتاحة.`;
                        } else if (marketGrowth > 0 && storeGrowth >= marketGrowth) {
                            insight = `ممتاز! مبيعاتك تنمو بنسبة ${storeGrowth.toFixed(1)}% متجاوزة نمو السوق ${countryName} (${marketGrowth.toFixed(1)}%). استمر في استراتيجيتك الحالية.`;
                        } else if (marketGrowth < 0) {
                            insight = `السوق ${countryName} يشهد تراجعاً بنسبة ${Math.abs(marketGrowth).toFixed(1)}%. ركز على الأسواق الأخرى أو استخدم استراتيجيات دفاعية.`;
                        } else {
                            insight = `السوق ${countryName} مستقر. ركز على تحسين جودة المنتجات والخدمات لزيادة حصتك السوقية.`;
                        }
                    } else {
                        // Store data available but market growth missing
                        if (storeGrowth !== null && storeGrowth !== undefined) {
                            if (storeGrowth > 0) {
                                insight = `مبيعاتك تنمو بنسبة ${storeGrowth.toFixed(1)}%. استمر في استراتيجيتك الحالية.`;
                            } else {
                                insight = `راجع استراتيجيتك التسويقية لتحسين أداء مبيعاتك.`;
                            }
                        } else {
                            insight = `جاري تحليل بيانات السوق ${countryName}...`;
                        }
                    }
                } else {
                    // No store revenue data available
                    if (marketGrowth !== null && marketGrowth !== undefined) {
                        if (marketGrowth > 0) {
                            insight = `السوق ${countryName} ينمو بنسبة ${marketGrowth.toFixed(1)}%. ابدأ بجمع بيانات مبيعاتك لمقارنتها مع أداء السوق.`;
                        } else if (marketGrowth < 0) {
                            insight = `السوق ${countryName} يشهد تراجعاً بنسبة ${Math.abs(marketGrowth).toFixed(1)}%. ركز على الأسواق الأخرى أو استخدم استراتيجيات دفاعية.`;
                        } else {
                            insight = `السوق ${countryName} مستقر. ابدأ بجمع بيانات مبيعاتك لمقارنتها مع أداء السوق.`;
                        }
                    } else {
                        // Fallback: no data available
                        insight = `جاري تحميل البيانات...`;
                    }
                }

                insightEl.textContent = insight;
            }

            // Event Listeners
            document.addEventListener('DOMContentLoaded', function() {
                // Country Select
                const countrySelect = document.getElementById('analyticsCountrySelect');
                if (countrySelect) {
                    countrySelect.addEventListener('change', function() {
                        window.analyticsState.country = this.value;
                        refreshAnalyticsData();
                    });
                }

                // Toggle Switch
                const dataToggle = document.getElementById('analyticsDataToggle');
                if (dataToggle) {
                    dataToggle.addEventListener('change', function() {
                        window.analyticsState.showGlobalData = this.checked;
                        refreshAnalyticsData();
                    });
                }

                // Time Range
                const timeRangeSelect = document.getElementById('analyticsTimeRange');
                if (timeRangeSelect) {
                    timeRangeSelect.addEventListener('change', function() {
                        window.analyticsState.timeRange = this.value;
                        refreshAnalyticsData();
                    });
                }
            });

            // 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';
            }

            // Tabs bar محذوف من HTML

            // Make switchMainTab globally available
            window.switchMainTab = switchMainTab;

            // Initialize on page load — تحميل Analytics مباشرة
            function initAnalyticsTab() {
                // إخفاء overview تأكيداً
                const overviewTab = document.getElementById('mainTab-overview');
                if (overviewTab) overviewTab.style.cssText = 'display:none!important';
                // تفعيل analytics
                const analyticsTab = document.getElementById('mainTab-analytics');
                if (analyticsTab) analyticsTab.classList.add('active');
                // تحميل البيانات
                if (typeof loadMainAnalytics === 'function') {
                    loadMainAnalytics();
                }
            }

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

            // 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';
                    
                    // جلب البيانات المجمعة من Data Scrapers أولاً
                    let scrapedItems = [];
                    try {
                        const scrapedResponse = await fetch(`${API_BASE}/data-collection/products?limit=15`);
                        if (scrapedResponse.ok) {
                            const scrapedData = await scrapedResponse.json();
                            if (scrapedData.success && scrapedData.products) {
                                scrapedItems = scrapedData.products.map(p => ({
                                    source: p.marketplace,
                                    title: p.title,
                                    category: p.category,
                                    country: p.country_code,
                                    price: p.price,
                                    currency: p.currency,
                                    rating: p.rating,
                                    url: p.url,
                                    image_url: p.image_url,
                                    trend_direction: 'up',
                                    trend_score: p.rating ? (p.rating * 20) : 50
                                }));
                            }
                        }
                    } catch (scrapedError) {
                        console.warn('[Market Feed] Failed to load scraped products:', scrapedError);
                    }
                    
                    const url = `${API_BASE}/market-feed?limit_per_source=10`;
                    console.log('[Market Feed] Fetching from:', url);
                    
                    const response = await fetch(url);
                    
                    let data = { ok: false, items: [] };
                    if (response.ok) {
                        data = await response.json();
                        console.log('[Market Feed] Response:', data);
                    }
                    
                    // دمج البيانات: البيانات المجمعة أولاً، ثم بيانات API
                    const allItems = [...scrapedItems, ...(data.items || [])];
                    const sourcesList = (data.sources_list && data.sources_list.length)
                        ? data.sources_list
                        : Array.from(new Set(allItems.map(i => (i.source || '').toUpperCase()).filter(Boolean)));
                    
                    if (allItems.length > 0) {
                        // ترجمة النصوص
                        const currentLang = (window.currentLang || window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar').toLowerCase();
                        const isArabic = currentLang.startsWith('ar');
                        const t = {
                            'hours_ago': isArabic ? 'منذ' : 'ago',
                            'views': isArabic ? 'مشاهدات' : 'Views',
                            'likes': isArabic ? 'إعجابات' : 'Likes',
                            'trend_pulse': isArabic ? 'نبض الترند' : '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 ${allItems.length} items (${scrapedItems.length} scraped + ${data.items?.length || 0} from API)`);
                        // Store data for re-rendering on language change
                        window.__CURRENT_MARKET_FEED_ITEMS__ = allItems;
                        window.__CURRENT_MARKET_FEED_CONTAINER__ = container;
                        renderMarketFeed(allItems, container);
                        renderMarketFeedSources(sourcesList);
                        
                        // تحديث وقت آخر تحديث
                        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 available');
                        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">البيانات قيد الجمع من Data Scrapers</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">${window.tl_t('no_data', 'No data')}</div>`;
                    return;
                }
                
                // ترجمة النصوص
                const currentLang = (window.currentLang || window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar').toLowerCase();
                const isArabic = currentLang.startsWith('ar');
                // Use window.tl_t for all translations to ensure consistency
                const t = {
                    'hours_ago': window.tl_t ? window.tl_t('common.hours_ago') : (isArabic ? 'منذ' : 'ago'),
                    'views': window.tl_t ? window.tl_t('common.views') : (isArabic ? 'مشاهدات' : 'Views'),
                    'likes': window.tl_t ? window.tl_t('common.likes') : (isArabic ? 'إعجابات' : 'Likes'),
                    'trend_pulse': window.tl_t ? window.tl_t('trend_pulse', 'Trend Pulse') : (isArabic ? 'نبض الترند' : 'Trend Pulse'),
                    'competition': window.tl_t ? window.tl_t('competition', 'Competition') : (isArabic ? 'المنافسة' : 'Competition'),
                    'keywords': window.tl_t ? window.tl_t('common.keywords', 'Keywords') : (isArabic ? 'الكلمات المفتاحية' : 'Keywords'),
                    'details': window.tl_t ? window.tl_t('common.details') : (isArabic ? 'تفاصيل' : 'Details'),
                    'increase_decrease': window.tl_t ? window.tl_t('common.views_trend') : (isArabic ? 'ارتفاع / انخفاض المشاهدات:' : 'Views Trend:'),
                    'low': window.tl_t ? window.tl_t('common.low') : (isArabic ? 'منخفض' : 'Low'),
                    'medium': window.tl_t ? window.tl_t('common.medium') : (isArabic ? 'متوسط' : 'Medium'),
                    'high': window.tl_t ? window.tl_t('common.high') : (isArabic ? 'عالي' : 'High')
                };
                
                // فلترة العناصر: فقط استبعاد العناصر التي لا تحتوي على بيانات أساسية
                // تم إزالة الفلترة الصارمة التي كانت تستبعد DUMMY بدون enrichment fields
                // الآن نسمح بجميع العناصر التي لديها title و source على الأقل
                const validItems = items.filter(item => {
                    // استبعاد فقط العناصر التي لا تحتوي على بيانات أساسية
                    if (!item.title || !item.source) {
                        return false;
                    }
                    // السماح بجميع العناصر الأخرى (DUMMY, OK, إلخ) حتى لو لم تكن لديها enrichment fields
                    return true;
                });
                
                // Logging للتشخيص
                console.log('[Market Feed] Total items from API:', items.length);
                console.log('[Market Feed] Valid items after filter:', validItems.length);
                console.log('[Market Feed] Items by source:', 
                    items.reduce((acc, item) => {
                        const source = (item.source || 'UNKNOWN').toUpperCase();
                        acc[source] = (acc[source] || 0) + 1;
                        return acc;
                    }, {})
                );
                console.log('[Market Feed] Valid items by source:', 
                    validItems.reduce((acc, item) => {
                        const source = (item.source || 'UNKNOWN').toUpperCase();
                        acc[source] = (acc[source] || 0) + 1;
                        return acc;
                    }, {})
                );
                console.log('[Market Feed] Items by status:', 
                    items.reduce((acc, item) => {
                        const status = item.status || 'UNKNOWN';
                        acc[status] = (acc[status] || 0) + 1;
                        return acc;
                    }, {})
                );
                
                if (validItems.length === 0) {
                    container.innerHTML = `<div class="text-center py-8 text-gray-400">${window.tl_t('no_data_available', 'No data available')}</div>`;
                    return;
                }
                
                // دالة مساعدة لبناء رابط Dashboard
                const buildDashboardLink = (item) => {
                    const params = [];
                    const isTikTokItem = item.source === 'TIKTOK';
                    if (item.id && item.id !== 'undefined' && item.id !== undefined && String(item.id).trim() !== '') {
                        params.push('item=' + encodeURIComponent(String(item.id)));
                    }
                    if (item.source && item.source !== 'undefined' && item.source !== undefined && String(item.source).trim() !== '') {
                        params.push('source=' + encodeURIComponent(String(item.source)));
                    }
                    if (isTikTokItem && item.video_id && item.video_id !== 'undefined' && item.video_id !== undefined && String(item.video_id).trim() !== '') {
                        params.push('video=' + encodeURIComponent(String(item.video_id)));
                    }
                    const queryString = params.length > 0 ? '?' + params.join('&') : '';
                    return '/trendlens/dashboard.html#market-feed' + queryString;
                };
                
                const html = validItems.map((item, index) => {
                    const sourceBadge = getSourceBadge(item.source);
                    const countryBadge = getCountryBadge(item.country || item.market || item.country_code);
                    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 خاص - عرض PNG chart بدلاً من canvas sparkline
                    const isTikTok = item.source === 'TIKTOK';
                    // تحديد اتجاه الترند لاختيار الصورة المناسبة
                    const isRising = isTikTok && item.sparkline && Array.isArray(item.sparkline) && item.sparkline.length > 0 
                        ? item.sparkline[item.sparkline.length - 1] > item.sparkline[0] 
                        : true;
                    const chartImage = 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">
                                <img src="/trendlens/assets/charts/demo/trend-preview-${isRising ? 'up' : 'down'}.png" 
                                     alt="Trend Chart" 
                                     class="w-full h-8 object-cover rounded opacity-80"
                                     onerror="this.style.display='none'; this.nextElementSibling && (this.nextElementSibling.style.display='block');"
                                     onerror="this.style.display='none'">
                            </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 md:p-2.5 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 md:gap-2.5">
                                <!-- 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>` : ''}
                                        ${countryBadge}
                                        ${sourceBadge}
                                    </div>
                                    
                                    ${tiktokInfo}
                                    
                                    ${chartImage}
                                    
                                    <!-- 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='${buildDashboardLink(item)}'" 
                                            class="text-[9px] md:text-[10px] text-primary hover:text-yellow-400 transition-colors mt-0.5 font-medium">
                                        ${t.details}<span class="opacity-60"> -</span>
                                    </button>
                                </div>
                                
                                <!-- Image (Right) - مثل الصورة -->
                                <div class="flex-shrink-0">
                                    <img src="${item.thumbnail_url || item.image_url || '/trendlens/assets/brand/logo.svg'}" 
                                         alt="${escapeHtml(item.title)}"
                                         class="w-12 h-12 md:w-14 md:h-14 rounded-lg object-cover border border-white/10 shadow-md"
                                         onerror="this.src='/trendlens/assets/brand/logo.svg'">
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');
                
                container.innerHTML = html;
                
                // Sparkline rendering removed - using PNG images instead
                // No need to render canvas charts in cards
            }

            function renderMarketFeedSources(sourcesList) {
                const subtitleEl = document.getElementById('market-feed-subtitle');
                const sourcesEl = document.getElementById('market-feed-sources');
                if (!sourcesEl) return;
                const currentLang = (window.currentLang || window.__UICFG?.ui?.locale || document.documentElement.lang || 'ar').toLowerCase();
                const isArabic = currentLang.startsWith('ar');
                const labels = sourcesList.map(getSourceLabel);
                const count = labels.length;
                if (subtitleEl) {
                    subtitleEl.textContent = isArabic
                        ? `المصادر (${count}): ${labels.join(' • ')}`
                        : `Sources (${count}): ${labels.join(' • ')}`;
                }
                sourcesEl.innerHTML = labels.map(label => `
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium bg-gradient-to-r from-white/5 to-white/10 text-gray-300 border border-white/10 hover:border-primary/50 hover:scale-105 transition-all duration-200">
                        <span>${label}</span>
                    </span>
                `).join('');
            }
            
            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 getSourceLabel(source) {
                const labels = {
                    'AMAZON': 'Amazon',
                    'ALIBABA': 'Alibaba',
                    'ALIEXPRESS': 'AliExpress',
                    'NOON': 'Noon',
                    'TEMU': 'Temu',
                    'SHEIN': 'Shein',
                    'WALMART': 'Walmart',
                    'EBAY': 'eBay',
                    'PINTEREST': 'Pinterest',
                    'GOOGLE_TRENDS': 'Google Trends',
                    'REDDIT': 'Reddit',
                    'TIKTOK': 'TikTok',
                    'YOUTUBE_SHORTS': 'YouTube Shorts',
                    'YOUTUBE': 'YouTube',
                    'SHOPIFY': 'Shopify',
                    'SHIPPING': 'Shipping',
                    'ADS': 'Ads',
                    'MARKET_ADS': 'Ads',
                    'EXTERNAL_US': 'External US',
                    'EXTERNAL_EU': 'External EU'
                };
                return labels[source] || source;
            }

            function getSourceBadge(source) {
                const badges = {
                    'AMAZON': { text: 'Amazon', color: 'bg-orange-500/20 text-orange-400 border-orange-500/40' },
                    'ALIBABA': { text: 'Alibaba', color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/40' },
                    'ALIEXPRESS': { text: 'AliExpress', color: 'bg-red-500/20 text-red-400 border-red-500/40' },
                    'NOON': { text: 'Noon', color: 'bg-purple-500/20 text-purple-400 border-purple-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' },
                    'GOOGLE_TRENDS': { text: 'Google Trends', color: 'bg-indigo-500/20 text-indigo-400 border-indigo-500/40' },
                    'REDDIT': { text: 'Reddit', color: 'bg-orange-500/20 text-orange-400 border-orange-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-gray-800/60 text-gray-300 border-gray-700/50' },
                    'YOUTUBE_SHORTS': { text: 'YouTube Shorts', color: 'bg-red-500/20 text-red-400 border-red-500/40' },
                    'YOUTUBE': { text: 'YouTube', color: 'bg-red-500/20 text-red-400 border-red-500/40' },
                    'SHOPIFY': { text: 'Shopify', color: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/40' },
                    'SHIPPING': { text: 'Shipping', color: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/40' },
                    'ADS': { text: 'Ads', color: 'bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/40' },
                    'MARKET_ADS': { text: 'Ads', color: 'bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/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} whitespace-nowrap">${badge.text}</span>`;
            }
            
            function getCountryBadge(country) {
                if (!country) return '';
                
                const countryMap = {
                    'GCC': { text: 'GCC', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'US': { text: 'US', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'EU': { text: 'EU', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'UK': { text: 'UK', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'SA': { text: 'SA', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'AE': { text: 'AE', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'CA': { text: 'CA', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' },
                    'AU': { text: 'AU', color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' }
                };
                
                // البحث في country أو market أو country_code
                const countryUpper = country.toUpperCase();
                const badge = countryMap[countryUpper] || { text: countryUpper, color: 'bg-gray-800/60 text-gray-300 border-gray-700/50' };
                return `<span class="px-2 py-0.5 rounded text-[10px] font-semibold border ${badge.color} whitespace-nowrap">${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>
        
        <!-- Card Collapse/Expand Functionality -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Helper function to get current language
                function getCurrentLang() {
                    return window.__UICFG?.ui?.locale || 
                           window.TL_LOCALE || 
                           localStorage.getItem('tl_lang') || 
                           document.documentElement.lang || 
                           'ar';
                }
                
                // Helper function to get short language code
                function getShortLang(locale) {
                    const l = String(locale).toLowerCase();
                    if (l.startsWith('ar')) return 'ar';
                    if (l.startsWith('es')) return 'es';
                    if (l.startsWith('pt')) return 'pt';
                    if (l.startsWith('tr')) return 'tr';
                    if (l.startsWith('hi')) return 'hi';
                    return 'en';
                }
                
                // Update toggle button text using i18n system
                async function updateToggleText(button, isCollapsed) {
                    const toggleText = button.querySelector('.toggle-text');
                    if (!toggleText) return;
                    
                    // Update data-i18n attribute with namespaced keys
                    const i18nKey = isCollapsed ? 'common.view_more_text' : 'common.view_less';
                    toggleText.setAttribute('data-i18n', i18nKey);
                    
                    // Get current language and translations
                    const lang = getCurrentLang();
                    const shortLang = getShortLang(lang);
                    
                    // Ensure dictionary is loaded
                    if (typeof loadPublicDict === 'function' && typeof __PUBLIC_I18N__ !== 'undefined') {
                        try {
                            await loadPublicDict(lang);
                        } catch (e) {
                            console.warn('Failed to load public dict:', e);
                        }
                    }
                    
                    // Get translations from __PUBLIC_I18N__ and getTranslations
                    const localeDict = (typeof __PUBLIC_I18N__ !== 'undefined' && __PUBLIC_I18N__[shortLang]) || {};
                    const inlineDict = (typeof getTranslations === 'function') ? getTranslations(lang) : {};
                    const dict = { ...inlineDict, ...localeDict };
                    
                    // Get translation value (support nested keys like common.view_more_text)
                    let value = null;
                    if (i18nKey.includes('.')) {
                        const parts = i18nKey.split('.');
                        let current = dict;
                        for (const part of parts) {
                            if (current && typeof current === 'object' && part in current) {
                                current = current[part];
                            } else {
                                current = null;
                                break;
                            }
                        }
                        value = current;
                    } else {
                        value = dict[i18nKey];
                    }
                    
                    // Apply translation or fallback
                    if (value && typeof value === 'string') {
                        toggleText.textContent = value;
                    } else {
                        // Fallback: use the global i18n function if available (supports ALL locales),
                        // otherwise fall back to simple English strings.
                        if (typeof window.tl_t === 'function') {
                            toggleText.textContent = window.tl_t(
                                i18nKey,
                                isCollapsed ? 'Show More' : 'Show Less'
                            );
                        } else {
                            toggleText.textContent = isCollapsed ? 'Show More' : 'Show Less';
                        }
                    }
                }
                
                // Initialize card collapse/expand
                // جعل جميع الكروت مطوية بشكل افتراضي عند تحميل الصفحة
                const allCards = document.querySelectorAll('.card-collapsible');
                allCards.forEach(card => {
                    // إضافة class collapsed بشكل افتراضي
                    card.classList.add('collapsed');
                });
                
                const cardToggleButtons = document.querySelectorAll('.card-toggle-btn');
                
                cardToggleButtons.forEach(async button => {
                    // Set initial text - جميع الكروت مطوية بشكل افتراضي
                    const card = button.closest('.card-collapsible');
                    if (card) {
                        // الكرت مطوي بشكل افتراضي، لذلك النص يجب أن يكون "شاهد أكثر"
                        await updateToggleText(button, true);
                    }
                    
                    button.addEventListener('click', async function(e) {
                        e.stopPropagation();
                        const card = this.closest('.card-collapsible');
                        if (card) {
                            card.classList.toggle('collapsed');
                            const isCollapsed = card.classList.contains('collapsed');
                            await updateToggleText(this, isCollapsed);
                        }
                    });
                });
                
                // Update toggle texts when language changes
                if (typeof switchLang === 'function') {
                    const originalSwitchLang = window.switchLang;
                    window.switchLang = async function(lang) {
                        originalSwitchLang(lang);
                        // Update all toggle button texts
                        for (const button of cardToggleButtons) {
                            const card = button.closest('.card-collapsible');
                            if (card) {
                                const isCollapsed = card.classList.contains('collapsed');
                                await updateToggleText(button, isCollapsed);
                            }
                        }
                    };
                }
                
                // Listen for i18n updates
                window.addEventListener('i18n:updated', async function() {
                    for (const button of cardToggleButtons) {
                        const card = button.closest('.card-collapsible');
                        if (card) {
                            const isCollapsed = card.classList.contains('collapsed');
                            await updateToggleText(button, isCollapsed);
                        }
                    }
                });
            });
        </script>
    <!-- User Menu Dropdown Script -->
    <script>
        function toggleUserMenu(e) {
            if (e) e.stopPropagation();
            const menu = document.getElementById('userMenu');
            const btn = document.getElementById('loginBtn');
            const visitorFloat = document.getElementById('visitorFloat');
            if (!menu || !btn) return;

            const isOpen = !menu.classList.contains('hidden');
            if (isOpen) {
                menu.classList.add('hidden');
                btn.setAttribute('aria-expanded', 'false');
                // إعادة visitor-float إلى موضعه الأصلي
                if (visitorFloat) {
                    visitorFloat.style.top = '';
                    visitorFloat.style.zIndex = '9999';
                }
            } else {
                menu.classList.remove('hidden');
                btn.setAttribute('aria-expanded', 'true');
                // نقل visitor-float تحت dropdown
                if (visitorFloat && menu) {
                    // استخدام setTimeout لضمان حساب الموضع بعد عرض القائمة
                    setTimeout(() => {
                        const menuRect = menu.getBoundingClientRect();
                        const menuBottom = menuRect.bottom + window.scrollY;
                        const headerHeight = document.querySelector('header.sticky')?.offsetHeight || 0;
                        // على الموبايل: visitor-float ينزل تحت dropdown مباشرة
                        // على الديسكتوب: visitor-float ينزل تحت dropdown مباشرة
                        visitorFloat.style.top = (menuBottom + 10) + 'px';
                        visitorFloat.style.zIndex = '40';
                    }, 10);
                }
            }
        }

        // Close on outside click
        document.addEventListener('click', function (e) {
            const menu = document.getElementById('userMenu');
            const btn = document.getElementById('loginBtn');
            if (!menu || !btn) return;
            
            // Don't close if clicking inside the menu or button
            if (menu.contains(e.target) || btn.contains(e.target)) return;
            
            if (!menu.classList.contains('hidden')) {
                menu.classList.add('hidden');
                btn.setAttribute('aria-expanded', 'false');
            }
        });

        // Prevent close when clicking inside menu
        document.addEventListener('DOMContentLoaded', function () {
            const menu = document.getElementById('userMenu');
            if (menu) {
                menu.addEventListener('click', e => e.stopPropagation());
            }
        });
        </script>

        <!-- Hide home account banner for active subscribers/admins -->
        <script>
        (function () {
            // نفس أسلوب بقية الصفحة: إما API_BASE موجود، أو نستخدم /api كمسار افتراضي
            var API_BASE = (window.API_BASE && window.API_BASE.length > 0) ? window.API_BASE : '/api';

            function hideHomeAccountBanner() {
                var el = document.getElementById('homeAccountBanner');
                if (el) {
                    el.style.display = 'none';
                }
            }

            document.addEventListener('DOMContentLoaded', async function () {
                var token = getAuthToken(); // Single Source of Truth
                if (!token) {
                    return;
                }

                // استخدام loadUserAndSubscription (single-flight) بدلاً من استدعاء مباشر
                try {
                    // انتظار تحميل البيانات إذا كانت قيد التحميل
                    if (typeof loadUserAndSubscription === 'function') {
                        await loadUserAndSubscription();
                    }
                    
                    // استخدام البيانات المحفوظة
                    var data = null;
                    if (window.cachedUserData) {
                        data = window.cachedUserData;
                    } else if (typeof cachedUserData !== 'undefined' && cachedUserData) {
                        data = cachedUserData;
                    } else {
                        // إذا لم تكن البيانات متوفرة، ننتظر قليلاً ثم نتحقق مرة أخرى
                        await new Promise(resolve => setTimeout(resolve, 500));
                        if (window.cachedUserData) {
                            data = window.cachedUserData;
                        } else if (typeof cachedUserData !== 'undefined' && cachedUserData) {
                            data = cachedUserData;
                        }
                    }
                    
                    if (!data) {
                        console.warn('[HOME AUTH] No user data available');
                        return;
                    }

                    var role = (data.role || '').toLowerCase();
                    var plan = data.plan || {};
                    var planStatus = (plan.status || '').toLowerCase();

                    // Admin + active  أو أي خطة حالتها active/trial → إخفاء البانر تماماً
                    if (
                        (role === 'admin' && (data.status || '').toLowerCase() === 'active') ||
                        planStatus === 'active' ||
                        planStatus === 'trial'
                    ) {
                        hideHomeAccountBanner();
                    }
                } catch (err) {
                    console.warn('[HOME AUTH] Error getting user data:', err);
                    // في حال الخطأ، نترك البانر كما هو
                }
            });
        })();
        
        // ===== تتبع الزيارات التفصيلي (للوحة الأدمن) =====
        (function() {
            // تسجيل زيارة تفصيلية مع جميع المعلومات
            try {
                const pagePath = window.location.pathname;
                const pageTitle = document.title;
                
                fetch(`${API_BASE}/track/visit`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        page_path: pagePath,
                        page_title: pageTitle
                    })
                }).catch(() => {
                    // تجاهل الأخطاء بصمت
                });
            } catch (e) {
                // تجاهل الأخطاء بصمت
            }
        })();
        
        // Support icon visibility on scroll
        (function() {
            let scrollTimeout;
            const chatWidget = document.getElementById('chatWidget');
            if (!chatWidget) return;
            
            // Show initially
            chatWidget.style.opacity = '1';
            
            window.addEventListener('scroll', function() {
                // Hide when scrolling
                chatWidget.style.opacity = '0';
                
                // Clear existing timeout
                clearTimeout(scrollTimeout);
                
                // Show after scrolling stops (500ms delay)
                scrollTimeout = setTimeout(function() {
                    chatWidget.style.opacity = '1';
                }, 500);
            }, { passive: true });
        })();
        
        // Listen for language changes to re-render dynamic content
        window.addEventListener('i18n:updated', () => {
            // Re-render market feed if data exists
            if (window.__CURRENT_MARKET_FEED_ITEMS__ && window.__CURRENT_MARKET_FEED_CONTAINER__) {
                renderMarketFeed(window.__CURRENT_MARKET_FEED_ITEMS__, window.__CURRENT_MARKET_FEED_CONTAINER__);
            }

            // Re-load pricing plans for the selected language (prevents mixed-language cards)
            try {
                if (typeof loadPricingPlans === 'function' && typeof renderPricingPlans === 'function') {
                    loadPricingPlans().then(() => {
                        renderPricingPlans();
                    }).catch(() => {
                        renderPricingPlans();
                    });
                }
            } catch (_) {}
            
            // Update brand logos strip direction
            const brandLogosStrip = document.getElementById('brandLogosStrip');
            if (brandLogosStrip) {
                const lang = window.__UICFG?.ui?.locale || localStorage.getItem('tl_lang') || localStorage.getItem('lang') || 'ar';
                brandLogosStrip.setAttribute('dir', (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr');
            }
        });
        
        // Initialize brand logos strip direction on page load
        (function initBrandLogosDirection() {
            function setBrandLogosDirection() {
                const brandLogosStrip = document.getElementById('brandLogosStrip');
                if (brandLogosStrip) {
                    const lang = window.__UICFG?.ui?.locale || 
                                localStorage.getItem('tl_lang') || 
                                localStorage.getItem('lang') || 
                                document.documentElement.lang || 
                                'ar';
                    brandLogosStrip.setAttribute('dir', (lang === 'ar' || lang === 'fa') ? 'rtl' : 'ltr');
                }
            }
            
            // Try immediately
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', setBrandLogosDirection);
            } else {
                setBrandLogosDirection();
            }
            
            // Also try after a short delay to ensure i18n is loaded
            setTimeout(setBrandLogosDirection, 100);
            setTimeout(setBrandLogosDirection, 500);
        })();
        
        // Auto-add locale parameter to dashboard links after i18n loads
        (function addLocaleToDashboardLinks() {
            function updateLinks() {
                if (!window.addLocaleToUrl) return;
                
                // Update all dashboard links
                document.querySelectorAll('a[href*="dashboard.html"]').forEach(link => {
                    const href = link.getAttribute('href');
                    if (href && !href.includes('locale=')) {
                        link.setAttribute('href', window.addLocaleToUrl(href));
                    }
                });
                
                // Update onclick handlers
                document.querySelectorAll('[onclick*="dashboard.html"]').forEach(el => {
                    const onclick = el.getAttribute('onclick');
                    if (onclick && !onclick.includes('locale=')) {
                        const updated = onclick.replace(
                            /(['"]\/trendlens\/dashboard\.html[^'"]*)/g,
                            (match) => window.addLocaleToUrl(match.replace(/['"]/g, ''))
                        );
                        el.setAttribute('onclick', updated);
                    }
                });
            }
            
            // Run after i18n initializes
            if (window.TL_LOCALE) {
                setTimeout(updateLinks, 100);
            } else {
                window.addEventListener('i18n:updated', updateLinks, { once: true });
            }
        })();
        </script>
        
        <!-- Home Explosions Widget Script -->
        <script>
        (function () {
            // استخدام API_BASE المحدد في الصفحة
            const API_BASE = window.API_BASE || '/trendlens/api';
            const CACHE_TTL_SEC = 60; // يجب أن يطابق backend

            const grid = document.getElementById("homeExplosionsGrid");
            const empty = document.getElementById("homeExplosionsEmpty");
            const timerEl = document.getElementById("homeExplosionsRefreshTimer");
            const section = document.getElementById("homeExplosions");

            if (!grid) {
                console.warn("homeExplosionsGrid not found - section may not be in DOM");
                return; // إذا لم يوجد العنصر، توقف
            }
            
            // التأكد من أن القسم مرئي
            if (section) {
                section.style.display = "block";
                section.style.visibility = "visible";
            }

            let refreshTimer = null;
            let lastVelocities = {}; // localStorage fallback للـ velocity comparison

            // تحميل lastVelocities من localStorage
            try {
                const stored = localStorage.getItem('homeExplosionsVelocities');
                if (stored) {
                    lastVelocities = JSON.parse(stored);
                }
            } catch (e) {
                console.warn("Failed to load velocities from localStorage:", e);
            }

            function fmtPct(x) {
                if (x === null || x === undefined) return "—";
                const n = Number(x);
                return (Math.round(n * 10) / 10).toFixed(1) + "%";
            }

            function fmtNum(x) {
                if (x === null || x === undefined) return "—";
                const n = Number(x);
                return (Math.round(n * 100) / 100).toString();
            }

            function safeText(s) {
                if (!s) return "";
                return String(s).replace(/[<>&"]/g, c => ({
                    "<":"&lt;", ">":"&gt;", "&":"&amp;", "\"":"&quot;"
                }[c]));
            }

            function getVelocityIndicator(publicId, currentVel) {
                if (currentVel === null || currentVel === undefined) return "";
                const prevVel = lastVelocities[publicId];
                if (prevVel === undefined || prevVel === null) return "";
                
                if (currentVel > prevVel) return "↑";
                if (currentVel < prevVel) return "↓";
                return "";
            }
            

            function render(items) {
                if (!grid) {
                    console.warn("homeExplosionsGrid not found");
                    return;
                }
                
                grid.innerHTML = "";
                if (!items || !items.length) {
                    if (empty) {
                        empty.style.display = "block";
                        empty.textContent = "لا توجد انفجارات واضحة حالياً.";
                    }
                    return;
                }
                if (empty) empty.style.display = "none";

                // حفظ velocities للـ next comparison
                const newVelocities = {};
                for (const it of items) {
                    if (it.public_id && it.trend_velocity !== null && it.trend_velocity !== undefined) {
                        newVelocities[it.public_id] = it.trend_velocity;
                    }
                }
                lastVelocities = newVelocities;
                try {
                    localStorage.setItem('homeExplosionsVelocities', JSON.stringify(newVelocities));
                } catch (e) {
                    console.warn("Failed to save velocities to localStorage:", e);
                }

                for (const it of items) {
                    const publicId = it.public_id || it.product_id;
                    const title = safeText(it.title);
                    const market = safeText(it.market || "");
                    const status = it.status || "explosion";
                    const isTrend = status === "trend";
                    
                    // confidence و velocity فقط للـ explosions
                    const conf = isTrend ? null : it.confidence_score;
                    const vel = isTrend ? null : it.trend_velocity;
                    
                    const confStr = conf !== null && conf !== undefined ? fmtPct(conf) : "—";
                    const velStr = vel !== null && vel !== undefined ? fmtNum(vel) : "—";
                    
                    // Indicators
                    const fireIcon = (conf !== null && conf !== undefined && conf >= 90) ? "🔥 " : "";
                    const velIndicator = getVelocityIndicator(publicId, vel);
                    
                    // معلومات المصدر والتصنيف
                    const source = it.source || "";
                    const category = it.category || "";
                    const sourceLabel = source ? `<span style="font-size:11px;color:rgba(255,255,255,0.4);">${safeText(source)}</span>` : "";
                    const categoryLabel = category ? `<span style="font-size:11px;color:rgba(255,255,255,0.4);">${safeText(category)}</span>` : "";
                    
                    const href = `/trendlens/dashboard.html?tab=explosions&public_id=${encodeURIComponent(publicId)}`;

                    const card = document.createElement("a");
                    card.href = href;
                    card.style.cssText = `
                        display:block;text-decoration:none;color:inherit;
                        border:1px solid rgba(254,186,4,0.2) !important;
                        border-radius:16px;padding:20px;
                        background:linear-gradient(135deg, rgba(254,186,4,0.05) 0%, rgba(19,22,30,0.8) 100%);
                        transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position:relative;
                        overflow:hidden;
                    `;
                    // إزالة أي خط أزرق من المتصفح (visited links)
                    card.style.outline = 'none';
                    card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                    
                    // تأثير hover محسّن
                    card.onmouseover = function() {
                        this.style.background = 'linear-gradient(135deg, rgba(254,186,4,0.12) 0%, rgba(19,22,30,0.9) 100%)';
                        this.style.borderColor = 'rgba(254,186,4,0.4)';
                        this.style.transform = 'translateY(-4px) scale(1.02)';
                        this.style.boxShadow = '0 8px 24px rgba(254,186,4,0.25)';
                    };
                    card.onmouseout = function() {
                        this.style.background = 'linear-gradient(135deg, rgba(254,186,4,0.05) 0%, rgba(19,22,30,0.8) 100%)';
                        this.style.borderColor = 'rgba(254,186,4,0.2)';
                        this.style.transform = 'translateY(0) scale(1)';
                        this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                    };

                    const statusBadge = isTrend 
                        ? '<span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:rgba(100,100,255,0.2);color:#88aaff;font-size:11px;font-weight:600;margin-bottom:12px;"><i class="fas fa-chart-line" style="font-size:10px;"></i> Trend</span>'
                        : '';
                    
                    // Badge للثقة العالية
                    const confidenceBadge = !isTrend && conf !== null && conf !== undefined && conf >= 80
                        ? `<span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:rgba(16,185,129,0.2);color:#10b981;font-size:11px;font-weight:600;margin-bottom:12px;"><i class="fas fa-check-circle" style="font-size:10px;"></i> ثقة عالية</span>`
                        : '';

                    card.innerHTML = `
                        <div style="position:relative;">
                            ${statusBadge}
                            ${confidenceBadge}
                            <div style="font-weight:800;font-size:16px;line-height:1.4;min-height:48px;margin-bottom:12px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                                ${fireIcon}${title}
                            </div>
                            ${sourceLabel || categoryLabel ? `
                            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
                                ${sourceLabel}
                                ${categoryLabel ? `<span style="font-size:11px;color:rgba(255,255,255,0.3);">•</span>${categoryLabel}` : ''}
                            </div>
                            ` : ''}
                        </div>
                        
                        <div style="margin-top:12px;padding:12px;background:rgba(0,0,0,0.2);border-radius:10px;border:1px solid rgba(255,255,255,0.05);">
                            <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;font-size:12px;">
                                <div>
                                    <div style="color:rgba(255,255,255,0.5);margin-bottom:4px;">السوق</div>
                                    <div style="color:#feba04;font-weight:700;font-size:14px;">${market || '—'}</div>
                                </div>
                                ${!isTrend ? `
                                <div>
                                    <div style="color:rgba(255,255,255,0.5);margin-bottom:4px;">الثقة</div>
                                    <div style="color:#10b981;font-weight:700;font-size:14px;">${confStr}</div>
                                </div>
                                <div>
                                    <div style="color:rgba(255,255,255,0.5);margin-bottom:4px;">السرعة</div>
                                    <div style="color:#3b82f6;font-weight:700;font-size:14px;">${velStr}${velIndicator}/h</div>
                                </div>
                                ` : ''}
                            </div>
                        </div>
                        
                        <div style="margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between;">
                            <span style="font-size:12px;color:rgba(255,255,255,0.5);">عرض التفاصيل الكاملة</span>
                            <i class="fas fa-arrow-left" style="font-size:12px;color:#feba04;"></i>
                        </div>
                    `;
                    grid.appendChild(card);
                }
            }

            function updateTimer(seconds) {
                if (timerEl) {
                    timerEl.textContent = `تحديث تلقائي: ${seconds}s`;
                }
            }

            function startRefreshTimer() {
                let seconds = CACHE_TTL_SEC;
                updateTimer(seconds);
                
                if (refreshTimer) clearInterval(refreshTimer);
                
                refreshTimer = setInterval(() => {
                    seconds--;
                    updateTimer(seconds);
                    
                    if (seconds <= 0) {
                        seconds = CACHE_TTL_SEC;
                        load(); // إعادة تحميل البيانات
                    }
                }, 1000);
            }

            async function load() {
                try {
                    const url = `${API_BASE}/public/explosions?period=last_7d&limit=6`;
                    const res = await fetch(url, { 
                        headers: { "Accept": "application/json" },
                        cache: 'no-cache'
                    });
                    if (!res.ok) throw new Error("HTTP " + res.status);
                    const data = await res.json();
                    render(data.items || []);
                    startRefreshTimer(); // إعادة تشغيل الـ timer بعد التحميل
                } catch (e) {
                    console.warn("Failed to load home explosions:", e);
                    // فشل صامت + empty state
                    render([]);
                    startRefreshTimer(); // إعادة تشغيل الـ timer حتى عند الفشل
                }
            }

            // تحميل البيانات بعد تحميل الصفحة
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', load);
            } else {
                load();
            }
        })();
        </script>
</body>
</html>
</html>