document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.hero-slider').forEach((sliderElement) => {
        const wrapper = sliderElement.closest('section');

        // Autoplay logic
        const autoplayValue = wrapper?.dataset.autoplay;
        // Correctly parse 'false' string or number
        const autoplay = (autoplayValue === 'false' || !autoplayValue) ? false : parseInt(autoplayValue, 10);

        // Initialize Glide
        const glide = new Glide(sliderElement, {
            type: 'carousel',
            perView: 1,
            autoplay: autoplay,
            hoverpause: true,
            animationDuration: 1000,
            gap: 0,
            focusAt: 'center'
        });

        glide.mount();

        // Fix: Use ResizeObserver to update Glide when container size changes
        // This ensures correct calculation after CSS 'alignfull' applies
        const resizeObserver = new ResizeObserver(() => {
            glide.update();
        });

        resizeObserver.observe(sliderElement);
    });
});