/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
///////// js code ra2ed
// add class

const copyright = document.querySelector(".copyright-text p");

copyright.innerHTML = `<p class="text-gray-400 mb-2.5 md:mb-0">تم التصميم بواسطة | <a href="https://meggaagency.com/" class="hover:text-primary" target="_blank" rel="noreferrer">MEGA</a>
</p>`; 

// Header Marquee
document.addEventListener('DOMContentLoaded', () => { 
  let header = document.querySelector('.top-navbar'); 
  let marquee = document.createElement('div'); 

  marquee.innerHTML = `
   <div class="marquee">
     <div>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
     </div>
     <div>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
       <p>كود خصم 30% بمناسبة اليوم الوطني ( JESA30 )</p>
     </div>
   </div>
  `;

  header.parentNode.insertBefore(marquee, header); 
});





document.addEventListener("DOMContentLoaded", () => {
    // اجلب جميع الأقسام (sections) في المتجر
    const sections = document.querySelectorAll("section");

    // أضف class ثابت ومختلف لكل قسم
    sections.forEach((section, index) => {
        // أنشئ اسم class جديد
        const uniqueClass = `section-${index + 1}`;
        
        // أضف الـ class إلى القسم
        section.classList.add(uniqueClass);
    });
});
// motion
// إنشاء عنصر <link> لتحميل ملف CSS الخارجي من Animate.css
var animateCSSLink = document.createElement("link");
animateCSSLink.rel = "stylesheet";
animateCSSLink.href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
document.head.appendChild(animateCSSLink);

// الانتظار حتى يتم تحميل DOM بالكامل
document.addEventListener("DOMContentLoaded", function() {
    var sections = document.querySelectorAll('body.index section');

    // إعداد IntersectionObserver
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add("animate__animated", "animate__fadeInUpBig");
                observer.unobserve(entry.target); // لإزالة المراقبة بعد التفعيل
            }
        });
    });

    sections.forEach(section => {
        observer.observe(section); // مراقبة كل قسم
    });
});
/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", () => {
    // إنشاء عنصر الحاوية الرئيسي
    const faqSection = document.createElement("section");
    faqSection.id = "faq-section";
    faqSection.style.cssText = `
	background: linear-gradient(135deg, #4F4132, #A69C8A);
        padding: 2rem;
        margin: 2rem auto;
        width: 90%;
        max-width: 900px;
        border-radius: 15px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    `;

    // إضافة عنوان القسم
    const faqTitle = document.createElement("h2");
    faqTitle.innerText = "الأسئلة الشائعة";
    faqTitle.style.cssText = `
        text-align: center;
        color:#fff;
        margin-bottom: 2rem;
        font-size: 2rem;
        font-weight: 700;
        border-bottom: 2px solid #144673;
        padding-bottom: 0.5rem;
    `;
    faqSection.appendChild(faqTitle);

    // البيانات الخاصة بالأسئلة الشائعة
    const faqData = [
        {
            question: "ما هي خيارات الدفع المتوفرة؟",
            answer: "الدفع بمدى و البطاقات الإئتمانية و آبل باي و STC Pay"
        },
        {
            question: "كم يستغرق توصيل الطلب؟",
            answer: "عادةً ما يتم توصيل الطلبات خلال 7 - 10 يوم عمل."
        },
        {
            question: "هل يمكنني استرجاع المنتجات؟",
            answer: "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع."
        },
    ];

    // إنشاء حاوية للأسئلة
    const faqContainer = document.createElement("div");
    faqContainer.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 1rem;
    `;
    faqSection.appendChild(faqContainer);

    // إنشاء الأسئلة والإجابات بتصميم بطاقات
    faqData.forEach(({ question, answer }, index) => {
        const faqItem = document.createElement("div");
        faqItem.className = `faq-item-${index}`;
        faqItem.style.cssText = `
            background-color: #144673;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        `;

        const questionHeader = document.createElement("div");
        questionHeader.style.cssText = `
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color:#f2f2f2 ;
            cursor: pointer;
            color: #144673;
            font-size: 1.1rem;
            font-weight: 600;
        `;

        const questionText = document.createElement("span");
        questionText.innerText = question;

        const toggleIcon = document.createElement("span");
        toggleIcon.innerText = "+";
        toggleIcon.style.cssText = `
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        `;

        questionHeader.appendChild(questionText);
        questionHeader.appendChild(toggleIcon);
        faqItem.appendChild(questionHeader);

        const answerContent = document.createElement("div");
        answerContent.style.cssText = `
            padding: 0 1rem 1rem 1rem;
            color:#144673;
            font-size: 1rem;
            display: none;
            background-color: #fff;
        `;
        answerContent.innerText = answer;
        faqItem.appendChild(answerContent);

        // إضافة تفاعل النقر
        questionHeader.addEventListener("click", () => {
            const isOpen = answerContent.style.display === "block";
            answerContent.style.display = isOpen ? "none" : "block";
            toggleIcon.innerText = isOpen ? "+" : "-";
            toggleIcon.style.transform = isOpen ? "rotate(0deg)" : "rotate(45deg)";
            faqItem.style.boxShadow = isOpen ? "0 6px 12px rgba(0, 0, 0, 0.1)" : "0 10px 20px rgba(0, 0, 0, 0.2)";
        });

        faqContainer.appendChild(faqItem);
    });

    // إضافة القسم قبل الفوتر
    const footer = document.querySelector("footer");
    if (footer) {
        footer.parentNode.insertBefore(faqSection, footer);
    } else {
        document.body.appendChild(faqSection); // كبديل إذا لم يوجد فوتر
    }
});
///////////////////////////////////////////////////
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;

        font-family: Arial, sans-serif;
        text-align: center;
        direction: rtl; /* لتتماشى مع اللغة العربية */
    `;
    footerSection.parentNode.insertBefore(reviewsContainer, footerSection); // إدراج القسم قبل الفوتر

    // إضافة عنوان "آراء العملاء"
    var title = document.createElement("h2");
    title.id = "reviews-title";
    title.innerText = "آراء العملاء";
    title.style.cssText = `
        color: #144673; /* لون أبيض */
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
    `;
    reviewsContainer.appendChild(title);

    // إنشاء حاوية داخلية للمراجعات مع الضبابية
    var innerContainer = document.createElement("div");
    innerContainer.id = "inner-reviews-container";
    innerContainer.style.cssText = `
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        backdrop-filter: blur(10px); /* تأثير ضبابي */
        border-radius: 15px; /* زوايا مستديرة */
        padding: 20px;
    `;
    reviewsContainer.appendChild(innerContainer);

    // إنشاء الأنماط باستخدام JavaScript
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = `
        .review {
            width: 22%; /* عرض لتكون أربعة في الصف في الحجم الطبيعي */
            padding: 15px;
	background: linear-gradient(135deg, #4F4132, #A69C8A);
            backdrop-filter: blur(5px); /* تأثير ضبابي خفيف */
            border-radius: 15px; /* زوايا مستديرة */
            margin: 10px 0;
            transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out, border 0.3s ease-in-out;
            color: #fff; /* لون النص أسود */
            animation: slideUp 0.8s ease-out forwards; /* أنيميشن */
            animation-delay: 0s; /* بدون تأخير بين المراجعات */
            box-sizing: border-box; /* لضمان احتساب الحشوات داخل العرض */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 250px; /* تحديد ارتفاع ثابت */
        }
        .review:hover {
            transform: scale(1.05); /* تكبير المراجعة (بروز) */
            border-radius: 0; /* إزالة الزوايا المستديرة */
        }
        .review .content {
            flex-grow: 1;
            border-bottom: 1px solid #fff; /* خط فاصل أسفل النص */
            padding-bottom: 10px; /* مسافة بعد الخط الفاصل */
        }
        .review .user-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 10px;
        }
        .review img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background:#144673; /* خلفية بيضاء */
            padding: 5px; /* مسافة داخلية لإظهار الخلفية */
            border: 2px solid #fff; /* حدود بيضاء */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ظل خفيف */
            object-fit: cover; /* التأكد من ملاءمة الصورة داخل الحاوية */
            display: block; /* التأكد من ظهور الصورة */
        }
        .review .stars {
            margin: 5px 0;
            font-size: 16px;
            color: #FFD700; /* لون النجوم أصفر */
        }
        .review p {
            font-size: 14px; /* حجم الخط للتعليق */
            margin: 5px 0;
            position: relative;
            display: flex;
            align-items: center;
        }
        .review p strong {
            font-size: 16px; /* حجم الخط للاسم */
            display: block;
            margin-top: 5px;
            color:#fff;
        }
        .review p.quote::before, .review p.quote::after {
            content: '"';
            font-size: 24px;
            color: #fff; /* لون علامات الاقتباس أسود ليتناسب مع النص */
            position: absolute;
        }
        .review p.quote::before {
            left: -10px;
        }
        .review p.quote::after {
            right: -10px;
        }
        /* تصميم متجاوب */
        @media (max-width: 768px) {
            .review {
                width: 48%; /* 2 مراجعة في الصف للأجهزة اللوحية */
            }
            .review img {
                width: 50px; /* التأكد من الحجم */
                height: 50px;
                display: block; /* التأكد من ظهور الصورة */
            }
        }
        @media (max-width: 480px) {
            .review {
                width: 100%; /* 1 مراجعة في الصف للأجهزة المحمولة */
                height: auto; /* السماح للارتفاع بالتكيف مع المحتوى */
                padding: 10px; /* تقليل الحشوة لتناسب الشاشة الصغيرة */
            }
            .review img {
                width: 60px; /* زيادة طفيفة في الحجم للظهور بوضوح */
                height: 60px;
                display: block; /* التأكد من ظهور الصورة */
                margin: 10px auto; /* محاذاة الصورة في المنتصف مع مسافة علوية */
            }
            .review .user-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .review .content {
                padding-bottom: 5px; /* تقليل المسافة لتناسب الشاشة */
            }
            .review p.quote::before, .review p.quote::after {
                font-size: 20px; /* تقليل حجم علامات الاقتباس */
            }
            .review p.quote::before {
                left: -5px; /* تعديل الموضع للشاشات الصغيرة */
            }
            .review p.quote::after {
                right: -5px; /* تعديل الموضع للشاشات الصغيرة */
            }
        }
        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
                border: none; /* بدون حدود في البداية */
            }
            50% {
                opacity: 0.5;
                transform: translateY(25px);

            }
            75% {
                opacity: 0.8;
                transform: translateY(10px);
                border: none; /* اختفاء الحدود قبل النهاية */
            }
            100% {
                opacity: 1;
                transform: translateY(0);
                border: none; /* التأكد من اختفاء الحدود في النهاية */
            }
        }
    `;
    document.head.appendChild(styleSheet);

    // بيانات الآراء الوهمية بتنسيق سعودي
    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
});


//////////////////////////////////////////////