document.addEventListener('DOMContentLoaded', function() {
    // Create the WhatsApp icon element
    const whatsappIcon = document.createElement('div');
    whatsappIcon.id = 'whatsapp-float';
    whatsappIcon.style.position = 'sticky';
    whatsappIcon.style.bottom = '30px';
    whatsappIcon.style.right = '50px';
    whatsappIcon.style.zIndex = '1000'; // High z-index to ensure it's on top
    whatsappIcon.style.backgroundColor = '#25D366'; // WhatsApp green
    whatsappIcon.style.color = 'white';
    whatsappIcon.style.borderRadius = '50%';
    whatsappIcon.style.width = '60px';
    whatsappIcon.style.height = '60px';
    whatsappIcon.style.display = 'flex';
    whatsappIcon.style.justifyContent = 'center';
    whatsappIcon.style.alignItems = 'center';
    whatsappIcon.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    whatsappIcon.style.cursor = 'pointer';
    whatsappIcon.style.transition = 'all 0.3s ease';
    whatsappIcon.style.animation = 'whatsappBounce 1.5s ease-in-out infinite';
    whatsappIcon.style.textDecoration = 'none'; // Ensure no underline if it's an <a> tag
    whatsappIcon.setAttribute('aria-label', 'Chat on WhatsApp');

    // Add WhatsApp SVG icon
    whatsappIcon.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white" style="width: 35px; height: 35px;">
            <path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
        </svg>`;

    document.body.appendChild(whatsappIcon);

    // **هنا نقوم بتغيير الرقم الأساسي للواتساب**
    const whatsappNumber = '966598489020'; // تم تحديث الرقم إلى +966598489020

    whatsappIcon.addEventListener('click', function() {
        // Check if it's a mobile device to use the app link
        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        let whatsappLink;

        if (isMobile) {
            whatsappLink = `whatsapp://send?phone=${whatsappNumber}`;
        } else {
            whatsappLink = `https://web.whatsapp.com/send?phone=${whatsappNumber}`;
        }

        window.open(whatsappLink, '_blank');
    });

    // Add hover and active states
    whatsappIcon.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.1) translateY(-5px)';
        this.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
    });

    whatsappIcon.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1) translateY(0)';
        this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    });

    whatsappIcon.addEventListener('mousedown', function() {
        this.style.transform = 'scale(0.95) translateY(0)';
    });

    whatsappIcon.addEventListener('mouseup', function() {
        this.style.transform = 'scale(1.1) translateY(-5px)';
    });
});


/*
 * قسم خريطة المتجر - محسن للأداء
 *
 * تعليمات الاستخدام:
 * 1. أضف هذا الملف إلى مجلد الموقع
 * 2. أضف ملف store-map.css إلى مجلد الموقع
 * 3. في ملف HTML الرئيسي، أضف هذين السطرين قبل إغلاق </body>:
 *    <link rel="stylesheet" href="store-map.css">
 *    <script src="store-map.js"></script>
 * 4. احصل على مفتاح Google Maps API واستبدل YOUR_API_KEY في السطر 95
 * 5. عدّل بيانات الفروع في المتغير branches حسب فروعك الفعلية
 *
 * الميزات:
 * - يظهر فقط في الصفحة الرئيسية
 * - محسن للأداء (lazy loading)
 * - متجاوب مع جميع الشاشات
 * - لا يؤثر على سرعة تحميل الصفحة
 */
(function() {
    'use strict';
    
    // بيانات الفروع
    const branches = {
        main: {
            name: 'الفرع الرئيسي - تبوك',
            lat: 28.3917498,
            lng: 36.5726322,
            address: 'Prince Fahad bin Sultan، الفيصلية الجنوبية، تبوك 47911، المملكة العربية السعودية',
            phone: '+966144223728',
            hours: '٧:٣٠ص–٢:٣٠م، ٤:٠٠–١٠:٠٠م',
            mapUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3454.1!2d36.5726322!3d28.3917498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15a9ad0f5e5ea653:0xec515e11f221f592!2z2KfZhNi02YXYp9mEINmE2YTYo9iv2YjYp9iqINin2YTZg9mH2LHYqNin2KbZitip!5e0!3m2!1sar!2ssa!4v1734567890',
            googleMapsLink: 'https://www.google.com/maps/place/%D8%A7%D9%84%D8%B4%D9%85%D8%A7%D9%84+%D9%84%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA+%D8%A7%D9%84%D9%83%D9%87%D8%B1%D8%A8%D8%A7%D8%A6%D9%8A%D8%A9%E2%80%AD/@28.3917498,36.5726322,17z/data=!3m1!4b1!4m6!3m5!1s0x15a9ad0f5e5ea653:0xec515e11f221f592!8m2!3d28.3917498!4d36.5726322!16s%2Fg%2F11clsfsqk0?hl=ar-SA&entry=ttu&g_ep=EgoyMDI1MDYxNy4wIKXMDSoASAFQAw%3D%3D',
            isActive: true
        },
        branch2: {
            name: 'فرع الرياض',
            lat: 24.657451,
            lng: 46.7448502,
            address: 'طريق الامير عبدالمحسن بن عبدالعزيز، الملز، الرياض 12842، المملكة العربية السعودية',
            phone: '+966555624522',
            hours: 'يومياً من 10 صباحاً حتى 11 مساءً',
            mapUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.1!2d46.7448502!3d24.657451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f050018720f31:0x12ef92894dfd8a16!2z2LTYsdmD2Kkg2KfZhNi02YXYp9mEINil2YbYp9ix2Kk!5e0!3m2!1sar!2ssa!4v1734567891',
            googleMapsLink: 'https://www.google.com/maps/place/%D8%B4%D8%B1%D9%83%D8%A9+%D8%A7%D9%84%D8%B4%D9%85%D8%A7%D9%84+%D8%A5%D9%86%D8%A7%D8%B1%D8%A9%E2%80%AD/@24.657451,46.7448502,17z/data=!3m1!4b1!4m6!3m5!1s0x3e2f050018720f31:0x12ef92894dfd8a16!8m2!3d24.657451!4d46.7448502!16s%2Fg%2F11w8yzwbxh?hl=ar-SA&entry=ttu&g_ep=EgoyMDI1MDYxNy4wIKXMDSoASAFQAw%3D%3D',
            isActive: false
        }
    };

    let isMapLoaded = false;
    let currentBranch = 'main';

    // التحقق من وجود الصفحة الرئيسية
    function isHomePage() {
        return window.location.href === 'https://salla.sa/roba.sa' ||
               window.location.href === 'https://salla.sa/roba.sa/';
    }

    // إنشاء HTML للقسم
    function createMapSection() {
        console.log('إنشاء HTML لقسم الخرائط');
        const section = document.createElement('section');
        section.id = 'store-map-section';
        section.className = 'store-map-section';
        section.innerHTML = `
            <div class="container">
                <div class="map-header">
                    <h2 class="map-title">مواقع فروعنا</h2>
                    <div class="branch-switcher">
                        <button class="branch-btn active" data-branch="main">
                            ${branches.main.name}
                        </button>
                        <button class="branch-btn" data-branch="branch2">
                            ${branches.branch2.name}
                        </button>
                    </div>
                </div>
                <div class="map-container">
                    <div class="map-wrapper">
                        <div id="google-map" class="google-map"></div>
                        <div class="map-loading">
                            <div class="loading-spinner"></div>
                            <p>جاري تحميل الخريطة...</p>
                        </div>
                    </div>
                    <div class="branch-info">
                        <div class="info-content">
                            <h3 class="branch-name">${branches.main.name}</h3>
                            <div class="info-item">
                                <i class="icon-location"></i>
                                <span class="branch-address">${branches.main.address}</span>
                            </div>
                            <div class="info-item">
                                <i class="icon-phone"></i>
                                <span class="branch-phone">${branches.main.phone}</span>
                            </div>
                            <div class="info-item">
                                <i class="icon-clock"></i>
                                <span class="branch-hours">${branches.main.hours}</span>
                            </div>
                            <div class="info-actions">
                                <a href="${branches.main.googleMapsLink}" target="_blank" class="maps-btn">
                                    <i class="icon-map"></i>
                                    فتح في خرائط جوجل
                                </a>
                                <a href="tel:${branches.main.phone}" class="call-btn">
                                    <i class="icon-phone"></i>
                                    اتصل الآن
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        console.log('تم إنشاء HTML للقسم:', section);
        return section;
    }

    // استخدام خريطة iframe مباشرة
    function useEmbeddedMap() {
        console.log('محاولة العثور على عنصر الخريطة...');
        const mapElement = document.getElementById('google-map');
        const loadingElement = document.querySelector('.map-loading');

        if (!mapElement) {
            console.error('عنصر الخريطة غير موجود - ID: google-map');
            // محاولة البحث بطريقة أخرى
            const allMaps = document.querySelectorAll('[id*="map"]');
            console.log('العناصر الموجودة التي تحتوي على "map":', allMaps);
            return;
        }

        console.log('تم العثور على عنصر الخريطة:', mapElement);

        const branch = branches[currentBranch];
        console.log('تحميل خريطة للفرع:', branch.name);

        if (branch.mapUrl) {
            // إنشاء iframe للخريطة
            const iframe = document.createElement('iframe');
            iframe.src = branch.mapUrl;
            iframe.width = '100%';
            iframe.height = '400px';
            iframe.style.border = '0';
            iframe.style.borderRadius = '15px';
            iframe.style.minHeight = '400px';
            iframe.allowFullscreen = true;
            iframe.loading = 'eager'; // تحميل فوري
            iframe.referrerPolicy = 'no-referrer-when-downgrade';

            // إضافة معالج تحميل ناجح
            iframe.onload = () => {
                console.log('تم تحميل الخريطة بنجاح');
                if (loadingElement) {
                    loadingElement.style.display = 'none';
                }
            };

            // معالجة خطأ تحميل iframe
            iframe.onerror = () => {
                console.error('فشل في تحميل iframe الخريطة');
                showMapError();
            };

            mapElement.innerHTML = '';
            mapElement.appendChild(iframe);

            // إخفاء شاشة التحميل بعد ثانيتين كحد أقصى
            setTimeout(() => {
                if (loadingElement) {
                    loadingElement.style.display = 'none';
                }
            }, 2000);

        } else {
            console.error('رابط الخريطة غير موجود للفرع:', branch.name);
            showMapError();
        }

        isMapLoaded = true;
    }

    // إظهار رسالة خطأ الخريطة
    function showMapError() {
        const mapElement = document.getElementById('google-map');
        if (!mapElement) return;

        mapElement.innerHTML = `
            <div class="map-error">
                <i class="icon-warning">⚠️</i>
                <h4>عذراً، لا يمكن تحميل الخريطة</h4>
                <p>يمكنك استخدام أزرار "فتح في خرائط جوجل" أدناه للوصول إلى موقعنا</p>
            </div>
        `;
    }

    // تهيئة الخريطة
    function initializeMap() {
        console.log('بدء تهيئة الخريطة');
        // استخدام خريطة iframe مباشرة
        useEmbeddedMap();
    }



    // تحديث معلومات الفرع
    function updateBranchInfo(branchKey) {
        const branch = branches[branchKey];
        const nameElement = document.querySelector('.branch-name');
        const addressElement = document.querySelector('.branch-address');
        const phoneElement = document.querySelector('.branch-phone');
        const hoursElement = document.querySelector('.branch-hours');
        const mapsBtn = document.querySelector('.maps-btn');
        const callBtn = document.querySelector('.call-btn');

        if (nameElement) nameElement.textContent = branch.name;
        if (addressElement) addressElement.textContent = branch.address;
        if (phoneElement) phoneElement.textContent = branch.phone;
        if (hoursElement) hoursElement.textContent = branch.hours;
        if (mapsBtn && branch.googleMapsLink) mapsBtn.href = branch.googleMapsLink;
        if (callBtn) callBtn.href = `tel:${branch.phone}`;
    }

    // تبديل الفرع
    function switchBranch(branchKey) {
        if (branchKey === currentBranch) return;

        console.log('تبديل إلى الفرع:', branchKey);
        currentBranch = branchKey;
        const branch = branches[branchKey];

        // تحديث الأزرار
        document.querySelectorAll('.branch-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.dataset.branch === branchKey) {
                btn.classList.add('active');
            }
        });

        // تحديث معلومات الفرع
        updateBranchInfo(branchKey);

        // تحديث خريطة iframe
        if (isMapLoaded) {
            const mapElement = document.getElementById('google-map');
            const iframe = mapElement.querySelector('iframe');
            if (iframe && branch.mapUrl) {
                console.log('تحديث رابط الخريطة إلى:', branch.mapUrl);
                iframe.src = branch.mapUrl;
            } else {
                // إعادة إنشاء الخريطة
                useEmbeddedMap();
            }
        }
    }

    // إضافة مستمعي الأحداث
    function attachEventListeners() {
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('branch-btn')) {
                e.preventDefault();
                const branchKey = e.target.dataset.branch;
                switchBranch(branchKey);
            }
        });
    }

    // تهيئة القسم
    function initializeSection() {
        console.log('بدء تهيئة قسم الخرائط');

        if (!isHomePage()) {
            console.log('ليست الصفحة الرئيسية، لن يتم عرض الخرائط');
            return;
        }

        // إنشاء قسم الخرائط
        const mapSection = createMapSection();

        const footer = document.querySelector('footer');
        if (!footer) {
            console.log('لم يتم العثور على footer، سيتم إضافة الخرائط في نهاية body');
            document.body.appendChild(mapSection);
        } else {
            console.log('تم العثور على footer، سيتم إضافة الخرائط قبله');
            footer.parentNode.insertBefore(mapSection, footer);
        }

        attachEventListeners();
        console.log('تم إنشاء قسم الخرائط بنجاح');

        // تحميل فوري للخريطة
        setTimeout(() => {
            console.log('بدء التحميل الفوري للخريطة');
            initializeMap();
        }, 500);

        // تحميل الخريطة عند التمرير أو النقر
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !isMapLoaded) {
                    console.log('الخريطة ظهرت في الشاشة، بدء التحميل');
                    initializeMap();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        observer.observe(mapSection);

        // تحميل فوري للخريطة كبديل (بعد 2 ثانية)
        setTimeout(() => {
            if (!isMapLoaded) {
                console.log('تحميل فوري للخريطة بعد انتظار');
                initializeMap();
            }
        }, 2000);
    }

    // تشغيل التطبيق عند تحميل الصفحة
    console.log('🚀 بدء تشغيل سكريبت الخرائط');
    console.log('حالة المستند:', document.readyState);

    if (document.readyState === 'loading') {
        console.log('المستند لا يزال يحمل، انتظار DOMContentLoaded');
        document.addEventListener('DOMContentLoaded', initializeSection);
    } else {
        console.log('المستند جاهز، تشغيل فوري');
        initializeSection();
    }

    // تشغيل إضافي بعد تحميل كامل للصفحة
    window.addEventListener('load', function() {
        console.log('� تحقق إضافي بعد تحميل الصفحة كاملة');
        // التأكد من وجود قسم الخرائط
        if (!document.getElementById('store-map-section')) {
            console.log('⚠️ قسم الخرائط غير موجود، محاولة إنشاؤه مرة أخرى');
            setTimeout(initializeSection, 1000);
        } else {
            console.log('✅ قسم الخرائط موجود');
        }
    });

    // تشغيل طوارئ بعد 5 ثواني
    setTimeout(() => {
        if (!document.getElementById('store-map-section')) {
            console.log('🚨 تشغيل طوارئ - إنشاء قسم الخرائط');
            initializeSection();
        }
    }, 5000);

})();

/*
 * معرض الصور التفاعلي - محسن للأداء
 * 
 * تعليمات الاستخدام:
 * 1. أضف هذا الملف إلى مجلد الموقع
 * 2. أضف ملف image-gallery.css إلى مجلد الموقع
 * 3. في ملف HTML الرئيسي، أضف هذين السطرين قبل إغلاق </body>:
 *    <link rel="stylesheet" href="image-gallery.css">
 *    <script src="image-gallery.js"></script>
 * 4. عدّل مصادر الصور في المتغير galleryImages حسب صورك الفعلية
 * 
 * الميزات:
 * - يظهر فقط في الصفحة الرئيسية
 * - تأثير hover يكبر الصورة المحددة ويصغر الباقي
 * - محسن للأداء (lazy loading)
 * - متجاوب مع جميع الشاشات
 * - لا يؤثر على سرعة تحميل الصفحة
 */
(function() {
    'use strict';
    
    // بيانات الصور
    const galleryImages = [
        {
            src: 'https://i.ibb.co/ZRZBRv5V/light2.jpg',
            alt: 'إنارة LED عصرية',
            title: 'ثريات فاخرة',
            description: 'اضاءة انيقة لغرف المعيشة ',
            link: 'https://salla.sa/roba.sa/category/NAmepm'
        },
        {
            src: 'https://i.ibb.co/KzhMSGmy/light3.jpg',
            alt: 'مفاتيح ذكية',
            title: 'انارة جدارية',
            description: 'تصاميم عصرية للحوائظ',
            link: 'https://salla.sa/roba.sa/category/oOReWE'
        },
        {
            src: 'https://i.ibb.co/5x2Pfwk4/light4.jpg',
            alt: 'إنارة خارجية',
            title: 'إنارة خارجية',
            description: 'حلول إنارة خارجية مقاومة للعوامل الجوية',
            link: 'https://salla.sa/roba.sa/category/dGWvxg'
        },
        {
            src: 'https://i.ibb.co/m5Qsb9y9/light1.jpg',
            alt: 'ثريات كريستال فاخرة',
            title: 'منتجات انارة اساسية ',
            description: 'منتجات الانارة الاساسية لكل المنازل',
            link: 'https://salla.sa/roba.sa/category/nxRenr'
        },
        {
            src: 'https://i.ibb.co/S73JRwdz/light-banner7.jpg',
            alt: 'أفياش ذكية',
            title: 'smart home',
            description: 'بضغطة زر كل شئ تحت تحكمك',
            link: 'https://salla.sa/roba.sa/category/nPeEYW'
        },
        
        
        {
            src: 'https://i.ibb.co/sJPK0FgB/light5.jpg',
            alt: 'مراوح سقف',
            title: 'led لمبات ',
            description: 'توفير في الطاقة واضاءة مثالية',
            link: 'https://salla.sa/roba.sa/category/wqoyzN'
        },
        
    ];

    let isGalleryLoaded = false;

    // التحقق من وجود الصفحة الرئيسية
    function isHomePage() {
        return window.location.href === 'https://salla.sa/roba.sa' ||
               window.location.href === 'https://salla.sa/roba.sa/';
    }

    // إنشاء HTML للمعرض
    function createGallerySection() {
        const section = document.createElement('section');
        section.id = 'image-gallery-section';
        section.className = 'image-gallery-section';
        section.innerHTML = `
            <div class="container">
                <div class="gallery-header">
                    <h2 class="gallery-title">معرض منتجاتنا</h2>
                    <p class="gallery-subtitle">اكتشف مجموعتنا المتنوعة من منتجات الإنارة والكهرباء</p>
                </div>
                <div class="gallery-container">
                    <div class="gallery-row" id="gallery-row">
                        ${galleryImages.map((image, index) => `
                            <div class="gallery-card" data-index="${index}">
                                <a href="${image.link}" target="_blank" class="card-link">
                                    <div class="card-wrapper">
                                        <div class="image-placeholder">
                                            <div class="loading-spinner"></div>
                                        </div>
                                        <img
                                            data-src="${image.src}"
                                            alt="${image.alt}"
                                            class="gallery-image lazy-load"
                                            loading="lazy"
                                        >
                                        <div class="card-overlay">
                                            <div class="overlay-content">
                                                <h3 class="image-title">${image.title}</h3>
                                                <p class="image-description">${image.description}</p>
                                                <div class="shop-button">
                                                    <span>تسوق الآن</span>
                                                    <i class="arrow">←</i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;
        return section;
    }

    // تحميل الصور بشكل تأخيري
    function lazyLoadImages() {
        const images = document.querySelectorAll('.gallery-image.lazy-load');
        
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    const placeholder = img.previousElementSibling;
                    
                    img.src = img.dataset.src;
                    img.classList.remove('lazy-load');
                    
                    img.onload = () => {
                        img.style.opacity = '1';
                        if (placeholder) {
                            placeholder.style.display = 'none';
                        }
                    };
                    
                    img.onerror = () => {
                        // في حالة فشل تحميل الصورة، استخدم صورة افتراضية
                        img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPtmE2Kcg2KrZiNis2K8g2LXZiNix2Kk8L3RleHQ+PC9zdmc+';
                        img.style.opacity = '1';
                        if (placeholder) {
                            placeholder.style.display = 'none';
                        }
                    };
                    
                    observer.unobserve(img);
                }
            });
        }, { threshold: 0.1 });

        images.forEach(img => imageObserver.observe(img));
    }

    // إضافة تأثيرات التفاعل
    function addHoverEffects() {
        const galleryRow = document.getElementById('gallery-row');
        const galleryCards = document.querySelectorAll('.gallery-card');

        if (!galleryRow || galleryCards.length === 0) return;

        // تأثير hover على الكاردز
        galleryCards.forEach((card, index) => {
            card.addEventListener('mouseenter', () => {
                galleryRow.classList.add('hover-active');
                card.classList.add('expanded');

                // تصغير باقي الكاردز
                galleryCards.forEach((otherCard, otherIndex) => {
                    if (otherIndex !== index) {
                        otherCard.classList.add('compressed');
                    }
                });
            });

            card.addEventListener('mouseleave', () => {
                galleryRow.classList.remove('hover-active');
                card.classList.remove('expanded');

                // إزالة تأثير التصغير من جميع الكاردز
                galleryCards.forEach(otherCard => {
                    otherCard.classList.remove('compressed');
                });
            });

            // تأثير النقر للأجهزة اللمسية
            card.addEventListener('click', (e) => {
                if (window.innerWidth <= 768) {
                    e.preventDefault();

                    // إزالة التأثير من جميع الكاردز
                    galleryCards.forEach(otherCard => {
                        otherCard.classList.remove('mobile-expanded');
                    });

                    // إضافة التأثير للكارد المحدد
                    card.classList.add('mobile-expanded');

                    // إزالة التأثير بعد 3 ثوان
                    setTimeout(() => {
                        card.classList.remove('mobile-expanded');
                    }, 3000);
                }
            });
        });

        // إزالة التأثير عند النقر خارج المعرض
        document.addEventListener('click', (e) => {
            if (!galleryRow.contains(e.target)) {
                galleryCards.forEach(card => {
                    card.classList.remove('mobile-expanded');
                });
            }
        });
    }

    // تحسين الأداء بتقليل استدعاءات الأحداث
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // تحديث تخطيط المعرض عند تغيير حجم الشاشة
    function handleResize() {
        const galleryCards = document.querySelectorAll('.gallery-card');

        // إزالة جميع التأثيرات عند تغيير حجم الشاشة
        galleryCards.forEach(card => {
            card.classList.remove('expanded', 'compressed', 'mobile-expanded');
        });

        const galleryRow = document.getElementById('gallery-row');
        if (galleryRow) {
            galleryRow.classList.remove('hover-active');
        }
    }

    // تهيئة المعرض
    function initializeGallery() {
        if (!isHomePage()) return;

        // البحث عن السلايدر الأول بأولوية
        const sliderSelectors = [
            '#main-slider-1-0',
            '.main-slider-1',
            '[id*="main-slider"]',
            '.s-block--main-slider-1',
            'salla-slider[id*="main-slider"]'
        ];

        let targetElement = null;
        for (const selector of sliderSelectors) {
            const element = document.querySelector(selector);
            if (element) {
                // البحث عن العنصر الحاوي للسلايدر (section)
                targetElement = element.closest('section') || element;
                console.log(`✅ تم العثور على السلايدر الأول: ${selector}`);
                break;
            }
        }

        // إذا لم نجد السلايدر، نبحث عن الـ header كبديل
        if (!targetElement) {
            targetElement = document.querySelector('.header.store-header');
            console.log('📍 لم يتم العثور على السلايدر، سيتم وضع المعرض بعد الـ header');
        }

        if (!targetElement) return;

        const gallerySection = createGallerySection();

        // إدراج المعرض بعد السلايدر الأول أو الـ header
        targetElement.parentNode.insertBefore(gallerySection, targetElement.nextSibling);

        // تحميل الصور بشكل تأخيري
        lazyLoadImages();
        
        // إضافة تأثيرات التفاعل
        addHoverEffects();
        
        // إضافة مستمع لتغيير حجم الشاشة
        window.addEventListener('resize', debounce(handleResize, 250));
        
        isGalleryLoaded = true;
    }

    // تشغيل التطبيق عند تحميل الصفحة
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeGallery);
    } else {
        initializeGallery();
    }

})();
// ==================== معرض الصور الثاني الإبداعي ====================

// دالة فحص الصفحة الرئيسية
function isHomePage() {
    return window.location.href === 'https://salla.sa/roba.sa' ||
           window.location.href === 'https://salla.sa/roba.sa/';
}

// دالة للعثور على أفضل مكان لوضع المعرض
function findBestPlacementLocation() {
    // البحث عن المعرض الأول بأولوية
    const gallerySelectors = [
        '.interactive-image-gallery-section',
        '.image-gallery-section',
        '.gallery-section',
        '[id*="gallery"]',
        '[class*="gallery"]',
        '.image-gallery',
        '#image-gallery'
    ];

    for (const selector of gallerySelectors) {
        const element = document.querySelector(selector);
        if (element) {
            console.log(`✅ تم العثور على المعرض الأول: ${selector}`);
            return element;
        }
    }

    // إذا لم نجد معرض، نبحث عن السلايدر الأول
    const sliderSelectors = [
        '#main-slider-1-0',
        '.main-slider-1',
        '[id*="main-slider"]',
        '.s-block--main-slider-1',
        'salla-slider[id*="main-slider"]'
    ];

    for (const selector of sliderSelectors) {
        const element = document.querySelector(selector);
        if (element) {
            // البحث عن العنصر الحاوي للسلايدر (section)
            const targetElement = element.closest('section') || element;
            console.log(`✅ تم العثور على السلايدر الأول: ${selector}`);
            return targetElement;
        }
    }

    // إذا لم نجد سلايدر، نبحث عن الـ navbar أو header
    const headerSelectors = ['nav', '.navbar', 'header', '.header'];
    for (const selector of headerSelectors) {
        const element = document.querySelector(selector);
        if (element) {
            console.log(`📍 سيتم وضع المعرض بعد: ${selector}`);
            return element;
        }
    }

    // كحل أخير، نضعه بعد أول عنصر في الـ body
    const firstChild = document.body.firstElementChild;
    if (firstChild) {
        console.log('📍 سيتم وضع المعرض بعد أول عنصر في الصفحة');
        return firstChild;
    }

    return null;
}

// دالة إنشاء معرض الصور الثاني الإبداعي
function createCreativeImageGallery() {
    // فحص إذا كانت الصفحة الرئيسية
    if (!isHomePage()) {
        console.log('🚫 المعرض الإبداعي لا يظهر إلا في الصفحة الرئيسية');
        return;
    }

    // فحص إذا كان المعرض موجود بالفعل
    if (document.getElementById('creative-gallery')) {
        console.log('✅ المعرض الإبداعي موجود بالفعل');
        return;
    }

    // البحث عن أفضل مكان لوضع المعرض
    const placementLocation = findBestPlacementLocation();

    if (!placementLocation) {
        console.warn('❌ لم يتم العثور على مكان مناسب لوضع المعرض');
        return;
    }

    // إنشاء قسم المعرض الثاني
    const creativeGallerySection = createCreativeGallerySection();

    // إدراج المعرض بعد الموقع المحدد
    placementLocation.insertAdjacentElement('afterend', creativeGallerySection);

    // إضافة التفاعلات JavaScript
    addCreativeGalleryInteractions();

    console.log('🎨 تم إنشاء المعرض الإبداعي الثاني بنجاح!');
}

// دالة إنشاء قسم المعرض الإبداعي
function createCreativeGallerySection() {
    const section = document.createElement('section');
    section.className = 'creative-gallery-section';
    section.id = 'creative-gallery';

    // بيانات الصور للمعرض الثاني
    const creativeImages = [
        {
            url: 'https://i.ibb.co/35Y3mJzL/light8.jpg',
            position: 'top-left'
        },
        {
            url: 'https://i.ibb.co/k2SmGfTS/Whats-App-Image-2025-07-09-at-18-04-25.jpg',
            position: 'top-right'
        },
        {
            url: 'https://i.ibb.co/hJJxB4SN/ligh9.jpg',
            position: 'bottom-left'
        },
        {
            url: 'https://i.ibb.co/7dPmMSR3/Whats-App-Image-2025-07-09-at-18-04-13.jpg',
            position: 'bottom-right'
        },
        {
            url: 'https://i.ibb.co/sJzKzWt5/sec-gallary-simon.jpg',
            position: 'center-top'
        },
        {
            url: 'https://i.ibb.co/ttQmD7C/sec-gallary-battery.jpg',
            position: 'bottom-center'
        }
    ];

    section.innerHTML = `
        <div class="creative-gallery-container">
            <div class="creative-gallery-grid">
                <!-- العنوان في المنتصف -->
                <div class="gallery-center-title">
                    <h2>تصنيفات مختارة</h2>
                    <p>تصاميم مبتكرة للإنارة العصرية</p>
                </div>

                <!-- الصور حول العنوان -->
                ${creativeImages.map((image, index) => `
                    <div class="creative-gallery-item ${image.position}" data-index="${index}">
                        <div class="creative-image" style="background-image: url('${image.url}')"></div>
                        <div class="image-overlay"></div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;

    return section;
}

// دالة إضافة التفاعلات JavaScript للمعرض الإبداعي
function addCreativeGalleryInteractions() {
    const gallery = document.getElementById('creative-gallery');
    if (!gallery) return;

    const galleryItems = gallery.querySelectorAll('.creative-gallery-item');

    // إضافة تأثيرات الماوس لكل عنصر
    galleryItems.forEach((item, index) => {
        // تأثير دخول الماوس
        item.addEventListener('mouseenter', function() {
            this.classList.add('creative-item-active');
        });

        // تأثير خروج الماوس
        item.addEventListener('mouseleave', function() {
            this.classList.remove('creative-item-active');
        });

        // تأثير النقر
        item.addEventListener('click', function() {
            const imageUrl = this.querySelector('.creative-image').style.backgroundImage;
            openCreativeImageModal(imageUrl, index);
        });

        // تأثير لوحة المفاتيح
        item.setAttribute('tabindex', '0');
        item.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.click();
            }
        });
    });

    // إضافة تأثير التمرير السلس
    addCreativeScrollAnimation();

    // إضافة تأثيرات الأداء
    addCreativePerformanceOptimizations();
}

// دالة فتح الصورة في نافذة منبثقة للمعرض الإبداعي
function openCreativeImageModal(imageUrl, index) {
    const modal = document.createElement('div');
    modal.className = 'creative-gallery-modal';
    modal.innerHTML = `
        <div class="modal-backdrop" onclick="closeCreativeImageModal()"></div>
        <div class="modal-content">
            <button class="modal-close" onclick="closeCreativeImageModal()">&times;</button>
            <div class="modal-image" style="background-image: ${imageUrl}"></div>
            <div class="modal-info">
                <h3>صورة إبداعية ${index + 1}</h3>
                <p>من مجموعة تصاميم الإنارة المبتكرة</p>
            </div>
        </div>
    `;

    document.body.appendChild(modal);

    // إضافة مستمع لإغلاق النافذة بالضغط على Escape
    const handleEscape = (e) => {
        if (e.key === 'Escape') {
            closeCreativeImageModal();
            document.removeEventListener('keydown', handleEscape);
        }
    };
    document.addEventListener('keydown', handleEscape);
}

// دالة إغلاق النافذة المنبثقة للمعرض الإبداعي
function closeCreativeImageModal() {
    const modal = document.querySelector('.creative-gallery-modal');
    if (modal) {
        modal.style.animation = 'modalFadeOut 0.3s ease forwards';
        setTimeout(() => {
            modal.remove();
        }, 300);
    }
}

// دالة تأثير التمرير السلس للمعرض الإبداعي
function addCreativeScrollAnimation() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });

    const gallerySection = document.querySelector('.creative-gallery-section');
    if (gallerySection) {
        observer.observe(gallerySection);
    }
}

// دالة تحسينات الأداء للمعرض الإبداعي
function addCreativePerformanceOptimizations() {
    const gallery = document.getElementById('creative-gallery');
    if (!gallery) return;

    // تحسين للأجهزة الضعيفة
    const isLowEndDevice = navigator.hardwareConcurrency <= 2 || window.innerWidth < 768;

    if (isLowEndDevice) {
        // تقليل التأثيرات على الأجهزة الضعيفة
        const galleryItems = gallery.querySelectorAll('.creative-gallery-item');
        galleryItems.forEach(item => {
            item.style.transition = 'all 0.3s ease';
        });

        // تعطيل بعض التأثيرات المعقدة
        const style = document.createElement('style');
        style.textContent = `
            @media (max-width: 768px) {
                .creative-gallery-item {
                    transition: all 0.2s ease !important;
                }
                .image-overlay {
                    display: none;
                }
                .creative-gallery-grid:hover .gallery-center-title {
                    transform: none !important;
                }
            }
        `;
        document.head.appendChild(style);
    }

    // تحسين تحميل الصور
    const images = gallery.querySelectorAll('.creative-image');
    images.forEach(img => {
        const bgImage = img.style.backgroundImage;
        if (bgImage) {
            const imageUrl = bgImage.slice(5, -2); // إزالة url(" و ")
            const preloadImg = new Image();
            preloadImg.src = imageUrl;
        }
    });
}

// دالة للتحقق من وجود المعرض الأول وإنشاء المعرض الإبداعي
function waitForFirstGalleryAndCreate() {
    let attempts = 0;
    const maxAttempts = 20; // 10 ثواني كحد أقصى

    const checkInterval = setInterval(() => {
        attempts++;

        // البحث عن مكان مناسب للمعرض
        const placementLocation = findBestPlacementLocation();

        if (placementLocation || attempts >= maxAttempts) {
            clearInterval(checkInterval);
            createCreativeImageGallery();
        }
    }, 500);
}

// تشغيل المعرض عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    // انتظار قليل للتأكد من تحميل العناصر الأخرى
    setTimeout(waitForFirstGalleryAndCreate, 1000);
});

// تشغيل المعرض عند اكتمال تحميل الصفحة
window.addEventListener('load', function() {
    setTimeout(createCreativeImageGallery, 500);
});

// تشغيل المعرض عند تغيير حالة الصفحة (للتطبيقات أحادية الصفحة)
if (typeof window !== 'undefined') {
    window.addEventListener('popstate', createCreativeImageGallery);

    // مراقبة تغييرات DOM للتأكد من إضافة المعرض
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // التحقق من إضافة عناصر جديدة قد تكون معارض
                const hasGalleryElements = Array.from(mutation.addedNodes).some(node =>
                    node.nodeType === 1 && (
                        node.classList?.contains('gallery') ||
                        node.classList?.contains('image-gallery') ||
                        node.id?.includes('gallery')
                    )
                );

                if (hasGalleryElements) {
                    setTimeout(createCreativeImageGallery, 500);
                }
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}