/* 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", () => {
  // ✅ إنشاء قسم مميزات متجر Aura Me بدون بوكس خارجي وبألوان واضحة
  const featuresSection = document.createElement("section");
  featuresSection.id = "aurame-features";
  featuresSection.innerHTML = `
    <style>
      #aurame-features {
        background: transparent;
        font-family: 'Cairo', sans-serif;
        padding: 60px 20px;
        text-align: center;
      }

      #aurame-features h2 {
        color: #6c9d8a;
        font-size: 28px;
        margin-bottom: 40px;
        font-weight: 700;
      }

      .features-grid {
        max-width: 1000px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
      }

      .feature-box {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        padding: 25px 20px;
        border: 1px solid rgba(108, 157, 138, 0.3);
        box-shadow: 0 0 10px rgba(108, 157, 138, 0.2);
        transition: all 0.3s ease;
      }

      .feature-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 20px rgba(108, 157, 138, 0.4);
      }

      .feature-icon {
        font-size: 34px;
        color: #6c9d8a;
        margin-bottom: 10px;
      }

      .feature-title {
        color: #222;
        font-size: 18px;
        margin-bottom: 8px;
        font-weight: 700;
      }

      .feature-text {
        color: #333;
        font-size: 15px;
        line-height: 1.8;
      }

      @media (max-width: 600px) {
        #aurame-features h2 {
          font-size: 24px;
        }
        .feature-title {
          font-size: 16px;
        }
      }
    </style>

    <h2>مميزات متجر Aura Me</h2>
    <div class="features-grid">

      <div class="feature-box">
        <div class="feature-icon">🚚</div>
        <div class="feature-title">توصيل سريع وآمن</div>
        <div class="feature-text">نوصل طلبك خلال وقت قصير مع تغليف محكم يحافظ على المنتجات ويوصلها فى أفضل حال.</div>
      </div>

      <div class="feature-box">
        <div class="feature-icon">💬</div>
        <div class="feature-title">خدمة عملاء متوفرة دائمًا</div>
        <div class="feature-text">فريق Aura Me دايمًا جاهز يجاوب على كل استفساراتك ويساعدك تختارى المنتجات المناسبة ليكى.</div>
      </div>

      <div class="feature-box">
        <div class="feature-icon">🌿</div>
        <div class="feature-title">منتجات عناية طبيعية</div>
        <div class="feature-text">منتجاتنا مختارة بعناية بمكونات آمنة ولطيفة تناسب كل أنواع البشرة والشعر.</div>
      </div>

    </div>
  `;

  // ✅ إدراج القسم قبل الفوتر
  const footer = document.querySelector("footer") || document.body;
  footer.parentNode.insertBefore(featuresSection, footer);
});
document.addEventListener("DOMContentLoaded", () => {
  // ✅ إنشاء قسم الأسئلة الشائعة لمتجر Aura Me
  const faqSection = document.createElement("section");
  faqSection.id = "aurame-faq";
  faqSection.innerHTML = `
    <style>
      #aurame-faq {
        background: transparent;
        font-family: 'Cairo', sans-serif;
        padding: 60px 20px;
        text-align: center;
      }

      .faq-wrapper {
        max-width: 900px;
        margin: auto;
        border: 1px solid rgba(108, 157, 138, 0.4);
        border-radius: 20px;
        box-shadow: 0 0 20px rgba(108, 157, 138, 0.25);
        padding: 40px 25px;
        backdrop-filter: blur(5px);
      }

      #aurame-faq h2 {
        color: #6c9d8a;
        font-size: 28px;
        margin-bottom: 35px;
      }

      .faq-item {
        background: rgba(255, 255, 255, 0.07);
        margin-bottom: 15px;
        border-radius: 14px;
        border: 1px solid rgba(108, 157, 138, 0.3);
        box-shadow: 0 0 10px rgba(108, 157, 138, 0.25);
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .faq-question {
        cursor: pointer;
        padding: 15px 20px;
        font-size: 17px;
        color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .faq-question:hover {
        color: #6c9d8a;
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
        color: #000;
        text-align: right;
        padding: 0 20px;
        line-height: 1.8;
      }

      .faq-item.active .faq-answer {
        max-height: 300px;
        padding: 10px 20px 20px;
      }

      .faq-item.active .faq-question {
        color: #6c9d8a;
      }

      .faq-icon {
        transition: transform 0.3s ease;
      }

      .faq-item.active .faq-icon {
        transform: rotate(180deg);
      }

      @media (max-width: 600px) {
        #aurame-faq h2 {
          font-size: 24px;
        }
        .faq-question {
          font-size: 15px;
        }
      }
    </style>

    <div class="faq-wrapper">
      <h2>الأسئلة الشائعة لمتجر Aura Me</h2>

      <div class="faq-item">
        <div class="faq-question">
          <span>ما أنواع المنتجات التي يقدمها متجر Aura Me؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          يقدم متجر Aura Me مجموعة واسعة من منتجات الميكب، العطور، واقيات الشمس، والعناية بالبشرة والشعر والجسم من أفضل الماركات الأصلية.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-question">
          <span>هل المنتجات أصلية ومضمونة؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          نعم، جميع منتجات Aura Me أصلية 100٪ ويتم توريدها من الوكلاء والموزعين المعتمدين فقط لضمان الجودة والثقة.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-question">
          <span>هل تتوفر خدمة التوصيل لجميع المحافظات؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          نعم، نوفر خدمة التوصيل لجميع المناطق داخل المملكه مع تغليف آمن وسريع للحفاظ على المنتجات أثناء الشحن.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-question">
          <span>هل يمكن استبدال أو إرجاع المنتج؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          بالتأكيد، يمكنك استبدال أو إرجاع المنتج خلال 14 يومًا من الاستلام بشرط أن يكون غير مستخدم وفي عبوته الأصلية.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-question">
          <span>هل يقدم المتجر نصائح للعناية بالبشرة والشعر؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          نعم، نقدم بشكل دوري نصائح ومقالات عن العناية بالبشرة والشعر واختيار المنتجات المناسبة لكِ عبر موقعنا وصفحاتنا على السوشيال ميديا.
        </div>
      </div>
    </div>
  `;

  // ✅ تفعيل الحركة عند النقر
  faqSection.addEventListener("click", (e) => {
    const item = e.target.closest(".faq-item");
    if (!item) return;
    item.classList.toggle("active");
  });

  // ✅ إدراج القسم قبل الفوتر
  const footer = document.querySelector("footer") || document.body;
  footer.parentNode.insertBefore(faqSection, footer);
});



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/+966502520108'; 
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