/*
const floatButton = document.createElement('button');
floatButton.classList.add('momyzat-btn');
floatButton.innerText = "أهم ما يميزنا 🌟";
document.body.appendChild(floatButton);

const popupWindow = document.createElement('div');
popupWindow.classList.add('momyzat-popup');
popupWindow.innerHTML = `
    <div class="popup-content">
        <h3> مرحبًا بك في متجر  Banbona  🛒</h3>
        <ul>
            <li>الشحن مجاني لجميع الطلبات 🚚</li>
            <li>طرق دفع متعددة وآمنة 💳</li>
            <li>منتجات مميزة بأسعار منافسة 💡</li>
            <li>أفضل العروض والخصومات الحصرية 🎉</li>
            <li>توصيل سريع وخدمة عملاء متميزة ⏱️</li>
        </ul>
        <a href="#" class="close-btn">❌</a>
    </div>
`;
document.body.appendChild(popupWindow);

floatButton.addEventListener('click', () => {
    popupWindow.classList.toggle('active');
});

const closeButton = popupWindow.querySelector('.close-btn');
closeButton.addEventListener('click', (e) => {
    e.preventDefault();
    popupWindow.classList.remove('active');
});
*/

// window.onload = function() {
//     const style = document.createElement('style');
//     style.innerHTML = `
//       body {
//         position: relative;
//       }
  
//       #popup {
//         content: "🛒 نحن متجر CAR CARE  نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
//         position: absolute;
//         top: 20px;
//         left: 50%;
//         transform: translateX(-50%);
//         background-color:#44a47c;
//         color:#ffffff;
//         padding: 15px 25px;
//         border-radius: 12px;
//         font-size: 18px;
//         font-family: Arial, sans-serif;
//         display: none;
//         text-align: center;
//         max-width: 80%;
//         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
//         z-index:99999999999;
//       }
  
//       #popup.show {
//         display: block;
//         animation: fadeInOut 7s ease-in-out forwards;
//       }
  
//       @keyframes fadeInOut {
//         0% {
//           opacity: 0;
//           transform: translateX(-50%) translateY(-20px);
//         }
//         20% {
//           opacity: 1;
//           transform: translateX(-50%) translateY(0);
//         }
//         80% {
//           opacity: 1;
//           transform: translateX(-50%) translateY(0);
//         }
//         100% {
//           opacity: 0;
//           transform: translateX(-50%) translateY(20px);
//         }
//       }
//     `;
//     document.head.appendChild(style);
  
//     const popup = document.createElement('div');
//     popup.id = 'popup';
//     popup.textContent = "🛒 نحن متجر CAR CARE  نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
//     document.body.appendChild(popup);
  
//     setTimeout(() => {
//       popup.classList.add('show');
  
//       setTimeout(() => {
//         popup.classList.remove('show');
//       }, 7000);
//     }, 4000);
//   };
  

  const section = document.querySelector('#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--categories');
  
  const faqData = [
    {
      question: "هل هناك توصيل لدول الخليج؟",
      answer: "نعم نوفر الشحن لكل دول الخليج وبأسعار مغرية"
    },
    {
      question: "هل يمكن ارجاع المنتج في حالة لم يعجبني؟",
      answer: "نعم ندعم في متجرنا سياسة الاسترجاع بشرط أن لا تتجاوز المدة 10 أيام من استلام المنتج"
    },
    {
      question: "هل منتجاتكم أصلية؟",
      answer: "أكيد نحن نفخر بأن منتجاتنا أصلية وذات جودة عالية"
    }
  ];
  
  if (section) {
    section.innerHTML = '';
  
    let questionsHTML = faqData.map(({ question, answer }) => `
      <div class="question-item">
        <div class="question standard-question-item-bg-color">
          <h6>${question}</h6>
          <i class="sicon-keyboard_arrow_down"></i>
        </div>
        <div class="answer standard-question-item-bg-color" style="display: none;">
          <p>${answer}</p>
        </div>
      </div>
    `).join('');
  
    section.innerHTML = `
      <section class="questions-block standard" 
               style="--questions-bg-color: ; --title-color: ; --subtitle-color: ; --title-bg-color: #ffffff; --questions-bg-opacity: 50; --questions-bg-blur: 10px; --question-item-bg-color: #000000; --question-item-bg-opacity: 100; --question-item-bg-blur: 0px; --questions-bg-img:url('')">
          <div class="questions_container">
              <div class="s-block_title_container">
                  <div class="right-side relative w-full z-2">
                      <div class="main-title">
                          <h5>الأسئلة الشائعة</h5>
                      </div>
                      <p class="subtitle"></p>
                  </div>
              </div>
              <div class="relative py-10">
                  <div class="question_content">
                      ${questionsHTML}
                  </div>
              </div>
          </div>
          <div class="flex justify-center items-center w-full mt-10">
              <p class="h-2 w-20 bg-color-primary"></p>
          </div>
      </section>
    `;
  
    const script = document.createElement('script');
    script.textContent = `
      document.querySelectorAll('.question-item .question').forEach(question => {
        question.addEventListener('click', function() {
          const answer = this.nextElementSibling;
          const isVisible = answer.style.display === 'block';
          
          document.querySelectorAll('.answer').forEach(a => a.style.display = 'none');
          
          answer.style.display = isVisible ? 'none' : 'block';
        });
      });
    `;
    section.appendChild(script);
  } else {
    console.warn('العنصر المطلوب غير موجود في الصفحة.');
  }
  
  document.addEventListener("DOMContentLoaded", function() {
      const elements = document.querySelectorAll('.banner--fixed img');
      
      function handleScroll() {
          const windowHeight = window.innerHeight;
          
          elements.forEach(element => {
              const rect = element.getBoundingClientRect();
              if (rect.top <= windowHeight * 0.8) {
                  element.classList.add('visible');
              }
          });
      }
  
      window.addEventListener('scroll', handleScroll);
      handleScroll();
  });
  
  /**********/
  ///////// js code ra2ed
// add class
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); // مراقبة كل قسم
    });
});