/* Add custom JS code below */ 

// ═══════════════════════════════════════════════════════════
// القسم 6: شريط الإعلان أسفل الـ Navbar
// ═══════════════════════════════════════════════════════════
(function initPromoBanner() {

    function createPromoBanner() {
        try {
            // منع التكرار
            if (document.querySelector('.top-promo-bars-wrapper')) return;

            const header =
                document.querySelector(".store-header") ||
                document.querySelector("header");

            if (!header) {
                console.warn("Header not found for promo banner");
                return;
            }

            // تحميل Swiper CSS
            const swiperCSS = document.createElement("link");
            swiperCSS.rel = "stylesheet";
            swiperCSS.href =
                "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";

            document.head.appendChild(swiperCSS);

            // إنشاء الشريط
            const promoBars = document.createElement("div");
            promoBars.className = "top-promo-bars-wrapper";

            promoBars.innerHTML = `
                <style>

                    .top-promo-bars-wrapper {
                        width: 100%;
                        background: #58324F;
                        color: #efe1d8;
                        font-size: 14px;
                        text-align: center;
                        position: relative;
                        z-index: 20;
                        overflow: hidden;
                    }

                    .promo-banner-strip {
                        padding: 10px 20px;
                        width: 100%;
                    }

                    .promo-banner-slider {
                        background: #58324F;
                        overflow: hidden;
                        position: relative;
                    }

                    .promo-slider-container {
                        width: 100%;
                        height: 100%;
                    }

                    .promo-slider-container .swiper-wrapper {
                        width: 100%;
                        transition-timing-function: linear !important;
                    }

                    .promo-slider-container .swiper-slide {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        white-space: nowrap;
                        color: #efe1d8;
                    }

                    @media (max-width: 768px) {

                        .top-promo-bars-wrapper {
                            font-size: 12px;
                        }

                        .promo-banner-strip {
                            padding: 8px 15px;
                        }

                    }

                </style>

                <div class="promo-banner-strip promo-banner-slider">

                    <div class="swiper promo-slider-container">

                        <div class="swiper-wrapper">

                            ${Array(12).fill(`
                                <div class="swiper-slide">
                                    سيلا للعطور والبخور الفاخر … لمسة عطرية تصنع الفرق
                                </div>
                            `).join('')}

                        </div>

                    </div>

                </div>
            `;

            // إضافة الشريط مباشرة بعد الـ Navbar
            header.insertAdjacentElement("afterend", promoBars);


            // تحميل Swiper JS
            const swiperJS = document.createElement("script");

            swiperJS.src =
                "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";

            swiperJS.onload = function () {

                try {

                    if (typeof Swiper !== "undefined") {

                        new Swiper(".promo-slider-container", {

                            direction: "horizontal",

                            loop: true,

                            loopedSlides: 12,

                            speed: 7000,

                            autoplay: {
                                delay: 0,
                                disableOnInteraction: false,
                                pauseOnMouseEnter: true
                            },

                            spaceBetween: 50,

                            centeredSlides: false,

                            breakpoints: {

                                320: {
                                    slidesPerView: 1.5,
                                    spaceBetween: 30
                                },

                                640: {
                                    slidesPerView: 2,
                                    spaceBetween: 40
                                },

                                768: {
                                    slidesPerView: 3,
                                    spaceBetween: 50
                                },

                                1024: {
                                    slidesPerView: 4,
                                    spaceBetween: 50
                                }

                            }

                        });

                    }

                } catch (error) {

                    console.warn(
                        "Promo slider initialization error:",
                        error
                    );

                }

            };

            swiperJS.onerror = function () {

                console.warn(
                    "Failed to load Swiper for promo banner"
                );

            };

            document.head.appendChild(swiperJS);

        } catch (error) {

            console.warn(
                "Promo banner creation error:",
                error
            );

        }
    }


    // تشغيل بعد تحميل الصفحة
    if (document.readyState === "loading") {

        document.addEventListener(
            "DOMContentLoaded",
            createPromoBanner
        );

    } else {

        createPromoBanner();

    }

})();