<script lang="ts">
	import { onMount } from 'svelte';

	import "./layout.css";
	import favicon from "$lib/assets/favicon.ico";
	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
	import ThemeToggle from "$lib/components/ThemeToggle.svelte";

	onMount(() => {
		// Inject analytics script
		const script = document.createElement('script');
		script.defer = true;
		script.src = 'https://umami.snail.city/script.js';
		script.setAttribute('data-website-id', '5b8c31ad-71cd-4317-940b-6bccea732acc');
		script.setAttribute('data-domains', 'bibdle.com,www.bibdle.com');
		document.body.appendChild(script);
	});

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

<svelte:head>
	<link rel="icon" href={favicon} />
	<link rel="alternate" type="application/rss+xml" title="Bibdle RSS Feed" href="/feed.xml" />
	<meta name="description" content="A daily Bible game" />
</svelte:head>

<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 dark:md:from-gray-900 dark:md:to-slate-950">
	<h1
		class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 dark:text-gray-300 drop-shadow-2xl tracking-widest p-4 pt-12 animate-fade-in-up"
	>
		<TitleAnimation />
		<div class="font-normal"></div>
	</h1>
	<div class="hidden"><ThemeToggle /></div>
	{@render children()}
</div>
