<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} />
  <meta name="theme-color" content="#0b0f17" />
  <meta name="color-scheme" content="dark" />
</svelte:head>

<div class="min-h-dvh bg-[radial-gradient(1200px_600px_at_80%_-10%,rgba(255,0,229,0.10),transparent),radial-gradient(900px_500px_at_10%_10%,rgba(34,211,238,0.10),transparent)]">
  <NavBar />
  <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
    {@render children?.()}
  </main>
  <footer class="border-t border-white/10 text-sm text-muted/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
      <span>&copy; {new Date().getFullYear()} Plebsaber.stream</span>
      <a href="https://svelte.dev" class="hover:underline text-muted">Built with SvelteKit</a>
    </div>
  </footer>
</div>
