/* Add custom Js code below */
document.addEventListener("DOMContentLoaded", function () {
    const faqs = [
    { question: "لماذا وصلني الطلب والقلم جاف؟", answer: "لأنه يجب قبل الاستخدام مسح الفرشة بمنديل مبلل." },
    { question: "لماذا يجف القلم عندما أريد رسم حاجبي؟", answer: "عند فتح غطاء القلم، يجب الضغط على الريشة على حافة الغطاء لاستخراج اللون منها، وتكرار هذه الحركة كل خمس دقائق، أو إذا كنت قد رسمت الحاجب ووضعت عليه جل الماسكارا مما أدى إلى جفافه." },
    { question: "إذا كان القلم جافًا، ماذا أفعل؟", answer: "اضغطي فرشة القلم بمنديل مبلل." },
    { question: "كم لون متوفر ؟", answer: "يتوفر لونان فقط: البني والأسود، وهما نفس لون الشعر." },
    { question: "متى يمكنني رسم حاجبي بعد وضع جل الماسكارا؟", answer: "إذا جف جل الماسكارا، يمكنك رسم الحاجب حتى لا تغلف ريشة القلم." },
    { question: "متى سيصلني الطلب؟", answer: "من يومين إلى 14 يوم عمل." },
    { question: "ما هي طريقة الاستخدام؟", answer: "1- رج القلم قبل الاستخدام. 2- افتحي غطاء القلم. 3- امسحي الفرشة بمنديل مبلل بالماء. 4- ارسمي الحاجب على طرف الفرشة بطريقة خفيفة جداً للحصول على مظهر الشعر الطبيعي. 5- تجنبي الضغط بالريشة بقوة عند رسم الحاجب." },
    ];



    const faqContainer = document.querySelector(".s-block--video");

    // إنشاء العنوان
    const title = document.createElement('h1');
    title.textContent = 'الأسئلة الشائعة';
    faqContainer.appendChild(title);

    // إنشاء الأسئلة والأجوبة ديناميكيًا
    faqs.forEach((faq, index) => {
        // إنشاء السؤال
        const faqDiv = document.createElement('div');
        faqDiv.classList.add('faq');

        const questionDiv = document.createElement('div');
        questionDiv.classList.add('question');
        questionDiv.innerHTML = `
            <span>${faq.question}</span>
            <span class="icon">+</span>
        `;

        // إضافة الحدث عند النقر على السؤال
        questionDiv.addEventListener('click', () => toggleAnswer(index));

        faqDiv.appendChild(questionDiv);

        // إنشاء الإجابة
        const answerDiv = document.createElement('div');
        answerDiv.classList.add('answer');
        answerDiv.id = `answer${index}`;
        answerDiv.innerHTML = `<p>${faq.answer}</p>`;

        faqDiv.appendChild(answerDiv);
        faqContainer.appendChild(faqDiv);
    });
});

// دالة لتبديل عرض الإجابة عند النقر
function toggleAnswer(index) {
    const answer = document.getElementById(`answer${index}`);
    const icon = answer.previousElementSibling.querySelector('.icon');

    if (answer.style.display === "block") {
        answer.style.display = "none";
        icon.textContent = "+";
    } else {
        answer.style.display = "block";
        icon.textContent = "-";
    }
}

        // Create the product card dynamically
        const productContainer = document.querySelector('.s-block--full-bg');

        const productCard = document.createElement('article');
        productCard.className = 'card';

        productCard.innerHTML = `
            <div class="card__img">
                <img src="https://cdn.salla.sa/VGBnp/1edd6db3-24f9-454d-a80a-4dfb29c97346-500x500-BqMseUJnAtxnH1UKLHn34e7usVNx3ZVo4Qm6fACz.png" alt="Micro Look Product Image">
            </div>
            <div class="card__name">
                <p>M I C R O L O O K</p>
            </div>
            <div class="card__precis">
                <a href="#" class="card__icon icon1">♡</a>
                <div>
                    <span class="card_preci card_preci--now">٥٥٫٥ ر.س</span>
                </div>
                <a href="https://bono-beauty.com/ar/micro-look-choco-brown/p811499757" class="card__icon icon2">🛒</a>
            </div>
        `;;


        productContainer.appendChild(productCard);
        
                        const script = document.createElement('script');
        script.src ="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js";
        document.body.appendChild(script)