//<!-- بسم الله الرحمن الرحيم -->
document.addEventListener("DOMContentLoaded", function() {
  // Only run on homepage
  if (!document.body.classList.contains("index")) {
    return;
  }
  
  // Determine if the store is in Arabic
  const isArabic = document.documentElement.getAttribute('lang') === 'ar';
  
  // Define bilingual content for the heading and paragraph
  const headingAr = "مستوحاة من شغف التميز";
  const textAr = "اكتشف مجموعتنا المختارة من الساعات، المحافظ، الحقائب، والأقلام الفاخرة، حيث تلتقي الحرفية الرفيعة بالتصاميم العصرية. امنح كل لحظة لمسة من الأناقة والتميز مع العلامات التجارية العالمية المرموقة.";
  
  const headingEn = "Inspired by a Passion for Excellence";
  const textEn = "Discover our curated selection of watches, wallets, bags, and pens, where craftsmanship meets modern design. Elevate every moment with globally renowned luxury brands that define elegance and distinction.";
  
  const chosenHeading = isArabic ? headingAr : headingEn;
  const chosenText = isArabic ? textAr : textEn;
  
  // Create a new section for the custom split layout
  const customSection = document.createElement('section');
  customSection.classList.add('my-split-section');
  
  // Insert the HTML structure for the split section.
  // Note: Each small slide image is wrapped in an <a> tag with a placeholder link.
  customSection.innerHTML = `
    <div class="my-split-left">
      <img 
        src="https://cdn.salla.sa/YgRyPw/GIdF1HcUkYOkXZep6RpSLNsQMGafoxTe8dipvuej.png" 
        alt="Large Image" 
        class="big-image" 
      />
    </div>
    
    <div class="my-split-right">
      <!-- Small Carousel Container -->
      <div class="my-small-carousel">
        <!-- Slide #1 (active by default) -->
        <div class="my-split-slide active">
          <a href="https://luxurybrands-ksa.com/ar/ice-boliday-almond-skin-blue-plastic-small-3h/p1232381678">
            <img src="https://cdn.salla.sa/YgRyPw/cuYSjjyi27DtZCYTxJlwDW3uMD7WuZJnNaSfUOka.png" alt="Small Slide 1" />
          </a>
        </div>
        <!-- Slide #2 -->
        <div class="my-split-slide">
          <a href="https://luxurybrands-ksa.com/ar/ice-boliday-almond-skin-blue-plastic-small-3h/p1232381678">
            <img src="https://cdn.salla.sa/YgRyPw/mWbOyk4l8IwMLKZ7ghVoOtBVzDiB72TTRmnadir3.png" alt="Small Slide 2" />
          </a>
        </div>
        <!-- Slide #3 -->
        <div class="my-split-slide">
          <a href="https://luxurybrands-ksa.com/ar/ice-boliday-almond-skin-blue-plastic-small-3h/p1232381678">
            <img src="https://cdn.salla.sa/YgRyPw/ev4260oguGkV7lZczmCg9N6VsE2RDykND9kV4lvE.png" alt="Small Slide 3" />
          </a>
        </div>
        <!-- Slide #4 -->
        <div class="my-split-slide">
          <a href="https://luxurybrands-ksa.com/ar/ice-boliday-almond-skin-blue-plastic-small-3h/p1232381678">
            <img src="https://cdn.salla.sa/YgRyPw/OUZg6raZ3ZXPnCf0S0R1tEimbv554KFkHxUbsAky.png" alt="Small Slide 4" />
          </a>
        </div>
  
        <!-- Pagination Dots -->
        <div class="my-pagination-dots">
          <span class="dot active" data-index="0"></span>
          <span class="dot" data-index="1"></span>
          <span class="dot" data-index="2"></span>
          <span class="dot" data-index="3"></span>
        </div>
      </div>
      
      <!-- Heading and Paragraph below the carousel -->
      <h2>${chosenHeading}</h2>
      <p>${chosenText}</p>
    </div>
  `;
  
  // Insert the customSection after the hero slider section (or append to .app-inner as fallback)
  const heroSliderSection = document.querySelector('section.s-block--hero-slider');
  if (heroSliderSection) {
    heroSliderSection.insertAdjacentElement('afterend', customSection);
  } else {
    const homepage = document.querySelector('.app-inner');
    if (homepage) {
      homepage.appendChild(customSection);
    }
  }
  
  // Slider logic for pagination dots (desktop)
  const slides = customSection.querySelectorAll('.my-small-carousel .my-split-slide');
  const dots = customSection.querySelectorAll('.my-small-carousel .dot');
  
  dots.forEach(function(dot) {
    dot.addEventListener('click', function() {
      const index = parseInt(dot.getAttribute('data-index'));
      slides.forEach(s => s.classList.remove('active'));
      dots.forEach(d => d.classList.remove('active'));
      slides[index].classList.add('active');
      dot.classList.add('active');
    });
  });
  
  // --- Mobile Swipe Functionality ---
  // Enable swipe on mobile so that users can swipe through the small carousel
  let touchStartX = 0;
  let touchEndX = 0;
  const carousel = customSection.querySelector('.my-small-carousel');
  
  carousel.addEventListener('touchstart', function(e) {
    touchStartX = e.touches[0].clientX;
  });
  
  carousel.addEventListener('touchend', function(e) {
    touchEndX = e.changedTouches[0].clientX;
    handleSwipe();
  });
  
  function handleSwipe() {
    const threshold = 50; // minimum swipe distance in pixels
    const diff = touchStartX - touchEndX;
    if (Math.abs(diff) > threshold) {
      // Find current active slide index
      let activeIndex = 0;
      slides.forEach((slide, index) => {
        if (slide.classList.contains('active')) {
          activeIndex = index;
        }
      });
      let newIndex;
      if (diff > 0) {
        // Swiped left: go to next slide
        newIndex = activeIndex + 1;
        if (newIndex >= slides.length) {
          newIndex = 0; // Loop to first slide
        }
      } else {
        // Swiped right: go to previous slide
        newIndex = activeIndex - 1;
        if (newIndex < 0) {
          newIndex = slides.length - 1; // Loop to last slide
        }
      }
      slides.forEach(s => s.classList.remove('active'));
      dots.forEach(d => d.classList.remove('active'));
      slides[newIndex].classList.add('active');
      dots[newIndex].classList.add('active');
    }
  }
});


//SCROLL
document.addEventListener("DOMContentLoaded", function() {
  // Only do this on the homepage if you want
  if (!document.body.classList.contains("index")) return;

  const mainnav = document.getElementById('mainnav');
  if (!mainnav) return;

  // Listen for scroll
  window.addEventListener("scroll", function() {
    if (window.scrollY > 50) {
      mainnav.classList.add("scrolled");
    } else {
      mainnav.classList.remove("scrolled");
    }
  });
});

///////////HORIZONTAL SCROLL////
document.addEventListener("DOMContentLoaded", function() {
  if (!document.body.classList.contains("index")) return;
  
  // Detect if the store is in Arabic
  const isArabic = document.documentElement.getAttribute('lang') === 'ar';
  
  // Define language-specific texts for each slide
  const slide1Title = isArabic ? "ساعات" : "WATCHES";
  const slide1Subtitle = isArabic ? "اكتشف" : "DISCOVER";
  
  const slide2Title = isArabic ? "أقلام" : "PENS";
  const slide2Subtitle = isArabic ? "اكتشف" : "DISCOVER";
  
  const slide3Title = isArabic ? "محافظ" : "WALLETS";
  const slide3Subtitle = isArabic ? "اكتشف" : "DISCOVER";
  
  const slide4Title = isArabic ? "حقائب" : "BAGS";
  const slide4Subtitle = isArabic ? "اكتشف" : "DISCOVER";
  
  // Create the carousel section element
  const carouselSection = document.createElement("section");
  carouselSection.classList.add("my-half-peek-carousel");

  // Build the carousel HTML using template literals with language-specific values
  const htmlContent = `
    <div class="my-carousel-wrapper">
      <!-- Slide #1 -->
      <div class="my-slide"
           style="background-image: url('https://cdn.salla.sa/YgRyPw/MaYwPDPExlFSdxxPP82x8WgxlNI0VvoCO5vFSvpY.jpg');"
           onclick="location.href='https://luxurybrands-ksa.com/${isArabic ? 'ar' : 'en'}/%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA-%D9%8A%D8%AF/c483167370?filters[category_id]=483167370'">
        <div class="my-slide-label">
          <h2 class="slide-title">${slide1Title}</h2>
          <div class="slide-subtitle">${slide1Subtitle}</div>
        </div>
      </div>

      <!-- Slide #2 -->
      <div class="my-slide"
           style="background-image: url('https://cdn.salla.sa/YgRyPw/3cyjWQKgN6lsDZy5MluM178A08lsfiX2tCOLC5Mz.jpg');"
           onclick="location.href='https://luxurybrands-ksa.com/${isArabic ? 'ar' : 'en'}/PENS/c1559027775?filters[category_id]=1559027775'">
        <div class="my-slide-label">
          <h2 class="slide-title">${slide2Title}</h2>
          <div class="slide-subtitle">${slide2Subtitle}</div>
        </div>
      </div>

      <!-- Slide #3 -->
      <div class="my-slide"
           style="background-image: url('https://cdn.salla.sa/YgRyPw/XKoF0qjjbvjjh3tJxRBuX6h8cKK79dAUW4NyNnSb.jpg');"
           onclick="location.href='https://luxurybrands-ksa.com/${isArabic ? 'ar' : 'en'}/WALLETS/c1001014578?filters[category_id]=1001014578'">
        <div class="my-slide-label">
          <h2 class="slide-title">${slide3Title}</h2>
          <div class="slide-subtitle">${slide3Subtitle}</div>
        </div>
      </div>

      <!-- Slide #4 -->
      <div class="my-slide"
           style="background-image: url('https://cdn.salla.sa/YgRyPw/gn5IoQDckM257ls5si7CBtpSF1w6VxgcvFIzDYYa.jpg');"
           onclick="location.href='https://luxurybrands-ksa.com/${isArabic ? 'ar' : 'en'}/BAGS/c1249070394'">
        <div class="my-slide-label">
          <h2 class="slide-title">${slide4Title}</h2>
          <div class="slide-subtitle">${slide4Subtitle}</div>
        </div>
      </div>
    </div>
  `;
  carouselSection.innerHTML = htmlContent;

  // Insert the carousel section after the hero slider (or append to the body if not found)
  const heroSlider = document.querySelector("section.s-block--hero-slider");
  if (heroSlider) {
    heroSlider.insertAdjacentElement("afterend", carouselSection);
  } else {
    document.body.appendChild(carouselSection);
  }
  
  const wrapper = carouselSection.querySelector(".my-carousel-wrapper");
  if (!wrapper) return;
  
  // -------------------------
  // Desktop Drag Logic (Mouse)
  // -------------------------
  if (window.innerWidth >= 768) {
    let isDown = false;
    let startX, scrollLeft;
  
    wrapper.addEventListener("mousedown", (e) => {
      isDown = true;
      wrapper.classList.add("grabbing");
      startX = e.pageX - wrapper.offsetLeft;
      scrollLeft = wrapper.scrollLeft;
      e.preventDefault();
    });
  
    wrapper.addEventListener("mouseleave", () => {
      isDown = false;
      wrapper.classList.remove("grabbing");
    });
  
    wrapper.addEventListener("mouseup", () => {
      isDown = false;
      wrapper.classList.remove("grabbing");
    });
  
    wrapper.addEventListener("mousemove", (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - wrapper.offsetLeft;
      const speedFactor = 5;
      const walk = (x - startX) * speedFactor;
      wrapper.scrollLeft = scrollLeft - walk;
    });
  } 
// -------------------------
// Mobile Touch Logic (completely revamped)
// -------------------------
else {
  let startX = 0;
  let startY = 0;
  let startTime = 0;
  let scrollLeftAtStart = 0;
  let isScrolling = false;
  let touchMoved = false;
  let moveDistance = 0;
  
  // Prevent all slides from being clickable initially on touch devices
  const slides = wrapper.querySelectorAll('.my-slide');
  slides.forEach(slide => {
    slide.setAttribute('data-href', slide.getAttribute('onclick').replace("location.href='", "").replace("'", ""));
    slide.removeAttribute('onclick');
  });
  
  wrapper.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    startTime = new Date().getTime();
    scrollLeftAtStart = wrapper.scrollLeft;
    isScrolling = false;
    touchMoved = false;
    moveDistance = 0;
    
    // Add a class to indicate touch is active
    wrapper.classList.add('touch-active');
  });
  
  wrapper.addEventListener("touchmove", (e) => {
    if (!touchMoved) {
      touchMoved = true;
    }
    
    const currentX = e.touches[0].clientX;
    const currentY = e.touches[0].clientY;
    const diffX = currentX - startX;
    const diffY = currentY - startY;
    
    // Calculate absolute movement
    moveDistance = Math.sqrt(diffX * diffX + diffY * diffY);
    
    // Determine if this is primarily vertical or horizontal scrolling
    // Only engage horizontal scroll if the movement is clearly more horizontal than vertical
    if (!isScrolling && Math.abs(diffX) > Math.abs(diffY) * 2 && Math.abs(diffX) > 15) {
      isScrolling = true;
      e.preventDefault(); // Block vertical scroll only when definitely horizontal
    }
    
    // If determined to be horizontal scrolling, handle it
    if (isScrolling) {
      const speedFactor = 1.2;
      const walk = diffX * speedFactor;
      wrapper.scrollLeft = scrollLeftAtStart - walk;
    }
  });
  
  wrapper.addEventListener("touchend", (e) => {
    wrapper.classList.remove('touch-active');
    
    // Handle clicks/taps
    const touchDuration = new Date().getTime() - startTime;
    
    // If it's a tap (short duration, minimal movement) - handle navigation
    if (!isScrolling && touchMoved === false || (moveDistance < 10 && touchDuration < 300)) {
      // Find which slide was tapped
      const touch = e.changedTouches[0];
      const targetElement = document.elementFromPoint(touch.clientX, touch.clientY);
      const slide = targetElement.closest('.my-slide');
      
      if (slide) {
        const href = slide.getAttribute('data-href');
        if (href) {
          window.location.href = href;
        }
      }
    }
    
    isScrolling = false;
  });
  
  // Prevent click events from firing when scrolling has occurred
  wrapper.addEventListener('click', (e) => {
    if (touchMoved && moveDistance > 10) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }, true);
}  
  // -------------------------
  // Always run centering logic for the half-peek effect
  // -------------------------
  window.addEventListener("load", function() {
    const slides = wrapper.querySelectorAll(".my-slide");
    if (slides.length < 2) return;
  
    const secondSlide = slides[1];
    const slideWidth = secondSlide.offsetWidth;
    const centerOffset = secondSlide.offsetLeft 
                       - (window.innerWidth / 2)
                       + (slideWidth / 2);
  
    wrapper.scrollLeft = centerOffset;
  });
});



//---------------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
  // 1) Grab the original grid
  const originalGrid = document.querySelector('.s-block--logos-slider .grid');
  if (!originalGrid) return;
  
  // 2) Collect brand items (the <a> elements with .brand-item)
  const brandItems = Array.from(originalGrid.querySelectorAll('.brand-item'));
  if (brandItems.length === 0) return;
  
  // 3) Create marquee wrapper
  const marqueeWrapper = document.createElement('div');
  marqueeWrapper.className = 'marquee-wrapper';
  
  // 4) Create row containers
  const row1 = document.createElement('div');
  row1.className = 'marquee marquee-left';
  
  const row2 = document.createElement('div');
  row2.className = 'marquee marquee-right';
  
  // Helper: clone each brand item into an <a> element
  function createBrandItem(originalItem) {
    const href = originalItem.getAttribute('href');
    const img = originalItem.querySelector('img');
    
    const clone = document.createElement('a');
    clone.className = 'marquee-item';
    clone.href = href;
    
    const imgClone = document.createElement('img');
    imgClone.src = img.src;
    imgClone.alt = img.alt || '';
    
    clone.appendChild(imgClone);
    return clone;
  }
  
  /**
   * Build a "seamless" marquee by:
   *  - appending all items once
   *  - appending them again (duplicated)
   * so total width is effectively 200% (two sets).
   */
  function createSeamlessMarquee(container, items, direction) {
    // The content that moves (two sets inside)
    const content = document.createElement('div');
    content.className = 'marquee-content';
    
    // Insert one full set
    items.forEach(item => {
      content.appendChild(createBrandItem(item));
    });
    // Insert the second (identical) set
    items.forEach(item => {
      content.appendChild(createBrandItem(item));
    });
    
    // Attach the direction class if needed
    if (direction === 'right') {
      container.classList.add('marquee-right');
    } else {
      container.classList.add('marquee-left');
    }
    
    container.appendChild(content);
  }
  
  // 5) Row 1: normal order (scroll left or right depending on CSS)
  createSeamlessMarquee(row1, brandItems, 'left');
  
  // 6) Row 2: reversed array so it “starts from the end brand”
  const reversedItems = [...brandItems].reverse();
  createSeamlessMarquee(row2, reversedItems, 'right');
  
  // 7) Add both rows to the wrapper
  marqueeWrapper.appendChild(row1);
  marqueeWrapper.appendChild(row2);
  
  // 8) Insert the new marquee before the original grid
  originalGrid.parentNode.insertBefore(marqueeWrapper, originalGrid);
  
  // 9) Hide the original grid
  originalGrid.classList.add('carousel-replaced');
});

////////B2B SERVCICES PAGE/////////////

document.addEventListener("DOMContentLoaded", function() {
  // Only run on the B2B page (URL includes "page-431007162")
  if (!window.location.href.includes("page-431007162")) return;
  
  // Create a container for contact info
  const contactContainer = document.createElement("div");
  contactContainer.className = "custom-contact-info";
  
  // Insert your contact details (phone, email, WhatsApp).
  contactContainer.innerHTML = `
    <h3 class="contact-title">تواصل معنا</h3>
    <p class="contact-desc">
      لدينا فريق مخصص لخدمات الشركات (B2B) جاهز للرد على استفساراتكم وتلبية احتياجاتكم.
    </p>
    
    <div class="contact-row">
      <strong>الهاتف:</strong>
      <a href="tel:+966598881555" class="force-ltr">+966 59 888 1555</a>
    </div>
    
    <div class="contact-row">
      <strong>البريد الإلكتروني:</strong>
      <a href="mailto:Info@luxurybrands.sa">Info@luxurybrands.sa</a>
    </div>
    
    <div class="contact-row">
      <strong>واتساب:</strong>
      <a href="https://wa.me/966598881555" target="_blank" class="whatsapp-link">
        <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp" />
        دردش معنا
      </a>
    </div>
  `;

  // Select the main container
  const singlePageContent = document.querySelector('.content.content--single-page');
  if (!singlePageContent) return;

  // -----------
  // OPTION A: Place the block right AFTER the paragraph, BEFORE the comments
  // -----------
  const contentEntry = singlePageContent.querySelector('.content-entry');
  if (contentEntry) {
    // Find the paragraph element
    const firstParagraph = contentEntry.querySelector('p');
    if (firstParagraph) {
      // Insert our contact info block right after that paragraph
      firstParagraph.insertAdjacentElement('afterend', contactContainer);
      return; // done
    }
  }

  // -----------
  // OPTION B: If the paragraph not found, fallback to bottom of .content--single-page
  // -----------
  singlePageContent.insertAdjacentElement('beforeend', contactContainer);
});


//////////////////////////////////////////////////
 // -----------
  // CONTACT US PAGE
  
    // -----------
//////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function() {
  // Only run if URL includes "page-159325515"
  if (!window.location.href.includes("page-159325515")) return;

  // Create a container for contact info
  const contactContainer = document.createElement("div");
  contactContainer.className = "contact-us-info";
  
  // Insert your contact details (phone, email, WhatsApp) 
  // without the "تواصل معنا" heading
  contactContainer.innerHTML = `
    <p class="contactus-desc">
      لدينا فريق جاهز للرد على استفساراتكم وتلبية احتياجاتكم.
    </p>
    
    <div class="contactus-row">
      <strong>الهاتف:</strong>
      <a href="tel:+966598881555" class="force-ltr">+966 59 888 1555</a>
    </div>
    
    <div class="contactus-row">
      <strong>البريد الإلكتروني:</strong>
      <a href="mailto:Info@luxurybrands.sa">Info@luxurybrands.sa</a>
    </div>
    
    <div class="contactus-row">
      <strong>واتساب:</strong>
      <a href="https://wa.me/966598881555" target="_blank" class="whatsapp-link">
        <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp" />
        دردش معنا
      </a>
    </div>
  `;

  // Insert it right after the paragraph in .content-entry
  const singlePageContent = document.querySelector('.content.content--single-page');
  if (!singlePageContent) return;
  
  const contentEntry = singlePageContent.querySelector('.content-entry');
  if (contentEntry) {
    const firstParagraph = contentEntry.querySelector('p');
    if (firstParagraph) {
      // Place our contact info right after that paragraph
      firstParagraph.insertAdjacentElement('afterend', contactContainer);
      return;
    }
  }
  
  // Fallback: if no <p> found, just insert at the bottom of .content--single-page
  singlePageContent.insertAdjacentElement('beforeend', contactContainer);
});