---
import '../styles/global.css';
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="generator" content={Astro.generator} />
		<title>Teletype Games</title>
	</head>
	<body>
		<header class="bg-gray-800 text-white p-4 flex justify-between items-center relative">
			<a href="/" class="text-xl font-bold">Teletype Games</a>
			
			<!-- Desktop Navigation -->
			<nav class="hidden md:flex space-x-4">
				<a href="/" class="p-2 hover:text-purple-300 transition-colors duration-200">Home</a>
				<a href="/catalog" class="p-2 hover:text-purple-300 transition-colors duration-200">Catalog</a>
				<a href="/blog" class="p-2 hover:text-purple-300 transition-colors duration-200">Blog</a>
				<a href="/howtos" class="p-2 hover:text-purple-300 transition-colors duration-200">How-tos</a>
				<a href="/code" class="p-2 hover:text-purple-300 transition-colors duration-200">Code</a>
				<a href="/team" class="p-2 hover:text-purple-300 transition-colors duration-200">Team</a>
				<a href="/contact" class="p-2 hover:text-purple-300 transition-colors duration-200">Contact us</a>
			</nav>

			<!-- Hamburger Button (Mobile only) -->
			<button id="menu-toggle" class="md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md">
				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
				</svg>
			</button>

			<!-- Mobile Navigation -->
			<nav id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-gray-800 flex-col items-center py-4 space-y-2 z-50">
				<a href="/" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Home</a>
				<a href="/catalog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Catalog</a>
				<a href="/blog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Blog</a>
				<a href="/howtos" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">How-tos</a>
				<a href="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Code</a>
				<a href="/team" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Team</a>
				<a href="/contact" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Contact us</a>
			</nav>
		</header>
		<main>
			<slot />
		</main>
	</body>
	<script is:inline>
		document.getElementById('menu-toggle').addEventListener('click', () => {
			document.getElementById('mobile-menu').classList.toggle('hidden');
		});
	</script>
</html>

<style>
	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
	}
</style>
