---
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">
				<svg
					class="w-8 h-8 text-primary"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="1.5"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
					></path>
				</svg>
				<span class="font-bold text-xl text-text-primary">ManaMail</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>