document.addEventListener('DOMContentLoaded', function () {
  // 1. إنشاء عنصر الصورة ووضعه قبل التابات
  const section = document.getElementById('featured-products-style2-0');
  if (!section) return;

  const container = section.querySelector('.container');
  const imageContainer = document.createElement('div');
  imageContainer.style.marginBottom = '.5rem';

  const image = document.createElement('img');
  image.id = 'tabs-image';
  image.src = 'https://cdn.salla.sa/form-builder/wU5Ayht8ydjWgIIYmSdTGhfSp4Leljn6kjKlqOCh.jpg'; // الصورة الافتراضية
  image.style.width = '100%';
  image.style.borderRadius = '10px';

  imageContainer.appendChild(image);
  container.prepend(imageContainer);

  // 2. تعريف الصور الخاصة بكل تاب
  const tabImages = {
    "featured-products-style2-0-GjgPlE_1": "https://cdn.salla.sa/form-builder/wU5Ayht8ydjWgIIYmSdTGhfSp4Leljn6kjKlqOCh.jpg",
    "featured-products-style2-0-GjgPlE_2": "https://cdn.salla.sa/form-builder/74VfE8bLTUk1hqkfVSJ4ENWaLcoAr6ziigKsIwtT.jpg",
    "featured-products-style2-0-GjgPlE_3": "https://cdn.salla.sa/form-builder/dfYDpZfQL42QfHSaZiwa1cpiVpNZaDq5ZWPseJOe.jpg",
    "featured-products-style2-0-GjgPlE_4": "https://cdn.salla.sa/form-builder/E1SeMdhIFIcrrqADhqKQRCQHci9S97h8fNA1qp3C.jpg"
  };

  // 3. ربط الأزرار بالتبديل
  const tabButtons = section.querySelectorAll('.tab-trigger');
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const target = button.getAttribute('data-target');
      const newImage = tabImages[target];
      if (newImage) {
        image.src = newImage;
      }
    });
  });

  // 4. إضافة الأيقونات والنصوص داخل التابات
  const tabIcons = {
    "كراتين الشحن والمتاجر": "sicon-store",
    "المجموعات - البكجات": "sicon-gift",
    "خدمات نقل العفش والاثاث": "sicon-shipping",
    "لوازم التغليف والكراتين": "sicon-box"
  };

  tabButtons.forEach(button => {
    const text = button.textContent.trim();
    const iconClass = tabIcons[text];

    if (iconClass) {
      button.innerHTML = `
        <div class="tab-icon-text" style="display: flex; flex-direction: column; align-items: center; font-size: 14px;">
          <i class="${iconClass} icon-color" style="font-size: 22px; margin-bottom: 5px;"></i>
          <span class="text-color">${text}</span>
        </div>
      `;
    }
  });

  // 5. ألوان الوضع الداكن والعادي
  function applyColors() {
    const isDark = document.documentElement.classList.contains("dark");
    const iconElements = document.querySelectorAll(".icon-color");
    const textElements = document.querySelectorAll(".text-color");

    iconElements.forEach(icon => {
      icon.style.color = isDark ? "white" : "#003670";
    });

    textElements.forEach(text => {
      text.style.color = isDark ? "white" : "#003670";
    });
  }

  applyColors();

  const observer = new MutationObserver(applyColors);
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
});






const toTopBtn = document.createElement('div');
toTopBtn.className = 'to-top-btn';
toTopBtn.innerHTML = `
  <a href="#" aria-label="العودة إلى الأعلى">
    <i class="sicon-arrow-up"></i>
  </a>
`;

// إضافة الزر إلى الصفحة
document.body.appendChild(toTopBtn);

// عند الضغط: الرجوع إلى الأعلى بسلاسة
toTopBtn.addEventListener('click', function (e) {
  e.preventDefault();
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// إضافة ستايل الزر
const style = document.createElement('style');
style.textContent = `
  .to-top-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background-color: #003670;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .to-top-btn:hover {
    background-color: #444;
  }

  .to-top-btn i {
    font-size: 18px;
    color: white;
  }
`;
document.head.appendChild(style);