/* Add custom JS code below */ 
document.addEventListener("DOMContentLoaded", function () {

  /* بيانات البنرات */
  const slides = [
    {
      desktopImage: "https://up6.cc/2026/08/178749558663411.jpg",
      mobileImage: "ضع-رابط-صورة-الجوال-الأولى",
      link: "#",
      alt: "بنر جوفريز الأول"
    },
    {
      desktopImage: "https://up6.cc/2026/08/178749558663411.jpg",
      mobileImage: "ضع-رابط-صورة-الجوال-الثانية",
      link: "#",
      alt: "بنر جوفريز الثاني"
    },
    {
      desktopImage: "https://up6.cc/2026/08/178749558663411.jpg",
      mobileImage: "ضع-رابط-صورة-الجوال-الثالثة",
      link: "#",
      alt: "بنر جوفريز الثالث"
    }
  ];

  /* تحديد البنر العلوي الحالي */
  const oldBanner = document.querySelector(
    "#mainnav ~ div.relative.h-screen.w-full.overflow-hidden.mb-8"
  );

  if (!oldBanner || !slides.length) return;

  /* إنشاء السلايدر */
  const slider = document.createElement("section");
  slider.className = "joffreys-main-slider";
  slider.setAttribute("aria-label", "العروض الرئيسية");

  const slidesHTML = slides.map(function (slide, index) {
    return `
      <div class="joffreys-slider-slide"
           role="group"
           aria-label="${index + 1} من ${slides.length}">

        <a href="${slide.link || "#"}"
           aria-label="${slide.alt || "عرض جوفريز"}">

          <picture>
            <source
              media="(max-width: 767px)"
              srcset="${slide.mobileImage || slide.desktopImage}">

            <img
              src="${slide.desktopImage}"
              alt="${slide.alt || "عرض جوفريز"}"
              ${index === 0 ? 'fetchpriority="high"' : 'loading="lazy"'}>
          </picture>

        </a>
      </div>
    `;
  }).join("");

  const dotsHTML = slides.map(function (_, index) {
    return `
      <button
        type="button"
        class="joffreys-slider-dot ${index === 0 ? "active" : ""}"
        data-slide="${index}"
        aria-label="الانتقال إلى الشريحة ${index + 1}">
      </button>
    `;
  }).join("");

  slider.innerHTML = `
    <div class="joffreys-slider-track">
      ${slidesHTML}
    </div>

    <div class="joffreys-slider-controls">

      <button
        type="button"
        class="joffreys-slider-arrow joffreys-slider-prev"
        aria-label="الصورة السابقة">

        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 4L7 12L15 20"></path>
        </svg>
      </button>

      <div class="joffreys-slider-dots">
        ${dotsHTML}
      </div>

      <button
        type="button"
        class="joffreys-slider-arrow joffreys-slider-next"
        aria-label="الصورة التالية">

        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M9 4L17 12L9 20"></path>
        </svg>
      </button>

    </div>
  `;

  /* استبدال البنر القديم */
  oldBanner.replaceWith(slider);

  const track = slider.querySelector(".joffreys-slider-track");
  const dots = slider.querySelectorAll(".joffreys-slider-dot");
  const previousButton = slider.querySelector(".joffreys-slider-prev");
  const nextButton = slider.querySelector(".joffreys-slider-next");

  let currentSlide = 0;
  let autoplay;
  let startX = 0;
  let endX = 0;

  function showSlide(index) {
    if (index >= slides.length) index = 0;
    if (index < 0) index = slides.length - 1;

    currentSlide = index;
    track.style.transform = `translateX(-${currentSlide * 100}%)`;

    dots.forEach(function (dot, dotIndex) {
      dot.classList.toggle("active", dotIndex === currentSlide);
    });
  }

  function startAutoplay() {
    stopAutoplay();

    autoplay = setInterval(function () {
      showSlide(currentSlide + 1);
    }, 5000);
  }

  function stopAutoplay() {
    if (autoplay) clearInterval(autoplay);
  }

  nextButton.addEventListener("click", function () {
    showSlide(currentSlide + 1);
    startAutoplay();
  });

  previousButton.addEventListener("click", function () {
    showSlide(currentSlide - 1);
    startAutoplay();
  });

  dots.forEach(function (dot) {
    dot.addEventListener("click", function () {
      showSlide(Number(this.dataset.slide));
      startAutoplay();
    });
  });

  /* إيقاف الحركة عند وضع الماوس */
  slider.addEventListener("mouseenter", stopAutoplay);
  slider.addEventListener("mouseleave", startAutoplay);

  /* السحب على الجوال */
  slider.addEventListener("touchstart", function (event) {
    startX = event.touches[0].clientX;
  }, { passive: true });

  slider.addEventListener("touchend", function (event) {
    endX = event.changedTouches[0].clientX;

    if (Math.abs(startX - endX) < 50) return;

    if (startX > endX) {
      showSlide(currentSlide + 1);
    } else {
      showSlide(currentSlide - 1);
    }

    startAutoplay();
  }, { passive: true });

  showSlide(0);
  startAutoplay();
});