(function ($) {
    "use strict";
    $(window).on('elementor/frontend/init', () => {
        elementorFrontend.hooks.addAction('frontend/element_ready/motiox-service.default', ($element) => {
            let addHandler = $('.motiox-swiper-wrapper', $element);
            if (addHandler.length > 0) {
                elementorFrontend.elementsHandler.addHandler(motioxSwiperBase, {
                    $element,
                });
            }

            // Style 1
            if ($(window).width() >= 1024) {
                const serviceImage = $element.find('.service-image');
                const serviceWrap = $element.find('.service-style-1');

                if (serviceImage.length > 0 && serviceWrap.length > 0) {
                    let isAnimating = false;

                    serviceWrap.on('mousemove', function (e) {
                        const rect = this.getBoundingClientRect();
                        const offsetX = e.clientX - rect.left;
                        const offsetY = e.clientY - rect.top;

                        const centerX = rect.width - 500;
                        const centerY = rect.height / 2;

                        let translateX = ((offsetX - centerX) / centerX) * 100;
                        let translateY = ((offsetY - centerY) / centerY) * 25;

                        if(translateY > 20) {
                            translateY = 20;
                        }
                        if(translateY < 0) {
                            translateY = 0;
                        }

                        const rotateZ = ((offsetX - centerX) / centerX) * 10;

                        if (!isAnimating) {
                            isAnimating = true;
                            requestAnimationFrame(() => {
                                serviceImage.css({
                                    transform: `translate3d(${translateX}%, ${translateY}%, 0) rotateX(0deg) rotateY(0deg) rotateZ(${rotateZ}deg)`,
                                    'transform-style': 'preserve-3d',
                                    'will-change': 'transform'
                                });
                                isAnimating = false;
                            });
                        }
                    });
                }
            }

            // Style 4
            const $parent = $('.elementor-service-item');
            const $elements = $parent.find('.service-style-4');

            $elements.hover(
                function () {
                    $elements.removeClass('active');
                    $(this).addClass('active');
                },
            );

            $elements.first().addClass('active');

        });
    });
})(jQuery);