document.addEventListener("DOMContentLoaded", function () {
  // إنشاء ستايل السلايدر وإضافته للـ head
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-slider-wrapper {
      width: 100%;
      padding: 20px 0;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    .custom-slider-title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    .custom-slider-container {
      width: 85%;
      max-width: 1200px;
      margin: auto;
      padding: 0 40px;
      overflow: hidden;
    }
    .custom-swiper {
      width: 100%;
    }
    .custom-swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 10px;
    }
    .custom-swiper-slide img {
      width: 80%; /* تصغير الصور */
      height: auto;
      object-fit: cover;
      border-radius: 10px;
    }
    .custom-swiper-button-next, .custom-swiper-button-prev {
      color: #000;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
    .custom-swiper-pagination-bullet {
      background: #000 !important;
    }
  `;
  document.head.appendChild(style);

  // إنشاء سكشن السلايدر
  const sliderSection = document.createElement("section");
  sliderSection.classList.add("custom-slider-wrapper");

  const title = document.createElement("h2");
  title.classList.add("custom-slider-title");
  title.textContent = "الاقسام";
  sliderSection.appendChild(title);

  const sliderContainer = document.createElement("div");
  sliderContainer.classList.add("custom-slider-container");

  // قائمة الصور مع الروابط
  const images = [
    { src: "https://i.postimg.cc/BbWfq1KJ/4.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%84%D9%88%D9%86%D8%AC-%D8%B4%D8%A7%D9%85%D8%A8/c272769160" },
    { src: "https://i.postimg.cc/FFfnnC8c/1.png", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%83%D9%8A%D9%84%D9%8A/c1803571875" },
    { src: "https://i.postimg.cc/G3N1QV7Z/4.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D8%A8%D9%8A%D8%B1%D9%83%D9%86/c1920319554" },
    { src: "https://i.postimg.cc/Qdjs95nt/3.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%85%D9%8A%D9%88-%D9%85%D9%8A%D9%88/c1630806110" },
    { src: "https://i.postimg.cc/8PQTGxRL/1.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D8%A8%D9%88%D8%AA%D9%8A%D8%BA%D8%A7-%D9%81%D9%8A%D9%86%D9%8A%D8%AA%D8%A7/c1173657735" },
    { src: "https://i.postimg.cc/vZPR4KVq/6.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D8%A8%D9%88%D9%84%D9%8A%D9%86/c125430585" }
  ];

  sliderContainer.innerHTML = `
    <div class="custom-swiper">
      <div class="swiper-wrapper">
        ${images.map((image) => `
          <div class="swiper-slide custom-swiper-slide">
            <a href="${image.link}" target="_blank">
              <img src="${image.src}" alt="image">
            </a>
          </div>
        `).join("")}
      </div>
      <div class="swiper-button-next custom-swiper-button-next"></div>
      <div class="swiper-button-prev custom-swiper-button-prev"></div>
      <div class="swiper-pagination custom-swiper-pagination"></div>
    </div>
  `;

  sliderSection.appendChild(sliderContainer);

  // البحث عن السيكشن المحدد
  const targetSection = document.querySelector("section.s-block.s-block--photos-slider");

  // إضافة السلايدر بعد السيكشن المحدد
  if (targetSection) {
    targetSection.insertAdjacentElement("afterend", sliderSection);
  } else {
    console.error("Target section not found!");
  }

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

  const swiperScript = document.createElement("script");
  swiperScript.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
  swiperScript.onload = function () {
    new Swiper(".custom-swiper", {
      slidesPerView: 4,
      spaceBetween: 5,
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".custom-swiper-button-next",
        prevEl: ".custom-swiper-button-prev",
      },
      pagination: {
        el: ".custom-swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        0: { slidesPerView: 3 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 5 }
      }
    });
  };
  document.body.appendChild(swiperScript);
});
 // ****************************************
  
  
  
  
  
  
  
  
  
  
  document.addEventListener("DOMContentLoaded", function () {
  // إنشاء ستايل السلايدر وإضافته للـ head
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-slider-wrapper {
      width: 100%;
      padding: 20px 0;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:center;
      overflow: hidden;
    }
    .custom-slider-title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    .custom-slider-container {
      width: 85%;
      max-width: 1200px;
      margin: auto;
      padding: 0 40px;
      overflow: hidden;
    }
    .custom-swiper {
      width: 100%;
    }
    .custom-swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 10px;
    }
    .custom-swiper-slide img {
      width: 80%; /* تصغير الصور */
      height: auto;
      object-fit: cover;
      border-radius: 10px;
    }
    .custom-swiper-button-next, .custom-swiper-button-prev {
      color: #000;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
    .custom-swiper-pagination-bullet {
      background: #000 !important;
    }
    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
display:none;
}
  `;
  document.head.appendChild(style);

  // إنشاء سكشن السلايدر
  const sliderSection = document.createElement("section");
  sliderSection.classList.add("custom-slider-wrapper");

  const title = document.createElement("h2");
  title.classList.add("custom-slider-title");
  title.textContent = "الاقسام";
  sliderSection.appendChild(title);

  const sliderContainer = document.createElement("div");
  sliderContainer.classList.add("custom-slider-container");

  // قائمة الصور مع الروابط
  const images = [
   { src: "https://i.postimg.cc/yYms8njt/2.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%84%D9%88%D9%8A%D9%81%D9%8A/c203542030" },
         { src: "https://i.postimg.cc/VksQLwd0/5.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D8%AA%D8%B1%D9%86%D8%AF/c1026479399" },
     { src: "https://i.postimg.cc/MpYsjCfk/2.png", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%84%D9%88%D8%B1%D9%88-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7/c920431130" },
   { src: "https://i.postimg.cc/pLsRMrV6/1.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D8%A8%D9%88%D8%AA%D9%8A%D8%BA%D8%A7-%D9%81%D9%8A%D9%86%D9%8A%D8%AA%D8%A7/c1173657735" },
       { src: "https://i.postimg.cc/65vx1cFT/5.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%84%D9%88%D8%A8-%D9%86%D9%88%D8%A7%D8%B1/c1624694028" },
    { src: "https://i.postimg.cc/y63mJ3w0/2.webp", link: "https://thetrend-it.com/%D8%B4%D9%86%D8%B7-%D9%84%D8%A7%D9%83%D9%88%D8%B3%D8%AA/c1378268442" },

  
   
    
    

   ];

  sliderContainer.innerHTML = `
    <div class="custom-swiper">
      <div class="swiper-wrapper">
        ${images.map((image) => `
          <div class="swiper-slide custom-swiper-slide">
            <a href="${image.link}" target="_blank"> <!-- رابط مخصص لكل صورة -->
              <img src="${image.src}" alt="image">
            </a>
          </div>
        `).join("")}
      </div>
      <div class="swiper-button-next custom-swiper-button-next"></div>
      <div class="swiper-button-prev custom-swiper-button-prev"></div>
      <div class="swiper-pagination custom-swiper-pagination"></div>
    </div>
  `;

  sliderSection.appendChild(sliderContainer);

  // البحث عن السيكشن المحدد
  const targetSection = document.querySelector("section#best-offers-10-slider");

  // إضافة السلايدر بعد السيكشن المحدد
  if (targetSection) {
    targetSection.insertAdjacentElement("afterend", sliderSection);
  }

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

  const swiperScript = document.createElement("script");
  swiperScript.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
  swiperScript.onload = function () {
    new Swiper(".custom-swiper", {
      slidesPerView: 4, 
      spaceBetween: 5,
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".custom-swiper-button-next",
        prevEl: ".custom-swiper-button-prev",
      },
      pagination: {
        el: ".custom-swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        0: { slidesPerView: 3 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 5 }
      }
    });
  };
  document.body.appendChild(swiperScript);
});