<script lang="ts">
	import { Menu, X } from 'lucide-svelte';
	import SearchBar from './SearchBar.svelte';
	import ThemeToggle from './ThemeToggle.svelte';

	let mobileMenuOpen = $state(false);

	const navigation = [
		{ name: 'Home', href: '/' },
		{ name: 'Matches', href: '/matches' },
		{ name: 'Players', href: '/players' },
		{ name: 'About', href: '/about' }
	];
</script>

<header class="sticky top-0 z-50 w-full border-b border-neon-blue/20 bg-void/95 backdrop-blur-md">
	<div class="container mx-auto px-4">
		<div class="flex h-16 items-center justify-between">
			<!-- Logo -->
			<a
				href="/"
				class="rounded transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:hover:scale-100"
				aria-label="teamflash.rip Home"
			>
				<h1 class="text-2xl font-bold">
					<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
						style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
					>
				</h1>
			</a>

			<!-- Desktop Navigation -->
			<nav class="hidden items-center gap-6 md:flex">
				{#each navigation as item}
					<a
						href={item.href}
						class="rounded text-sm font-medium text-white/60 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
					>
						{item.name}
					</a>
				{/each}
			</nav>

			<!-- Search & Actions -->
			<div class="flex items-center gap-2">
				<SearchBar />
				<ThemeToggle />

				<!-- Mobile Menu Toggle -->
				<button
					class="rounded-lg p-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue md:hidden"
					onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
					aria-label="Toggle menu"
				>
					{#if mobileMenuOpen}
						<X class="h-5 w-5" />
					{:else}
						<Menu class="h-5 w-5" />
					{/if}
				</button>
			</div>
		</div>

		<!-- Mobile Navigation -->
		{#if mobileMenuOpen}
			<nav class="animate-fade-in border-t border-neon-blue/20 py-4 md:hidden">
				{#each navigation as item}
					<a
						href={item.href}
						class="mx-2 block rounded-lg px-4 py-2 text-sm font-medium text-white/60 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue"
						onclick={() => (mobileMenuOpen = false)}
					>
						{item.name}
					</a>
				{/each}
			</nav>
		{/if}
	</div>
</header>
