document.addEventListener('DOMContentLoaded', function () {
    const slider = document.querySelector('.company-grid');
    const cards = document.querySelectorAll('.company-card');
    const prevButton = document.querySelector('.prev-button');
    const nextButton = document.querySelector('.next-button');
    const dotsContainer = document.querySelector('.slider-dots');

    let cardWidth = cards[0].offsetWidth + 20; // Including gap
    let currentIndex = 0;
    let cardsPerView = Math.floor(slider.offsetWidth / cardWidth);
    let maxIndex = cards.length - cardsPerView;

    // Create dots
    dotsContainer.innerHTML = ''; // Clear dots on reload
    for (let i = 0; i <= maxIndex; i++) {
        const dot = document.createElement('div');
        dot.classList.add('dot');
        if (i === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(i));
        dotsContainer.appendChild(dot);
    }

    function updateDots() {
        document.querySelectorAll('.dot').forEach((dot, index) => {
            dot.classList.toggle('active', index === currentIndex);
        });
    }

    function goToSlide(index) {
        currentIndex = index;
        if (currentIndex > maxIndex) {
            currentIndex = 0; // Loop back to the first slide
        } else if (currentIndex < 0) {
            currentIndex = maxIndex; // Loop back to the last slide
        }
        slider.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
        updateDots();
    }

    function nextSlide() {
        goToSlide(currentIndex + 1);
    }

    function prevSlide() {
        goToSlide(currentIndex - 1);
    }

    nextButton.addEventListener('click', nextSlide);
    prevButton.addEventListener('click', prevSlide);

    // Auto-slide with looping
    let autoSlideInterval = setInterval(nextSlide, 3000);

    // Pause auto-slide on hover
    slider.addEventListener('mouseenter', () => {
        clearInterval(autoSlideInterval);
    });

    slider.addEventListener('mouseleave', () => {
        autoSlideInterval = setInterval(nextSlide, 3000);
    });

    // Update carousel on window resize
    window.addEventListener('resize', () => {
        cardWidth = cards[0].offsetWidth + 20;
        cardsPerView = Math.floor(slider.offsetWidth / cardWidth);
        maxIndex = cards.length - cardsPerView;

        // Reinitialize dots
        dotsContainer.innerHTML = '';
        for (let i = 0; i <= maxIndex; i++) {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (i === currentIndex) dot.classList.add('active');
            dot.addEventListener('click', () => goToSlide(i));
            dotsContainer.appendChild(dot);
        }

        goToSlide(Math.min(currentIndex, maxIndex));
    });
});