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> مرحبًا بك في متجر سهم! 🛒</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: "🛒 نحن متجر سهم نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color:#ffffff;
        color:#c58014;
        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 = "🛒 نحن متجر الإبتكـار سهم  نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
    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();
  });