document.addEventListener("DOMContentLoaded", function () {
    var intervalId;
    var currentSlideIndex = 0;
    var slides = document.querySelectorAll('.slide');
    var navLinks = document.querySelectorAll('.slider__navlink');

    function startAutoRotation() {
        intervalId = setInterval(function () {
            // Hide the current slide
            hideSlide(currentSlideIndex);

            // Move to the next slide
            currentSlideIndex++;
            if (currentSlideIndex >= slides.length) {
                currentSlideIndex = 0;
            }

            // Show the next slide
            showSlide(currentSlideIndex);

        }, 5000); // Change the interval time as needed (5000 milliseconds = 5 seconds)
    }

    function stopAutoRotation() {
        clearInterval(intervalId);
    }

    // Start auto rotation initially
    startAutoRotation();

    // Pause auto rotation on hover
    slides.forEach(function (slide) {
        slide.addEventListener('mouseenter', stopAutoRotation);
        slide.addEventListener('mouseleave', startAutoRotation);
    });

    // Click event listeners for navigation links
    navLinks.forEach(function (link, index) {
        link.addEventListener('click', function (e) {
            e.preventDefault();

            // Hide the current slide
            hideSlide(currentSlideIndex);

            // Show the clicked slide

            /*  console.log(index);*/
            currentSlideIndex = index;
            showSlide(currentSlideIndex);

            // Stop auto rotation
            stopAutoRotation();
        });
    });

    // Function to hide a slide
    function hideSlide(index) {
        const slide = slides[index];
        const link = navLinks[index];

        if (slide) {
            slide.style.display = 'none';
        }

        if (link) {
            link.classList.remove('active');
        }
    }

    // Function to show a slide
    function showSlide(index) {
        const currentSlide = slides[index];
        const currentNavLink = navLinks[index];

        if (currentNavLink) {
            currentNavLink.classList.add('active');
        }

        if (currentSlide) {
            currentSlide.style.display = 'block';

            if (currentSlide.id) {
                updateTitle(currentSlide.id);
            }
        }
    }

    // Function to update the title based on the current slide
    function updateTitle(slideId) {
        var title = document.getElementById('title');
        switch (slideId) {
            case 'slides__1':
                title.innerHTML = "Yesterday's leader";
                break;
            case 'slides__2':
                title.innerHTML = "Member of the month";
                break;
            case 'slides__3':
                title.innerHTML = "Speaker of the month";
                break;
            default:
                break;
        }
    }
});