document.addEventListener("DOMContentLoaded", function () {
  try {
    // استدعاء الخط
    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%;
        overflow: hidden;
      
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: auto;
      }
      .custom-video-banner video {
        width: 100%;
        height: 800px;
        object-fit: cover;
      
        display: block;
      }
      /* خلفية النص */
      .custom-video-banner .banner-text {
        margin-top: 20px;
        text-align: center;
        max-width: 90%;
        padding: 20px;
        border-radius: 12px;
        background: rgba(210, 180, 140, 0.25);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        color: #4b3a2f;
        font-family: 'Scheherazade New', serif;
        font-weight: 600;
        font-size: 1.4rem;
        line-height: 1.7;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease forwards;
        animation-delay: 0.5s;
      }
      /* النص نفسه بتأثير كتابة تدريجي */
      .custom-video-banner .banner-text .typing-text {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid rgba(75,58,47,0.7);
        animation: typing 4s steps(40, end) forwards, blink 0.8s step-end infinite;
        font-size:14px ;
      }
      /* أنيميشن الكتابة */
      @keyframes typing {
        from { width: 0 }
        to { width: 100% }
      }
      @keyframes blink {
        50% { border-color: transparent }
      }
      @keyframes fadeUp {
        to { opacity: 1; transform: translateY(0); }
      }
      /* زر */
      .custom-video-banner .banner-btn {
        display: inline-block;
        margin-top: 14px;
        padding: 12px 28px;
        border-radius: 50px;
        background: #8b5e3c;
        color: #fffaf5;
        font-weight: bold;
        text-decoration: none;
        font-size: 1rem;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(10px);
        animation: fadeUp 0.8s ease forwards;
        animation-delay: 4.2s; /* يظهر بعد انتهاء الكتابة */
      }
      .custom-video-banner .banner-btn:hover {
        background: #6b4429;
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 14px rgba(0,0,0,0.25);
      }
      @media(max-width: 767px) {
        .custom-video-banner video { height: 330px; }
        .custom-video-banner .banner-text { font-size: 1.1rem; padding: 15px; }
        .custom-video-banner .banner-btn { font-size: 0.9rem; padding: 10px 22px; }
      }
    `;
    document.head.appendChild(style);

    // استبدال البانر في سلة
    const targetBanner = document.querySelector('section.s-block.s-block--fixed-banner img[src*="KeXTBNFPZdrwnqOlYGdLym2yxqzzE8fukhyPHKkC.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/dfmlzk.mp4" type="video/mp4">
          </video>
          <div class="banner-text">
            <div class="typing-text"> ☕🍵 كل ما تحتاجه لتحضير قهوتك وماتشا مثالية في مكان واحد</div>
            <br>
            <a href="https://happinestouch-sa.store/latest-products" class="banner-btn">تسوق الآن</a>
          </div>
        </div>
      `;
    }
  } catch (error) {
    console.error("خطأ في كود البانر المخصص:", error);
  }
});




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

    const style = document.createElement("style");
    style.innerHTML = `
      .coffee-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f6f1ea 0%, #e3d5c2 50%, #d2b48c 100%);
        border-radius: 20px;
        padding: 60px 40px;
        margin: 40px auto;
        max-width: 90%;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        gap: 40px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .coffee-hero.show {
        opacity: 1;
        transform: translateY(0);
      }
      .coffee-hero-left {
        flex: 1;
        text-align: left;
        direction: rtl;
      }
      .coffee-hero-left h1 {
        font-family: 'Scheherazade New', serif;
        font-size: 2.4rem;
        color: #4b3a2f;
        margin-bottom: 15px;
        border-right: 3px solid #8b5e3c;
        white-space: nowrap;
        overflow: hidden;
        width: 0;
      }
      .coffee-hero.show .coffee-hero-left h1 {
        animation: typing 3s steps(40, end) forwards, blink 0.8s step-end infinite;
      }
      .coffee-hero-left p {
        font-size: 1.2rem;
        color: #5c4b3b;
        max-width: 500px;
        line-height: 1.8;
        margin-bottom: 20px;
        opacity: 0;
      }
      .coffee-hero.show .coffee-hero-left p {
        animation: fadeIn 1s ease forwards;
        animation-delay: 3.2s;
      }
      .coffee-btn {
        display: inline-block;
        background: #8b5e3c;
        color: #fffaf5;
        font-weight: bold;
        padding: 14px 40px;
        border-radius: 40px;
        font-size: 1.2rem;
        letter-spacing: 0.5px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        transition: 0.3s ease;
        opacity: 0;
      }
      .coffee-hero.show .coffee-btn {
        animation: fadeInUp 0.8s ease forwards;
        animation-delay: 4.3s;
      }
      .coffee-btn:hover {
        background: #6b4429;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
      }
      .coffee-hero-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .coffee-hero-right img {
        width: 300px;
        max-width: 90%;
        animation: slowSpin 12s linear infinite;
      }

      /* Animations */
      @keyframes typing { from { width: 0; } to { width: 100%; } }
      @keyframes blink { 50% { border-color: transparent; } }
      @keyframes fadeIn { to { opacity: 1; } }
      @keyframes fadeInUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      @keyframes slowSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      @media(max-width: 900px) {
        .coffee-hero {
          flex-direction: column-reverse;
          text-align: center;
          gap: 20px;
          padding: 40px 20px;
        }
        .coffee-hero-left h1 { font-size: 2rem; }
        .coffee-hero-left p { font-size: 1rem; max-width: 100%; }
        .coffee-hero-right img { width: 200px; }
      }
    `;
    document.head.appendChild(style);

    // استبدال السيكشن عند العثور على الصورة
    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="R0itkPax9Uipqy7Q8Qln5ja4fFlUjj0WZbgMhbPg.png"]'
    );
    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="coffee-hero">
            <div class="coffee-hero-left">
              <h1>ابدأ يومك مع القهوة المثالية ☕</h1>
              <p>استمتع بمذاق قهوة طازجة محمصة بعناية، تمنحك بداية مليئة بالنشاط والحيوية كل صباح.</p>
              <a href="https://sikp-sa.store" class="coffee-btn">تسوق الآن</a>
            </div>
            <div class="coffee-hero-right">
              <img src="https://i.ibb.co/Cp0RPVBd/cosmetics-brushes-eyes-eyebrows-tubes-with-pink-anemone-flowers-watercolor-illustration-hand-drawn-i.png" alt="فنجان قهوة">
            </div>
          </div>
        `;

        // مراقبة ظهور السيكشن
        const coffeeHero = parentSection.querySelector(".coffee-hero");
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                coffeeHero.classList.add("show");
                observer.disconnect();
              }
            });
          },
          { threshold: 0.5 }
        );
        observer.observe(coffeeHero);
      }
    }
  } catch (error) {
    console.error("خطأ في كود هيرو القهوة:", error);
  }
});





document.addEventListener("DOMContentLoaded", () => {
  const cards = document.querySelectorAll(".about-page .card");
  cards.forEach((card, i) => {
    card.style.opacity = "0";
    card.style.transform = "translateY(30px)";
    setTimeout(() => {
      card.style.transition = "all 0.6s ease";
      card.style.opacity = "1";
      card.style.transform = "translateY(0)";
    }, i * 200);
  });
});

console.log("صفحة لعبوبة تم تحميلها ✅");


const section = document.querySelector('#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--categories');
 
const faqData = [
  {
    question: "كم يستغرق توصيل الطلب ؟",
    answer: "عادة ما يتم توصيل الطلب خلال 7-14 يوم اعمل"
  },
  {
    question: "هل يمكن ارجاع المنتج في حالة لم يعجبني؟",
    answer: "نعم ندعم في متجرنا سياسة الاسترجاع بشرط أن لا تتجاوز المدة 10 أيام من استلام المنتج"
  },
  {
    question: "هل منتجاتكم أصلية؟",
    answer: "أكيد نحن نفخر بأن منتجاتنا أصلية وذات جودة عالية"
  }
];

// هنشيك قبل ما يدخل علي الكود اذا موجود او لا ( عشان ال performance )
if (section) {
  // هنا بنمسح كل الي مكتوب في السكشن (عشان احنا مش عاوزين الي جوا عاوزين بس الdiv الي فيها ال 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 images = document.querySelectorAll(".banner--fixed img");

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add("show");
            }
        });
    }, { threshold: 0.2 });

    images.forEach(img => observer.observe(img));
});


document.addEventListener("DOMContentLoaded", () => {

  const bannerImages = document.querySelectorAll(".banner--fixed img");
  const bannerObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });

  bannerImages.forEach(image => bannerObserver.observe(image));



  
document.addEventListener("scroll", () => {
   
    const sliders = document.querySelectorAll(".s-slider-container");

    sliders.forEach((slider) => {
        const rect = slider.getBoundingClientRect();
        const isInViewport = rect.top < window.innerHeight && rect.bottom >= 0;

        if (isInViewport) {
            slider.classList.add("show");
        }
    });
});
document.addEventListener("DOMContentLoaded", function () {
    const images = document.querySelectorAll(".banner--fixed img");

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add("show");
            }
        });
    }, { threshold: 0.2 });

    images.forEach(img => observer.observe(img));
});

const menuButton = document.createElement('button');
menuButton.classList.add('menu-button');

const smallLogo = document.createElement('img');
smallLogo.classList.add('menu-button-logo');
smallLogo.src = 'https://i.ibb.co/LdRtMYZV/LOGO-PNG-DEVOLOP-copy.png'; 
smallLogo.alt = 'Logo';

const buttonText = document.createElement('span');
buttonText.innerText = 'القائمة الرئيسية';

menuButton.appendChild(smallLogo);
menuButton.appendChild(buttonText);

document.body.appendChild(menuButton);

const overlayMenu = document.createElement('div');
overlayMenu.classList.add('overlay-menu');
overlayMenu.innerHTML = `
  <div class="menu-content">
    <a href="https://beautybloom-ksa1.com">
      <img class="menu-logo" src="https://i.ibb.co/LdRtMYZV/LOGO-PNG-DEVOLOP-copy.png" alt="Logo" />
    </a>
    <ul>
      <li>
        <a href="https://beautybloom-ksa1.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A8%D8%B4%D8%B1%D8%A9/c1217401257">
          - العناية بالبشرة  
        </a>
      </li>
      <li>
        <a href="https://beautybloom-ksa1.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%B4%D8%B9%D8%B1/c444412074">
          - العناية بالشعر 
        </a>
      </li>
      <li>
        <a href="https://beautybloom-ksa1.com/%D9%85%D8%B3%D8%AA%D8%AD%D8%B6%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AC%D9%85%D9%8A%D9%84/c1176993460">
          - مستحضرات التجميل  
        </a>
      </li>

       

    </ul>
    <p class="extra-text">مرحبًا بك في متجرنا! اكتشف أفضل العروض الآن.</p>
    <button class="cta-button"><a href="https://beauybloom-ksa1.com/">تسوق الآن</a></button>
  </div>
`;

document.body.appendChild(overlayMenu);

menuButton.addEventListener('click', function () {
  overlayMenu.classList.toggle('active');
});


menuButton.style.position = 'fixed';
menuButton.style.top = '0px'; 
menuButton.style.left = '0'; 
menuButton.style.width = '100%'; 
menuButton.style.zIndex = '1000'; 




  const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
        <path d="M12 4l-8 8h6v8h4v-8h6z" />
      </svg>
    </div>
    <svg class="circular-chart" viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
      <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
    </svg>`;
  document.body.appendChild(backToTopButton);

 
  const style = `
    #backToTop {
      position: fixed;
      bottom: 20%;
      right: 20px; 
      width: 60px;
      height: 60px;
      display: none;
      z-index: 1000;
    }

    #backToTop .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      color: var(--main-color);
    }

    .circular-chart {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .circle-bg {
      fill: none;
      stroke: var(--third-color);
      stroke-width: 3.8;
    }

    .circle {
      fill: none;
      stroke: var(--main-color);
      stroke-width: 3.8;
      stroke-dasharray: 100, 100;
      stroke-linecap: round;
      transition: stroke-dasharray 0.1s linear;
    }

    #backToTop:hover .icon {
      color: var(--second-color);
    }
  `;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);


  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }

    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

  backToTopButton.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
});

const footer = document.querySelector('.store-footer');
const button = document.createElement('button');
button.textContent = 'حول المتجر'; 
button.classList.add('more-button');
document.body.appendChild(button);

button.addEventListener('click', function () {
  footer.classList.toggle('visible');
  
  if (footer.classList.contains('visible')) {
    button.textContent = 'اغلاق';
  } else {
    button.textContent = 'حول المتجر ';
  }
});

window.addEventListener('scroll', function () {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

  if (currentScroll > lastScrollTop) {

    menuButton.style.top = '65px';
  } else {
   
    menuButton.style.top = '0px';
  }

  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; 
});