---
const {
    navigationItems,
    theme = "light",
    className = "",
    facebookHref = "/facebook",
} = Astro.props;

const isDark = theme === "dark";
const textClass = isDark ? "text-white" : "text-black";
const borderClass = isDark ? "border-white/40" : "border-black/20";
const lineClass = isDark ? "bg-white" : "bg-black";
---

<div
    id="mobile-menu"
    class="fixed inset-0 z-50 hidden flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
    role="dialog"
    aria-modal="true"
    aria-hidden="true"
>
    <div class="flex items-center justify-between">
        <a href="/" aria-label="Highland Group RDA home">
            <img
                class="w-[140px] h-[75px]"
                alt="RDA logo"
                src="/figmaAssets/rdalogo-1.svg"
            />
        </a>
        <button
            id="menu-close"
            class="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
            type="button"
        >
            Close
        </button>
    </div>
    <nav
        class="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]"
    >
        <ul class="flex flex-col gap-6">
            {
                navigationItems.map((item) => (
                    <li>
                        <a
                            class="block border-b border-black/10 pb-4"
                            href={item.href}
                        >
                            {item.label}
                        </a>
                    </li>
                ))
            }
            <li>
                <a
                    class="flex items-center gap-3 border-b border-black/10 pb-4"
                    href={facebookHref}
                >
                    <span
                        class="inline-flex items-center justify-center h-8 w-8 rounded-full border border-black/20 text-black"
                    >
                        <svg viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" focusable="false">
                            <path fill="currentColor" d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"></path>
                        </svg>
                    </span>
                    Facebook
                </a>
            </li>
            <li>
                <a
                    class="flex items-center gap-3 border-b border-black/10 pb-4"
                    href="https://www.instagram.com/HighlandGroupRDA"
                    target="_blank"
                    rel="noreferrer"
                >
                    <span
                        class="inline-flex items-center justify-center h-8 w-8 rounded-full border border-black/20 text-black"
                    >
                        <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                        </svg>
                    </span>
                    Instagram
                </a>
            </li>
        </ul>
    </nav>
</div>

<header class={`relative w-full ${className}`.trim()}>
    <div
        class="flex flex-row items-center justify-between gap-3 py-3 sm:py-4"
    >
        <a href="/" aria-label="Highland Group RDA home">
            <img
                class="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
                alt="RDA logo"
                src="/figmaAssets/rdalogo-1.svg"
            />
        </a>
        <div class="flex flex-col gap-3 items-end ml-auto text-right">
            <button
                id="menu-open"
                class={`inline-flex items-center gap-3 rounded-full border px-4 py-2 text-sm font-semibold uppercase tracking-wide sm:hidden ${borderClass} ${textClass}`}
                type="button"
                aria-haspopup="dialog"
                aria-expanded="false"
                aria-controls="mobile-menu"
            >
                <span class="flex flex-col gap-1">
                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
                    <span class={`inline-block h-0.5 w-5 ${lineClass}`}></span>
                </span>
                Menu
            </button>
            <nav
                class={`hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold ${textClass} text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1`}
            >
                <ul
                    class="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto"
                >
                    {
                        navigationItems.map((item) => (
                            <li>
                                <a class="hover:underline" href={item.href}>
                                    {item.label}
                                </a>
                            </li>
                        ))
                    }
                    <li class="hidden sm:flex items-center gap-2">
                        <a
                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
                            href={facebookHref}
                            aria-label="Highland Group RDA on Facebook"
                        >
                            <svg viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" focusable="false">
                                <path fill="currentColor" d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"></path>
                            </svg>
                        </a>
                        <a
                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
                            href="https://www.instagram.com/HighlandGroupRDA"
                            target="_blank"
                            rel="noreferrer"
                            aria-label="Highland Group RDA on Instagram"
                        >
                            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>


<script>
    const menu = document.getElementById("mobile-menu");
    const openButton = document.getElementById("menu-open");
    const closeButton = document.getElementById("menu-close");

    if (menu && openButton && closeButton) {
        // Move menu to document.body so backdrop-filter on the nav wrapper
        // doesn't create a new containing block that clips fixed positioning.
        document.body.appendChild(menu);

        const toggleMenu = (open) => {
            menu.classList.toggle("hidden", !open);
            menu.setAttribute("aria-hidden", open ? "false" : "true");
            openButton.setAttribute("aria-expanded", open ? "true" : "false");
        };

        openButton.addEventListener("click", () => toggleMenu(true));
        closeButton.addEventListener("click", () => toggleMenu(false));
        menu.addEventListener("click", (event) => {
            if (
                event.target instanceof HTMLElement &&
                event.target.tagName === "A"
            ) {
                toggleMenu(false);
            }
        });
    }
</script>
