// Simple image modal functionality
document.addEventListener('DOMContentLoaded', function() {
    // Create modal element
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = '<img class="modal-content" alt="">';
    document.body.appendChild(modal);
    
    const modalImg = modal.querySelector('.modal-content');
    
    // Add click handlers to all images in article content
    const images = document.querySelectorAll('article img');
    images.forEach(img => {
        // Skip images that are part of hover containers (they have their own click handler)
        if (!img.closest('.image-hover-container')) {
            img.addEventListener('click', function() {
                modal.classList.add('show');
                modalImg.src = this.src;
                modalImg.alt = this.alt;
            });
        }
    });
    
    // Handle image hover containers - simple click to cycle, hover to preview
    const hoverContainers = document.querySelectorAll('.image-hover-container');
    hoverContainers.forEach(container => {
        let currentImageIndex = 0;
        let isHovering = false;
        
        const images = container.querySelectorAll('img');
        const baseImage = container.querySelector('.base-image');
        const hoverImage = container.querySelector('.hover-image');
        
        function updateImageState() {
            if (isHovering) {
                // On hover, always show the second image
                baseImage.style.opacity = '0';
                hoverImage.style.opacity = '1';
            } else {
                // Not hovering, show based on current click state
                if (currentImageIndex === 0) {
                    baseImage.style.opacity = '1';
                    hoverImage.style.opacity = '0';
                } else {
                    baseImage.style.opacity = '0';
                    hoverImage.style.opacity = '1';
                }
            }
        }
        
        // Click handler - cycle through images
        container.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            currentImageIndex = (currentImageIndex + 1) % 2; // Loop between 0 and 1
            updateImageState();
        });
        
        // Hover handlers (only on devices that support hover)
        if (window.matchMedia('(hover: hover)').matches) {
            container.addEventListener('mouseenter', function() {
                isHovering = true;
                updateImageState();
            });
            
            container.addEventListener('mouseleave', function() {
                isHovering = false;
                updateImageState();
            });
        }
    });
    
    // Close modal when clicking outside the image
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.remove('show');
        }
    });
    
    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('show')) {
            modal.classList.remove('show');
        }
    });
});