<script lang="ts">
	import './layout.css';
	import { resolve as resolveRoute } from '$app/paths';
	import favicon from '$lib/assets/favicon.svg';

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

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

<div class="min-h-screen bg-gray-50">
	<nav class="border-b border-gray-200 bg-white">
		<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
			<div class="flex h-14 items-center justify-between">
				<div class="flex items-center gap-6">
					<a href={resolveRoute('/')} class="flex items-center gap-2 font-semibold text-gray-900">
						<svg
							class="h-6 w-6 text-blue-600"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
							/>
						</svg>
						<span>TrueRef</span>
					</a>
					<a href={resolveRoute('/')} class="text-sm text-gray-600 hover:text-gray-900">
						Repositories
					</a>
					<a href={resolveRoute('/search')} class="text-sm text-gray-600 hover:text-gray-900">
						Search
					</a>
					<a href={resolveRoute('/settings')} class="text-sm text-gray-600 hover:text-gray-900">
						Settings
					</a>
				</div>
				<span class="text-xs text-gray-400">Self-hosted documentation intelligence</span>
			</div>
		</div>
	</nav>

	<main class="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
		{@render children()}
	</main>
</div>
