// Initialize Swiper
const swiper = new Swiper('.heroSwiper', {
    // Swiper Parameters
    direction: 'vertical',
    loop: true,
    speed: 800,

    // Autoplay
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
    },

    // Pagination
    pagination: false,

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // Effects
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },

    // Keyboard control
    keyboard: {
        enabled: true,
        onlyInViewport: true,
    },

    // Mouse wheel control
    mousewheel: {
        enabled: true,
        forceToAxis: true,
        sensitivity: 1,
        releaseOnEdges: true,
    },

    // Touch gestures
    touchRatio: 1,
    touchAngle: 45,

    // Accessibility
    a11y: {
        enabled: true,
        prevSlideMessage: 'Previous slide',
        nextSlideMessage: 'Next slide',
    },

    // Events
    on: {
        init: function () {
            console.log('Swiper initialized');
        },
        slideChange: function () {
            console.log('Slide changed to: ' + this.activeIndex);
        },
    },
});

// Optional: Pause autoplay on hover
const heroSlider = document.querySelector('.hero-slider');

if (heroSlider) {
    heroSlider.addEventListener('mouseenter', () => {
        swiper.autoplay.stop();
    });

    heroSlider.addEventListener('mouseleave', () => {
        swiper.autoplay.start();
    });
}

// Optional: Add progress bar
function createProgressBar() {
    const progressBar = document.createElement('div');
    progressBar.className = 'autoplay-progress';
    progressBar.innerHTML = '<span></span>';

    const style = document.createElement('style');
    style.textContent = `
        .autoplay-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 30;
        }
        .autoplay-progress span {
            display: block;
            height: 100%;
            background: #fff;
            width: 0;
            transition: width 0.1s linear;
        }
    `;

    document.head.appendChild(style);
    document.querySelector('.hero-slider').appendChild(progressBar);

    let progress = 0;
    const progressSpan = progressBar.querySelector('span');

    swiper.on('autoplayTimeLeft', function (s, time, progress) {
        progressSpan.style.width = (1 - progress) * 100 + '%';
    });
}