const items = [
    { img: 'https://i.ibb.co/7dXSXKGm/Frame-1000004067.png', title: 'العسل', link: 'https://knooz-saba.com/ar/category/evwoK' },
    { img: 'https://i.ibb.co/sJ6brC81/Frame-1000004067-1.png', title: 'قهوة', link: 'https://knooz-saba.com/ar/category/Ygynvw' },
    { img: 'https://i.ibb.co/gq5ZjmY/Frame-1000004067-2.png', title: 'اللوز', link: 'https://knooz-saba.com/ar/category/VPYyP' },
    { img: 'https://i.ibb.co/MycwCth1/Frame-1000004067-3.png', title: 'الزبيب', link: 'https://knooz-saba.com/ar/category/AxdnD' },
    { img: 'https://i.ibb.co/tpX7PF2g/Frame-1000004067-4.png', title: 'الحناء', link: 'https://knooz-saba.com/ar/category/lWPoe' },
    { img: 'https://i.ibb.co/JWFJ8Xpj/Frame-1000004067-5.png', title: 'البهارات', link: 'https://knooz-saba.com/ar/category/joqmR' }
  ];

  function updateSlides(wrapper) {
    wrapper.innerHTML = '';

    items.forEach(({ img, title, link }) => {
      const slide = document.createElement('div');
      slide.className = 'swiper-slide slide--one-sixth';

      slide.innerHTML = `
        <a href="${link}" style="text-decoration: none;">
          <div style="
            background-color: #f3f6f8;
            border-radius: 8px;
            padding: 16px;
            text-align: center;
            transition: transform 0.3s;
            cursor: pointer;
          " onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            <img src="${img}" alt="${title}" style="
              max-width: 140px;
              height: auto;
              margin: 0 auto 12px;
              display: block;
            " />
            <div style="
              font-weight: bold;
              font-size: 16px;
              color: #222;
            ">${title}</div>
          </div>
        </a>
      `;

      wrapper.appendChild(slide);
    });
  }

  const observer = new MutationObserver(() => {
    const sectionHeading = Array.from(document.querySelectorAll('h2, h3, h4, h1'))
      .find(el => el.textContent.includes('الأقسام'));

    if (sectionHeading) {
      const wrapper = sectionHeading.closest('.s-block')?.querySelector('.swiper-wrapper');

      if (wrapper) {
        updateSlides(wrapper);
        observer.disconnect();
      }
    }
  });

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


 

  window.addEventListener('load', function () {
    // نحدد الصورة المطلوبة
    const targetImg = document.querySelector('img[src="https://cdn.salla.sa/form-builder/xaKNWo7Ja636um03x228Gipu6qkpUNzeMqge5XkU.webp"]');

    if (targetImg) {
      // نجيب أقرب سكشن يحتوي الصورة (أنت حدد اللي يناسبك)
      const section = targetImg.closest('.s-block.s-block--fixed-banner.wide-placeholder');

      if (section) {
        // نضيف كلاس مخصص للتمييز
        section.classList.add('has-special-banner');

        // نضيف CSS مخصص يتطبق فقط على هذا السكشن
        const style = document.createElement('style');
        style.innerHTML = `
          .has-special-banner .banner--fixed img {
            margin-top: -108px;
          }

          .has-special-banner .container {
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
          }
        `;
        document.head.appendChild(style);
      }
    }
  });
  
  
  
function styleAllSliderSections() {
  console.log("🚀 بدأ تنفيذ الكود");

  const allTitles = document.querySelectorAll('.s-slider-block__title h2');

  if (allTitles.length === 0) {
    console.log("❌ لم يتم العثور على أي عنوان");
    return;
  }

  console.log(`✅ تم العثور على ${allTitles.length} عنوان`);

  allTitles.forEach((title, index) => {
    console.log(`🔹 معالجة العنوان رقم ${index + 1}:`, title.textContent.trim());

    // 1. تنسيق العنوان
    const titleWrapper = title.closest('.s-slider-block__title-right');
    if (titleWrapper) {
      title.style.backgroundColor = '#b85730';
      title.style.color = '#fff';
      title.style.padding = '8px 28px';
      title.style.borderRadius = '10px';
      title.style.display = 'inline-block';
      title.style.fontSize = '20px';
      title.style.fontWeight = 'bold';
      titleWrapper.style.textAlign = 'center';
    }

    // 2. تنسيق البطاقات
    const sliderWrapper = title.closest('.s-slider-wrapper');
    if (sliderWrapper) {
      const productCards = sliderWrapper.querySelectorAll('.swiper-slide > div');

      console.log(`📦 عدد الكروت في السلايدر رقم ${index + 1}: ${productCards.length}`);

      productCards.forEach((card, i) => {
        card.style.backgroundColor = '#fff';
        card.style.borderRadius = '12px';
        card.style.padding = '20px';
        card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.07)';
        card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        card.style.cursor = 'pointer';

        card.onmouseover = () => {
          card.style.transform = 'scale(1.05)';
          card.style.boxShadow = '0 8px 20px rgba(0,0,0,0.15)';
        };
        card.onmouseout = () => {
          card.style.transform = 'scale(1)';
          card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.07)';
        };
      });

      // 3. زر "عرض المزيد"
      const showMoreBtn = sliderWrapper.parentElement.querySelector('button, a');
      if (showMoreBtn && showMoreBtn.textContent.includes("عرض الكل")) {
        showMoreBtn.style.border = '2px solid #b85730';
        showMoreBtn.style.backgroundColor = 'transparent';
        showMoreBtn.style.color = '#b85730';
        showMoreBtn.style.padding = '10px 24px';
        showMoreBtn.style.borderRadius = '8px';
        showMoreBtn.style.fontWeight = 'bold';
        showMoreBtn.style.fontSize = '15px';
        showMoreBtn.style.cursor = 'pointer';
        showMoreBtn.style.transition = 'all 0.3s ease';
        showMoreBtn.style.display = 'inline-block';
        showMoreBtn.style.margin = '20px auto';
        showMoreBtn.style.textAlign = 'center';

        showMoreBtn.onmouseover = () => {
          showMoreBtn.style.backgroundColor = '#b85730';
          showMoreBtn.style.color = '#fff';
        };

        showMoreBtn.onmouseout = () => {
          showMoreBtn.style.backgroundColor = 'transparent';
          showMoreBtn.style.color = '#b85730';
        };

        console.log(`🟢 تم تنسيق زر 'عرض المزيد' في السلايدر رقم ${index + 1}`);
      } else {
        console.log(`⚠️ لا يوجد زر 'عرض المزيد' في السلايدر رقم ${index + 1}`);
      }

    } else {
      console.log(`❌ لم يتم العثور على السلايدر الخاص بالعنوان رقم ${index + 1}`);
    }
  });

  console.log("🎉 تم تطبيق التنسيقات على كل السلايدرز");
}

window.addEventListener('load', () => {
  setTimeout(styleAllSliderSections, 700);
});



// إنشاء عنصر السكشن
const newSection = document.createElement('section');
newSection.className = 's-block why-us-section'; // ممكن تعدل الاسم حسب التصميم

// إضافة المحتوى
newSection.innerHTML = `
  <div class="container">
    <h2 class="section-title" style="text-align:center; color:#b64c2e;">لماذا تختار كنوز سبأ ؟</h2>
    <div class="features-grid" style="display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:30px;">
      <div class="feature-box" style="flex: 1 1 300px; border:1px solid #ccc; border-radius:8px; padding:20px; text-align:center;">
        <div class="icon" style="font-size:40px; margin-bottom:10px;">🤝</div>
        <h3 style="color:#b64c2e;">تجربة تراثية أصيلة</h3>
        <p>نقدم لك منتجات تحمل عبق التراث اليمني وتفاصيله بكل حب واهتمام.</p>
      </div>
      <div class="feature-box" style="flex: 1 1 300px; border:1px solid #ccc; border-radius:8px; padding:20px; text-align:center;">
        <div class="icon" style="font-size:40px; margin-bottom:10px;">🚚</div>
        <h3 style="color:#b64c2e;">توصيل سريع وآمن</h3>
        <p>نوصل طلباتك إلى الخليج بأمان وفي أسرع وقت ممكن.</p>
      </div>
      <div class="feature-box" style="flex: 1 1 300px; border:1px solid #ccc; border-radius:8px; padding:20px; text-align:center;">
        <div class="icon" style="font-size:40px; margin-bottom:10px;">✅</div>
        <h3 style="color:#b64c2e;">جودة مضمونة</h3>
        <p>نختار لك أفضل المنتجات اليمنية الأصلية ونضمن لك جودة عالية في كل طلب.</p>
      </div>
    </div>
  </div>
`;

// البحث عن سكشن الشهادات
const testimonialsSection = document.querySelector('.s-block.s-block--testimonials.s-block--custom-testimonials.container.overflow-hidden');

// إدراج السكشن الجديد قبله
if (testimonialsSection && testimonialsSection.parentNode) {
  testimonialsSection.parentNode.insertBefore(newSection, testimonialsSection);
}