// Enhanced Reviews Carousel Functionality
$(document).ready(function() {
    // Initialize reviews carousel with enhanced settings
    $('.reviews-slider').owlCarousel({
        loop: true,
        margin: 30,
        nav: true,
        dots: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        smartSpeed: 800,
        responsive: {
            0: {
                items: 1,
                margin: 15
            },
            768: {
                items: 2,
                margin: 20
            },
            1024: {
                items: 3,
                margin: 30
            }
        },
        navText: [
            '<i class="fas fa-chevron-left"></i>',
            '<i class="fas fa-chevron-right"></i>'
        ]
    });

    // Add smooth hover effects
    $('.review-card').hover(
        function() {
            $(this).find('.client-image img').addClass('pulse');
        },
        function() {
            $(this).find('.client-image img').removeClass('pulse');
        }
    );

    // Add click to pause/play functionality
    $('.reviews-slider').on('click', '.review-card', function() {
        $('.reviews-slider').trigger('stop.owl.autoplay');
        setTimeout(function() {
            $('.reviews-slider').trigger('play.owl.autoplay');
        }, 3000);
    });

    // Add rating animation on scroll
    $(window).scroll(function() {
        $('.rating i').each(function() {
            var elementTop = $(this).offset().top;
            var elementBottom = elementTop + $(this).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            if (elementBottom > viewportTop && elementTop < viewportBottom) {
                $(this).addClass('animate-rating');
            }
        });
    });
});

// Add CSS animations via JavaScript
$('<style>')
    .prop('type', 'text/css')
    .html(`
        .pulse {
            animation: pulse 0.6s ease-in-out;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .animate-rating {
            animation: ratingGlow 0.5s ease-in-out;
        }
        
        @keyframes ratingGlow {
            0% { transform: scale(1); color: #d4af37; }
            50% { transform: scale(1.2); color: #b8941f; }
            100% { transform: scale(1); color: #d4af37; }
        }
        
        .review-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .review-card:hover {
            transform: translateY(-10px) scale(1.02);
        }
    `)
    .appendTo('head');