---
// Navigation component for Pole Sport website
---

<nav class="bg-white shadow-lg">
	<div class="container mx-auto px-4">
		<div class="flex justify-between items-center py-4">
			<!-- Logo/Brand -->
			<div class="flex items-center">
				<a href="/" class="text-xl font-bold text-gray-800 hover:text-gray-600 transition-colors">
					Pole Book
				</a>
			</div>
			
			<!-- Navigation Links -->
			<div class="hidden md:flex space-x-8">
				<a href="/" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
					Home
				</a>
				<a href="/elements" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
					Elements
				</a>
			</div>
			
			<!-- Mobile menu button -->
			<div class="md:hidden">
				<button id="mobile-menu-button" class="text-gray-600 hover:text-gray-900 focus:outline-none">
					<svg class="h-6 w-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>
		
		<!-- Mobile menu -->
		<div id="mobile-menu" class="md:hidden hidden">
			<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
				<a href="/" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
					Home
				</a>
				<a href="/elements" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
					Elements
				</a>
			</div>
		</div>
	</div>
</nav>

<script>
	// Mobile menu toggle functionality
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const mobileMenu = document.getElementById('mobile-menu');
	
	if (mobileMenuButton && mobileMenu) {
		mobileMenuButton.addEventListener('click', () => {
			mobileMenu.classList.toggle('hidden');
		});
	}
</script>