(function ($, window, document) {
    "use strict";
    /**
     * Debounce utility for managing frequent events
     */
    (function ($, sr) {
        const debounce = (func, threshold = 200, execAsap = false) => {
            let timeout;
            return function (...args) {
                const context = this;
                const delayed = () => {
                    if (!execAsap) func.apply(context, args);
                    timeout = null;
                };
                clearTimeout(timeout);
                if (execAsap) func.apply(context, args);
                timeout = setTimeout(delayed, threshold);
            };
        };
        // Add smartresize plugin to jQuery
        $.fn[sr] = function (fn) {
            return fn ? this.on('resize', debounce(fn)) : this.trigger(sr);
        };
    })(jQuery, 'smartresize');
    /**
     * Initialize Masonry layout
     */
    const initializeMasonry = ($container, $blocks) => {
        $container.masonry({
            isAnimated: false, itemSelector: '.grid__item', hiddenStyle: {opacity: 0},
        });
        const showBlocks = ($blocks) => {
            $blocks.each((i, block) => {
                const $block = $(block);
                $block.velocity({translateY: 40}, {duration: 0});
                setTimeout(() => {
                    $block.velocity({translateY: 0}, {easing: "easeOutQuad", duration: 100});
                    $block.children().each((j, child) => {
                        const $child = $(child);
                        const timeout = (j + 1) * 100;
                        $child.velocity({opacity: 0, translateY: 40}, {duration: 0})
                            .velocity({opacity: 1, translateY: 0}, {duration: 300, delay: timeout});
                    });
                }, i * 200);
            });
        };
        // Animate and layout blocks
        $container.imagesLoaded(() => {
            showBlocks($blocks);
            // Update layout on resize or load
            $(window).smartresize(() => $container.masonry('layout'));
            $(window).on('load', () => $container.masonry('layout'));
            // Infinite scroll handling
            $(document.body).on('post-load', () => {
                const $newBlocks = $container.children().not('.post--loaded').addClass('post--loaded');
                $newBlocks.imagesLoaded(() => {
                    $container.masonry('appended', $newBlocks, true).masonry('layout');
                    if (!$('html').hasClass('touch')) $newBlocks.addHoverAnimation();
                    showBlocks($newBlocks);
                });
            });
        });
    };
    /**
     * Hover animations with hoverIntent
     */
    const initializeHoverAnimations = () => {
        // Extend jQuery to add hover animation functionality
        $.fn.addHoverAnimation = function () {
            return this.each((i, block) => {
                const $block = $(block);
                const $hover = $block.find('.hover');
                if (!$hover.length) return;
                const hoverAnimations = {
                    init: () => {
                        $hover.find('.hover__bg').velocity({opacity: 0}, {duration: 0});
                        $hover.find('.hover__line').velocity({height: 0}, {duration: 0});
                        $hover.find('.hover__more').velocity({opacity: 0}, {duration: 0});
                    },
                    hoverIn: () => {
                        $hover.find('.hover__bg').velocity("reverse", {easing: "easeOutQuart", duration: 500});
                        $hover.find('.hover__line').velocity("reverse", {
                            easing: "easeOutQuart", duration: 350, delay: 150
                        });
                        $hover.find('.hover__more').velocity("reverse", {
                            easing: "easeOutQuart", duration: 350, delay: 150
                        });
                    },
                    hoverOut: () => {
                        $hover.find('.hover__more').velocity("reverse", {duration: 350});
                        $hover.find('.hover__line').velocity("reverse", {duration: 350});
                        $hover.find('.hover__bg').velocity("reverse", {duration: 350});
                    }
                };
                hoverAnimations.init();
                const $handler = $block.find('.has-hover-effects');
                if ($handler.length) {
                    $handler.hoverIntent({
                        over: hoverAnimations.hoverIn,
                        out: hoverAnimations.hoverOut,
                        timeout: 100,
                        interval: 50,
                    });
                }
            });
        };

        // Apply hover animations to all relevant elements dynamically
        $('.has-hover-effects').each(function () {
            $(this).closest('.wpmotif-post').addHoverAnimation();
        });
    };


    $(document).ready(function () {
        let lastScrollTop = 0.5;
        const branding = $('.site-title');
        branding.css('--wpmotif-scroll-scale', '1'); // Set initial value

        $(window).on('scroll', function () {
            const scrollTop = $(this).scrollTop();

            // Calculate scale based on scroll direction and distance
            const scaleValue = 1 - Math.min(scrollTop / 500, 1); // Adjust divisor for sensitivity
            branding.css('--wpmotif-scroll-scale', scaleValue);

            // Detect scroll direction
            if (scrollTop < lastScrollTop) {
                // Scrolling up
                if (scrollTop === 0) {
                    branding.css('--wpmotif-scroll-scale', '1'); // Reset when fully scrolled up
                }
            }

            lastScrollTop = scrollTop;
        });
    });


    /**
     * Initialize tabbed widgets
     */
    $.fn.tabbedWidget = function () {
        return this.each(function () {
            const $container = $(this);
            const $tabs = $container.find(".tabbed-widget-header .tabbed-header-item");
            const $tabPanes = $container.find(".tabbed-widget-content .tabbed-content-item");
            $tabs.on("click", function () {
                const tabId = $(this).attr("tab-data");
                $tabs.removeClass("active");
                $tabPanes.removeClass("active");
                $(this).addClass("active");
                $container.find(`.content-${tabId}`).addClass("active");
            });
        });
    };
    /**
     * Initialize Scroll to Top functionality
     */
    const initializeScrollToTop = () => {
        const $scrollToTop = $('#scrollToTop');
        if (!$scrollToTop.length) return; // Ensure button exists
        // Show or hide the button based on scroll position
        const toggleScrollButton = () => {
            $(window).scrollTop() > 100 ? $scrollToTop.fadeIn() : $scrollToTop.fadeOut();
        };
        // Scroll smoothly to the top when button is clicked
        const scrollToTop = () => {
            $('html, body').animate({scrollTop: 0}, 100);
        };
        // Bind events
        $(window).on('scroll', toggleScrollButton);
        $scrollToTop.on('click', scrollToTop);
    };

    /**
     * Initialize and display a live clock
     */
    const initializeClock = () => {
        const clockElements = document.getElementsByClassName("wpmotif-display-clock");

        if (clockElements.length === 0) return; // Ensure clock element exists

        const updateClock = () => {
            const currentTime = new Date();
            let hours = currentTime.getHours();
            let minutes = currentTime.getMinutes();
            let seconds = currentTime.getSeconds();

            // Determine AM/PM and adjust 12-hour format
            const ampm = hours >= 12 ? "PM" : "AM";
            hours = hours % 12 || 12;

            // Format hours, minutes, and seconds with leading zeros
            const formatTimeUnit = (unit) => (unit < 10 ? `0${unit}` : unit);
            const formattedHours = formatTimeUnit(hours);
            const formattedMinutes = formatTimeUnit(minutes);
            const formattedSeconds = formatTimeUnit(seconds);

            // Build the clock display
            const timeString = `
            <span class="theme-clock-unit clock-unit-hours">${formattedHours}</span>:
            <span class="theme-clock-unit clock-unit-minute">${formattedMinutes}</span>:
            <span class="theme-clock-unit clock-unit-seconds">${formattedSeconds}</span>
            <span class="theme-clock-unit clock-unit-format">${ampm}</span>
        `;

            // Update clock element
            clockElements[0].innerHTML = timeString;
        };

        // Update clock every second
        setInterval(updateClock, 1000);

        // Initial clock update
        updateClock();
    };

// Initialize clock on DOM ready
    document.addEventListener("DOMContentLoaded", initializeClock);


    $(document).ready(function () {
        $(".main-slider-container").slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            asNavFor: ".main-slider-pagination",
            autoplay: true,
            speed: 900,
            autoplaySpeed: 6000,
            arrows: false,
            prevArrow: $(".theme-main-slider .slide-btn-prev"),
            nextArrow: $(".theme-main-slider .slide-btn-next"),
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        arrows: true,
                    },
                },
            ],
        });
        $(".main-slider-pagination").slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: ".main-slider-container",
            focusOnSelect: true,

            arrows: false,

            autoplay: true,
            vertical: true,

            verticalSwiping: true,
            autoplaySpeed: 10000,
            infinite: true,
            centerMode: true,
            centerPadding: '0'
        });
    });

    /**
     * Document ready event
     */
    $(document).ready(() => {
        const $container = $('.archive-masonry-layout');
        const $blocks = $container.children().addClass('post--animated post--loaded');
        initializeMasonry($container, $blocks);
        if (!$('html').hasClass('touch')) {
            initializeHoverAnimations();
        }
        $(".wpmotif-tabbed-widget").tabbedWidget();
        initializeScrollToTop();
    });
})(jQuery, window, document);