/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| File    : mobile-navigation.js
| Purpose : Reusable mobile navigation
|--------------------------------------------------------------------------
*/

document.addEventListener("DOMContentLoaded", function () {
    const toggle = document.getElementById("hyroMobileToggle");
    const panel = document.getElementById("hyroMobilePanel");

    if (!toggle || !panel) {
        return;
    }

    function closeMenu() {
        toggle.setAttribute("aria-expanded", "false");
        panel.classList.remove("is-open");
    }

    function openMenu() {
        toggle.setAttribute("aria-expanded", "true");
        panel.classList.add("is-open");
    }

    toggle.addEventListener("click", function () {
        const isOpen =
            toggle.getAttribute("aria-expanded") === "true";

        if (isOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    });

    panel.querySelectorAll("a").forEach(function (link) {
        link.addEventListener("click", closeMenu);
    });

    document.addEventListener("click", function (event) {
        if (
            !panel.contains(event.target) &&
            !toggle.contains(event.target)
        ) {
            closeMenu();
        }
    });

    document.addEventListener("keydown", function (event) {
        if (event.key === "Escape") {
            closeMenu();
            toggle.focus();
        }
    });

    window.addEventListener("resize", function () {
        if (window.innerWidth > 900) {
            closeMenu();
        }
    });
});
