function showSlide(galleryId, slideIndex) {
    const slides = document.querySelectorAll(`#${galleryId} .slide`);
    const dots = document.querySelectorAll(`#${galleryId} .dot`);
    
    // Hide all slides
    slides.forEach(slide => {
        slide.classList.remove('active');
    });
    
    // Remove active class from all dots
    dots.forEach(dot => {
        dot.classList.remove('active');
    });
    
    // Show the selected slide and activate dot
    slides[slideIndex].classList.add('active');
    dots[slideIndex].classList.add('active');
}

function moveSlide(galleryId, direction) {
    const slides = document.querySelectorAll(`#${galleryId} .slide`);
    let currentIndex = 0;
    
    // Find current active slide
    slides.forEach((slide, index) => {
        if (slide.classList.contains('active')) {
            currentIndex = index;
        }
    });
    
    // Calculate new index
    let newIndex = currentIndex + direction;
    if (newIndex < 0) newIndex = slides.length - 1;
    if (newIndex >= slides.length) newIndex = 0;
    
    // Show the new slide
    showSlide(galleryId, newIndex);
}

// Handle keyboard navigation
document.addEventListener('keydown', function(event) {
    // Only handle if a gallery is present
    const galleries = document.querySelectorAll('.image-gallery');
    if (galleries.length === 0) return;
    
    // Find gallery with active slide
    let activeGalleryId = null;
    galleries.forEach(gallery => {
        const activeSlide = gallery.querySelector('.slide.active');
        if (activeSlide) {
            activeGalleryId = gallery.id;
        }
    });
    
    if (!activeGalleryId) return;
    
    // Left arrow
    if (event.keyCode === 37) {
        moveSlide(activeGalleryId, -1);
    }
    // Right arrow
    else if (event.keyCode === 39) {
        moveSlide(activeGalleryId, 1);
    }
});