Fakel-Gym/template-parts/la-components/blocks/hero-block/hero-block.js

document.addEventListener('DOMContentLoaded', function() {
    const heroBlocks = document.querySelectorAll('.hero-block');

    heroBlocks.forEach(function(block) {
        const swiperContainer = block.querySelector('.swiper');
        if (!swiperContainer) return;

        let progressAnimation = null;
        const autoplayDelay = 4000;

        const swiper = new Swiper(swiperContainer, {
            slidesPerView: 1,
            grabCursor: true,
            loop: true,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            autoplay: {
                delay: autoplayDelay,
                disableOnInteraction: false
            },
            on: {
                slideChange: function () {
                    updatePagination(block, this.realIndex);
                    startProgressAnimation(block, this.realIndex);
                },
                autoplayStart: function() {
                    startProgressAnimation(block, this.realIndex);
                },
                autoplayStop: function() {
                    stopProgressAnimation();
                }
            }
        });

        function updatePagination(block, activeIndex) {
            const paginationItems = block.querySelectorAll('.pagination-item');

            paginationItems.forEach((item, index) => {
                const isActive = index === activeIndex;
                item.setAttribute('data-active', isActive ? 'true' : 'false');

                const line = item.querySelector('.pagination-line');
                if (line && !isActive) {
                    line.style.background = '';
                    line.style.backgroundImage = '';
                }
            });
        }

        function startProgressAnimation(block, activeIndex) {
            stopProgressAnimation();

            const paginationItems = block.querySelectorAll('.pagination-item');
            const activeItem = paginationItems[activeIndex];

            if (!activeItem) return;

            const line = activeItem.querySelector('.pagination-line');
            if (!line) return;

            line.style.backgroundImage = 'linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, transparent 0%)';

            let progress = 0;
            const startTime = Date.now();

            function animate() {
                const elapsed = Date.now() - startTime;
                progress = Math.min(elapsed / autoplayDelay, 1);

                const percentage = progress * 100;
                line.style.backgroundImage = `linear-gradient(to right, rgba(255, 255, 255, 0.8) ${percentage}%, transparent ${percentage}%)`;

                if (progress < 1) {
                    progressAnimation = requestAnimationFrame(animate);
                }
            }

            progressAnimation = requestAnimationFrame(animate);
        }

        function stopProgressAnimation() {
            if (progressAnimation) {
                cancelAnimationFrame(progressAnimation);
                progressAnimation = null;
            }
        }

        const prevBtn = block.querySelector('.custom-prev');
        const nextBtn = block.querySelector('.custom-next');

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                swiper.slidePrev();
                stopProgressAnimation();
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                swiper.slideNext();
                stopProgressAnimation();
            });
        }

        block.querySelectorAll('.pagination-item').forEach((item, index) => {
            item.addEventListener('click', () => {
                swiper.slideToLoop(index);
                stopProgressAnimation();
            });
        });

        updatePagination(block, 0);
        startProgressAnimation(block, 0);
    });
});