<script>
	import '../app.css';
	import { page } from '$app/stores';
	import favicon from '$lib/assets/favicon.svg';
	import Navbar from '$lib/components/ui/Navbar.svelte';
	import NavigationDrawer from '$lib/components/layout/NavigationDrawer.svelte';
	import { openDrawer } from '$lib/stores/drawer.js';

	let { children } = $props();

	// Don't show navbar on landing page
	let isLanding = $derived($page.url.pathname === '/');
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

<!-- Navigation Drawer (siempre presente) -->
<NavigationDrawer />

<!-- Floating controls bar (fixed position - no afecta el flujo) -->
{#if !isLanding}
	<Navbar onOpenDrawer={openDrawer} />
{/if}

<div class="min-h-screen" style="background-color: var(--theme-body);">
	<main>
		{@render children()}
	</main>
</div>