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> مرحبًا بك في متجر YOUR BEAUTY 🛒</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: "🛒 نحن متجر ELECTRONIA   نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
//         position: absolute;
//         top: 20px;
//         left: 50%;
//         transform: translateX(-50%);
//         background-color:#4c1c54;
//         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 = "🛒 نحن متجر ELECTRONIA    نحن هنا لنوفر لك أفضل المنتجات 🛍️✨";
//     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">
        <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.classList.contains('show');

        document.querySelectorAll('.answer').forEach(a => a.classList.remove('show'));
        document.querySelectorAll('.question').forEach(q => q.classList.remove('open'));

        if (!isVisible) {
          answer.classList.add('show');
          this.classList.add('open');
        }
      });
    });
  `;
  section.appendChild(script);
}

  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();
  });
  let link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap";
link.rel = "stylesheet";
document.head.appendChild(link);


let style = document.createElement("style");
style.innerHTML = `
  * {
    font-family: 'Cairo', sans-serif !important;
  }
`;
document.head.appendChild(style);


document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector('.s-block.s-block--features');
  if (!section) return;

  section.innerHTML = `
    <section class="why-us-section" style="padding: 40px 0; background: var(--third-color);">
      <div style="text-align: center; margin-bottom: 30px;">
        <h2 style="font-size: 2rem; font-weight: bold; color: var(--main-color); text-shadow: 0 0 10px var(--second-color);">
          لماذا تختارنا؟
        </h2>
      </div>
      <div class="why-us-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto;">
        <div class="feature-card">
          <div class="icon-wrapper">
            <img src="https://i.ibb.co/YFbvPbsV/customer-service.png" alt="دعم" class="feature-icon" />
          </div>
          <h3 class="feature-number" data-target="24">0</h3>
          <p class="feature-label">دعم فني 24/7</p>
        </div>
        <div class="feature-card">
          <div class="icon-wrapper">
            <img src="https://i.ibb.co/HLRcb5CF/website.png" alt="طلبات" class="feature-icon" />
          </div>
          <h3 class="feature-number" data-target="500">0</h3>
          <p class="feature-label">طلب مكتمل</p>
        </div>
        <div class="feature-card">
          <div class="icon-wrapper">
            <img src="https://i.ibb.co/qYbV5JPC/good-mood.png" alt="عملاء" class="feature-icon" />
          </div>
          <h3 class="feature-number" data-target="490">0</h3>
          <p class="feature-label">عميل سعيد</p>
        </div>
      </div>
    </section>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .feature-card {
      background-color: transparent;
      border-radius: 20px;
      padding: 5px;
      text-align: center;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      position: relative;
      overflow: hidden;
      perspective: 1000px;
    }

    .feature-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .icon-wrapper {
      width: 200px;
      height:200px;
      margin: 0 auto 5px auto;
      transition: transform 0.8s ease;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .feature-card:hover .icon-wrapper {
      transform: rotateY(180deg);
    }

    .feature-icon {
      width: 100%;
      height: 100%;
      display: flex;
    }

    .feature-number {
      font-size: 2.7rem;
      font-weight: bold;
      color: var(--main-color);
      margin-bottom: 0px;
    }

    .feature-label {
      font-size: 1.5rem;
      color: var(--main-color);
      font-weight: bold;
    }
  `;
  document.head.appendChild(style);

  const startCounting = () => {
    const counters = document.querySelectorAll('.feature-number');
    counters.forEach(counter => {
      const target = +counter.getAttribute('data-target');
      let count = 0;
      const increment = target / 100;

      const updateCount = () => {
        if (count < target) {
          count += increment;
          counter.textContent = Math.ceil(count);
          requestAnimationFrame(updateCount);
        } else {
          counter.textContent = target;
        }
      };
      updateCount();
    });
  };

  const handleScroll = () => {
    const section = document.querySelector('.why-us-section');
    if (!section) return;
    const sectionTop = section.getBoundingClientRect().top;
    const triggerPoint = window.innerHeight - 100;

    if (sectionTop < triggerPoint) {
      startCounting();
      window.removeEventListener('scroll', handleScroll);
    }
  };

  window.addEventListener('scroll', handleScroll);
});