(function ($) {
    "use strict";

    const init3DCarousel = ($scope) => {
        const swiperContainer = $scope.find('.sifency-3d-swiper')[0];
        if (!swiperContainer) return;

        // Ensure Swiper is loaded (Elementor natively loads it)
        if (typeof Swiper === 'undefined') {
            console.error('Sifency Error: Swiper.js is not loaded.');
            return;
        }

        // Fetch config from PHP
        const config = JSON.parse(swiperContainer.dataset.config || '{}');

        // Initialize Swiper with 3D Coverflow Effect
        const swiperOptions = {
            effect: 'coverflow',
            grabCursor: true, // Shows the hand icon for dragging
            centeredSlides: true, // The active slide stays in the exact center
            slidesPerView: 'auto', // Calculates how many fit based on CSS width
            loop: true, // Infinite loop
            speed: 800, // Smooth transition speed
            
            coverflowEffect: {
                rotate: config.rotate || 30, // Angle of rotation
                stretch: config.stretch || 0, // Space between slides
                depth: config.depth || 150, // Z-axis distance
                modifier: 1,
                slideShadows: false, // Turned off for a clean, modern look
            },
        };

        if (config.autoplay) {
            swiperOptions.autoplay = {
                delay: 3000,
                disableOnInteraction: false,
            };
        }

        // Run Swiper
        new Swiper(swiperContainer, swiperOptions);
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction(
            'frontend/element_ready/sifency-3d-carousel.default',
            init3DCarousel
        );
    });

})(jQuery);