<script lang="ts">
	import { resolve } from "$app/paths";
	import "./layout.css";
	import favicon from "$lib/assets/favicon.svg";
	import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
	import ClientOnly from "$lib/components/util/ClientOnly.svelte";

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

<svelte:head
	><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
>

<!--
	App shell:
	- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
-->
<div
	class="min-h-dvh not-xl:min-w-[80dvw] lg:grid lg:grid-rows-[auto_1fr] gap-16 lg:grid-cols-[1fr_420px]"
>
	<header
		class="sticky top-0 z-40 border-b bg-background/80 backdrop-blur lg:col-span-2"
	>
		<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
			<a href={resolve("/")} class="font-semibold tracking-tight">AMQ Train</a>

			<nav class="flex items-center gap-2 text-sm">
				<a href={resolve("/")}>Anime</a>
				<a href={resolve("/songs")}>Songs</a>
				<a href={resolve("/list")}>List</a>
			</nav>
		</div>
	</header>

	<main class="flex flex-col items-center]">
		{@render children()}
	</main>

	<!-- Desktop sidebar column (in normal flow) -->
	<aside class="hidden lg:block">
		<ClientOnly showFallback={false}>
			{#snippet children()}
				<GlobalPlayer />
			{/snippet}
		</ClientOnly>
	</aside>
</div>

<!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
     mounted in the desktop sidebar column above. -->
<style>
	@reference "./layout.css";
	nav > a {
		@apply rounded-md px-3 py-2 hover:bg-muted;
	}
</style>
