document.addEventListener("DOMContentLoaded", function () {
  // ============================
  // 1️⃣ عرض قسم ميزات المتجر مرة واحدة فقط
  // ============================
  if (!localStorage.getItem("storeFeaturesShown")) {
    setTimeout(() => {
      const storeFeatures = document.createElement("section");
      storeFeatures.className = "store-features show-now";
      storeFeatures.innerHTML = `
        <h2 class="features-title">✨ ما يُميز متجرنا ✨</h2>
        <div class="features-wrapper">
          <div class="feature-box">
            <div class="icon-container">
              <img src="https://cdn-icons-png.flaticon.com/512/1828/1828640.png" alt="جودة" class="icon">
            </div>
            <h3>جودة عالية</h3>
            <p>منتجات مختارة بعناية تضمن لكِ أعلى جودة ورضا تام.</p>
          </div>
          <div class="feature-box">
            <div class="icon-container">
              <img src="https://cdn-icons-png.flaticon.com/512/2920/2920219.png" alt="توصيل سريع" class="icon">
            </div>
            <h3>توصيل سريع</h3>
            <p>خدمة توصيل فورية وآمنة إلى باب منزلك في أسرع وقت.</p>
          </div>
          <div class="feature-box">
            <div class="icon-container">
              <img src="https://cdn-icons-png.flaticon.com/512/1828/1828817.png" alt="دعم عملاء" class="icon">
            </div>
            <h3>دعم متواصل</h3>
            <p>فريق دعم متوفر دائمًا لخدمتك والإجابة عن جميع استفساراتك.</p>
          </div>
        </div>
      `;
      const footer = document.querySelector("footer") || document.querySelector(".footer");
      if (footer) {
        footer.insertAdjacentElement("beforebegin", storeFeatures);
      } else {
        document.body.appendChild(storeFeatures);
      }

      // علامة تم العرض
      localStorage.setItem("storeFeaturesShown", "true");
    }, 800);
  }

  // ============================
  // 2️⃣ قسم آراء العملاء
  // ============================
  setTimeout(() => {
    const reviewsSection = document.createElement("section");
    reviewsSection.className = "reviews-section";
    reviewsSection.innerHTML = `
      <h2 class="reviews-title">💬 آراء عملائنا</h2>
      <div class="reviews-slider">
        <div class="review-card">
          <p class="review-text">"خدمة ممتازة جدًا! حصلت على المنتج الرقمي فورًا بعد الدفع، والتجربة كانت سهلة ومريحة."</p>
          <div class="review-author">– سارة .م</div>
        </div>
        <div class="review-card">
          <p class="review-text">"المتجر فعلاً احترافي! اشتريت تصميم جاهز واستخدمته في مشروعي مباشرة بدون أي مشاكل."</p>
          <div class="review-author">– أحمد .ر</div>
        </div>
        <div class="review-card">
          <p class="review-text">"الأسعار مناسبة والجودة أكثر من رائعة! أكيد رح أرجع أشتري تاني."</p>
          <div class="review-author">– ندى .ك</div>
        </div>
      </div>
    `;
    const footer = document.querySelector("footer") || document.querySelector(".footer");
    if (footer) {
      footer.insertAdjacentElement("beforebegin", reviewsSection);
    } else {
      document.body.appendChild(reviewsSection);
    }
  }, 1000);

  // ============================
  // 3️⃣ أيقونة الدعم الفني
  // ============================
  const supportBtn = document.createElement("div");
  supportBtn.className = "support-widget";
  supportBtn.innerHTML = `
    <div class="support-icon">💬</div>
    <div class="support-panel">
      <h3>مرحباً بك 👋</h3>
      <p>كيف يمكننا مساعدتك اليوم؟</p>
      <a href="https://wa.me/966500004154?text=مرحباً%20احتاج%20مساعدة%20بخصوص%20منتج" target="_blank">🛍️ استفسار عن منتج</a>
      <a href="https://wa.me/966500004154?text=احتاج%20مساعدة%20في%20طلب%20قمت%20به" target="_blank">📦 مساعدة في الطلب</a>
      <a href="https://wa.me/966500004154?text=اريد%20التحدث%20مع%20الدعم%20الفني" target="_blank">👨‍💻 التواصل مع الدعم الفني</a>
    </div>
  `;
  document.body.appendChild(supportBtn);

  const style = document.createElement("style");
  style.textContent = `
    /* === الدعم الفني === */
    .support-widget { position: fixed; bottom: 25px; right: 25px; z-index: 9999; font-family: "Cairo", sans-serif; }
    .support-icon { background: #7c6e9f; color: #fff; font-size: 28px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; box-shadow: 0 0 15px rgba(124, 110, 159, 0.4); transition: all 0.3s ease; animation: pulse 2s infinite ease-in-out; }
    .support-icon:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(124, 110, 159, 0.6); }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(124,110,159,0.4); } 70% { box-shadow: 0 0 0 15px rgba(124,110,159,0); } 100% { box-shadow: 0 0 0 0 rgba(124,110,159,0); } }
    .support-panel { position: absolute; bottom: 75px; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); padding: 15px; width: 230px; opacity: 0; pointer-events: none; transform: translateY(20px); transition: all 0.4s ease; }
    .support-widget.active .support-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .support-panel h3 { color: #7c6e9f; font-size: 1.1rem; margin-bottom: 5px; }
    .support-panel p { color: #9990b1; font-size: 0.9rem; margin-bottom: 10px; }
    .support-panel a { display: block; background: #7c6e9f; color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; transition: all 0.3s ease; font-size: 0.9rem; }
    .support-panel a:hover { background: #9990b1; transform: scale(1.05); }

    /* === قسم ميزات المتجر === */
    .store-features { background: linear-gradient(135deg, #7c6e9f, #9990b1); padding: 70px 20px; text-align: center; color: #fff; overflow: hidden; position: relative; opacity: 0; transform: translateY(40px); transition: all 1s ease; border-radius: 16px 16px 0 0; }
    .store-features.show-now { opacity: 1 !important; transform: translateY(0) !important; }
    .features-title { font-size: 2.3rem; font-weight: 800; margin-bottom: 50px; background: linear-gradient(90deg, #fff, #9990b1, #fff); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 5s linear infinite; text-shadow: 0 0 10px rgba(255,255,255,0.4); }
    .features-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; }
    .feature-box { width: 270px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 30px 20px; transition: all 0.5s ease; backdrop-filter: blur(6px); position: relative; overflow: hidden; }
    .feature-box:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 25px rgba(255,255,255,0.3); }
    .icon-container { width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: floatIcon 3s ease-in-out infinite; }
    .icon { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.5)); }
    .feature-box h3 { font-size: 1.4rem; color: #fff; margin-bottom: 10px; }
    .feature-box p { color: #f8f8f8; font-size: 0.95rem; }
    @keyframes shineText { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
    @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    /* === قسم آراء العملاء === */
    .reviews-section { background: linear-gradient(135deg, #7c6e9f, #9990b1); color: #fff; text-align: center; padding: 70px 20px; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; }
    .reviews-title { font-size: 2.3rem; font-weight: 800; margin-bottom: 50px; background: linear-gradient(90deg, #fff, #e6e1ff, #fff); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 5s linear infinite; }
    .reviews-slider { display: flex; flex-wrap: nowrap; gap: 30px; overflow: hidden; justify-content: center; animation: slideReviews 25s linear infinite; }
    .review-card { min-width: 300px; max-width: 340px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 25px; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); transition: transform 0.5s ease, box-shadow 0.5s ease; }
    .review-card:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 20px rgba(255,255,255,0.3); }
    .review-text { font-size: 1rem; line-height: 1.8; margin-bottom: 15px; font-style: italic; color: #fff; }
    .review-author { font-weight: bold; color: #fff; opacity: 0.9; }
    @keyframes slideReviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  `;
  document.head.appendChild(style);

  // تفعيل أيقونة الدعم
  const icon = supportBtn.querySelector(".support-icon");
  icon.addEventListener("click", () => supportBtn.classList.toggle("active"));
});

const footer = document.querySelector('.store-footer');
const wavesContainer = document.createElement('div');
wavesContainer.innerHTML = `
  <div class="wave" id="wave1"></div>
  <div class="wave" id="wave2"></div>
  <div class="wave" id="wave3"></div>
  <div class="wave" id="wave4"></div>
`;
wavesContainer.classList.add('waves');
footer.insertBefore(wavesContainer, footer.firstChild);

function handleScroll() {
   const elements = document.querySelectorAll('.banner--fixed img');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
         if (!element.classList.contains('visible')) {
            element.classList.add('visible');
         }
      } else {
         // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
         if (element.classList.contains('visible')) {
            element.classList.remove('visible');
         }
      }
   });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة


function handleScroll2() {
   const elements = document.querySelectorAll('salla-slider.photos-slider');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح (مرة واحدة فقط)
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         if (!element.classList.contains('visible')) {
            element.classList.add('visible'); // إضافة الكلاس ليحصل التأثير
         }
      }
   });
}

window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة


function handleScroll3() {
   const elements = document.querySelectorAll('.lazy__bg');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
         if (!element.classList.contains('visible')) {
            element.classList.add('visible');
         }
      } else {
         // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
         if (element.classList.contains('visible')) {
            element.classList.remove('visible');
         }
      }
   });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة

function handleScrollBlur() {
   const elements = document.querySelectorAll('.s-product-card-vertical');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // التحقق إذا كان العنصر داخل نافذة العرض
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         element.classList.add('visible'); // إضافة كلاس التفعيل
      } else {
         element.classList.remove('visible'); // إزالة كلاس التفعيل
      }
   });
}

// تنفيذ الكود عند التمرير
window.addEventListener('scroll', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();


// Create scrolling text dynamically
const scrollingDiv = document.createElement('div');
scrollingDiv.className = 'scrolling-text';

const textContent = `
 <span>🔥 خصومات لن تجدها إلا هنا </span>
 <span>💥💵 أسعار تبدأ من المستحيل </span>
 <span>🔥 عروض حصرية تنتظرك الآن</span>
 <span>⏳💰 لا تفوت فرص التوفير اليوم </span>
 <span>🛒💥 عروض حصرية تنتظرك الآن</span>
 `;

scrollingDiv.innerHTML = `
 <div class="text-container">
   ${textContent.repeat(4)}
 </div>
 `;

const sallaSlider = document.querySelector('salla-slider');
if (sallaSlider) {
   sallaSlider.insertAdjacentElement('afterend', scrollingDiv);
}

document.addEventListener("DOMContentLoaded", () => {
   const bannerImages = document.querySelectorAll("salla-slider.photos-slider");
   const bannerObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
         if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            observer.unobserve(entry.target);
         }
      });
   }, {
      threshold: 0.1
   });

   bannerImages.forEach(image => bannerObserver.observe(image));

   const productCards = document.querySelectorAll(".s-product-card-entry");
   const productObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
         if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            observer.unobserve(entry.target);
         }
      });
   }, {
      threshold: 0.1
   });

   productCards.forEach(card => {
      productObserver.observe(card);
   });

   //زرار الطلوع لي فوق
   const backToTopButton = document.createElement("div");
   backToTopButton.id = "backToTop";
   backToTopButton.innerHTML = `
   <div class="icon">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
       <path d="M12 4l-8 8h6v8h4v-8h6z" />
     </svg>
   </div>
   <svg class="circular-chart" viewBox="0 0 36 36">
     <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
     <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   </svg>`;
   document.body.appendChild(backToTopButton);

   const style = `
   #backToTop {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     display: none;
     z-index: 1000;
   }
   #backToTop .icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     color: var(--main-color);
   }
   .circular-chart {
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
   }
   .circle-bg {
     fill: none;
     stroke: transparent;
     stroke-width: 3.8;
   }
   .circle {
     fill: none;
     stroke: var(--main-color);
     stroke-width: 3.8;
     stroke-dasharray: 100, 100;
     stroke-linecap: round;
     transition: stroke-dasharray 0.1s linear;
   }
   #backToTop:hover .icon {
     color: var(--second-color);
   }
 `;

   const styleSheet = document.createElement("style");
   styleSheet.type = "text/css";
   styleSheet.textContent = style;
   document.head.appendChild(styleSheet);

   window.addEventListener("scroll", () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = (scrollTop / docHeight) * 100;

      if (scrollPercent > 1) {
         backToTopButton.style.display = "block";
      } else {
         backToTopButton.style.display = "none";
      }

      const circle = document.querySelector(".circle");
      const offset = 100 - scrollPercent;
      circle.style.strokeDasharray = `${scrollPercent}, 100`;
   });

   backToTopButton.addEventListener("click", () => {
      window.scrollTo({
         top: 0,
         behavior: "smooth",
      });
   });
});

// Additional code block
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
   link.addEventListener('click', event => {
      event.preventDefault();
   });
});
// Select the salla-product-options element
const sallaProductOptions = document.querySelector('salla-product-options');

// Ensure the element exists before proceeding
if (sallaProductOptions) {
   // Create the alert message
   const alertMessage = document.createElement('p');
   alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

   // Apply styles directly to the element
   alertMessage.style.backgroundColor = '#ffdddd';
   alertMessage.style.color = '#a94442';
   alertMessage.style.padding = '15px';
   alertMessage.style.border = '1px solid #a94442';
   alertMessage.style.borderRadius = '5px';
   alertMessage.style.marginBottom = '10px';
   alertMessage.style.fontWeight = 'bold';
   alertMessage.style.textAlign = 'center';

   // Insert the alert message at the beginning of the salla-product-options element
   sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
} else {
   console.error("The 'salla-product-options' element was not found on the page.");
}
// Apply styles directly to the element
var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappPopup = document.createElement('div');
whatsappPopup.className = 'whatsapp-popup';
whatsappPopup.style.display = 'none'; // Initially hidden

// Create the popup content with avatar, text, and list of options
var popupContent = `
  <div class="popup-header">
    <div class="avatar-container">
      <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
      <span class="support-text">الدعم الفني</span>
    </div>
    <button class="close-popup">×</button>
  </div>
  <div class="logo-container">
      <a >
        <img src="">
      </a>
    </div>
  <div class="popup-body">
    <p>مرحباً بك، نحن متواجدون لخدمتك</p>
    <p>برجاء ارسال رقم:</p>
    <ul class="options-list">
      <li>1- لتتبع الطلب</li>
      <li>2- مشكلة</li>
      <li>3- استفسار</li>
    </ul>
    <a href="https://wa.me/+9" target="_blank" class="whatsapp-button">تواصل معنا</a>
    <div class="adfaz-container">
      <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
        <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
        <span class="adfaz-text">برمجة وتطوير أدفاز</span>
      </a>
    </div>
  </div>
`;

whatsappPopup.innerHTML = popupContent;

// Append the popup to the container
whatsappFloat.appendChild(whatsappPopup);

// Create the WhatsApp icon
var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.className = 'whatsapp-icon';

// Append the icon to the container
whatsappFloat.appendChild(whatsappIcon);

// Append the WhatsApp button to the body
document.body.appendChild(whatsappFloat);

// Add CSS styles dynamically
var style = document.createElement('style');
style.innerHTML = `
.whatsapp-float {
  position: fixed;
  bottom: 20px;
left: 20px;
  z-index: 100;
}
.logo-container{
    height: 50px;
    margin: auto;
}
.whatsapp-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

.whatsapp-popup {
    position: fixed;
    bottom: 90px;
    left: 20px;
    background: linear-gradient(var(--second-color), var(--main-color));
    width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    color: white;
    z-index: 101;
    border-radius: 10px;
}

.popup-header {
    display: flex
;
    justify-content: space-between;
    align-items: center;
}
.adfaz-container {
    display: flex
;
    padding-top: 6px;
    align-items: flex-end;
    justify-content: space-evenly;
}
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.support-text {
  font-size: 16px;
  font-weight: bold;
}

.close-popup {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.popup-body {
}

.options-list {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}

.options-list li {
  margin-bottom: 5px;
}

.whatsapp-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #25d366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
}

.whatsapp-button:hover {
  background-color: #1ebe55;
}

.adfaz-container {
  display: flex;
  align-items: center;
}

.adfaz-link {
  display: flex;
  text-decoration: none;
  color: black;
}

.adfaz-img {
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

.adfaz-text {
  font-size: 12px;
      color: white;
}
.support-text {
  font-size: 16px;
  font-weight: bold;
}

`;
document.head.appendChild(style);

// Toggle the popup when the icon is clicked
whatsappIcon.addEventListener('click', function () {
   whatsappPopup.style.display = (whatsappPopup.style.display === 'none') ? 'block' : 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function () {
   whatsappPopup.style.display = 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function () {
   whatsappPopup.style.display = 'none';
});
/* Add custom Js code below */
// Load FontAwesome for icons
var fontAwesomeLink = document.createElement("link");
fontAwesomeLink.rel = "stylesheet";
fontAwesomeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css";
document.head.appendChild(fontAwesomeLink);

// Google Tag Manager (unchanged)
(function () {
   var script = document.createElement('script');
   script.innerHTML = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N36BWD87');";
   document.head.appendChild(script);
})();

// Google Tag Manager NoScript fallback (unchanged)
(function () {
   var noscriptTag = document.createElement('noscript');
   var iframeTag = document.createElement('iframe');
   iframeTag.src = "https://www.googletagmanager.com/ns.html?id=GTM-N36BWD87";
   iframeTag.height = "0";
   iframeTag.width = "0";
   iframeTag.style.display = "none";
   iframeTag.style.visibility = "hidden";
   noscriptTag.appendChild(iframeTag);
   document.body.appendChild(noscriptTag);
})();

// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
 <div class="banner-swap">
     <div class="bannt">
         <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
         <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
         <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
         <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
         <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
         <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
 
         <!-- Repeat the same items for continuous scroll -->
         <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
         <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
         <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
         <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
         <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
         <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
     </div>
 </div>
 `;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element
const loaderDiv = document.createElement('div');
loaderDiv.id = 'loaderr';
loaderDiv.style.zIndex = '999';

// Create the 'everything' div
const everythingDiv = document.createElement('div');
everythingDiv.className = 'everything';

// Create the 'loading-container' div
const loadingContainerDiv = document.createElement('div');
loadingContainerDiv.className = 'loading-container';

// Create the SVG element for the cart icon
const svgElement = `
<svg viewBox="0 0 240 240" height="240" width="240" class="marwan">
	<circle stroke-linecap="round" stroke-dashoffset="-330" stroke-dasharray="0 660" stroke-width="20" stroke="#000" fill="none" r="105" cy="120" cx="120" class="loader-ring loader-ring-a"></circle>
	<circle stroke-linecap="round" stroke-dashoffset="-110" stroke-dasharray="0 220" stroke-width="20" stroke="#000" fill="none" r="35" cy="120" cx="120" class="loader-ring loader-ring-b"></circle>
	<circle stroke-linecap="round" stroke-dasharray="0 440" stroke-width="20" stroke="#000" fill="none" r="70" cy="120" cx="85" class="loader-ring loader-ring-c"></circle>
	<circle stroke-linecap="round" stroke-dasharray="0 440" stroke-width="20" stroke="#000" fill="none" r="70" cy="120" cx="155" class="loader-ring loader-ring-d"></circle>
</svg>
`;

// Create the loading text div
// Create the 'loading-text' div and set the text content
const loadingTextDiv = document.createElement('div');

// Append the SVG and loading text div to the loading container
loadingContainerDiv.innerHTML = svgElement;

// Append the loading container to the everything div
everythingDiv.appendChild(loadingContainerDiv);

// Append the everything div to the loader div
loaderDiv.appendChild(everythingDiv);

// Finally, append the loader div to the body
document.body.appendChild(loaderDiv);
y
// Finally, append the loader div to the body