<header data-header="desktop" class="site-header fixed top-0 inset-x-0 py-4 z-50 px-6 sm:px-12">
	<div
		class="grid grid-cols-2 lg:grid-cols-[1fr_auto_1fr] items-center">

		<!-- Left: Mobile menu button -->
		<div class="flex items-center">
			<button type="button" class="lg:hidden text-white font-bold inline-flex items-center justify-center rounded-full p-2" aria-label="Menü öffnen" aria-expanded="false" data-mobile-open>
				Menü
			</button>
		</div>

		<!-- Center: Desktop nav -->
		<nav data-nav="desktop" class="site-nav hidden lg:block">
			<ul class="flex gap-4 max-xl:pr-12 xl:gap-12 justify-center">
				<li>
					<a class="nav-link" href="#">HOME</a>
				</li>
				<li>
					<a class="nav-link" href="#">STUDIO</a>
				</li>
				<li>
					<a class="nav-link" href="#">SERVICES</a>
				</li>
				<li>
					<a class="nav-link" href="#">PREISE</a>
				</li>
				<li>
					<a class="nav-link" href="#">BURHAN TEKIN</a>
				</li>
				<li>
					<a class="nav-link" href="#">LA BIOSTHETIQUE &copy;</a>
				</li>
			</ul>
		</nav>

		<!-- Right: CTA -->
		<div class="flex justify-end">
			{% include "_partials/call-or-mail.twig" with {
        phone: '+43 987 654 321',
        email: 'kontakt@firma.at',
        class: 'btn btn-outline | inline-block'
      } %}
		</div>
	</div>

	<!-- Mobile fullscreen overlay -->
	<div
		class="fixed inset-0 z-[60] lg:hidden transition-opacity duration-200 opacity-0 pointer-events-none h-[100dvh]" data-mobile-overlay>

		<!-- Backdrop -->
		<div class="absolute inset-0 bg-black/70" data-mobile-backdrop></div>

		<!-- Panel -->
		<div
			class="relative h-full w-full flex flex-col transition-all duration-200 will-change-transform">

			<!-- Top bar -->
			<div class="flex items-center justify-start px-6 sm:px-12 pt-7">
				<button type="button" class="text-white font-bold inline-flex items-center justify-center rounded-full p-2" aria-label="Menü schließen" data-mobile-close>
					Close
				</button>
			</div>

			<!-- Links -->
			<nav class="mt-10 px-6 sm:px-12">
				<ul class="space-y-4">
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">HOME</a>
					</li>
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">STUDIO</a>
					</li>
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">SERVICES</a>
					</li>
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">PREISE</a>
					</li>
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">BURHAN TEKIN</a>
					</li>
					<li>
						<a data-mobile-link class="block text-white text-2xl font-medium py-3" href="#">LA BIOSTHETIQUE &copy;</a>
					</li>
				</ul>
			</nav>

			<!-- Footer actions (optional) -->
			<div class="mt-auto px-6 sm:px-12 pb-8">
				<div class="flex flex-col gap-3">
					{% include "_partials/call-or-mail.twig" with {
            phone: '+43 987 654 321',
            email: 'kontakt@firma.at',
            class: 'btn btn-outline w-full text-center'
          } %}
				</div>
			</div>
		</div>
	</div>
</header>
