script.js

document.addEventListener('DOMContentLoaded', function () {
    // Elements
    const carousel = document.getElementById('carousel-section');
    const slidesContainer = document.querySelector('.slides-container');
    const slides = Array.from(document.querySelectorAll('.slide'));
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const pausePlayBtn = document.getElementById('pause-play-btn');
    const pauseIcon = document.getElementById('pause-icon');
    const playIcon = document.getElementById('play-icon');
    const dots = Array.from(document.querySelectorAll('input[name="carousel-dots"]'));
    const dotsFieldset = document.querySelector('.carousel-dots');
    const slideChangeRegion = document.getElementById('slide-change-region');

    // Preferences
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

    // State
    const totalSlides = slides.length;
    let currentIndex = 0;
    let autoplayInterval = null;
    let isManuallyPaused = false;      // becomes true after any user interaction (or reduced motion)
    let isTransitioning = false;
    let transitionQueue = [];

    // Utility: inert support + focus management
    const supportsInert = ('inert' in document.createElement('div'));

    function forEachTabbable(root, cb) {
    root.querySelectorAll('a,button,input,select,textarea,[tabindex]')
        .forEach(cb);
    }

    function setSlideInactive(el) {
    el.setAttribute('aria-hidden', 'true');
    el.classList.remove('active');
    if (supportsInert) {
        el.setAttribute('inert', '');
    } else {
        forEachTabbable(el, n => n.setAttribute('tabindex', '-1'));
    }
    }

    function setSlideActive(el) {
    el.setAttribute('aria-hidden', 'false');
    el.classList.add('active');
    if (supportsInert) {
        el.removeAttribute('inert');
    } else {
        // restore formerly disabled tabbables
        forEachTabbable(el, n => {
        if (n.getAttribute('tabindex') === '-1') n.removeAttribute('tabindex');
        });
    }
    }

    // Button label updates with destination slide names
    function updateNavButtonLabels() {
    const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    const nextIndex = (currentIndex + 1) % totalSlides;
    const prevName = slides[prevIndex].querySelector('h3')?.textContent?.trim() || `Slide ${prevIndex + 1}`;
    const nextName = slides[nextIndex].querySelector('h3')?.textContent?.trim() || `Slide ${nextIndex + 1}`;
    prevBtn.setAttribute('aria-label', `Previous slide: ${prevName}`);
    nextBtn.setAttribute('aria-label', `Next slide: ${nextName}`);
    }

    // Make dots self-describing using the h3 text
    function updateDotAriaLabels() {
    dots.forEach((dot, i) => {
        const name = slides[i].querySelector('h3')?.textContent?.trim();
        if (name) dot.setAttribute('aria-label', `Slide ${i + 1}: ${name}`);
    });
    }

    function getTargetIndex() {
    return transitionQueue.length > 0 ? transitionQueue[transitionQueue.length - 1].index : currentIndex;
    }

    function processQueue() {
    if (isTransitioning || transitionQueue.length === 0) return;
    const nextItem = transitionQueue.shift();
    showSlide(nextItem.index, nextItem.moveFocus, nextItem.announce);
    }

    function showSlide(index, moveFocus = false, announce = false) {
    const newIndex = (index + totalSlides) % totalSlides;
    if (newIndex === currentIndex && transitionQueue.length === 0) return;

    isTransitioning = true;
    const oldIndex = currentIndex;
    currentIndex = newIndex;

    slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;

    setSlideInactive(slides[oldIndex]);
    setSlideActive(slides[currentIndex]);

    slides[currentIndex].setAttribute('aria-posinset', String(currentIndex + 1));
    slides[currentIndex].setAttribute('aria-setsize', String(totalSlides));

    dots[currentIndex].checked = true;

    const transitionDuration = mediaQuery.matches ? 0 : 750;
    setTimeout(() => {
        isTransitioning = false;

        // Always move focus for user-initiated nav when requested
        if (moveFocus) {
        const h = slides[currentIndex].querySelector('h3');
        if (h) {
            h.focus();
        } else {
            slides[currentIndex].focus();
        }
        }

        if (announce) {
        slideChangeRegion.textContent = `Slide ${currentIndex + 1} of ${totalSlides}`;
        }

        updateNavButtonLabels();
        processQueue();

        if (!isManuallyPaused) {
            startAutoplay();
        }
    }, transitionDuration);
    }

    function startAutoplay() {
    clearInterval(autoplayInterval);
    if (!isManuallyPaused) {
        autoplayInterval = setInterval(() => {
        const targetIndex = getTargetIndex();
        // Autoplay should NOT move focus or announce
        queueNavigation(targetIndex + 1, false, false, false);
        }, 7000);
    }
    }

    function stopAutoplay() {
    clearInterval(autoplayInterval);
    }

    function pauseCarousel() {
    // No need to do anything if already paused
    if (isManuallyPaused) return;

    isManuallyPaused = true;
    stopAutoplay();
    updatePausePlayButtonUI();
    }

    function resumeCarousel() {
    // No need to do anything if already playing
    if (!isManuallyPaused) return;

    isManuallyPaused = false;
    updatePausePlayButtonUI();
    startAutoplay();
    }

    function updatePausePlayButtonUI() {
    if (isManuallyPaused) {
        pausePlayBtn.setAttribute('aria-label', 'Start automatic rotation');
        pausePlayBtn.setAttribute('title', 'Start automatic rotation');
        pausePlayBtn.setAttribute('aria-pressed', 'false');
        pauseIcon.style.display = 'none';
        playIcon.style.display = 'block';
    } else {
        pausePlayBtn.setAttribute('aria-label', 'Stop automatic rotation');
        pausePlayBtn.setAttribute('title', 'Stop automatic rotation');
        pausePlayBtn.setAttribute('aria-pressed', 'true');
        pauseIcon.style.display = 'block';
        playIcon.style.display = 'none';
    }
    }

    // Unified navigation
    // - userInitiated true: lock paused, allow focus movement
    // - userInitiated false (autoplay): don't lock paused, don't move focus
    function queueNavigation(index, moveFocus, announce, userInitiated = true) {
    stopAutoplay();
    if (userInitiated) {
        isManuallyPaused = true; // lock paused after any user interaction
        updatePausePlayButtonUI();
    }

    transitionQueue.push({
        index,
        moveFocus, // respect caller: user actions -> true, autoplay -> false
        announce
    });
    processQueue();
    }

    // Event listeners (user initiated => moveFocus = true)
    nextBtn.addEventListener('click', () => {
    const targetIndex = getTargetIndex();
    queueNavigation(targetIndex + 1, true, true, true);
    });
    prevBtn.addEventListener('click', () => {
    const targetIndex = getTargetIndex();
    queueNavigation(targetIndex - 1, true, true, true);
    });

    dots.forEach(dot => {
    dot.addEventListener('change', () => {
        const dotIndex = parseInt(dot.value, 10);
        queueNavigation(dotIndex, true, false, true);
    });
    });

    // Rich keyboarding on the dots group (also user initiated)
    dotsFieldset.addEventListener('keydown', (e) => {
    const current = dots.findIndex(d => d.checked);
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
        e.preventDefault();
        const i = (current + 1) % totalSlides;
        dots[i].checked = true;
        queueNavigation(i, true, true, true);
        dots[i].focus();
    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
        e.preventDefault();
        const i = (current - 1 + totalSlides) % totalSlides;
        dots[i].checked = true;
        queueNavigation(i, true, true, true);
        dots[i].focus();
    } else if (e.key === 'Home') {
        e.preventDefault();
        dots[0].checked = true;
        queueNavigation(0, true, true, true);
        dots[0].focus();
    } else if (e.key === 'End') {
        e.preventDefault();
        dots[totalSlides - 1].checked = true;
        queueNavigation(totalSlides - 1, true, true, true);
        dots[totalSlides - 1].focus();
    }
    });

    // Pause/resume button
    pausePlayBtn.addEventListener('click', () => {
    if (isManuallyPaused) {
        resumeCarousel();
    } else {
        pauseCarousel();
        transitionQueue = [];
    }
    });

    // Pause on focus/hover (conservative), do not auto-resume on leave
    slidesContainer.addEventListener('mouseenter', () => pauseCarousel());
    slidesContainer.addEventListener('focusin', () => pauseCarousel());

    const interactiveControls = [prevBtn, nextBtn, dotsFieldset];

    interactiveControls.forEach(control => {
    // Pause when the mouse enters a control
    control.addEventListener('mouseenter', () => {
        pauseCarousel();
    });
    // Pause when a control (or its children) receives focus
    control.addEventListener('focusin', () => {
        pauseCarousel();
    });
    });

    // Escape key quickly pauses if running
    carousel.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        // Announce the pause to screen readers on Esc press
        pauseCarousel(true);
    }
    });

    function init() {
    // Respect reduced motion (start paused)
    if (mediaQuery.matches) {
        isManuallyPaused = true;
    }
    updateDotAriaLabels();
    updatePausePlayButtonUI();
    updateNavButtonLabels();

    // initial active/inactive setup safety
    slides.forEach((s, i) => i === 0 ? setSlideActive(s) : setSlideInactive(s));

    if (!isManuallyPaused) startAutoplay();

    // If the browser restores focus (back navigation), pause
    if (document.activeElement && carousel.contains(document.activeElement)) {
        isManuallyPaused = true;
        stopAutoplay();
        updatePausePlayButtonUI();
    }
    }
    init();
});