/* 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", function() {
    try {
        function enhanceCards() {
            const cards = document.querySelectorAll('.s-product-card-entry');
            if (cards.length === 0) return;

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

                const productLink = card.querySelector('a[href*="تسجيل-الفنيين"], a[href*="تسجيل-فنيين"], a[href*="c1917433758"]');
                if (productLink) return;

                const contentMain = card.querySelector('.s-product-card-content-main');
                if (!contentMain) 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';
                contentMain.appendChild(stars);
            });
        }

        let tryCount = 0;
        const starsInterval = setInterval(() => {
            enhanceCards();
            tryCount++;
            if (tryCount > 10) clearInterval(starsInterval);
        }, 1000);
    } catch (error) {
        console.error('خطأ في كود النجوم:', error);
    }
}, false);


document.addEventListener("DOMContentLoaded", () => {
  // ✅ إنشاء قسم المميزات
  const featuresSection = document.createElement("section");
  featuresSection.id = "siin-features";
  featuresSection.innerHTML = `
    <style>
      #siin-features {
        background: transparent;
        padding: 60px 20px;
        font-family: 'Cairo', sans-serif;
        text-align: center;
      }

      /* البوكس الرئيسى */
      .features-wrapper {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(212, 175, 55, 0.2);
        border-radius: 20px;
        padding: 40px 20px;
        max-width: 1150px;
        margin: auto;
        backdrop-filter: blur(5px);
      }

      #siin-features h2 {
        color: #d4af37;
        font-size: 30px;
        margin-bottom: 40px;
        letter-spacing: 1px;
      }

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

      .feature-card {
        background: rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        padding: 25px 20px;
        border: 1px solid rgba(212, 175, 55, 0.4);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        transition: all 0.35s ease;
      }

      .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
      }

      .feature-icon {
        font-size: 42px;
        color: #d4af37;
        margin-bottom: 12px;
      }

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

      .feature-desc {
        font-size: 15px;
        color: #000;
      }

      @media (max-width: 600px) {
        #siin-features h2 {
          font-size: 24px;
        }
      }
    </style>

    <div class="features-wrapper">
      <h2>مميزات متجرنا</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">⚙️</div>
          <div class="feature-title">صيانة سريعة</div>
          <div class="feature-desc">خدمة فورية لصيانة الأجهزة والمعدات بأعلى كفاءة وفريق مختص.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🏗️</div>
          <div class="feature-title">أعمال مقاولات</div>
          <div class="feature-desc">تنفيذ مشاريع البناء والتشطيبات باحترافية عالية وجودة مضمونة.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🧹</div>
          <div class="feature-title">خدمات تنظيف متكاملة</div>
          <div class="feature-desc">تنظيف المنازل والشركات بأحدث الأدوات والمواد الآمنة.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🚗</div>
          <div class="feature-title">صيانة أعطال السيارات</div>
          <div class="feature-desc">تشخيص سريع وإصلاح فوري لجميع أنواع أعطال السيارات.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">👨‍🔧</div>
          <div class="feature-title">تسجيل الفنيين</div>
          <div class="feature-desc">منصة لتسجيل الفنيين المعتمدين وتوصيل العملاء بهم بسهولة.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🏠</div>
          <div class="feature-title">أجهزة منزلية</div>
          <div class="feature-desc">توفير وصيانة الأجهزة المنزلية الحديثة بجودة وضمان موثوق.</div>
        </div>
      </div>
    </div>
  `;

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





document.addEventListener("DOMContentLoaded", () => {
  // ✅ إنشاء قسم الأسئلة الشائعة
  const faqSection = document.createElement("section");
  faqSection.id = "siin-faq";
  faqSection.innerHTML = `
    <style>
      #siin-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(212, 175, 55, 0.4);
        border-radius: 20px;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
        padding: 40px 25px;
        backdrop-filter: blur(5px);
      }

      #siin-faq h2 {
        color: #d4af37;
        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(212, 175, 55, 0.3);
        box-shadow: 0 0 10px rgba(212, 175, 55, 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: #d4af37;
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
        color: #ddd;
        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: #d4af37;
      }

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

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

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

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

      <div class="faq-item">
        <div class="faq-question">
          <span>ما الخدمات التي يقدمها متجر Siin؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          متجر Siin يقدم خدمات الصيانة السريعة، والمقاولات، والتنظيف، وإصلاح أعطال السيارات، 
          بالإضافة إلى تسجيل الفنيين وخدمات الأجهزة المنزلية.
        </div>
      </div>

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

      <div class="faq-item">
        <div class="faq-question">
          <span>هل الفنيين مسجلين ومعتمدين؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          جميع الفنيين في Siin يتم تسجيلهم ومراجعة بياناتهم لضمان الجودة والاعتمادية العالية في الخدمة.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-question">
          <span>هل يقدم المتجر ضمان على الصيانة؟</span>
          <span class="faq-icon">▼</span>
        </div>
        <div class="faq-answer">
          بالتأكيد، جميع خدمات الصيانة في Siin تشمل ضمان لفترة محددة حسب نوع الخدمة لضمان رضا العملاء.
        </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);
});
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/+966538925101'; 
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