(function ($) {
    'use strict';

    $(document).ready(function () {
        $('.unlockafe-platform-feature').each(function () {
            const $widget = $(this);
            const animationSpeed = parseFloat($widget.data('animation-speed')) || 8;
            const hasAnimation = $widget.hasClass('has-animation');

            if (hasAnimation) {
                // Calculate animation durations based on speed
                const orb1Duration = animationSpeed + 's';
                const orb2Duration = (animationSpeed * 1.25) + 's';
                const waveDuration = (animationSpeed * 0.25) + 's';
                
                // Set CSS custom properties for animations
                $widget[0].style.setProperty('--orb1-duration', orb1Duration);
                $widget[0].style.setProperty('--orb2-duration', orb2Duration);
                $widget[0].style.setProperty('--wave-duration', waveDuration);
                
                // Update particle animations individually
                const particleDurations = [
                    (animationSpeed * 0.375) + 's',
                    (animationSpeed * 0.5) + 's',
                    (animationSpeed * 0.475) + 's',
                    (animationSpeed * 0.5625) + 's',
                    (animationSpeed * 0.475) + 's'
                ];
                
                particleDurations.forEach((duration, index) => {
                    $widget[0].style.setProperty('--particle' + (index + 1) + '-duration', duration);
                });
            }

            // Handle card flip on mobile touch
            if ('ontouchstart' in window) {
                $widget.find('.flip-card-container').on('click', function () {
                    const $card = $(this).find('.flip-card');
                    if ($card.hasClass('flipped')) {
                        $card.removeClass('flipped');
                    } else {
                        $card.addClass('flipped');
                    }
                });
            }
        });
    });

    // Handle window resize for responsive adjustments
    $(window).on('resize', function () {
        $('.unlockafe-platform-feature').each(function () {
            const $widget = $(this);
            const shapeType = $widget.data('shape-type');

            // Adjust grid layout on resize
            if (shapeType === 'grid') {
                // Grid layout is handled by CSS, but we can add JS adjustments if needed
            }
        });
    });

})(jQuery);

