document.addEventListener('DOMContentLoaded', function () {
    // إنشاء القسم الجديد
    const categorySection = document.createElement('section');
    categorySection.className = 's-block s-block--categories overflow-hidden p-left angel_anime animate__ animate__fadeIn';
    categorySection.setAttribute('data-wow-delay', '0.1s');
    categorySection.style.marginTop = '20px';

    // إنشاء العنوان
    const titleDiv = document.createElement('div');
    titleDiv.className = 's-block__title';
    titleDiv.innerHTML = `
        <div class="flex flex-col w-full">
            <h2 class="w-full da-cp">تسوق حسب الفئة</h2>
        </div>
    `;

    // إنشاء السلايدر
    const swiperContainer = document.createElement('div');
    swiperContainer.className = 'swiper mySwiper s-slider-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-free-mode swiper-rtl swiper-backface-hidden';
    swiperContainer.setAttribute('dir', 'rtl');

    // إنشاء محتوى السلايدر
    const swiperWrapper = document.createElement('div');
    swiperWrapper.className = 'swiper-wrapper s-slider-swiper-wrapper';
    swiperWrapper.id = 'swiper-wrapper-categories';
    swiperWrapper.setAttribute('aria-live', 'off');

    // قائمة الفئات مع روابط الصور
    const categories = [
        { name: 'الاظافر', url: 'https://anaqati-sa.com/%D8%A7%D9%84%D8%A7%D8%B8%D8%A7%D9%81%D8%B1/c72650413', img: 'https://imgur.com/ESeQWBa.png' },
        { name: 'العناية', url: 'https://anaqati-sa.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9/c1728114819', img: 'https://imgur.com/6ngDs5N.png' },
        { name: 'المكياج', url: 'https://anaqati-sa.com/%D8%A7%D9%84%D9%85%D9%83%D9%8A%D8%A7%D8%AC/c675496115', img: 'https://imgur.com/tNLvfqH.png' },
        { name: 'اكسسوارات', url: 'https://anaqati-sa.com/%D8%A7%D9%83%D8%B3%D8%B3%D9%88%D8%A7%D8%B1%D8%A7%D8%AA/c218270732', img: 'https://imgur.com/EekwLBl.png' },
        { name: 'العدسات', url: 'https://anaqati-sa.com/%D8%A7%D9%84%D8%B9%D8%AF%D8%B3%D8%A7%D8%AA/c1446096302', img: 'https://imgur.com/RAbJjTG.png' },
        { name: 'الساعات', url: 'https://anaqati-sa.com/%D8%A7%D9%84%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA/c1703226441', img: 'https://imgur.com/gd8uR0C.png' },
    ];

    // إضافة الفئات للسلايدر
    categories.forEach((category, index) => {
        const slide = document.createElement('div');
        slide.className = 'banner-square zoomed-img grayscaled-img lazy swiper-slide angel_anime animate__ animate__fadeInUp';
        slide.setAttribute('data-wow-delay', '0.1s');
        slide.setAttribute('role', 'group');
        slide.setAttribute('aria-label', `${index + 1} / ${categories.length}`);
        slide.style.width = '209.167px';
        slide.innerHTML = `
            <a href="${category.url}" aria-label="link" class="!opacity-100">
                <div class="box-img rounded-none">
                    <img src="${category.img}" alt="${category.name}" loading="lazy" data-ll-status="native" class="w-full object-contain lazy">
                </div>
            </a>
            <div class="relative px-2 text-center rounded-none">
                <h3 class="w-full text-xs md:text-sm">${category.name}</h3>
            </div>
        `;
        swiperWrapper.appendChild(slide);
    });

    // إضافة إشعار السلايدر
    const swiperNotification = document.createElement('span');
    swiperNotification.className = 'swiper-notification';
    swiperNotification.setAttribute('aria-live', 'assertive');
    swiperNotification.setAttribute('aria-atomic', 'true');

    // تجميع السلايدر
    swiperContainer.appendChild(swiperWrapper);
    swiperContainer.appendChild(swiperNotification);
    categorySection.appendChild(titleDiv);
    categorySection.appendChild(swiperContainer);

    // إيجاد العنصر الأصلي وإضافة القسم الجديد
    const targetSection = document.getElementById('best-offers-4-slider') || document.querySelector('main'); // لو ما لقى القسم، يحطه في main
    if (targetSection) {
        targetSection.parentNode.insertBefore(categorySection, targetSection.nextSibling);
    } else {
        console.warn('لم يتم العثور على best-offers-4-slider أو main، لن يتم إضافة القسم.');
        return; // ما يضيف القسم لو ما لقى مكان مناسب
    }

    // تهيئة Swiper
    new Swiper('.s-block--categories .swiper', {
        slidesPerView: 'auto',
        spaceBetween: 10,
        freeMode: true,
        direction: 'horizontal',
        rtl: true
    });
});