jQuery(document).ready(function($) {
    // Gallery thumbnail click handler
    $('.wa-thumbnail').on('click', function() {
        var imageUrl = $(this).data('image');
        
        // Update main image
        $('.wa-main-image img').attr('src', imageUrl);
        
        // Update active thumbnail
        $('.wa-thumbnail').removeClass('active');
        $(this).addClass('active');
        
        // Add fade effect
        $('.wa-main-image img').css('opacity', '0.7');
        setTimeout(function() {
            $('.wa-main-image img').css('opacity', '1');
        }, 150);
    });
    
    // WhatsApp button animation
    $('.wa-checkout-button').on('mouseenter', function() {
        $(this).css('transform', 'translateY(-3px)');
    }).on('mouseleave', function() {
        $(this).css('transform', 'translateY(0)');
    });
    
    // Image zoom effect
    $('.wa-main-image').on('click', function() {
        var $img = $(this).find('img');
        var currentSrc = $img.attr('src');
        
        // Create modal for image view
        if (!$('#wa-image-modal').length) {
            $('body').append(`
                <div id="wa-image-modal" style="
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.9);
                    display: none;
                    justify-content: center;
                    align-items: center;
                    z-index: 9999;
                    cursor: zoom-out;
                ">
                    <img src="" style="max-width: 90%; max-height: 90%; object-fit: contain;" />
                    <button style="
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        background: #dc3545;
                        color: white;
                        border: none;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        font-size: 20px;
                        cursor: pointer;
                    ">×</button>
                </div>
            `);
        }
        
        $('#wa-image-modal img').attr('src', currentSrc);
        $('#wa-image-modal').fadeIn();
    });
    
    // Close modal
    $(document).on('click', '#wa-image-modal, #wa-image-modal button', function(e) {
        if (e.target === this || $(e.target).is('button')) {
            $('#wa-image-modal').fadeOut();
        }
    });
});