const swipecontainer = document.querySelector(".swipecontainer");
const likeBtns = document.querySelector(".like-btns");
var swiper = new Swiper(".swiper", {
    spaceBetween: 60,
    slidesPerView: "auto",
    loop: true,
    speed: 5000,
    freeMode: true,
    allowTouchMove: true,
    autoplay: {
    delay: 0,
    disableOnInteraction: false,
    },


    });
function stopAutoPlay() {
  const swiperTranslate = swiper.getTranslate();
  swiper.setTranslate(swiperTranslate);
  swiper.autoplay.stop();
}
function startAutoPlay() {
  swiper.slideTo(swiper.activeIndex, 5000, true);
  swiper.autoplay.start();
}
swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
swipecontainer.addEventListener("mouseleave", () => startAutoPlay());



// featured projects slider
$(document).ready(function () {
    var imageSlider = $(".slick-images").slick({
        centerMode: true,           
        centerPadding: '60px',      
        slidesToShow: 3,            
        arrows: false,    
        dots: true,            
        asNavFor: ".slick-content", 
        infinite: true,          
        speed: 500,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480, 
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // Initialize Slick Slider for Content Slider with Center Mode
    var contentSlider = $(".slick-content").slick({
        centerMode: true,           
        centerPadding: '60px',     
        slidesToShow: 1,            
        asNavFor: ".slick-images",  
        infinite: true,             
        arrows: false,            
        dots: true,              
        speed: 500,
        responsive: [
            {
                breakpoint: 768, 
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480, 
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // Sync swipe direction of both sliders
    $('.content-slider').on('swipe', function (event, slick, direction) {
        if (direction === 'left') {
            imageSlider.slick('slickNext');
        } else if (direction === 'right') {
            imageSlider.slick('slickPrev');
        }
    });
});