// إضافة CSS للسلايدر المتحرك مع صور كبيرة وحركة بطيئة
const sliderStyles = `
<style>
/* حاوي السلايدر المتحرك */
.moving-slider {
    width: 100%;
    max-width: 1260px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

/* مسار العناصر المتحركة */
.slider-track {
    display: flex;
    width: calc(200%);
    animation: continuousSlide 60s linear infinite; /* أبطأ من 25s إلى 60s */
    gap: 30px;
    padding: 30px;
}

/* إيقاف الحركة عند التحويم */
.moving-slider:hover .slider-track {
    animation-play-state: paused;
}

/* عنصر واحد في السلايدر - صور كبيرة */
.slider-column {
    flex: 0 0 180px;  /* عرض أكبر */
    height: 194px;    /* ارتفاع أكبر */
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slider-column:hover {
    transform: translateY(-10px) ;
}

/* الصور - حجم كبير */
.slider-column img {
    width: 100%;
    height: 200px;    /* ارتفاع أكبر للصور */
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

/* حركة السلايدر */
@keyframes continuousSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(142%);
    }
}

/* تجاوب للشاشات المتوسطة */
@media (max-width: 1024px) {
    .slider-track {
        animation-duration: 50s !important; /* أبطأ من 20s إلى 50s */
    }
    
    .slider-column {
        flex: 0 0 200px;
        height: 156px;
    }
    
    .slider-column img {
        height: 180px;
    }
}

/* تجاوب للشاشات الصغيرة - إصلاح مشكلة الاسكرول */
@media (max-width: 768px) {
    .moving-slider {
        margin: 0;  /* إزالة المارجن الجانبي */
        width: 100%;
        box-sizing: border-box;
    }
    
    .slider-track {
        gap: 20px;
        padding: 15px 0;  /* padding عمودي فقط */
        animation-duration: 40s !important; /* أبطأ من 15s إلى 40s */
    }
    
    .slider-column {
        flex: 0 0 160px;
        height: 156px;
        padding: 15px;
    }
    
    .slider-column img {
        height: 140px;
    }
}

@media (max-width: 480px) {
    .moving-slider {
        margin: 0;  /* إزالة المارجن */
        width: 100%;
    }
    
    .slider-track {
        animation-duration: 35s !important; /* أبطأ من 12s إلى 35s */
        gap: 15px;
        padding: 10px 0;  /* padding عمودي فقط */
    }
    
    .slider-column {
        flex: 0 0 140px;
        height: 156px;
        padding: 12px;
    }
    
    .slider-column img {
        height: 120px;
    }
}
</style>
`;

// إضافة الأنماط للصفحة
document.head.insertAdjacentHTML("beforeend", sliderStyles);

// إنشاء القسم الرئيسي كسلايدر
const gallerySection = document.createElement("section");
gallerySection.className = "moving-slider";

// إنشاء مسار السلايدر
const sliderTrack = document.createElement("div");
sliderTrack.className = "slider-track";

// مصفوفة كل الصور وروابطها
const imageData = [
  {
    url: "https://cdn.salla.sa/form-builder/C8CUOwlfzEJyo4nmr0MWwMESlYm42jBDc6idT6q3.png",
    link: "https://khalatatalnadra.com/%D8%AE%D9%84%D8%B7%D8%A7%D8%AA-%D8%A3%D8%B9%D8%B4%D8%A7%D8%A8/c1837140420",
  },
  {
    url: "https://cdn.salla.sa/form-builder/ifIsQzsFQ7qCIiEiqLIoFw6IowsO1rnc1Rdf0pVq.png",
    link: "https://khalatatalnadra.com/%D8%AE%D9%84%D8%B7%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D9%85%D8%B1/c221850586",
  },
  {
    url: "https://cdn.salla.sa/form-builder/MV4dxdDBBt5OFQd0H0Cbzg7mlaenzVlZ5HSrnL5B.png",
    link: "https://khalatatalnadra.com/%D8%AF%D8%A8%D8%B3-%D8%AA%D9%85%D8%B1-%D8%B7%D8%A8%D9%8A%D8%B9%D9%8A/c1064151237",
  },
  {
    url: "https://cdn.salla.sa/form-builder/PtJYKmbyFDkbTALqiptQVB5NsqEbnjuCgpu38Yxf.png",
    link: "https://khalatatalnadra.com/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A8%D8%B4%D8%B1%D8%A9/c1670331338",
  },
  {
    url: "https://cdn.salla.sa/form-builder/JzGkwuKtEsHPpi9pARNPUHn7D2St7mFkyoaXPciy.png",
    link: "https://khalatatalnadra.com/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%AD%D9%86%D8%A7-%D9%88%D8%A7%D9%84%D8%B3%D8%AF%D8%B1/c1454302672",
  },
  {
    url: "https://cdn.salla.sa/form-builder/LK6BuOK96zFKJ8iTANJNTxaJq9ggRrvY6ZwhiYi2.png",
    link: "https://khalatatalnadra.com/%D8%A7%D9%84%D8%B9%D9%88%D8%AF-%D9%88%D8%A7%D9%84%D8%A8%D8%AE%D9%88%D8%B1/c719628246",
  },
  {
    url: "https://cdn.salla.sa/form-builder/1iu0ev5CHReVhN3d8hcoFl7r1Vu4wtAFm7AAMFQX.png",
    link: "https://khalatatalnadra.com/%D8%A7%D9%84%D8%B9%D8%B7%D9%88%D8%B1/c79808215",
  },
  {
    url: "https://cdn.salla.sa/form-builder/guUGLoUtp3ef6W4wecCFEnx8PWjnMu7IgGY2S4yu.png",
    link: "https://khalatatalnadra.com/%D8%B5%D9%88%D8%A7%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D8%AC%D8%B3%D9%85/c403947470",
  },
];

// إنشاء مجموعتين من العناصر للحركة المستمرة
for (let set = 0; set < 2; set++) {
  for (let i = 0; i < imageData.length; i++) {
    // إنشاء العمود
    const column = document.createElement("div");
    column.className = `slider-column column-${i + 1}`;

    // إنشاء رابط للصورة
    const link = document.createElement("a");
    link.href = imageData[i].link;
    link.target = "_blank";

    // إنشاء الصورة
    const img = document.createElement("img");
    img.src = imageData[i].url;
    img.alt = `صورة العمود ${i + 1}`;

    // تأثير تحميل الصورة
    img.onload = function () {
      this.style.opacity = "1";
    };
    img.style.opacity = "0";
    img.style.transition = "opacity 0.5s ease";

    // إضافة الصورة داخل الرابط
    link.appendChild(img);

    // إضافة الرابط للعمود
    column.appendChild(link);
    // إضافة العمود لمسار السلايدر
    sliderTrack.appendChild(column);
  }
}

// إضافة مسار السلايدر للقسم الرئيسي
gallerySection.appendChild(sliderTrack);

// العثور على السكشن المستهدف
const targetSection = document.querySelector(
  "section.s-block.s-block--photos-slider"
);

// إضافة القسم الجديد بعد السكشن المستهدف
if (targetSection) {
  targetSection.parentNode.insertBefore(
    gallerySection,
    targetSection.nextSibling
  );
} else {
  // إذا لم يجد السكشن، يضيف في نهاية الصفحة
  document.body.appendChild(gallerySection);
}

// وظيفة ذكية لتعديل السرعة حسب حجم الشاشة - بحركة أبطأ
function setResponsiveSpeed() {
  const screenWidth = window.innerWidth;
  let speed;

  if (screenWidth <= 480) {
    speed = 35; // أبطأ من 12 إلى 35 للموبايل الصغير
  } else if (screenWidth <= 768) {
    speed = 40; // أبطأ من 15 إلى 40 للموبايل العادي
  } else if (screenWidth <= 1024) {
    speed = 50; // أبطأ من 20 إلى 50 للتابلت
  } else {
    speed = 60; // أبطأ من 40 إلى 60 للديسكتوب
  }

  sliderTrack.style.animationDuration = speed + "s";
}

// تطبيق السرعة عند تحميل الصفحة
setResponsiveSpeed();

// تطبيق السرعة عند تغيير حجم الشاشة
window.addEventListener("resize", setResponsiveSpeed);

// وظيفة لتغيير حجم الصور بسهولة (اختيارية)
function changeImageSize(width, height, imgHeight) {
  const style = document.createElement("style");
  style.innerHTML = `
    .slider-column {
      flex: 0 0 ${width}px !important;
      height: ${height}px !important;
    }
    .slider-column img {
      height: ${imgHeight}px !important;
    }
  `;
  document.head.appendChild(style);
}

document.addEventListener('DOMContentLoaded', function() {
    // استخراج اسم التصنيف من الـ breadcrumb
    const breadcrumbItems = document.querySelectorAll('.s-breadcrumb-item');
    const categoryName = breadcrumbItems[breadcrumbItems.length - 1].textContent;

    // العثور على العنوان وتحديثه
    const title = document.getElementById('page-main-title');
    if (title) {
        title.innerHTML = categoryName + ' <span>3</span> منتجات';
    }
});
document.addEventListener("DOMContentLoaded", function() {
  const pageTitle = document.querySelector("#page-main-title");

  if (!pageTitle) return;

  // دالة لتحديث العنوان بمحتوى آخر breadcrumb
  function updateTitle() {
    const lastBreadcrumb = document.querySelector(".breadcrumbs ol.s-breadcrumb-wrapper li:last-child");
    if (lastBreadcrumb && pageTitle.innerHTML !== lastBreadcrumb.innerHTML) {
      pageTitle.innerHTML = lastBreadcrumb.innerHTML;
    }
  }

  // نفذ أول مرة بعد تحميل الصفحة
  setTimeout(updateTitle, 500);

  // راقب أي تغييرات في الصفحة بالكامل (body)
  const observer = new MutationObserver(() => {
    updateTitle();
  });

  observer.observe(document.body, { childList: true, subtree: true });
});