(function ($) {
    'use strict';

    const SifencyTimelinePro = function ($scope, $) {
        const $wrapper = $scope.find('.sifency-timeline-wrapper');
        
        if (!$wrapper.find('.swiper').length) return;

        let settings = { per_view: 3, per_view_tablet: 2, per_view_mobile: 1 };
        try {
            const raw = $wrapper.data('tl-settings');
            if (raw) $.extend(settings, raw);
        } catch (e) {}

        const $swiperContainer = $wrapper.find('.sifency-tl-swiper');
        const $progressBar = $wrapper.find('.sifency-tl-progress-bar');

        const swiper = new Swiper($swiperContainer[0], {
            slidesPerView: settings.per_view_mobile,
            spaceBetween: 30,
            navigation: {
                nextEl: $wrapper.find('.swiper-button-next')[0],
                prevEl: $wrapper.find('.swiper-button-prev')[0],
            },
            breakpoints: {
                768: { slidesPerView: settings.per_view_tablet },
                1024: { slidesPerView: settings.per_view },
            },
            on: {
                progress: function (s, progress) {
                    const pct = Math.min(Math.max(progress, 0), 1) * 100;
                    $progressBar.css('width', pct + '%');
                }
            }
        });
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/sifency-timeline-pro.default', SifencyTimelinePro);
    });

})(jQuery);