<script lang="ts">
	import './layout.css';
	import favicon from '$lib/assets/favicon.png';
	import * as all from '$lib/all';
	import { resolve } from '$app/paths';
	import type { LayoutProps } from './$types';
	import { page } from '$app/state';

	let { children }: LayoutProps = $props();

	const cur = $derived(all.page(page.route.id));
	const title = $derived(cur.name);
	const desc = $derived(
		cur.description ??
			"She's read all about Umamusume, and she's always happy to share her knowledge and give recommendations! Tools and editorials for Umamusume optimization.",
	);
</script>

<svelte:head>
	{#if title != null}
		<title>Zenno Rob Roy &ndash; {title}</title>
	{:else}
		<title>Zenno Rob Roy</title>
	{/if}
	<meta name="description" content={desc} />
	<meta name="color-scheme" content="light dark" />
	<meta name="referrer" content="strict-origin-when-cross-origin" />
	<meta name="robots" content="noimageindex" />
	<link rel="icon" href={favicon} />
</svelte:head>

<div class="flex h-screen flex-col">
	<nav class="mb-4 flex min-w-full bg-mist-300 p-4 shadow-md dark:bg-mist-900">
		<span class="hidden flex-1 md:inline">
			<a href={resolve('/')} class="text-4xl">Zenno Rob Roy</a>
		</span>
		<span class="flex-1 text-center">
			<a href={resolve('/')} class="mx-8 my-1 block font-semibold md:hidden">Zenno Rob Roy</a>
			<a href={resolve('/race')} class="mx-8 my-1 inline-block">Race Tools</a>
			<a href={resolve('/chara')} class="mx-8 my-1 inline-block">Character Tools</a>
			<a href={resolve('/doc')} class="mx-8 my-1 inline-block">Documents</a>
		</span>
	</nav>
	<main class="mx-4 grow lg:m-auto lg:max-w-7xl lg:min-w-7xl">
		{@render children()}
	</main>
	<footer
		class="inset-x-0 bottom-0 mt-12 border-t bg-mist-300 p-4 text-center text-sm md:mt-20 dark:border-none dark:bg-mist-900"
	>
		Umamusume: Pretty Derby tools by <a href="https://zephyrtronium.date/" target="_blank" rel="noopener noreferrer"
			>zephyrtronium</a
		>.<br />
		All game data is auto-generated from the
		<a href="https://git.sunturtle.xyz/zephyr/horse/src/branch/main/doc/README.md" target="_blank" rel="noopener noreferrer"
			>game's local database</a
		>.<br />
		If you find this site helpful, please consider
		<a href="https://ko-fi.com/zephyrtronium" target="_blank" rel="noopener noreferrer">supporting my Ko-fi</a>.
	</footer>
</div>
