<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">
      <a href="https://git.plebsaber.stream/pleb/plebsaber.stream" class="inline-flex items-center gap-2 text-neon hover:underline">
        <img src="https://git.plebsaber.stream/assets/img/logo.svg" alt="Gitea" class="h-4 w-4" />
        <span>Source code</span>
      </a> 
       <a href="https://svelte.dev" class="hover:underline text-muted">Built with SvelteKit, and <span class="text-neon-fuchsia" style="text-shadow: 0 0 8px rgba(255,0,229,0.6);">❤️</span></a>
    </div>
  </footer>
</div>
