$(document).ready(function () {
    $("#testimonial-slider").owlCarousel({
        items: 1,
        loop: true,
        margin: 10,
        nav: false,
        dots: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        smartSpeed: 600,

        navText: [
            '<i class="fa fa-angle-left"></i>',
            '<i class="fa fa-angle-right"></i>'
        ],

        responsive: {
            0: {
                items: 1
            },
            650: {
                items: 1
            },
            768: {
                items: 1
            },
            990: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    });

    $("#testimonial-sliderr").owlCarousel({
        items: 2,
        loop: true,
        margin: 10,
        nav: false,
        dots: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        smartSpeed: 600,

        navText: [
            '<i class="fa fa-angle-left"></i>',
            '<i class="fa fa-angle-right"></i>'
        ],

        responsive: {
            0: {
                items: 1
            },
            650: {
                items: 1
            },
            768: {
                items: 1
            },
            990: {
                items: 2
            },
            1000: {
                items: 2
            }
        }
    });
});
const cards = document.querySelectorAll('.card');
const buttons = document.querySelectorAll('.dot_btn');
const texts = document.querySelectorAll('.text-content');
const sliderContainer = document.getElementById('slider-container');
let active = 0;

const updateSlider = (index) => {
    // reset classes
    cards.forEach(c => c.classList.remove('a', 'b', 'c'));
    buttons.forEach(b => b.classList.remove('active'));
    texts.forEach(t => t.classList.add('hidden'));

    // assign positions
    cards[index].classList.add('c'); // center
    cards[(index + 1) % cards.length].classList.add('a'); // next
    cards[(index + 2) % cards.length].classList.add('b'); // next-next

    // button + text
    buttons[index].classList.add('active');
    texts[index].classList.remove('hidden');

    // update background image
    // const bgImage = cards[index].style.backgroundImage;
    // sliderContainer.style.backgroundImage = bgImage;
};

buttons.forEach((btn, i) => {
    btn.addEventListener('click', () => {
        active = i;
        updateSlider(active);
    });
});

// Init background
updateSlider(active);

// Auto-play every 4s
setInterval(() => {
    active = (active + 1) % cards.length;
    updateSlider(active);
}, 4000);

// process step move
const steps = document.querySelectorAll(".process-step");
let current = 0;

setInterval(() => {
    // deactivate current step with slide-out
    steps[current].classList.remove("active");
    steps[current].classList.add("deactivating");

    setTimeout(() => {
        // reset old one so if reused later it starts fresh from left
        steps[current].classList.remove("deactivating");
        steps[current].querySelector("::before"); // force reflow (for restart animations)
        steps[current].style.setProperty('--reset', Math.random()); // trick to refresh
    }, 800);

    // move to next
    current = (current + 1) % steps.length;

    // ✨ reset BEFORE activating
    steps[current].classList.remove("active");
    steps[current].classList.remove("deactivating");
    steps[current].querySelector("::before"); // reflow reset
    void steps[current].offsetWidth; // force browser to restart animation

    // activate again → always animates -100% → 0
    steps[current].classList.add("active");

}, 6500);