/* Add custom Js styles below */ 
window.addEventListener('scroll', function() {
        // بنحدد الهيدر بتاعنا
        const header = document.querySelector('.index .store-header');
        
        // لو المستخدم نزل أكتر من 50 بكسل، ضيف كلاس اللون الأبيض
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            // لو رجع لأول الصفحة فوق، شيل الكلاس عشان يرجع شفاف تاني
            header.classList.remove('scrolled');
        }
    });


document.addEventListener("DOMContentLoaded", function() {
    // استخدم querySelectorAll لجلب جميع السكاشن التي تحمل هذا الكلاس
    const banners = document.querySelectorAll('.prestige-banner-full-width');

    if (banners.length > 0) {
        // 1. إضافة الستايل مرة واحدة فقط للصفحة
        const styleHTML = `
            <style>
                /* إعدادات الشاشات الصغيرة (الموبايل) */
                @media (max-width: 768px) {
                    .responsive-banner-box {
                        right: 0 !important;
                        left: 0 !important;
                        margin: 0 auto !important; /* لتوسيط البوكس أفقياً */
                        backdrop-filter: none !important; /* إزالة البلور */
                        -webkit-backdrop-filter: none !important;
                        text-align: center !important; /* توسيط النص */
                        top: 30% !important;
                    }
                }
            </style>
        `;
        document.head.insertAdjacentHTML('beforeend', styleHTML);

        // 2. تجهيز المحتوى الخاص بكل سكشن (الأول للجسم، والثاني للشعر)
        const bannersData = [
            {
                // السكشن الأول: عناية بالجسم
                title: "عناية متكاملة لجسمك",
                desc: "ترطيب عميق ونعومة تدوم طويلاً لبشرة أكثر إشراقاً.",
                link: "/العناية-بالجسم/c1631469245" // ضع رابط قسم الجسم هنا
            },
            {
                // السكشن الثاني: عناية بالشعر
                title: "شعر صحي بدون مواد قاسية",
                desc: "تركيبات طبيعية لتغذية عميقة ولمعان يدوم.",
                link: "/العناية-بالشعر/c1806684594" // ضع رابط قسم الشعر هنا
            }
        ];

        // 3. تطبيق المحتوى على كل سكشن بناءً على ترتيبه
        banners.forEach((banner, index) => {
            // التأكد من وجود بيانات مخصصة لهذا الترتيب (لتجنب الأخطاء إذا كان هناك أكثر من 2)
            if (bannersData[index]) {
                banner.setAttribute('dir', 'rtl');

                const contentHTML = `
                    <div class="absolute z-10 responsive-banner-box"
                         style="top: 50%; transform: translateY(-50%); right: 5%; max-width: 500px; width: 90%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(12px); padding: clamp(1rem, 4vw, 2rem); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6); text-align: right; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-sizing: border-box;">
                        
                        <h2 style="color: #1a1a1a; font-size: clamp(20px, 5vw, 36px); font-weight: 800; line-height: 1.3; margin-top: 0; margin-bottom: clamp(8px, 2vw, 12px);">
                            ${bannersData[index].title}
                        </h2>
                        
                        <p style="color: #4a4a4a; font-size: clamp(13px, 3vw, 16px); line-height: 1.5; margin-bottom: clamp(15px, 4vw, 25px);">
                            ${bannersData[index].desc}
                        </p>
                        
                        <a href="${bannersData[index].link}" style="display: inline-block; background-color: #405c48; color: #ffffff; padding: clamp(8px, 2vw, 10px) clamp(20px, 5vw, 35px); border-radius: 5px; font-size: clamp(13px, 3vw, 15px); font-weight: 600; text-decoration: none; box-shadow: 0 4px 10px rgba(64, 92, 72, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease;">
                            تسوق الآن
                        </a>
                        
                    </div>
                `;

                banner.insertAdjacentHTML('beforeend', contentHTML);

                // 4. إضافة تأثير مرور الماوس للزر في هذا السكشن
                const btn = banner.querySelector('a');
                if (btn) {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.transform = 'translateY(-3px)';
                        btn.style.boxShadow = '0 6px 15px rgba(64, 92, 72, 0.3)';
                    });
                    btn.addEventListener('mouseleave', () => {
                        btn.style.transform = 'translateY(0)';
                        btn.style.boxShadow = '0 4px 10px rgba(64, 92, 72, 0.2)';
                    });
                }
            }
        });
    }
});