document.addEventListener("DOMContentLoaded", function () {
    // IE check
    const isOldBrowser = () => {
        const ua = navigator.userAgent;
        return ua.includes('MSIE') || ua.includes('Trident') || (navigator.platform.match(/iP(hone|od|ad)/) && /OS (\d+)/.test(ua) && parseInt(ua.match(/OS (\d+)/)[1]) <= 9);
    };

    const showErrorPage = () => {
        document.body.innerHTML = `
            <main style="width: 100%; padding: 50px; margin: auto;">
                <h1 style="width: 100%; text-align: center; color: rgb(127,127,127);">Website's Error</h1>
                <p style="width: 100%; text-align: center; color: rgb(0,0,0);">
                    Sorry, your browser doesn't support this website. Please, update your browser or try using another modern browser.
                </p>
            </main>`;
    };

    if (isOldBrowser()) showErrorPage();

    // scroll-up
    const scrollUpButton = document.querySelector('.scroll-up');

    window.addEventListener("scroll", () => {
        
        if (document.documentElement.scrollTop > 100) {
            scrollUpButton.classList.add('show'); 
            scrollUpButton.classList.remove('hide');
        } else {
            scrollUpButton.classList.remove('show'); 
            scrollUpButton.classList.add('hide');
        }
    });

    scrollUpButton.addEventListener("click", () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    });

    // mobile menu
    const burger = document.querySelector(".header__burger");
    const mobileMenu = document.querySelector(".mobile-menu");
    const mobileMenuContent = document.querySelector(".mobile-menu__content");
    const headerMenu = document.querySelector(".header__menu").cloneNode(true);
    const authButtons = document.querySelector(".header__button-auth");
    const headerContainer = document.querySelector(".header__container");

    let isOpen = false;

    function toggleMenu() {
        isOpen = !isOpen;
        burger.setAttribute("aria-expanded", isOpen);

        if (isOpen) {
            burger.classList.add("active");
            mobileMenu.classList.add("active");
            mobileMenuContent.innerHTML = "";
            mobileMenuContent.appendChild(headerMenu);

            if (window.innerWidth < 701) {
                mobileMenuContent.appendChild(authButtons);
            }

            updateMenuHeight();
        } else {
            burger.classList.remove("active");
            mobileMenu.style.maxHeight = "0"; 
            mobileMenu.style.opacity = "0";

            setTimeout(() => {
                mobileMenu.classList.remove("active");
                mobileMenuContent.innerHTML = "";

                if (!headerContainer.contains(authButtons)) {
                    headerContainer.insertBefore(authButtons, burger);
                }
            }, 300);
        }
    }

    function updateMenuHeight() {
        if (isOpen) {
            mobileMenu.style.maxHeight = "none";
            const height = mobileMenuContent.scrollHeight;
            mobileMenu.style.maxHeight = `${height}px`;
            mobileMenu.style.opacity = "1";
        }
    }

    window.addEventListener("resize", () => {
        if (window.innerWidth < 701 && isOpen) {
            mobileMenuContent.innerHTML = "";
            mobileMenuContent.appendChild(headerMenu);

            mobileMenuContent.appendChild(authButtons);
            updateMenuHeight();
        }

        if (window.innerWidth >= 701 && authButtons && !headerContainer.contains(authButtons)) {
            headerContainer.insertBefore(authButtons, burger);
        }

        if (window.innerWidth >= 1000 && isOpen) {
            toggleMenu();
        }
    });

    const observer = new MutationObserver(updateMenuHeight);
    observer.observe(mobileMenuContent, { childList: true, subtree: true });

    burger.addEventListener("click", toggleMenu);
    mobileMenu.addEventListener("click", (e) => {
        if (e.target === mobileMenu) {
            toggleMenu();
        }
    });

    document.addEventListener("click", (e) => {
        const isClickInsideMenu = mobileMenu.contains(e.target) || burger.contains(e.target);
    
        if (!isClickInsideMenu && isOpen) {
            toggleMenu();
        }
    });

    // Sidebar
    const sidebarTitle = document.querySelector(".sidebar .sidebar__table-content .sidebar__title");
    const sidebar = document.querySelector(".sidebar .sidebar__table-content");
    const sidebarList = sidebar.querySelector(".sidebar__list");

    sidebar.classList.add("open");
    sidebarList.style.maxHeight = `${sidebarList.scrollHeight + 50}px`;
    sidebarList.style.opacity = "1";
    sidebarList.style.overflow = "hidden";
    sidebarList.style.transition = "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease";

    sidebarTitle.addEventListener("click", () => {
        const isOpen = sidebar.classList.toggle("open");

        if (isOpen) {
            sidebarList.style.maxHeight = `${sidebarList.scrollHeight + 50}px`;
            sidebarList.style.opacity = "1";
        } else {
            sidebarList.style.maxHeight = "0";
            sidebarList.style.opacity = "0";
        }
    });

    // Page-nav
    const navTitle = document.querySelector(".page-nav .sidebar__table-content .sidebar__title");
    const nav = document.querySelector(".page-nav .sidebar__table-content");
    const navList = nav.querySelector(".sidebar__list");

    nav.classList.remove("open");
    navList.style.maxHeight = "0";
    navList.style.opacity = "0";
    navList.style.overflow = "hidden";
    navList.style.transition = "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease";

    navTitle.addEventListener("click", () => {
        const isOpen = nav.classList.toggle("open");

        if (isOpen) {
            navList.style.maxHeight = `${navList.scrollHeight + 50}px`;
            navList.style.opacity = "1";
        } else {
            navList.style.maxHeight = "0";
            navList.style.opacity = "0";
        }
    });

    // dropdown
    const arrow = document.querySelector('.menu-arrow');
    const dropdown = document.querySelector('.dropdown-menu');

    arrow.addEventListener('click', (e) => {
        e.preventDefault();
        dropdown.classList.toggle('active');
        arrow.classList.toggle('rotated');
    });

    document.addEventListener('click', (e) => {
        const isClickInside = arrow.closest('li').contains(e.target);
        if (!isClickInside) {
        dropdown.classList.remove('active');
        arrow.classList.remove('rotated');
        }
    });

    // faq
    const faqItems = document.querySelectorAll(".faq__item");

    faqItems.forEach((item) => {
        const question = item.querySelector(".faq__question");
        const answer = item.querySelector(".faq__answer");
    
        question.style.marginBottom = "0";
    
        answer.style.maxHeight = "0";
        answer.style.opacity = "0";
        answer.style.padding = "0 20px";
    
        answer.style.transition = "max-height 0.3s linear, opacity 0.3s linear";
    
        question.addEventListener("click", () => {
            const isOpen = item.classList.contains("active");
    
            faqItems.forEach((otherItem) => {
                if (otherItem !== item && otherItem.classList.contains("active")) {
                    otherItem.classList.remove("active");
                    const otherAnswer = otherItem.querySelector(".faq__answer");
    
                    otherAnswer.style.transition = "none";
                    otherAnswer.style.maxHeight = `${otherAnswer.scrollHeight}px`;
                    requestAnimationFrame(() => {
                        otherAnswer.style.transition = "max-height 0.3s linear, opacity 0.3s linear, padding 0.3s linear";
                        otherAnswer.style.maxHeight = "0";
                        otherAnswer.style.opacity = "0";
                        otherAnswer.style.padding = "0 20px";
                    });
                }
            });
    
            item.classList.toggle("active");
    
            if (isOpen) {
                answer.style.transition = "none";
                answer.style.maxHeight = `${answer.scrollHeight}px`;
                requestAnimationFrame(() => {
                    answer.style.transition = "max-height 0.3s linear, opacity 0.3s linear, padding 0.3s linear";
                    answer.style.maxHeight = "0";
                    answer.style.opacity = "0";
                    answer.style.padding = "0 20px";
                });
            } else {
                const fullHeight = answer.scrollHeight;
                answer.style.transition = "none";
                answer.style.maxHeight = "0";
    
                requestAnimationFrame(() => {
                    answer.style.transition = "max-height 0.3s linear, opacity 0.3s linear, padding 0.3s linear";
                    answer.style.maxHeight = `${fullHeight + 50}px`;
                    answer.style.opacity = "1";
                    answer.style.padding = "13px 20px";
                });
            }
        });
    });
})