document.addEventListener('DOMContentLoaded', function () {
    const dividerTrigger   = document.querySelector('.mp-divider-trigger');
    const slideAnimTrigger = document.querySelector('.mp-slide-anim-trigger');
    const sliderEl         = document.querySelector('#product-slider');
    const arrows           = document.querySelectorAll('#product-slider .splide__arrow');

    if (!sliderEl) return;

    const AUTOPLAY_INTERVAL = 7000; // same as your Splide autoplay interval

    function triggerClick(el) {
        if (!el) return;
        el.dispatchEvent(
            new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window,
            })
        );
    }

    function restartDividerTimeline() {
        triggerClick(dividerTrigger);
    }

    function playSlideTransition() {
        triggerClick(slideAnimTrigger);
    }

    let dividerTimer = null;

    function resetTimer() {
        clearInterval(dividerTimer);
        dividerTimer = setInterval(function () {
            // autoplay tick: slider moves to next slide → run both
            restartDividerTimeline();
            playSlideTransition();
        }, AUTOPLAY_INTERVAL);
    }

    // 🔹 Start once shortly after load so Splide is mounted
    setTimeout(function () {
        restartDividerTimeline();
        playSlideTransition();
        resetTimer();
    }, 100); // tweak 100–250ms if needed

    // ============ ARROW CLICKS ============
    arrows.forEach((arrow) => {
        arrow.addEventListener('click', function () {
            restartDividerTimeline();
            playSlideTransition();
            resetTimer();
        });
    });

    // ============ DRAG / SWIPE ============
    const track = sliderEl.querySelector('.splide__track') || sliderEl;
    let dragging = false;

    // User starts interacting with the track
    ['pointerdown', 'touchstart', 'mousedown'].forEach((evt) => {
        track.addEventListener(evt, () => {
            dragging = true;
        });
    });

    // User ends interaction (drag/swipe finished)
    ['pointerup', 'pointercancel', 'touchend', 'mouseup', 'mouseleave'].forEach(
        (evt) => {
            track.addEventListener(evt, () => {
                if (!dragging) return;
                dragging = false;

                // 🔥 Restart both divider + slide animation immediately on drag end
                restartDividerTimeline();
                playSlideTransition();
                resetTimer();
            });
        }
    );
});