<script lang="ts">
	import './layout.css';
	import { resolve } from '$app/paths';

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

<div class="flex min-h-dvh flex-col bg-(--page-bg)">
	<header class="border-b border-black/5 bg-white/70 backdrop-blur">
		<div class="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-5 sm:px-6">
			<div class="flex min-w-0 items-center gap-4">
				<img
					src="/brand/Logo_secretaria_esportes_.png"
					alt="Secretaria de Esportes de Pernambuco"
					class="h-28 w-auto object-contain"
					loading="eager"
					decoding="async"
				/>
				<div class="min-w-0">
					<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
						Governo de Pernambuco
					</p>
					<h1 class="mt-1 text-xl font-extrabold tracking-tight text-(--text-strong) sm:text-2xl">
						Secretaria de Esportes de Pernambuco
					</h1>
				</div>
			</div>

			<div class="flex items-center gap-3">
				<a
					href={resolve('/ouvidoria')}
					class="inline-flex items-center rounded-lg bg-white/80 px-3 py-2 text-xs font-extrabold tracking-wide text-(--text-strong) ring-1 ring-black/10 transition hover:bg-white focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
				>
					OUVIDORIA
				</a>

				<span
					class="hidden rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5 sm:inline-flex"
				>
					SESP-PE
				</span>
			</div>
		</div>
	</header>

	<div class="flex-1">
		{@render children()}
	</div>

	<footer class="border-t border-black/5 bg-white/70 backdrop-blur">
		<div
			class="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 sm:px-6 md:flex-row md:items-center md:justify-between"
		>
			<div class="flex items-center gap-4">
				<img
					src="/brand/gov-pe.png"
					alt="Logomarca do Governo de Pernambuco"
					class="h-12 w-auto object-contain"
					loading="lazy"
					decoding="async"
				/>
				<div>
					<p class="text-sm font-bold text-(--text-strong)">Secretaria de Esportes de Pernambuco</p>
					<p class="text-xs text-(--text-muted)">Página institucional • Notícias e programas</p>
				</div>
			</div>

			<p class="text-xs text-(--text-muted)">
				© {new Date().getFullYear()} Governo de Pernambuco — SESP-PE.
			</p>
		</div>
	</footer>
</div>
