<script lang="ts">
	let scrolled = $state(false);
	let mobileOpen = $state(false);

	function onScroll() {
		scrolled = window.scrollY > 100;
	}

	function closeMobile() {
		mobileOpen = false;
	}

	const links = [
		{ href: '/#speisekarte', label: 'Speisekarte' },
		{ href: '/#geschichte', label: 'Unsere Geschichte' },
		{ href: '/#catering', label: 'Catering' },
		{ href: '/#kontakt', label: 'Kontakt' }
	];
</script>

<svelte:window onscroll={onScroll} />

<nav
	class="fixed top-0 left-0 z-50 w-full {scrolled || mobileOpen
		? 'bg-charcoal shadow-lg'
		: 'bg-transparent'}"
>
	<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
		<a
			href="/"
			class="font-gothic text-2xl transition-colors duration-300 {scrolled || mobileOpen ? 'text-gold' : 'text-charcoal'}"
			onclick={closeMobile}
		>
			Graffen
		</a>

		<!-- Desktop -->
		<div class="hidden gap-8 md:flex">
			{#each links as link}
				<a
					href={link.href}
					class="text-sm font-bold tracking-wide transition-colors {scrolled ? 'text-cream/80 hover:text-gold' : 'text-charcoal hover:text-cream'}"
				>
					{link.label}
				</a>
			{/each}
		</div>

		<!-- Mobile Toggle -->
		<button
			class="md:hidden {scrolled || mobileOpen ? 'text-cream' : 'text-charcoal'}"
			onclick={() => (mobileOpen = !mobileOpen)}
			aria-label="Menü"
		>
			<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				{#if mobileOpen}
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				{:else}
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M4 6h16M4 12h16M4 18h16"
					/>
				{/if}
			</svg>
		</button>
	</div>

	<!-- Mobile Menu -->
	{#if mobileOpen}
		<div class="border-t border-gold/20 bg-charcoal/95 px-6 py-4 md:hidden">
			{#each links as link}
				<a
					href={link.href}
					class="block py-3 text-cream/80 transition-colors hover:text-gold"
					onclick={closeMobile}
				>
					{link.label}
				</a>
			{/each}
		</div>
	{/if}
</nav>
