---
// src/components/Header.astro
const { url } = Astro;
import "../styles/components/Header.css";
---

<header class="header">
	<!-- Desktop Layout -->
	<div class="desktop-layout">
		<div class="logo-container">
			<a href="/">
				<img src="/images/Logo.png" alt="Logo" class="logo" />
			</a>
		</div>

		<nav class="nav-main">
			<div class="desktop-menu">
				<a href="/#hero">Home</a>
				<a href="/#events">Events</a>
				<a href="/#gallery">Galerie</a>
				<a href="/#drinks">Drinks</a>
				<a href="/#footer">Contact</a>
				<!--<a href="/#about">About</a>
				<a href="/#contact">Contact</a>-->
			</div>
		</nav>
	</div>

	<!-- Mobile Layout -->
	<div class="mobile-layout">
		<!-- Centered Logo -->
		<div class="mobile-logo-container">
			<a href="/">
				<img src="/images/Logo.png" alt="Logo" class="logo" />
			</a>
		</div>

		<!-- Burger Menu Below Logo -->
		<div class="burger-menu">
			<div class="burger-icon">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>

		<!-- Mobile Navigation Menu (Dropdown) -->
		<div class="mobile-menu">
			<a href="/#hero">Home</a>
			<a href="/#events">Events</a>
			<a href="/#gallery">Galerie</a>
			<a href="/#drinks">Drinks</a>
			<a href="/#footer">Contact</a>
		</div>
	</div>
</header>

<div class="header-spacer"></div>

<script>
	// Toggle mobile menu when burger icon is clicked
	document.addEventListener('DOMContentLoaded', () => {
		const burgerIcon = document.querySelector('.burger-icon');
		const mobileMenu = document.querySelector('.mobile-menu');
		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
		
		// Toggle menu when burger icon is clicked
		burgerIcon.addEventListener('click', () => {
			burgerIcon.classList.toggle('active');
			mobileMenu.classList.toggle('active');
		});
		
		// Close menu when a navigation link is clicked
		mobileMenuLinks.forEach(link => {
			link.addEventListener('click', () => {
				burgerIcon.classList.remove('active');
				mobileMenu.classList.remove('active');
			});
		});
	});
</script>