(function( $ ) {
    'use strict';

    // Active header on scroll (970 Design - task 3)
    const header = $('.header');

    $(window).scroll(function() {
        let scroll = window.pageYOffset;

        if (scroll > 100) {
            header.addClass('active');
        } else {
            header.removeClass('active');
        }
    });

    // Mobile navigation toggle
    $(document).ready(function($) {
        let toggleMobileNav = function() {
            let menu = $('.menu'),
                mobileNav = $('.mobile-nav'),
                menuOpen = false;

            // Check if .mobile-nav is visible
            if (mobileNav.is(':visible')) {
                mobileNav.click(function() {
                    if (!menuOpen) {
                        menu.slideDown();
                        menuOpen = true;
                        mobileNav.addClass('active');
                    } else {
                        menu.slideUp();
                        menuOpen = false;
                        mobileNav.removeClass('active');
                    }
                });

                $(document).click(function(event) {
                    if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) {
                        if (menuOpen) {
                            menu.slideUp();
                            menuOpen = false;
                            mobileNav.removeClass('active');
                        }
                    }
                });
            } else {
                menu.show();
                mobileNav.off("click");
                $(document).off("click", "**");
            }
        };

        toggleMobileNav();
        $(window).resize(toggleMobileNav);
    });

})( jQuery );