$(window).on('load', function(){
    let swiper2,
        swiper,
        swiper3,
        swiper4;
    let resizeTimeout;

    // Function to check if mobile
    function isMobile() {
        return window.innerWidth <= 767;
    }

    // Function to initialize swipers
    function initSwipers() {
        // Destroy existing swipers if they exist
        if (swiper) {
            swiper.destroy(true, true);
        }
        if (swiper2) {
            swiper2.destroy(true, true);
        }
        if (swiper3) {
            swiper3.destroy(true, true);
        }
        if (swiper4) {
            swiper4.destroy(true, true);
        }

        // Initialize thumbnail swiper
        //swiper2 = new Swiper('.inMotion__banner--step', {
        swiper2 = new Swiper('.slider-1-step', {
            // Optional parameters
            slidesPerView: 6,
            direction: "vertical",
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
        });

        // Initialize main swiper with responsive loop setting
        //swiper = new Swiper('.inMotion__banner--screen', {
        swiper = new Swiper('.slider-1-screen', {
            effect: 'fade',
            // Optional parameters
            autoplay: {
                delay: 8000
            },
            loop: !isMobile(), // false on mobile, true on desktop
            // Ensure equal height for all slides
            autoHeight: false,
            // Orange navigation arrows
            navigation: {
                nextEl: '.slider-1-screen-next',
                prevEl: '.slider-1-screen-prev'
            },
            thumbs: {
                swiper: swiper2
            },
            on: {
                slideChange: function () {
                    // Sync swiper2 active slide when main swiper changes
                    const realIndex = this.realIndex;
                    if (swiper2) {
                        swiper2.slideTo(realIndex);
                    }
                },
                init: function () {
                    // Set equal height for all slides after initialization
                    this.updateAutoHeight(0);
                }
            }
        });

        // Sync main swiper when swiper2 slide is clicked
        if (swiper2) {
            swiper2.on('slideChange', function () {
                const activeIndex = this.activeIndex;
                if (swiper) {
                    swiper.slideTo(activeIndex);
                }
            });
        }

        //


        // Initialize thumbnail swiper
        swiper3 = new Swiper('.slider-2-step', {
            // Optional parameters
            slidesPerView: 6,
            direction: "vertical",
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
        });

        // Initialize main swiper with responsive loop setting
        swiper4 = new Swiper('.slider-2-screen', {
            effect: 'fade',
            // Optional parameters
            autoplay: {
                delay: 8000
            },
            loop: !isMobile(), // false on mobile, true on desktop
            // Ensure equal height for all slides
            autoHeight: false,
            // Orange navigation arrows
            navigation: {
                nextEl: '.slider-2-screen-next',
                prevEl: '.slider-2-screen-prev'
            },
            thumbs: {
                swiper: swiper3
            },
            on: {
                slideChange: function () {
                    // Sync swiper2 active slide when main swiper changes
                    const realIndex = this.realIndex;
                    if (swiper3) {
                        swiper3.slideTo(realIndex);
                    }
                },
                init: function () {
                    // Set equal height for all slides after initialization
                    this.updateAutoHeight(0);
                }
            }
        });

        // Sync main swiper when swiper2 slide is clicked
        if (swiper3) {
            swiper3.on('slideChange', function () {
                const activeIndex = this.activeIndex;
                if (swiper4) {
                    swiper4.slideTo(activeIndex);
                }
            });
        }
    }

    // Function to handle window resize
    function handleResize() {
        // Clear existing timeout
        if (resizeTimeout) {
            clearTimeout(resizeTimeout);
        }

        // Debounce resize event to avoid excessive reinitializations
        resizeTimeout = setTimeout(function () {
            initSwipers();
        }, 250);
    }

    // Initialize swipers on load
    initSwipers();

    // Add resize event listener
    window.addEventListener('resize', handleResize);

    $('.nav-link').click(function (){
        initSwipers();
    });
});