<script lang="ts">
	import '$src/app.css';
	import { page } from '$app/state';
	// import '../syntax-highlight.css'; // https://github.com/PrismJS/prism-themes
	import NavBar from '$lib/components/NavBar.svelte';

	const routes: App.Route[] = [
		{ label: 'главная', icon: 'material-symbols:emoji-food-beverage', href: '/' },
		{ label: 'команда', icon: 'material-symbols:groups', href: '/team' },
		{ label: 'блог', icon: 'material-symbols:newspaper', href: '/blog' },
		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' },
		{ label: 'контакты', icon: 'material-symbols:chat', href: '/contact' }
	];
</script>

<svelte:head>
	{#if page.data.title !== undefined}
		<title>{page.data.title} &mdash; Tea Sanctuary</title>
		<meta property="og:title" content="{page.data.title} — Tea Sanctuary" />
	{:else}
		<title>Tea Sanctuary</title>
		<meta property="og:title" content="Tea Sanctuary" />
	{/if}
	<meta property="og:image" content="https://teasanctuary.ru/common/logo.png" />
	<meta property="og:description" content="Делаем вещи как можем." />
</svelte:head>

<div class="flex h-dvh w-dvw flex-row portrait:flex-col-reverse">
	<NavBar {routes} />
	<div class="flex grow-1 flex-col overflow-auto">
		<div class="relative grow-1">
			<slot />
		</div>

		<footer class="bg-emerald-950">
			<div
				class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
			>
				<p>
					<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
				</p>
			</div>
		</footer>
	</div>
</div>
