<script lang="ts">
	import '../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import NavBar from '$lib/components/NavBar.svelte';

	let { children } = $props();
</script>

<svelte:head><link rel="icon" href={favicon} /></svelte:head>
<div class="flex min-h-screen w-full flex-col text-white relative overflow-hidden">
	<!-- Background gradients -->
	<div class="absolute inset-0 z-0 pointer-events-none">
		<div class="absolute -top-[25vw] -right-[25vw] w-[50vw] h-[50vw] bg-green-500 rounded-full blur-[100px] opacity-30"></div>
		<div class="absolute -bottom-[25vw] -left-[25vw] w-[50vw] h-[50vw] bg-blue-500 rounded-full blur-[100px] opacity-30"></div>
	</div>

	<header class="">
		<NavBar 
			name="Achtung!"
			items={[
				{ label: 'Home', href: '/' },
				{ label: 'About', href: '/about' },
				{ label: 'Contact', href: '/contact' }
			]}
			loginHref="/login"
			loginLabel="Login"
		/>
	</header>


		{@render children()}

	<footer class="">
		<p class="py-4 text-center text-sm text-gray-300">
			Transcendence - Achtung! &copy; 2024 qbeukelman, hesmolde, fras, qmennen & whaffman.
		</p>
	</footer>
</div>


