// Hero Section - Responsive Slider
document.addEventListener("DOMContentLoaded", function () {
  const header = document.querySelector("header.store-header");
  if (header) {
    const section = document.createElement("section");
    section.className = "custom-hero-gallery";
    section.innerHTML = `
      <style>
        .custom-hero-gallery {
          position: relative;
          margin: 20px 0;
          overflow: hidden;
          text-align: center;
          width: 100%;
        }

        .slider-container {
          position: relative;
          width: 100%;
          height: 100vh;
          border-radius: 12px;
          overflow: hidden;
        }

        .slide {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 1s ease-in-out;
          padding: 0 20px !important;
        }

        .slide.active {
          opacity: 1;
          z-index: 2;
        }

        .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 12px;
        }

        /* الصور المصغرة */
        .thumbs {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 5;
          width: 100%;
          padding: 0 10px;
        }

        .thumbs img {
          width: 140px;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
          border: 2px solid #fff;
          transition: transform 0.3s, border-color 0.3s;
          cursor: pointer;
          box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .thumbs img:hover {
          transform: scale(1.07);
          border-color: #ff4081;
        }

        /* تابلت */
        @media (max-width: 992px) {
          .slider-container {
            height: 55vh;
          }

          .thumbs img {
            width: 110px;
            height: 70px;
          }
        }

        /* موبايل */
        @media (max-width: 768px) {
          .slider-container {
            height: 45vh;
          }

          /* هنا التعديل المهم 👇 */
          .slide img {
            object-fit: fill !important;
            background-color: #000; /* خلفية سوداء علشان الصور تظهر كويس */
          }

          .thumbs {
            gap: 8px;
            bottom: 4%;
          }

          .thumbs img {
            width: 90px;
            height: 55px;
          }
        }

        /* موبايل صغير جدًا */
        @media (max-width: 480px) {
          .slider-container {
            height: 38vh;
          }

          .thumbs img {
            width: 70px;
            height: 70px;
          }
        }
      </style>

      <div class="slider-container">
        <!-- ✅ الصورة الأولى (الخاصة) -->
        <div class="slide active">
          <img src="https://i.postimg.cc/MHMvDvmD/new-Artboard-7-8-8.png" alt="صورة البداية الخاصة">
        </div>

        <!-- باقي الصور -->
        <div class="slide">
          <img src="https://i.postimg.cc/rm2fNk9B/Artboard-3-8.png" alt="صورة 1">
        </div>
        <div class="slide">
          <img src="https://i.postimg.cc/76rKnkV8/Artboard-6-8.png" alt="صورة 2">
        </div>
        <div class="slide">
          <img src="https://i.postimg.cc/mDWmyswx/Artboard-9-8.png" alt="صورة 3">
        </div>
        <div class="slide">
          <img src="https://i.postimg.cc/MTJ9mSYh/Artboard-10-8.png" alt="صورة 4">
        </div>

        <!-- الصور المصغرة (بدون الأولى الخاصة) -->
        <div class="thumbs">
          <img data-index="1" src="https://i.postimg.cc/9FYJPK49/new-Artboard-7-8-7.png" alt="صورة مصغرة 1">
          <img data-index="2" src="https://i.postimg.cc/020cGF6G/new-Artboard-7-8-4.png" alt="صورة مصغرة 2">
          <img data-index="3" src="https://i.postimg.cc/KvDJ7wKr/new-Artboard-7-8-3.png" alt="صورة مصغرة 3">
          <img data-index="4" src="https://i.postimg.cc/m2y83Jcy/new-Artboard-7-8-5.png" alt="صورة مصغرة 4">
        </div>
      </div>
    `;

    header.insertAdjacentElement("afterend", section);

    const slides = section.querySelectorAll(".slide");
    const thumbs = section.querySelectorAll(".thumbs img");
    let current = 0;
    let interval;

    function showSlide(index) {
      slides[current].classList.remove("active");
      current = index;
      slides[current].classList.add("active");
    }

    function startSlider() {
      interval = setInterval(() => {
        let next = (current + 1) % slides.length;
        showSlide(next);
      }, 5000);
    }

    function stopSlider() {
      clearInterval(interval);
    }

    thumbs.forEach((thumb) => {
      const i = parseInt(thumb.dataset.index);
      thumb.addEventListener("mouseenter", () => {
        stopSlider();
        showSlide(i);
      });
      thumb.addEventListener("mouseleave", () => {
        startSlider();
      });
      thumb.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });
    });

    startSlider();
  }
});




document.addEventListener("DOMContentLoaded", function () {
  if (window.location.pathname !== "/" && window.location.pathname !== "/index.html") return;

  const section = document.createElement("section");
  section.className = "tathkar-clean-section";
  section.innerHTML = `
    <div class="tathkar-bubbles"></div>

    <div class="tathkar-content">
      <h2 class="tathkar-title">تذكار المودة — تجربة تسوق فريدة 🎁</h2>
      <p class="tathkar-desc">
        في <strong>تذكار المودة</strong> نؤمن أن الهدية هي رسالة حب ومودة تُعبّر عن مشاعرنا بأناقة.
        نوفر لك تجربة تسوق راقية تجمع بين الجودة، الأمان، وسهولة التعامل.
      </p>

      <div class="tathkar-points">
        <p><i class="fas fa-truck"></i> <span>شحن سريع وآمن لجميع مناطق المملكة</span></p>
        <p><i class="fas fa-credit-card"></i> <span>طرق دفع مرنة: مدى – Apple Pay – STC Pay</span></p>
        <p><i class="fas fa-undo"></i> <span>سياسة استبدال واسترجاع سهلة وواضحة</span></p>
      </div>
    </div>

    <div class="tathkar-image">
      <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/dPVaNr/cSN104ilQ43kWMWa56O9cWLbIYbt84ExUrBiT20V.png" alt="تذكار المودة" loading="lazy">
    </div>
  `;

  const testimonialsSection = document.querySelector(".s-block--testimonials");
  if (testimonialsSection) {
    testimonialsSection.parentNode.insertBefore(section, testimonialsSection);
  } else {
    document.body.appendChild(section);
  }

  // CSS
  const style = document.createElement("style");
  style.textContent = `
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

    :root {
      --main-brown: #6b4226;
      --light-brown: #9b6b47;
      --soft-bg: #ffffff;
      --text-dark: #3a2a20;
      --gray: #6f6f6f;
    }

    .tathkar-clean-section {
      position: relative;
      overflow: hidden;
      background: var(--soft-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      padding: 60px 20px;
      direction: rtl;
      border-radius: 20px;
    }

    /* 🔸 أنيميشن الدواير */
    .tathkar-bubbles::before,
    .tathkar-bubbles::after {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(107, 66, 38, 0.15), transparent);
      animation: float 6s ease-in-out infinite alternate;
    }

    .tathkar-bubbles::before {
      top: -80px;
      left: -100px;
    }

    .tathkar-bubbles::after {
      bottom: -80px;
      right: -100px;
      animation-delay: 3s;
    }

    @keyframes float {
      from { transform: translateY(0); opacity: 0.7; }
      to { transform: translateY(30px); opacity: 1; }
    }

    /* المحتوى */
    .tathkar-content {
      flex: 1;
      min-width: 280px;
      text-align: right;
      z-index: 2;
    }

    .tathkar-title {
      font-size: 30px;
      font-weight: 700;
      color: var(--main-brown);
      margin-bottom: 15px;
    }

    .tathkar-desc {
      font-size: 17px;
      color: var(--gray);
      line-height: 1.8;
      margin-bottom: 25px;
    }

    .tathkar-points p {
      font-size: 16px;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tathkar-points i {
      color: var(--light-brown);
      font-size: 18px;
    }

    .tathkar-image {
      flex: 1;
      max-width: 350px;
      text-align: center;
      z-index: 2;
    }

    .tathkar-image img {
      width: 100%;
      border-radius: 15px;
      animation: fadeIn 1.5s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .tathkar-clean-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 15px;
      }

      .tathkar-title {
        font-size: 24px;
      }

      .tathkar-desc {
        font-size: 15px;
      }

      .tathkar-points p {
        justify-content: center;
        text-align: center;
      }
    }
  `;
  document.head.appendChild(style);
});









/* Add custom Js styles below */ 


// إ Font Awesome 
const fa = document.createElement("link");
fa.rel = "stylesheet";
fa.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
fa.crossOrigin = "anonymous";
fa.referrerPolicy = "no-referrer";
document.head.appendChild(fa);
//end icons









document.addEventListener("DOMContentLoaded", function () {

  const priceElement = document.querySelector('.s-product-card-price');
  const iconElement  = document.querySelector('.s-button-btn');
  if (priceElement && iconElement) {
    priceElement.parentNode.insertBefore(iconElement, priceElement.nextSibling);
  }

 
  const styleTag = document.createElement("style");
  styleTag.innerHTML = `
    .enhanced-card {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.6s ease;
    }
    .enhanced-card.visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  `;
  document.head.appendChild(styleTag);


  function checkVisibility() {
    document.querySelectorAll(".s-product-card-entry").forEach(product => {
      const rect = product.getBoundingClientRect();
      if (rect.top < window.innerHeight * 0.9 && rect.bottom >= 0) {
        product.classList.add("visible");
      } else {
        product.classList.remove("visible");
      }
    });
  }


  function enhanceCards() {
    document.querySelectorAll('.s-product-card-entry').forEach(card => {
      // منع الازدواجية
      if (card.querySelector('.stars')) return;

      // نجوم التقييم
      const stars = document.createElement('div');
      stars.className = 'stars';
      const rating = Math.floor(Math.random() * 2) + 4; 
      stars.style.setProperty('--rating', `${(rating / 5) * 100}%`);
      card.querySelector('.s-product-card-content-main')?.appendChild(stars);


      const badge = document.createElement('div');
      badge.className = 'product-badge';
      const badges = [
        { text: 'جديد ', bg: '#271A13' },
        { text: 'حصري ', bg: '#090E12' },
        { text: 'اشترِ الآن ', bg: '#271A13' },
        { text: 'حديثًا ', bg: '#090E12' }
      ];
      const selected = badges[Math.floor(Math.random() * badges.length)];
      badge.textContent = selected.text;
      badge.style.cssText = `
        position: absolute;
        top: 10px; right: 10px;
        background-color: ${selected.bg};
        color: white;
        padding: 4px 8px;
        border-radius: 0.3rem;
        font-size: 0.7rem;
        font-weight: bold;
        z-index: 10;
      `;
      card.style.position = 'relative';
      card.classList.add('enhanced-card');
      card.appendChild(badge);
    });
  }


  let tries = 0;
  const interval = setInterval(() => {
    enhanceCards();
    checkVisibility();
    if (++tries > 10) clearInterval(interval);
  }, 500);

  window.addEventListener("scroll", checkVisibility);
});
// =========== 👆 BACK TO TOP BUTTON =========
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(--second-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(--second-color);
   stroke-width: 3.8;
   stroke-dasharray: 100, 100;
   stroke-linecap: round;
   transition: stroke-dasharray 0.1s linear;
 }
 #backToTop:hover .icon {
   color: var(--main-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

// ======== ⚠️ EMPTY LINKS PREVENT DEFAULT==========
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
  });
});
// Select the salla-product-options element

// ============= 📢 PRODUCT OPTION ALERT ===========
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
// 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


// ==================== 🖼️ SCROLL EFFECT FOR BANNERS ====================
function handleScroll() {
  const elements = document.querySelectorAll('.banner--fixed img');

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


    if (rect.top <= window.innerHeight && rect.bottom >= 0) {

      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
     
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); 



// ==================== 🖼️ SCROLL EFFECT FOR PHOTOS SLIDER ====================
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(); 



// ======== 🖼️ SCROLL EFFECT FOR BACKGROUND =========
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 {

      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); 


// ======== 🛍️ BLUR EFFECT ON PRODUCT CARDS ==========
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




//hero







//start loading
const loader = document.createElement('div');
loader.className = 'custom-loader';
loader.innerHTML = `
  <img class="loader-image" src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/dPVaNr/cSN104ilQ43kWMWa56O9cWLbIYbt84ExUrBiT20V.png" alt="Loading" />
`;
document.body.appendChild(loader);

window.addEventListener("load", () => {

  setTimeout(() => {
    loader.classList.add('gray-phase');
  }, 500);


  setTimeout(() => {
    loader.classList.add('hide-loader');
  }, 2500);
});

//end loading