document.addEventListener('DOMContentLoaded', function () {
  // Select the logos container
  const logosSlide = document.querySelector('.logos-slide');

  // Initialize Swipers
  const textSwiper = new Swiper('.text-swiper', {
    slidesPerView: 1,
    effect: 'fade',
    fadeEffect: { crossFade: true },
    allowTouchMove: true, // Allow text swiper to be swiped manually
  });

  const imageSwiper = new Swiper('.image-swiper', {
    slidesPerView: 1.5,
    centeredSlides: true,
    spaceBetween: 30,
    initialSlide: 1,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    controller: {
      control: textSwiper, // Link image swiper with text swiper
    },
  });

  // Synchronize both swipers by controlling each other
  textSwiper.controller.control = imageSwiper;

  // Stop animation on mouseover
  logosSlide.addEventListener('mouseover', () => {
    logosSlide.style.animationPlayState = 'paused';
  });

  // Resume animation on mouseleave
  logosSlide.addEventListener('mouseleave', () => {
    logosSlide.style.animationPlayState = 'running';
  });

  // Pause and resume on click
  logosSlide.addEventListener('click', () => {
    const currentState = logosSlide.style.animationPlayState;
    logosSlide.style.animationPlayState = (currentState === 'paused' || currentState === '') ? 'running' : 'paused';
  });
});