---
const navLinks = [
	{ href: '#features', label: 'Features' },
	{ href: '#how-it-works', label: "So funktioniert's" },
	{ href: '#pricing', label: 'Preise' },
	{ href: '#faq', label: 'FAQ' },
];
---

<nav
	class="fixed top-0 left-0 right-0 z-50 bg-background-page/80 backdrop-blur-lg border-b border-border"
>
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
		<div class="flex items-center justify-between h-16">
			<!-- Logo -->
			<a href="/" class="flex items-center gap-2">
				<span class="text-2xl">🃏</span>
				<span class="font-bold text-xl text-text-primary">ManaDeck</span>
			</a>

			<!-- Desktop Navigation -->
			<div class="hidden md:flex items-center gap-8">
				{
					navLinks.map((link) => (
						<a
							href={link.href}
							class="text-text-secondary hover:text-text-primary transition-colors text-sm font-medium"
						>
							{link.label}
						</a>
					))
				}
			</div>

			<!-- CTA Button -->
			<div class="flex items-center gap-4">
				<a href="#download" class="btn-primary text-sm px-4 py-2"> App herunterladen </a>

				<!-- Mobile Menu Button -->
				<button
					type="button"
					class="md:hidden p-2 text-text-secondary hover:text-text-primary"
					aria-label="Menu"
					id="mobile-menu-button"
				>
					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 6h16M4 12h16M4 18h16"></path>
					</svg>
				</button>
			</div>
		</div>
	</div>

	<!-- Mobile Menu -->
	<div class="hidden md:hidden" id="mobile-menu">
		<div class="px-4 py-4 space-y-2 bg-background-card border-t border-border">
			{
				navLinks.map((link) => (
					<a
						href={link.href}
						class="block px-4 py-2 text-text-secondary hover:text-text-primary hover:bg-background-card-hover rounded-lg transition-colors"
					>
						{link.label}
					</a>
				))
			}
		</div>
	</div>
</nav>

<script>
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const mobileMenu = document.getElementById('mobile-menu');

	mobileMenuButton?.addEventListener('click', () => {
		mobileMenu?.classList.toggle('hidden');
	});

	// Close menu when clicking a link
	mobileMenu?.querySelectorAll('a').forEach((link) => {
		link.addEventListener('click', () => {
			mobileMenu?.classList.add('hidden');
		});
	});
</script>
