document.addEventListener("DOMContentLoaded", (event) => {
  	// written with Gemini. Logic was built by me
	/**
 * Initializes a custom vertical thumbnail slider linked to an Elementor Swiper carousel.
 * Waits for CSS rendering and Swiper initialization before executing.
 */
function akInitVerticalThumbnails(sliderSelector = '.ak-vertical-thumbnails-slider') {
    const sliderContainer = document.querySelector(sliderSelector);

    if (!sliderContainer) return; // Exit silently if slider isn't on this page

    // --- THE "WAIT FOR RENDER" CHECKER ---
    const checkReady = () => {
        const swiperElement = sliderContainer.querySelector('.swiper');
        
        // 1. Check if Elementor has physically painted the layout (height > 10px)
        const isRendered = sliderContainer.offsetHeight > 10; 
        
        // 2. Check if the Swiper JavaScript object is officially attached
        const isSwiperReady = swiperElement && swiperElement.swiper;

        if (isRendered && isSwiperReady) {
            // Both are true! Build the thumbnails.
            buildThumbnails(sliderContainer, swiperElement.swiper);
        } else {
            // Not ready yet. Check again in 50 milliseconds.
            setTimeout(checkReady, 50);
        }
    };

    // Start checking immediately
    checkReady();

    // --- THE MAIN LOGIC (Only runs when ready) ---
    function buildThumbnails(container, swiper) {
        
        // 1. Get all the swiper images
        const images = Array.from(container.querySelectorAll('.elementor-carousel-image'))
            .map(slide => slide.style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''));

        if (images.length === 0) return;

        // 2 & 3. Render HTML and prepend the container
        const thumbsHTML = images.map((url, index) => `
            <div class="ak-thumb ${index === 0 ? 'ak-thumb-active' : ''}" data-index="${index}">
                <img src="${url}" alt="Thumbnail ${index + 1}">
            </div>
        `).join('');

        const thumbsWrapper = document.createElement('div');
        thumbsWrapper.className = 'ak-vertical-thumbnails-slider-thumbs';
        thumbsWrapper.innerHTML = thumbsHTML;
        
        container.parentNode.insertBefore(thumbsWrapper, container);

        // 4. Build the dynamic switcher
        const allThumbs = thumbsWrapper.querySelectorAll('.ak-thumb');

        // A. Clicking a thumb changes the slider
        allThumbs.forEach(thumb => {
            thumb.addEventListener('click', function() {
                swiper.slideTo(parseInt(this.dataset.index));
                
                allThumbs.forEach(t => t.classList.remove('ak-thumb-active'));
                this.classList.add('ak-thumb-active');
            });
        });

        // B. Swiping the main slider updates the thumbs
        swiper.on('slideChange', () => {
            const activeIndex = swiper.realIndex || swiper.activeIndex;
            
            allThumbs.forEach(t => t.classList.remove('ak-thumb-active'));
            if (allThumbs[activeIndex]) {
                allThumbs[activeIndex].classList.add('ak-thumb-active');
            }
        });
    }
}
	
	akInitVerticalThumbnails()
});