document.addEventListener("DOMContentLoaded", function() {
    // Give the DOM a moment to fully load
    setTimeout(function() {
        // Use a more general selector to ensure we target the menu correctly
        const mainMenu = document.querySelector('ul.main-menu');
        
        if (mainMenu) {
            // Log to confirm the menu was found
            console.log("Menu found:", mainMenu);

            // Create a new <li> element for "القائمة الرئيسية"
            const homeMenuItem = document.createElement('li');
            homeMenuItem.className = 'lg:hidden text-sm font-bold';

            // Set the inner HTML of the <li> to include the "الرئيسية" link
            homeMenuItem.innerHTML = `<a target="_self" href="/" class="text-gray-500">االقائمة الرئيسية</a>`;

            // Insert the new <li> at the beginning of the <ul>
            mainMenu.insertBefore(homeMenuItem, mainMenu.firstChild);
            
            // Log to confirm the new item was added
            console.log("Home item added to menu:", homeMenuItem);
        } else {
            console.log("Menu not found.");
        }
    }, 500); // Adjust the delay if needed
});
document.addEventListener("DOMContentLoaded", () => {
  const clientsOpinions = [
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'ناصر الحفه',
      opinion: 'مره جببار كلشي حرفيا يجنن حاطين حمايه فوق كل ذا حق ازرار الكيبورد عشان مايدخل غبار او سوائل',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'Fay Mohammed',
      opinion: 'انصصصصصصح وبقوة ✨',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'Bandr Shaden',
      opinion: 'فنان وشحنه سرررريع',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'عبدالله احمد',
      opinion: 'بعد مرور سنتين من تجربة القلم حاب اقول انه اقوى وأفضل قلم قد استخدمته للايباد ... 🤍🫡',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'مصباح هوساوي',
      opinion: ['المنتجات صدمتني من جودتها العالية', 'يعطيكم العافية يارب 🤍🌸'],
    },
    {
      img: 'https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp',
      name: 'Yasmin Alnase',
      opinion: 'جتيه اقيم بعد سنة استخدام واااااو المنتجات جميلة وعمليه ... الشاشة رائعة.',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp',
      name: 'Muna Abdulaziz',
      opinion: 'الصراحه اجمل متجر المنقذ الوحيد .. وجودتهم عاليه جداً ماشاءالله..',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp',
      name: 'جميل مختار',
      opinion: 'انا واثنين من اخواني شاريين اقلامنا من عندهم',
    },
    {
      img: 'https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp',
      name: 'ندى الشهري',
      opinion: 'القلم صار له معي سنة وشهرين ويعمل بشكل ممتاز أنصحكم فيه',
    },
  ];

  const sliderContainer = document.createElement("div");
  sliderContainer.innerHTML = `
    <style>
      .s-block {
        padding: 50px 0;
        background: #f4f4f4;
        font-family: Arial, sans-serif;
        direction: rtl;
        position: relative;
      }
      .slider-title {
        text-align: center;
        font-size: 28px;
        margin-bottom: 30px;
        font-weight: bold;
      }
      .review-slider-wrapper {
        overflow: hidden;
        position: relative;
      }
      .review-container {
        display: flex;
        gap: 20px;
        transition: transform 0.5s ease;
        will-change: transform;
      }
      .review {
        flex: 0 0 300px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        padding: 20px;
        text-align: center;
      }
      .review img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
      }
      .stars {
        color: #ffc700;
        font-size: 20px;
      }
      .review p {
        margin: 10px 0;
        font-size: 16px;
      }
      .name {
        font-weight: bold;
        margin-top: 10px;
        color: #333;
      }
      .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        border: none;
        font-size: 24px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 50%;
        z-index: 10;
      }
      .slider-arrow.prev { left: 10px; }
      .slider-arrow.next { right: 10px; }

      @media (max-width: 768px) {
        .review {
          flex: 0 0 80%;
        }
      }
    </style>

    <section class="s-block">
      <div class="container">
        <div class="slider-title">آراء العملاء</div>
        <div class="review-slider-wrapper">
          <button class="slider-arrow prev">&#8592;</button>
          <div class="review-container">
            ${clientsOpinions.map(op => `
              <div class="review">
                <img src="${op.img}" alt="${op.name}" />
                <div class="stars">★★★★★</div>
                ${
                  Array.isArray(op.opinion)
                    ? op.opinion.map(line => `<p>${line}</p>`).join('')
                    : `<p>${op.opinion}</p>`
                }
                <div class="name">${op.name}</div>
              </div>
            `).join('')}
          </div>
          <button class="slider-arrow next">&#8594;</button>
        </div>
      </div>
    </section>
  `;

  const footer = document.querySelector("footer");
  (footer ? footer.parentNode : document.body).insertBefore(sliderContainer, footer);

  const container = sliderContainer.querySelector(".review-container");
  const prevBtn = sliderContainer.querySelector(".slider-arrow.prev");
  const nextBtn = sliderContainer.querySelector(".slider-arrow.next");

  let index = 0;
  let itemWidth = container.querySelector(".review").offsetWidth + 20;
  let maxScroll = container.scrollWidth - container.clientWidth;

  function updateSliderPosition() {
    container.style.transform = `translateX(-${index * itemWidth}px)`;
  }

  nextBtn.addEventListener("click", () => {
    const itemsVisible = Math.floor(container.parentElement.offsetWidth / itemWidth);
    const maxIndex = Math.ceil(container.children.length - itemsVisible);
    index = (index + 1) > maxIndex ? 0 : index + 1;
    updateSliderPosition();
  });

  prevBtn.addEventListener("click", () => {
    index = (index - 1 < 0) ? 0 : index - 1;
    updateSliderPosition();
  });

  // Drag to slide
  let isDragging = false, startX = 0, scrollStart = 0;
  container.addEventListener("mousedown", e => {
    isDragging = true;
    startX = e.pageX;
    scrollStart = index * itemWidth;
  });
  window.addEventListener("mouseup", () => isDragging = false);
  container.addEventListener("mousemove", e => {
    if (!isDragging) return;
    const dx = e.pageX - startX;
    container.style.transform = `translateX(-${scrollStart - dx}px)`;
  });

  // Touch support
  let touchStart = 0;
  container.addEventListener("touchstart", e => touchStart = e.touches[0].clientX);
  container.addEventListener("touchend", e => {
    const touchEnd = e.changedTouches[0].clientX;
    if (touchEnd < touchStart - 30) nextBtn.click();
    else if (touchEnd > touchStart + 30) prevBtn.click();
  });

  window.addEventListener("resize", () => {
    itemWidth = container.querySelector(".review").offsetWidth + 20;
    updateSliderPosition();
  });
});
</script>