document.addEventListener('DOMContentLoaded', function () {
    const carousels = document.querySelectorAll('.wp-block-awt-author-pro-book-carousel .glide');

    carousels.forEach((carousel) => {
        const wrapper = carousel.closest('.wp-block-awt-author-pro-book-carousel');
        if (!wrapper) return;

        // Retrieve attributes from data attributes if needed, or defaults
        // Note: In strict render.php, we might not have passed all attrs as data-*,
        // but we can infer some or rely on passed data-autoplay.
        const autoplay = wrapper.getAttribute('data-autoplay');

        // Desktop columns could be dynamic, but view.js often needs to read it.
        // For now, let's assume we read it from CSS or data attribute if strictly dynamic per instance.
        // The requirements say: Desktop: Use columns attribute value (default 3).
        // So we should add data-columns to the wrapper in render.php.
        const columns = parseInt(wrapper.getAttribute('data-columns')) || 3;
        const gap = parseInt(wrapper.getAttribute('data-gap')) || 32;

        const config = {
            type: 'carousel',
            perView: columns,
            gap: gap,
            autoplay: autoplay === 'true' || autoplay === '1' ? 3000 : false, // Speed might be needed too
            hoverpause: true,
            breakpoints: {
                1024: {
                    perView: 2
                },
                640: {
                    perView: 1
                }
            }
        };

        // If autoplay speed is custom, we might need to grab it too
        const autoplaySpeed = parseInt(wrapper.getAttribute('data-autoplay-speed'));
        if (autoplay && autoplaySpeed) {
            config.autoplay = autoplaySpeed;
        }

        new Glide(carousel, config).mount();
    });
});
