---
import Search from "@/components/Search.astro";
import ThemeToggle from "@/components/ThemeToggle.astro";
import { menuLinks } from "@/site.config";
import { siteConfig } from "../../site.config";
---

<header class="group relative mb-28 flex items-center sm:ps-18" id="main-header">
	<div class="flex sm:flex-col">
		<a
			aria-current={Astro.url.pathname === "/" ? "page" : false}
			class="inline-flex items-center grayscale hover:filter-none sm:relative sm:inline-block"
			href="/"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="me-3 h-15 w-9 sm:absolute sm:-start-18 sm:me-0 sm:h-16 sm:w-18"
				aria-hidden="true"
				fill="none"
				focusable="false"
				viewBox="0 0 360 360"
			>
				<defs></defs>
				<g id="group0" transform="translate(70.8749995138331, 7.01999995184633)" fill="none">
					<path
						id="shape0"
						transform="translate(13.2299999092488, 0)"
						fill="#306b4e"
						fill-rule="evenodd"
						stroke="#306b4e"
						stroke-width="2.16"
						stroke-linecap="square"
						stroke-linejoin="bevel"
						d="M0 91.53C32.9712 58.5548 0.838759 20.1965 65.61 7.155C90.6937 0.313979 85.2036 3.0468 97.2 0C98.3977 0.598844 109.07 14.0691 108.675 15.255C108.457 17.8034 108.106 21.0139 107.152 22.7948C88.7999 18.6814 63.7461 26.7779 52.11 35.505C18.588 76.6103 48.6792 86.5536 22.005 95.445C18.7941 96.5153 0.27 93.935 0.27 91.53"
					></path>
					<path
						id="shape1"
						transform="translate(48.5999996666284, 29.3959603876917)"
						fill="#306b4e"
						fill-rule="evenodd"
						stroke="#306b4e"
						stroke-width="2.16"
						stroke-linecap="square"
						stroke-linejoin="bevel"
						d="M0 109.114L8.1 96.559L8.64 40.939C35.4994 -24.1754 90.6285 2.75644 101.79 24.199L40.5 41.749L29.835 56.599L49.005 101.689L41.04 99.259L19.305 114.784C19.125 114.874 12.69 112.984 0 109.114Z"
					></path>
					<path
						id="shape2"
						transform="translate(89.2349993878927, 58.9949995953239)"
						fill="#306b4e"
						fill-rule="evenodd"
						stroke="#306b4e"
						stroke-width="2.16"
						stroke-linecap="square"
						stroke-linejoin="bevel"
						d="M4.86 20.385L70.335 0L79.245 22.815L34.02 24.705L37.8 34.02L87.615 34.56L66.42 93.825L18.09 75.33L0 27.405C0 27.405 1.62 25.065 4.86 20.385Z"
					></path>
					<path
						id="shape3"
						transform="translate(0, 151.803088248821)"
						fill="#306b4e"
						fill-rule="evenodd"
						stroke="#306b4e"
						stroke-width="2.16"
						stroke-linecap="square"
						stroke-linejoin="bevel"
						d="M73.17 6.01191C59.7458 10.5419 54.7859 14.4672 22.815 20.3219L22.275 41.7869L0 32.8769C22.0145 1.58636 46.4045 -7.36864 73.17 6.01191Z"
					></path>
				</g><path
					id="shape4"
					transform="translate(101.789996268193, 159.569994149873)"
					fill="#b04304"
					fill-rule="evenodd"
					stroke="#b04304"
					stroke-width="2.16"
					stroke-linecap="square"
					stroke-linejoin="bevel"
					d="M0 26.19C25.2141 21.5944 52.0199 14.6103 79.38 0C102.4 9.84952 124.488 20.1337 157.95 25.11L157.14 71.28C72.4992 62.1903 35.5629 78.3158 0.27 95.31C0.99 94.95 0.9 71.91 0 26.19Z"
				></path><path
					id="shape5"
					transform="translate(154.169994347847, 243.809991061482)"
					fill="#b04304"
					fill-rule="evenodd"
					stroke="#b04304"
					stroke-width="2.16"
					stroke-linecap="square"
					stroke-linejoin="bevel"
					d="M0 92.34L26.73 111.24C68.8327 85.2955 105.901 55.7671 106.11 0C46.5948 1.94824 11.2248 32.7282 0 92.34Z"
				></path><path
					id="shape6"
					transform="translate(117.989995674272, 280.709989708662)"
					fill="#b04304"
					fill-rule="evenodd"
					stroke="#b04304"
					stroke-width="2.16"
					stroke-linecap="square"
					stroke-linejoin="bevel"
					d="M0 15.03L7.02 24.93C9.86684 17.4815 14.7638 11.673 19.98 6.12L11.43 0C8.46106 1.32415 4.65106 6.33415 0 15.03Z"
				></path><path
					id="shape7"
					transform="translate(141.209994822985, 257.489990559949)"
					fill="#b04304"
					fill-rule="evenodd"
					stroke="#b04304"
					stroke-width="2.16"
					stroke-linecap="square"
					stroke-linejoin="bevel"
					d="M0 12.51L7.47 17.73C12.2932 12.4756 18.0945 8.93282 23.85 5.31L17.19 0C14.5911 0.898115 8.86111 5.06811 0 12.51Z"
				></path><path
					id="shape8"
					transform="translate(172.979993658239, 247.469668124269)"
					fill="#b04304"
					fill-rule="evenodd"
					stroke="#b04304"
					stroke-width="2.16"
					stroke-linecap="square"
					stroke-linejoin="bevel"
					d="M0 4.44032L4.68 8.13032C8.94565 5.54974 14.0379 4.34681 18.99 2.91032L17.64 0.0303228C15.7496 -0.234517 9.86959 1.23548 0 4.44032Z"
				></path>
			</svg>
			<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
		</a>
		<nav
			aria-label="Main menu"
			class="bg-global-bg/85 text-accent sm:divide-accent absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md py-4 shadow backdrop-blur-sm group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
			id="navigation-menu"
		>
			{
				menuLinks
					.filter((link) => link.path !== "/privacy-policy/")
					.map((link) => (
						<a
							aria-current={Astro.url.pathname === link.path ? "page" : false}
							class="px-4 py-4 underline-offset-2 hover:underline sm:py-0"
							data-astro-prefetch
							href={link.path}
						>
							{link.title}
						</a>
					))
			}
		</nav>
	</div>
	<Search />
	<ThemeToggle />
	<mobile-button>
		<button
			aria-expanded="false"
			aria-haspopup="menu"
			class="group relative ms-4 h-7 w-7 sm:invisible sm:hidden"
			id="toggle-navigation-menu"
			type="button"
		>
			<span class="sr-only">Open main menu</span>
			<svg
				aria-hidden="true"
				class="absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"
				fill="none"
				focusable="false"
				id="line-svg"
				stroke="currentColor"
				stroke-width="1.5"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="M3.75 9h16.5m-16.5 6.75h16.5" stroke-linecap="round" stroke-linejoin="round"
				></path>
			</svg>
			<svg
				aria-hidden="true"
				class="text-accent absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
				class="text-accent"
				fill="none"
				focusable="false"
				id="cross-svg"
				stroke="currentColor"
				stroke-width="1.5"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"></path>
			</svg>
		</button>
	</mobile-button>
</header>

<script>
	import { toggleClass } from "@/utils/domElement";

	class MobileNavBtn extends HTMLElement {
		#menuOpen: boolean = false;

		connectedCallback() {
			const headerEl = document.getElementById("main-header")!;
			const mobileButtonEl = this.querySelector<HTMLButtonElement>("button");

			mobileButtonEl?.addEventListener("click", () => {
				if (headerEl) toggleClass(headerEl, "menu-open");
				this.#menuOpen = !this.#menuOpen;
				mobileButtonEl.setAttribute("aria-expanded", this.#menuOpen.toString());
			});
		}
	}

	customElements.define("mobile-button", MobileNavBtn);
</script>