document.addEventListener("DOMContentLoaded", function () {
  const checkCart = setInterval(() => {
    const cartTotal = document.querySelector(".s-cart-summary-total");
    if (cartTotal) {
      clearInterval(checkCart);

      // نحذف النص
      cartTotal.textContent = "";

      // نضيف أيقونة بس بحجم صغير
      cartTotal.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
             style="width: 2em; height: 2em; vertical-align: middle; display: inline-block; fill: currentColor;">
          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.82 14l-.94-2h10.53l-1.45 3H7.82zm11.02-3H6.12l-1.2-2.66L4 7H1V5h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03L20.88 11z"/>
        </svg>
      `;
    }
  }, 300);
});

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-image-banner {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30px 10px;
      }

      /* الصورة الدائرية */
      .custom-image-banner img {
        width: 220px;
        height: 220px;
        object-fit: cover;
        border-radius: 50%;
        border: 6px solid #d99789;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        animation: spin 10s linear infinite;
        margin-bottom: 20px;
      }

      /* دوران الصورة */
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      /* النص */
      .custom-image-banner .banner-text {
        font-family: 'Scheherazade New', serif;
        font-weight: 600;
        font-size: 1.5rem;
        color: #4b3a2f;
        margin-bottom: 14px;
        max-width: 90%;
        line-height: 1.6;
      }

      /* الزر */
      .custom-image-banner .banner-btn {
        display: inline-block;
        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;
      }

      .custom-image-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-image-banner img {
          width: 160px;
          height: 160px;
        }
        .custom-image-banner .banner-text {
          font-size: 1.2rem;
        }
      }
    `;
    document.head.appendChild(style);

    // استبدال البانر في سلة
    const targetBanner = document.querySelector('section.s-block.s-block--fixed-banner img[src*="ypLm7nSxzzxJBJWrqsONrsDnMxARVjvm47hPUNe9.png"]');
    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      parentSection.innerHTML = `
        <div class="custom-image-banner">
          <img src="https://i.ibb.co/cX6gdQvb/LOGO-PNG-DEVOLOP.png" alt="coffee-store">
          <div class="banner-text">
            ☕ متجر الشاذلية – وجهتك المثالية لعشاق القهوة! نوفر أدوات القهوة المختصة وكل ما تحتاجه لتحضير كوبك المفضل.
          </div>
          <a href="https://alshazlya-sa.store/latest-products" class="banner-btn">تسوق الآن</a>
        </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*="DObg8C6KjDSTtnWwtMdRJVkF33hSJrdyy0LKZzFc.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/mQnY8FD/clay-cup-isolated-white-background.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("صفحة لعبوبة تم تحميلها ✅");





(function() {
  window.onload = function() {
    try {
      if (document.getElementById("toggle-nav-button") || document.getElementById("custom-nav")) {
        console.warn("Custom navigation elements already exist. Skipping creation.");
        return;
      }

      // زر الفتح (ثابت أسفل الصفحة)
      const toggleButton = document.createElement("button");
      toggleButton.id = "toggle-nav-button";
      toggleButton.textContent = "تواصل معنا الآن";
      document.body.appendChild(toggleButton);

      // حاوية القائمة
      const customNav = document.createElement("div");
      customNav.id = "custom-nav";
      customNav.classList.add("custom-nav");

      
      const closeButton = document.createElement("button");
      closeButton.id = "close-nav-button";
      closeButton.setAttribute("aria-label", "إغلاق");
      closeButton.innerHTML = "&times;";
      customNav.appendChild(closeButton);

     
      const headerContainer = document.createElement("div");
      headerContainer.classList.add("header-container");

      const logo = document.createElement("img");
      logo.src = "https://i.ibb.co/cX6gdQvb/LOGO-PNG-DEVOLOP.png"; 
      logo.alt = "لوجو المتجر";
      logo.classList.add("store-logo");

      const title = document.createElement("h2");
      title.textContent = "ارحبوو 🎉";
      title.classList.add("store-title");

      headerContainer.appendChild(logo);
      headerContainer.appendChild(title);
      customNav.appendChild(headerContainer);

  
      const serviceIcon = document.createElement("span");
      serviceIcon.textContent = "📞";
      serviceIcon.classList.add("customer-service-icon");
      customNav.appendChild(serviceIcon);

      // الروابط
      const links = [
        { text: "الانستقرام", href: "https://www.instagram.com/alshazlyahalhejazyh?igsh=MXR6M2QyeXNqems4aw==", icon: "📸" },
        { text: "تيك توك", href: "https://www.tiktok.com/@user27162407376008 ", icon: "🎶" },
        { text: "الوتساب", href: "https://api.whatsapp.com/send/?phone=966539645121&text&type=phone_number&app_absent=0&wame_ctl=1&source_surface=20", icon: "💬" },
        { text: "اتصل بنا الان", href: "tel:+966539645121", icon: "📞" }
      ];

      links.forEach(linkData => {
        const a = document.createElement("a");
        a.href = linkData.href;
        a.classList.add("custom-nav-link");
        a.innerHTML = `<span class="link-icon">${linkData.icon}</span><span class="link-text">${linkData.text}</span>`;

        // افتح الروابط الخارجية في تبويب جديد
        if (linkData.href.startsWith("http")) {
          a.target = "_blank";
          a.rel = "noopener noreferrer";
        }
        customNav.appendChild(a);
      });

      document.body.appendChild(customNav);

      // تفعيل / إخفاء القائمة
      toggleButton.addEventListener("click", function() {
        customNav.classList.toggle("active");
      });

      closeButton.addEventListener("click", function() {
        customNav.classList.remove("active");
      });

      // اغلاق عند الضغط على رابط
      customNav.querySelectorAll(".custom-nav-link").forEach(link => {
        link.addEventListener("click", () => customNav.classList.remove("active"));
      });

      // اغلاق بالـ ESC
      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") customNav.classList.remove("active");
      });

    } catch (error) {
      console.error("An error occurred in custom JavaScript for navigation:", error);
    }
  };
})();
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 إلى 14 يوم  شرط : عدم فتح المنتج الأصلي  واستخدام عينة. التجربة في حال عدم ملائمة القهوة لذائقتكم يرجع المنتج الأساسي مغلق كما هو دون فتحة وفي حال فتحة فلن  تسترجع النقود"
  },
  {
    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/cX6gdQvb/LOGO-PNG-DEVOLOP.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://alshazlya-sa.store/"><img class="menu-logo" src="https://i.ibb.co/cX6gdQvb/LOGO-PNG-DEVOLOP.png" alt="Logo" /></a>
    <ul>
      <li>
        <a href="https://alshazlya-sa.store/%D9%85%D8%B0%D8%A7%D9%82-%D8%A7%D9%84%D9%82%D9%87%D9%88%D8%A9/c1600552356">
     
      - مذاق القهوة 
        </a>
      </li>
      
    
     
    

    </ul>
    <p class="extra-text">مرحبًا بك في متجرنا! اكتشف أفضل العروض الآن.</p>
    <button class="cta-button"><a href="https://alshazlya-sa.store/">تسوق الان </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: 30px;
      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; 
});