document.querySelectorAll('.carousel').forEach(carousel => {
    const slides = carousel.querySelectorAll('.carousel-slide');
    const dotsContainer = carousel.querySelector('.carousel-dots');
    const prevBtn = carousel.querySelector('.carousel-prev');
    const nextBtn = carousel.querySelector('.carousel-next');
    const autoplayDelay = parseInt(carousel.dataset.autoplay) || 4000;
    let current = 0;
    let interval;

    slides.forEach((_, i) => {
        const dot = document.createElement('button');
        dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
        dot.addEventListener('click', () => goTo(i));
        dotsContainer.appendChild(dot);
    });

    function goTo(index) {
        slides[current].classList.remove('active');
        dotsContainer.children[current].classList.remove('active');
        current = (index + slides.length) % slides.length;
        slides[current].classList.add('active');
        dotsContainer.children[current].classList.add('active');
    }

    prevBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current - 1); resetAutoplay(); });
    nextBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current + 1); resetAutoplay(); });

    function startAutoplay() { interval = setInterval(() => goTo(current + 1), autoplayDelay); }
    function resetAutoplay() { clearInterval(interval); startAutoplay(); }

    const hoverTarget = carousel.closest('.group') || carousel.parentElement;
    hoverTarget.addEventListener('mouseenter', () => clearInterval(interval));
    hoverTarget.addEventListener('mouseleave', () => startAutoplay());

    startAutoplay();
});