document.addEventListener("DOMContentLoaded", function () {
  // 🧼 إزالة فوتر سلة الأصلي
  const oldFooter = document.querySelector("footer.store-footer");
  if (oldFooter) oldFooter.remove();

  // 🪄 تنسيقات الفوتر
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-footer {
      position:relative;
      width:100%;
      overflow:hidden;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .custom-footer video {
      position:absolute;
      top:50%; left:50%;
      width:100%; height:100%;
      object-fit:cover;
      z-index:0;
      transform:translate(-50%,-50%);
    }

    .custom-footer .overlay {
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(25, 25, 25, 0.45);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      z-index:1;
    }

    .footer-content {
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:30px 15px;
      text-align:center;
      gap:18px;
      width:100%;
    }

    .footer-logo {
      max-height:90px;
      width:10rem;
      margin-bottom:10px;
      filter: drop-shadow(0 0 25px #f4dbd0) drop-shadow(0 0 35px #f4dbd0);
      animation: logoAppear 1.2s ease forwards;
    }

    @keyframes logoAppear {
      from {opacity:0; transform:translateY(-30px) scale(0.9);}
      to {opacity:1; transform:translateY(0) scale(1);}
    }

    .footer-links {
      display:flex;
      gap:15px;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
    }

    .footer-links a {
      color:#fff;
      font-size:15px;
      text-decoration:none;
      background:rgba(48, 48, 48, 0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding:12px 16px;
      border-radius:12px;
      transition:all 0.3s ease;
      font-weight:bold;
      display:block;
    }

    .footer-links a:hover {
      background:rgba(38, 38, 38, 0.3);
      transform:scale(1.05);
      box-shadow:0 0 15px rgba(255, 255, 255, 0.6);
    }

    .footer-copy {
      font-size:13px;
      margin-top:10px;
      opacity:0.9;
    }

    .footer-advaz {
      font-size:14px;
      font-weight:bold;
      margin-top:8px;
      text-shadow:0 0 10px rgba(36, 36, 36, 0.6);
    }

    @media (max-width:767px){
      .footer-links {
        flex-direction:column;
        gap:10px;
        align-items:center;
      }
    }
  `;
  document.head.appendChild(style);

  const whatsappNumber = "966559898234"; 
  const whatsappLink = `https://wa.me/${whatsappNumber}`;

  const footerHTML = `
    <footer class="custom-footer">
      <video autoplay muted loop playsinline preload="auto" src="https://www.pexels.com/download/video/7691063/"></video>
      <div class="overlay"></div>
      <div class="footer-content">
        <img src="https://cdn.salla.sa/bRQARz/dT6xarARECMTmj8bYUgyy9MNKH8HKZSCrPGlEWbG.png" alt="footer-logo" class="footer-logo" />
        
        <div class="footer-links">
          <a href="https://fitwaves.shop/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D8%AE%D8%B5%D9%88%D8%B5%D9%8A%D8%A9/page-1053413737">سياسة الاستخدام والخصوصية</a>
          <a href="https://fitwaves.shop/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-1517494123" target="_blank">سياسة الاستبدال والاسترجاع</a>
          <a href="${whatsappLink}" target="_blank">تواصل معنا</a>
        </div>

        <salla-payments></salla-payments>

        <div class="footer-copy">جميع الحقوق محفوظة  FIT WAVES © 2025</div>
        <div class="footer-advaz">برمجة وتطوير ADFAZ</div>
      </div>
    </footer>
  `;
  
  document.body.insertAdjacentHTML("beforeend", footerHTML);
});

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


document.addEventListener("DOMContentLoaded", function () {
  // إضافة خط Alexandria
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Alexandria:wght@500;700&display=swap";
  document.head.appendChild(fontLink);

  // ستايل
  const style = document.createElement("style");
  style.innerHTML = `
    .mekashet-banner {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
      border-radius: 12px;
    }
    .mekashet-banner video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: contain;
    }


    .mekashet-text-section {
      position: relative;
      max-height: 400px;
       min-height:200px;
      padding: 40px 25px;
      text-align: center;
      font-family: 'Alexandria', sans-serif;
      color: #001423ff;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      margin-top: -5px;
    }

    .mekashet-text span {
      border-right: 2px solid #4cd4d4;
      padding-right: 4px;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      font-size: 1.2rem;
      line-height: 1.8;
    }

    @keyframes blink {
      0%, 100% { border-color: transparent; }
      50% { border-color: #4cd4d4; }
    }
    .mekashet-text span {
      animation: blink 0.9s step-end infinite;
    }

    @media(max-width: 767px) {
      .mekashet-banner { height: 330px; }
      .mekashet-text-section {
        flex-direction: column;
        padding: 25px 15px;
        min-height:200px;

      }
      .mekashet-text span {
        font-size: 1rem;
        white-space: normal;
      }
    }
  `;
  document.head.appendChild(style);

  // السورسات اللي حددتها
  const bannerImages = [
    "https://cdn.salla.sa/form-builder/wLSQxlI6qeNIiqe1mpQPd1C3z6u7If7WLbi2B1L1.png",
    "https://cdn.salla.sa/form-builder/SKJSgj6hkESQugkNBYRw7CIFUaaPRBwdCeGKwq4e.png"
  ];

  const bannerData = [
    {
      video: "https://files.catbox.moe/xqevd1.mp4",
      text: "ابدأ رحلتك الرياضية بثقة مع fit waves. أدوات متكاملة، مكملات موثوقة، وملابس بتصاميم مميزة تعزز أداءك وتمنحك الحافز لتصل إلى أهدافك بخطى ثابتة"
    },
    {
      video: "https://files.catbox.moe/3587fi.mp4",
      text: "في fit waves نمنحك القوة لتصنع نسختك الأفضل! نوفر لك أجهزة رياضية عالية الجودة، مكملات غذائية فعالة، وملابس عصرية تمنحك الراحة والأناقة في كل تمرين"
    }
  ];

  bannerImages.forEach((src, index) => {
    const target = document.querySelector(`section.s-block.s-block--fixed-banner img[src="${src}"]`);
    if (target) {
      const parentSection = target.closest("section.s-block.s-block--fixed-banner");
      parentSection.innerHTML = `
        <div class="mekashet-banner">
          <video autoplay muted loop playsinline>
            <source src="${bannerData[index].video}" type="video/mp4">
          </video>
        </div>
        <div class="mekashet-text-section">
          <div class="mekashet-text"><span></span></div>
        </div>
      `;

      // أنيميشن الكتابة والمسح
      const text = bannerData[index].text;
      const span = parentSection.querySelector('.mekashet-text span');
      let i = 0;
      let deleting = false;

      function typeEffect() {
        if (!deleting && i <= text.length) {
          span.textContent = text.slice(0, i);
          i++;
          setTimeout(typeEffect, 50);
        } else if (deleting && i >= 0) {
          span.textContent = text.slice(0, i);
          i--;
          setTimeout(typeEffect, 20);
        } else {
          deleting = !deleting;
          setTimeout(typeEffect, deleting ? 2500 : 600);
        }
      }
      typeEffect();
    }
  });
});


const whatsappButton = document.createElement('div');

whatsappButton.style.position = 'fixed';
whatsappButton.style.bottom = '80px';
whatsappButton.style.right = '20px';
whatsappButton.style.width = '50px';
whatsappButton.style.height = '50px';
whatsappButton.style.backgroundColor = '#355E3B'; 
whatsappButton.style.backgroundImage = 'url("https://cdn-icons-png.flaticon.com/512/124/124034.png")';
whatsappButton.style.backgroundSize = '100%';
whatsappButton.style.backgroundRepeat = 'no-repeat';
whatsappButton.style.backgroundPosition = 'center';
whatsappButton.style.borderRadius = '50%';
whatsappButton.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
whatsappButton.style.cursor = 'pointer';
whatsappButton.style.zIndex = '1000';
whatsappButton.style.animation = 'pulse 1.5s infinite';

whatsappButton.onclick = function () {
  window.open('https://wa.me/966559898234', '_blank');
};
document.body.appendChild(whatsappButton);