document.addEventListener("DOMContentLoaded", function () {
  // استدعاء الخط Scheherazade New
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@600&display=swap";
  document.head.appendChild(fontLink);

  const style = document.createElement("style");
  style.innerHTML = `
    .custom-video-banner {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
      border-radius: 12px;
    }
    .custom-video-banner video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .custom-video-banner::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.25);
    }
    .custom-video-banner .banner-text {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #f9f3e7;
      font-family: 'Scheherazade New', serif;
      font-weight: 600;
      font-size: 1rem;
      opacity: 0.7;
      z-index: 2;
      padding: 0 15px;
      line-height: 1.5;
    }
    .custom-video-banner .banner-btn {
      display: inline-block;
      margin-top: 12px;
      padding: 10px 24px;
      border-radius: 8px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #f9f3e7;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .custom-video-banner .banner-btn:hover {
      background: rgba(249,243,231,0.3);
      transform: scale(1.05);
    }

    @media(max-width: 767px) {
      .custom-video-banner {
        height: 330px;
      }
    }
    @media(min-width: 768px) {
      .custom-video-banner {
        height: 610px;
      }
    }
  `;
  document.head.appendChild(style);

  const targetBanner = document.querySelector('section.s-block.s-block--fixed-banner img[src*="https://cdn.salla.sa/form-builder/QHhezAKdtGpXiiMLtHLNScGJcJ2kta1uHo7ko8dM.png"]');
  if (targetBanner) {
    const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
    parentSection.innerHTML = `
      <div class="custom-video-banner">
        <video autoplay muted loop playsinline>
          <source src="https://files.catbox.moe/cqdasy.mov" type="video/mp4">
        </video>
        <div class="banner-text">
          <div>تقنيات حديثة تجعل حياتك أسهل وأكثر ذكاءً </div>
          <a href="https://salla.sa/sky2.as/latest-products" class="banner-btn">تسوق الآن</a>
        </div>
      </div>
    `;
  }
});

document.addEventListener("DOMContentLoaded", function () {
  // استدعاء الخط Scheherazade New
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@600&display=swap";
  document.head.appendChild(fontLink);

  const style = document.createElement("style");
  style.innerHTML = `
    .custom-video-banner {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
      border-radius: 12px;
    }
    .custom-video-banner video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .custom-video-banner::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.25);
    }
    .custom-video-banner .banner-text {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #f9f3e7;
      font-family: 'Scheherazade New', serif;
      font-weight: 600;
      font-size: 1rem;
      opacity: 0.7;
      z-index: 2;
      padding: 0 15px;
      line-height: 1.5;
    }
    .custom-video-banner .banner-btn {
      display: inline-block;
      margin-top: 12px;
      padding: 10px 24px;
      border-radius: 8px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #f9f3e7;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .custom-video-banner .banner-btn:hover {
      background: rgba(249,243,231,0.3);
      transform: scale(1.05);
    }

    @media(max-width: 767px) {
      .custom-video-banner {
        height: 330px;
      }
    }
    @media(min-width: 768px) {
      .custom-video-banner {
        height: 610px;
      }
    }
  `;
  document.head.appendChild(style);

  const targetBanner = document.querySelector('section.s-block.s-block--fixed-banner img[src*="https://cdn.salla.sa/form-builder/M8I0KPvj8PDVG9PCK1YThzFtWcSRBIWdxxHguEVT.png"]');
  if (targetBanner) {
    const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
    parentSection.innerHTML = `
      <div class="custom-video-banner">
        <video autoplay muted loop playsinline>
          <source src="https://files.catbox.moe/o7ebpw.mov" type="video/mp4">
        </video>
      </div>
    `;
  }
});
document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = `
    .s-block.s-block--fixed-banner.wide-placeholder,
    .s-block.s-block--fixed-banner.wide-placeholder .container,
    .s-block.s-block--fixed-banner.wide-placeholder a.banner {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .s-block.s-block--fixed-banner.wide-placeholder img {
      width: 100% !important;
      height: auto !important;
      object-fit: cover !important;
    }
  `;
  document.head.appendChild(style);
});

/* =================================================================================================================================================================================== */

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();
});

/* =================================================================================================================================================================================== */
/* FAQ Section */
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">
      <div class="questions_container">
        <div class="s-block_title_container">
          <div class="main-title"><h5>الأسئلة الشائعة</h5></div>
        </div>
        <div class="relative py-10">
          <div class="question_content">${questionsHTML}</div>
        </div>
      </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);
}