/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", () => {
  // يظهر فقط في الصفحة الرئيسية
  if (window.location.pathname !== "/" && !window.location.pathname.includes("index")) return;

  // نجمع فقط عناصر البنرات المحتملة (لا نأخذ <section> العام)
  const possibleSelectors = [
    ".banner",
    ".slider",
    ".home-banner",
    ".main-banner",
    ".hero",
    "[data-banner]",
    ".top-banner"
  ];
  const nodes = Array.from(document.querySelectorAll(possibleSelectors.join(",")));

  // نفلتر العناصر غير المرئية (حتى لا نعد عناصر مخفية أو مطوية)
  const visibleBanners = nodes.filter(el => {
    try {
      return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
    } catch (e) {
      return false;
    }
  });

  // إذا لم توجد 8 عناصر بنر مرئية، ننهي التنفيذ
  if (visibleBanners.length < 8) return;

  // نأخذ البنر الثامن (index 7) وندرج القسم قبله
  const targetBanner = visibleBanners[7];

  // إنشاء القسم (مطابق لستايل Solvra)
  const section = document.createElement("section");
  section.id = "solvra-shoes-perfumes";
  section.innerHTML = `
    <style>
      #solvra-shoes-perfumes {
        background: transparent;
        padding: 50px 20px 70px;
        text-align: center;
        margin: 40px 0;
        animation: fadeInUp 0.9s ease forwards;
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      #solvra-shoes-perfumes h2 {
        color: #000;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 35px;
      }
      .luxury-cards {
        display: flex;
        flex-direction: column;
        gap: 25px;
      }
      .luxury-card {
        background: #fff;
        border-radius: 20px;
        border: 2px solid #d4af37; /* ذهبي */
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); /* ضي ذهبي حول الفريم */
        padding: 30px;
        text-align: center;
        transition: all 0.3s ease;
      }
      .luxury-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
      }
      .luxury-card h3 {
        color: #b76e79;
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .luxury-card p {
        color: #000;
        font-size: 15px;
        line-height: 1.6;
      }
      @media (min-width: 768px) {
        .luxury-cards {
          flex-direction: row;
          justify-content: center;
        }
        .luxury-card {
          width: 40%;
        }
      }
    </style>

    <h2>أناقة تفوح فخامة من <span style="color:#b76e79;">Solvra</span> ✨</h2>
    <div class="luxury-cards">
      <div class="luxury-card">
        <h3>الأحذية الراقية</h3>
        <p>تصاميم أنيقة ومريحة تمنحك لمسة فخمة في كل خطوة.</p>
      </div>

      <div class="luxury-card">
        <h3>العطور الفاخرة</h3>
        <p>نفحات عطرية آسرة تعبّر عن شخصيتك وتترك أثراً لا يُنسى.</p>
      </div>
    </div>
  `;

  // إدراج القسم *قبل* البنر الثامن
  targetBanner.parentNode.insertBefore(section, targetBanner);
});


document.addEventListener("DOMContentLoaded", () => {
  // ✅ يظهر فقط في الصفحة الرئيسية
  if (window.location.pathname !== "/" && !window.location.pathname.includes("index")) return;

  // ✅ تحديد مكان الظهور (بعد أول بانر)
  const banners = document.querySelectorAll(".banner, .slider, .home-banner, section");
  if (banners.length < 1) return;
  const targetBanner = banners[0];

  // ✅ إنشاء القسم
  const section = document.createElement("section");
  section.id = "solvra-elegant";
  section.innerHTML = `
    <style>
      #solvra-elegant {
        background: transparent;
        padding: 50px 20px 70px;
        text-align: center;
        margin: 40px 0;
        animation: fadeInUp 0.9s ease forwards;
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      #solvra-elegant h2 {
        color: #000;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 35px;
      }
      .fashion-cards {
        display: flex;
        flex-direction: column;
        gap: 25px;
      }
      .fashion-card {
        background: #fff;
        border-radius: 20px;
        border: 2px solid #d4af37; /* ذهبي */
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        padding: 30px;
        text-align: center;
        transition: all 0.3s ease;
      }
      .fashion-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); /* ضي ذهبي أقوى عند الهوفر */
      }
      .fashion-card h3 {
        color: #b76e79;
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .fashion-card p {
        color: #000;
        font-size: 15px;
        line-height: 1.6;
      }
      @media (min-width: 768px) {
        .fashion-cards {
          flex-direction: row;
          justify-content: center;
        }
        .fashion-card {
          width: 40%;
        }
      }
    </style>

    <h2>تألّقي بفخامة لا تُقاوم من <span style="color:#b76e79;">Solvra</span> ✨</h2>
    <div class="fashion-cards">

      <div class="fashion-card">
        <h3>فساتين السهرة</h3>
        <p>تشكيلة فاخرة من فساتين السهرة بتفاصيل أنيقة تناسب كل ذوق.</p>
      </div>

      <div class="fashion-card">
        <h3>العبايات الكشخة</h3>
        <p>عبايات بتصاميم فريدة ولمسات ذهبية تضيف سحرًا خاصًا لإطلالتك.</p>
      </div>

    </div>
  `;

  // ✅ إدراج القسم بعد أول بانر
  targetBanner.parentNode.insertBefore(section, targetBanner.nextSibling);
});








window.addEventListener("load", function () {
  // إنشاء زر التقييم
  const rateStoreBtn = document.createElement("button");
  rateStoreBtn.innerText = "⭐ قيّم المتجر";
  Object.assign(rateStoreBtn.style, {
    position: "fixed",
    bottom: "100px",
    left: "20px",
    background: "#4CAF50",
    color: "#fff",
    border: "none",
    borderRadius: "8px",
    padding: "10px 14px",
    cursor: "pointer",
    zIndex: "999999",
    fontSize: "14px",
    boxShadow: "0 4px 10px rgba(0,0,0,0.2)"
  });
  document.body.appendChild(rateStoreBtn);

  // نافذة التقييم
  function showStoreRatingPopup() {
    if (document.getElementById("store-rating-popup")) return;

    const popup = document.createElement("div");
    popup.id = "store-rating-popup";
    Object.assign(popup.style, {
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      background: "rgba(255,255,255,0.95)",
      padding: "20px",
      borderRadius: "12px",
      boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
      zIndex: "1000000",
      width: "300px",
      textAlign: "center"
    });

    const title = document.createElement("h3");
    title.innerText = "⭐ قيّم تجربتك مع المتجر";
    title.style.marginBottom = "10px";
    popup.appendChild(title);

    const textarea = document.createElement("textarea");
    textarea.placeholder = "اكتب رأيك هنا...";
    Object.assign(textarea.style, {
      width: "100%",
      height: "80px",
      borderRadius: "8px",
      padding: "6px",
      margin: "10px 0",
      border: "1px solid #ddd"
    });
    popup.appendChild(textarea);

    const saveBtn = document.createElement("button");
    saveBtn.innerText = "إرسال التقييم";
    Object.assign(saveBtn.style, {
      display: "block",
      width: "100%",
      padding: "8px",
      borderRadius: "8px",
      border: "none",
      background: "#4CAF50",
      color: "#fff",
      cursor: "pointer",
      marginTop: "10px"
    });
    saveBtn.addEventListener("click", () => {
      if (textarea.value.trim() === "") {
        alert("من فضلك اكتب تعليقك ✍️");
        return;
      }
      alert("✅ شكراً لتقييمك للمتجر!");
      popup.remove();
    });
    popup.appendChild(saveBtn);

    const closeBtn = document.createElement("span");
    closeBtn.innerText = "✖";
    Object.assign(closeBtn.style, {
      position: "absolute",
      top: "8px",
      right: "12px",
      cursor: "pointer",
      fontSize: "18px"
    });
    closeBtn.addEventListener("click", () => popup.remove());
    popup.appendChild(closeBtn);

    document.body.appendChild(popup);
  }

  // ربط الزر بالنافذة
  rateStoreBtn.addEventListener("click", showStoreRatingPopup);
});








function enhanceCards() {
    const cards = document.querySelectorAll('.s-product-card-entry');
    if (cards.length === 0) return;

    cards.forEach((card, index) => {
        if (card.querySelector('.product-rating')) return;

        // نجوم التقييم
        const stars = document.createElement('div');
        stars.className = 'product-rating';
        const rating = Math.floor(Math.random() * 2) + 4;
        for (let i = 0; i < 5; i++) {
            const star = document.createElement('span');
            star.innerHTML = i < rating ? '★' : '☆';
            stars.appendChild(star);
        }
        stars.style.color = '#ffd700';
        stars.style.fontSize = '18px';
        stars.style.margin = '6px 0';
        card.querySelector('.s-product-card-content-main')?.appendChild(stars);

        // بادج (جديد أو خصم)
        const badge = document.createElement('div');
        badge.className = 'product-badge';
        badge.textContent = index % 2 === 0 ? 'جديد' : 'اشترى الان';
        badge.style.cssText = `
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: #33005d;
            color: white;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            z-index: 10;
        `;
        card.style.position = 'relative';
        card.appendChild(badge);
    });
}

let tryCount = 0;
const interval = setInterval(() => {
    enhanceCards();
    tryCount++;
    if (tryCount > 10) clearInterval(interval);
}, 1000)

function checkVisibility() {
  const products = document.querySelectorAll(".s-product-card-vertical");

  products.forEach((product) => {
    const position = product.getBoundingClientRect();

    if (position.top < window.innerHeight * 0.9 && position.bottom >= 0) {
      product.classList.add("visible");
    } else {
      product.classList.remove("visible"); // 👈 لإعادة التأثير عند التمرير للأعلى
    }
  });
}

function observeElements() {
  const observer = new MutationObserver(() => {
    checkVisibility(); // 👈 تحقق من الرؤية عند تحديث الـ DOM
  });

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

  window.addEventListener("scroll", checkVisibility);
}

window.addEventListener("load", observeElements);

document.addEventListener("DOMContentLoaded", function () {
    // البحث عن عنصر الفوتر
    var footerSection = document.querySelector(".store-footer");
    if (!footerSection) return; // إذا لم يتم العثور على الفوتر، يتوقف الكود

    // إنشاء حاوية قسم آراء العملاء
    var reviewsContainer = document.createElement("div");
    reviewsContainer.id = "reviews-container";
    reviewsContainer.style.cssText = `
        width: 90%;
        max-width: 1200px;
        margin: 50px auto 20px;
        padding: 20px;
        background: transparent; /* جعل الخلفية شفافة */
        font-family: Arial, sans-serif;
        text-align: center;
        direction: rtl; /* لتتماشى مع اللغة العربية */
    `;
    footerSection.parentNode.insertBefore(reviewsContainer, footerSection); // إدراج القسم قبل الفوتر

    

    // بيانات الآراء الوهمية بتنسيق سعودي
    var reviews = [
        { name: "عبدالله القحطاني", text: "منتجات عالية الجودة وسرعة في التوصيل، أنصح الجميع بهذا المتجر!", stars: 5, img: "https://i.pinimg.com/736x/5c/7e/94/5c7e94dd55c06c2e2f395b3c826deb3c.jpg" },
        { name: "نورة العتيبي", text: "خدمة العملاء ممتازة جدًا والأسعار منافسة، تجربة رائعة.", stars: 4, img: "https://i.pinimg.com/736x/ae/a6/2b/aea62bb75e293d52e411fcc7bd5124fc.jpg" },
        { name: "سعود الدوسري", text: "أكثر من رائع! تغليف احترافي وشحن سريع، سأكرر الشراء بالتأكيد.", stars: 5, img: "https://i.pinimg.com/736x/25/b9/c9/25b9c99d1a7f5bcc86d09ee85d82ee02.jpg" },
        { name: "فاطمة الزهراني", text: "تجربة مميزة، المنتجات فاقت توقعاتي!", stars: 5, img: "https://i.pinimg.com/736x/fd/20/26/fd2026354863f45e76a2e07b1ed869d4.jpg" }
    ];

    // عرض جميع المراجعات معًا
    reviews.forEach((reviewData) => {
        var review = document.createElement("div");
        review.className = "review";

        // إضافة القسم الذي يحتوي على النص والنجوم
        var content = document.createElement("div");
        content.className = "content";

        // إضافة النجوم
        var stars = document.createElement("div");
        stars.className = "stars";
        stars.innerHTML = "★".repeat(reviewData.stars) + "☆".repeat(5 - reviewData.stars);

        // إضافة النص
        var text = document.createElement("p");
        text.className = "quote";
        text.innerHTML = reviewData.text;

        content.appendChild(stars);
        content.appendChild(text);

        // إضافة الاسم والصورة
        var nameImg = document.createElement("div");
        nameImg.className = "user-info";
        var img = document.createElement("img");
        img.src = reviewData.img;
        img.alt = reviewData.name;
        var name = document.createElement("p");
        name.innerHTML = `<strong>${reviewData.name}</strong>`;

        nameImg.appendChild(img);
        nameImg.appendChild(name);

        // إضافة العناصر إلى المراجعة
        review.appendChild(content);
        review.appendChild(nameImg);

        innerContainer.appendChild(review);
    });

    // إعادة تشغيل الأنيميشن كل 7 ثوانٍ
    setInterval(() => {
        innerContainer.querySelectorAll(".review").forEach((review) => {
            // إعادة تشغيل الأنيميشن عن طريق إزالة وإعادة إضافته
            review.style.animation = "none";
            setTimeout(() => {
                review.style.animation = "slideUp 0.8s ease-out forwards";
            }, 10); // تأخير بسيط لضمان إعادة التشغيل
        });
    }, 7000); // كل 7 ثوانٍ
});
///////////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function() {
    const sections = document.querySelectorAll('section');

    function checkVisibility() {
        sections.forEach(section => {
            const position = section.getBoundingClientRect();
            if (position.top < window.innerHeight && position.bottom >= 0) {
                section.classList.add('visible');
            } else {
                section.classList.remove('visible');
            }
        });
    }

    window.addEventListener("scroll", checkVisibility);
    checkVisibility(); // Check on load
});



var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

var whatsappLink = document.createElement('a');
whatsappLink.href = 'https://wa.me/+966547299071'; 
whatsappLink.target = '_blank';

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

whatsappLink.appendChild(whatsappIcon);

whatsappFloat.appendChild(whatsappLink);

document.body.appendChild(whatsappFloat);

var style = document.createElement('style');
style.innerHTML = `
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
}

.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);
}
`;
document.head.appendChild(style);

/* 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 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 = 'loader';
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 class="cart-icon" role="img" aria-label="Shopping cart line animation" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
      <g class="cart-track" stroke="hsla(0,10%,10%,0.1)">
        <polyline points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" />
        <circle cx="43" cy="111" r="13" />
        <circle cx="102" cy="111" r="13" />
      </g>
      <g class="cart-lines" stroke="currentColor">
        <polyline class="cart-top" points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" stroke-dasharray="338 338" stroke-dashoffset="-338" />
        <g class="cart-wheel1" transform="rotate(-90,43,111)">
          <circle class="cart-wheel-stroke" cx="43" cy="111" r="13" stroke-dasharray="81.68 81.68" stroke-dashoffset="81.68" />
        </g>
        <g class="cart-wheel2" transform="rotate(90,102,111)">
          <circle class="cart-wheel-stroke" cx="102" cy="111" r="13" stroke-dasharray="81.68 81.68" stroke-dashoffset="81.68" />
        </g>
      </g>
    </g>
  </svg>
`;

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

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

// 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