/* Add custom Js code below */ 
<div id="bcio-whatsapp-widget"></div>
<script>
  window.BDIOWAWidgetOptions = "10540";
</script>
<script src="https://cdn.businesschat.io/widget.js"></script>

document.addEventListener("DOMContentLoaded", function() {
  // تحميل مكتبات ثانوية بعد العرض
});

/* ND BAnner
(function () {
  if (window.__saggafScrollGallery96) return;
  window.__saggafScrollGallery96 = true;

  /* استبدل روابط الصور والشعار بعد رفع الملفات إلى سلة. */
  const settings = {
    backgroundUrl: 'background.jpg',
    logoUrl: 'logo.svg',
    products: [
      {
        image: '01-valentino-vg0015sa-001-53.webp',
        name: 'VALENTINO VG0015SA',
        description: '001 · مقاس 53'
      },
      {
        image: '02-valentino-vg0033s-002-54.jpg',
        name: 'VALENTINO VG0033S',
        description: '002 · مقاس 54'
      },
      {
        image: '03-valentino-vg0032s-005-53.webp',
        name: 'VALENTINO VG0032S',
        description: '005 · مقاس 53'
      },
      {
        image: '04-cartier-ct0276s-001-60.webp',
        name: 'CARTIER CT0276S',
        description: '001 · مقاس 60'
      },
      {
        image: '05-cartier-ct0220s-001-55.jpg',
        name: 'CARTIER CT0220S',
        description: '001 · مقاس 55'
      },
      {
        image: '06-chanel-5515-54-c622-48.jpg',
        name: 'CHANEL 5515',
        description: 'C622/48 · مقاس 54'
      }
    ]
  };

  function mountGallery() {
    if (document.querySelector('.nd96-gallery')) return;
    const root = document.querySelector('#nd96-gallery-root');
    const main = document.querySelector('main');
    if (!root && !main) return;

    const gallery = document.createElement('section');
    gallery.className = 'nd96-gallery';
    gallery.style.height = `${120 + settings.products.length * 70}vh`;
    gallery.setAttribute('aria-label', 'مجموعة نظارات اليوم الوطني من بصريات السقاف');

    const productsMarkup = settings.products.map((item, index) => `
      <img
        class="nd96-gallery__product"
        src="${item.image}"
        alt="${item.name}"
        decoding="async"
        ${index === 0 ? 'fetchpriority="high"' : 'loading="lazy"'}
      >
    `).join('');

    const detailsMarkup = settings.products.map((item, index) => `
      <article class="nd96-gallery__details">
        <span class="nd96-gallery__number">0${index + 1} / 0${settings.products.length}</span>
        <h3 class="nd96-gallery__name">${item.name}</h3>
        <p class="nd96-gallery__description">${item.description}</p>
      </article>
    `).join('');

    const stepsMarkup = settings.products.map((_, index) => `<span>0${index + 1}</span>`).join('');

    gallery.innerHTML = `
      <div class="nd96-gallery__sticky">
        <img class="nd96-gallery__background" src="${settings.backgroundUrl}" alt="" fetchpriority="high" decoding="async">
        <div class="nd96-gallery__overlay"></div>

        <div class="nd96-gallery__inner">
          <img class="nd96-gallery__logo" src="${settings.logoUrl}" alt="بصريات السقاف - SAGGAF OPTICS">

          <header class="nd96-gallery__campaign">
            <p class="nd96-gallery__kicker">عروض اليوم الوطني 96</p>
            <h2 class="nd96-gallery__headline">كل تمريرة، موديل جديد</h2>
          </header>

          <div class="nd96-gallery__stage">${productsMarkup}</div>
          <div class="nd96-gallery__details-wrap">${detailsMarkup}</div>

          <footer class="nd96-gallery__footer">
            <div class="nd96-gallery__offer">
              <span>استخدم كود الخصم</span>
              <strong class="nd96-gallery__code">ND96</strong>
            </div>

            <div class="nd96-gallery__progress" aria-hidden="true">
              <div class="nd96-gallery__steps">${stepsMarkup}</div>
              <div class="nd96-gallery__track"><div class="nd96-gallery__fill"></div></div>
            </div>
          </footer>

          <span class="nd96-gallery__scroll-label" aria-hidden="true">مرّر لتغيير النظارة</span>
        </div>
      </div>
    `;

    if (root) {
      root.replaceChildren(gallery);
    } else {
      main.prepend(gallery);
    }

    const productElements = Array.from(gallery.querySelectorAll('.nd96-gallery__product'));
    const detailElements = Array.from(gallery.querySelectorAll('.nd96-gallery__details'));
    const fill = gallery.querySelector('.nd96-gallery__fill');
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    let frame = 0;

    function clamp(value, min, max) {
      return Math.min(Math.max(value, min), max);
    }

    function update() {
      frame = 0;
      if (reducedMotion.matches) return;

      const rect = gallery.getBoundingClientRect();
      const distance = Math.max(gallery.offsetHeight - window.innerHeight, 1);
      const progress = clamp(-rect.top / distance, 0, 1);
      const position = progress * (settings.products.length - 1);
      const mobile = window.innerWidth < 768;

      productElements.forEach((element, index) => {
        const delta = index - position;
        const visibility = clamp(1 - Math.abs(delta) * 1.25, 0, 1);
        const x = delta * (mobile ? 70 : 115);
        const y = -50 + Math.abs(delta) * 4;
        const scale = .9 + visibility * .1;

        element.style.opacity = visibility.toFixed(3);
        element.style.transform = `translate3d(${x.toFixed(1)}px, ${y.toFixed(1)}%, 0) scale(${scale.toFixed(3)})`;
      });

      detailElements.forEach((element, index) => {
        const delta = index - position;
        const visibility = clamp(1 - Math.abs(delta) * 1.7, 0, 1);
        element.style.opacity = visibility.toFixed(3);
        element.style.transform = `translate3d(0, ${(delta * 22).toFixed(1)}px, 0)`;
      });

      fill.style.width = `${(progress * 100).toFixed(2)}%`;
    }

    function requestUpdate() {
      if (!frame) frame = requestAnimationFrame(update);
    }

    window.addEventListener('scroll', requestUpdate, { passive: true });
    window.addEventListener('resize', requestUpdate, { passive: true });
    update();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mountGallery, { once: true });
  } else {
    mountGallery();
  }
})();