(function () {
  // إنشاء زر "أهم ما يميزنا 🌟"
  const highlightButton = document.createElement('button');
  highlightButton.id = 'highlight-btn';
  document.body.appendChild(highlightButton);

  // أنميشن كتابة النص لزر "أهم ما يميزنا 🌟"
  let highlightText = "أهم ما يميزنا 🌟";
  let highlightIndex = 0;

  function typeHighlightText() {
    highlightButton.textContent = '';
    highlightIndex = 0;

    function typeChar() {
      if (highlightIndex < highlightText.length) {
        highlightButton.textContent += highlightText.charAt(highlightIndex);
        highlightIndex++;
        setTimeout(typeChar, 4000 / highlightText.length);
      }
    }

    typeChar();
  }

  typeHighlightText();

  // ستايل الزر "أهم ما يميزنا 🌟"
  const styleTag = document.createElement("style");
  styleTag.textContent = `
    #highlight-btn {
      position: fixed;
      bottom: 160px;
      left: 20px;
      background-color: #826ba5;
      background-size: cover;
      background-position: center;
      color: white;
      padding: 15px 25px;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      z-index: 99999;
      font-weight: bold;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      transition: transform 0.3s ease;
    }

    #highlight-btn:hover {
      transform: scale(1.05);
    }
  `;
  document.head.appendChild(styleTag);

  // إنشاء نافذة البوب أب للمميزات
  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>
      </ul>
      <a href="#" class="close-btn">❌</a>
    </div>
  `;
  document.body.appendChild(popupWindow);

  // عرض/إخفاء البوب أب عند الضغط على الزر "أهم ما يميزنا"
  highlightButton.addEventListener('click', () => {
    popupWindow.classList.toggle('active');
  });

  // إغلاق البوب أب عند الضغط على زر الإغلاق
  const closeButton = popupWindow.querySelector('.close-btn');
  closeButton.addEventListener('click', (e) => {
    e.preventDefault();
    popupWindow.classList.remove('active');
  });

  // ستايل البوب أب الخاص بالمميزات
  const popupStyle = document.createElement("style");
  popupStyle.textContent = `
    .momyzat-popup {
      position: fixed;
      bottom: 230px;
      left: 20px;
      background: #826ba5;
      color: white;
      border-radius: 12px;
      box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
      padding: 20px;
      max-width: 300px;
      z-index: 999999;
      display: none;
    }

    .momyzat-popup.active {
      display: block;
    }

    .momyzat-popup .popup-content ul {
      padding-right: 20px;
    }

    .momyzat-popup .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      text-decoration: none;
      color: white;
      font-size: 18px;
      background: transparent;
    }
  `;
  document.head.appendChild(popupStyle);
})();



// ------------------------------------------------------------------------------------
// إنشاء زر البحث مع أنميشين كتابة النص مثل زر "أهم ما يميزنا 🌟"
// ------------------------------------------------------------------------------------

(function () {
  // إنشاء زر البحث "ابحث على منتجك"
  const button = document.createElement("button");
  button.id = "float-search-btn";
  document.body.appendChild(button);

  // نص الأنميشين
  const typingText = "ابحث على منتجك";
  let currentChar = 0;

  // دالة أنميشين الكتابة للنص في الزر
  function typeSearchText() {
    button.textContent = '';
    currentChar = 0;

    function typeChar() {
      if (currentChar < typingText.length) {
        button.textContent += typingText.charAt(currentChar);
        currentChar++;
        setTimeout(typeChar, 4000 / typingText.length);
      }
    }

    typeChar();
  }

  typeSearchText();

  // ستايل زر البحث
  const style = document.createElement("style");
  style.textContent = `
    #float-search-btn {
      position: fixed;
      bottom: 100px;
      left: 20px;
      background-size: cover;
      background-position: center;
      color: #fff;
      padding: 15px 25px;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      z-index: 99999;
      font-weight: bold;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      transition: transform 0.3s ease;
      background-color: #826ba5;
    }

    #float-search-btn:hover {
      transform: scale(1.05);
    }

    #search-popup {
      position: fixed;
      bottom: 160px;
      left: 20px;
      width: 300px;
      height: auto;
      background-color: #826ba5;
      border-radius: 12px;
      box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.2);
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      z-index: 999999;
    }

    #search-popup form {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    #search-popup input {
      flex: 1;
      padding: 10px 15px;
      border: 2px solid silver;
      border-radius: 8px;
      font-size: 16px;
      background-color: #826ba5;
      color: #fff;
      outline: none;
      box-shadow: 0 0 10px silver;
    }

    #search-popup input::placeholder {
      color: silver;
    }

    #search-popup button {
      padding: 10px 15px;
      background-color: silver;
      border: none;
      border-radius: 8px;
      color: black;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    #search-popup button:hover {
      background-color: white;
    }
  `;
  document.head.appendChild(style);

  // إنشاء نافذة البحث المنبثقة
  const popup = document.createElement("div");
  popup.id = "search-popup";
  popup.innerHTML = `
    <form id="search-form">
      <input type="text" id="search-input" placeholder="ابحث على منتجك" />
      <button type="submit">بحث</button>
    </form>
  `;
  document.body.appendChild(popup);

  // عند الضغط على زر البحث، عرض البوب أب والبدء بأنميشين الكتابة داخل حقل الإدخال
  button.addEventListener("click", () => {
    popup.style.display = "flex";

    const input = document.getElementById("search-input");
    input.value = "";
    let inputCharIndex = 0;

    function typeInputChar() {
      if (inputCharIndex < typingText.length) {
        input.value += typingText.charAt(inputCharIndex);
        inputCharIndex++;
        setTimeout(typeInputChar, 4000 / typingText.length);
      }
    }

    setTimeout(() => {
      typeInputChar();
      input.focus();
    }, 100);
  });

  // تنفيذ البحث عند تقديم النموذج
  document.getElementById("search-form").addEventListener("submit", function (e) {
    e.preventDefault();
    const query = document.getElementById("search-input").value.trim();
    if (query) {
      window.location.href = `https://hema-sa.store/search?q=${encodeURIComponent(query)}`;
    }
  });

  // إخفاء نافذة البحث عند النقر خارجها أو خارج الزر
  document.addEventListener("click", (e) => {
    if (
      !popup.contains(e.target) &&
      e.target !== button &&
      e.target.id !== "search-input"
    ) {
      popup.style.display = "none";
    }
  });
})();

  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();
  });
  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();
  });
  (function () {
  if (!sessionStorage.getItem('rub_abayas_popup_shown')) {
    sessionStorage.setItem('rub_abayas_popup_shown', 'true');

    const popupHTML = `
      <div id="rub-popup-overlay">
        <div id="rub-popup-box">
          <img src="https://cdn.salla.sa/YgmEKm/6DzXsooTihCw7174GrxQV7HkMwHejEQAbUMvaQDa.png" alt="Rub Abayas Logo" id="rub-popup-logo" />
          <h2 id="rub-popup-text"></h2>
          <button id="rub-close-popup">&times;</button>
        </div>
      </div>
    `;

    const popupCSS = `
      #rub-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999999;
      }

      #rub-popup-box {
        background-color: #8770a6;
        color: #fff;
        width: 300px;
        height: 300px;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
      }

      #rub-popup-logo {
        width: 120px;
        height: auto;
        margin-bottom: 20px;
        animation: rub-glow 2s infinite alternate, rub-pulse 2s infinite alternate;
      }

      @keyframes rub-glow {
        0% { filter: drop-shadow(0 0 5px #fff); }
        100% { filter: drop-shadow(0 0 15px #fff); }
      }

      @keyframes rub-pulse {
        0% { transform: scale(1); }
        100% { transform: scale(1.05); }
      }

      #rub-popup-text {
        font-size: 18px;
        font-weight: bold;
        height: 1.5em;
        white-space: nowrap;
        overflow: hidden;
        border-right: 2px solid #fff;
        animation: rub-typing 4s steps(40, end), rub-blink 0.75s step-end infinite;
      }

      @keyframes rub-typing {
        from { width: 0 }
        to { width: 100% }
      }

      @keyframes rub-blink {
        from, to { border-color: transparent }
        50% { border-color: white }
      }

      #rub-close-popup {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      #rub-close-popup:hover {
        color: gold;
      }

      @media (max-width: 400px) {
        #rub-popup-box {
          width: 90vw;
          height: 90vw;
        }

        #rub-popup-logo {
          width: 80px;
        }

        #rub-popup-text {
          font-size: 14px;
        }
      }
    `;

    const styleTag = document.createElement('style');
    styleTag.textContent = popupCSS;
    document.head.appendChild(styleTag);

    const popupWrapper = document.createElement('div');
    popupWrapper.innerHTML = popupHTML;
    document.body.appendChild(popupWrapper);

    const popupText = document.getElementById("rub-popup-text");
    const message = "اكتشف عالم همة";
    let index = 0;

    function typeChar() {
      if (index < message.length) {
        popupText.textContent += message.charAt(index);
        index++;
        setTimeout(typeChar, 4000 / message.length);
      }
    }

    typeChar();

    document.getElementById("rub-close-popup").addEventListener("click", function () {
      document.getElementById("rub-popup-overlay").style.display = "none";
    });
  }
})();