<script lang="ts">
	import type { PageData } from './$types';

	type Props = {
		data: PageData;
	};

	const { data }: Props = $props();
</script>

<svelte:head>
	<title>{data.item.title} | Secretaria de Esportes de Pernambuco</title>
	<meta name="description" content={data.item.dek} />
</svelte:head>

<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
	<a
		href="/"
		class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
	>
		<span aria-hidden="true">←</span>
		Voltar para a página inicial
	</a>

	<section class="mt-6 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
		<div class="relative">
			<div
				aria-hidden="true"
				class="h-56 w-full bg-linear-to-br from-(--accent-blue)/15 via-white/40 to-(--accent-yellow)/20 sm:h-72"
			></div>
			<div class="absolute inset-0 bg-linear-to-t from-black/30 via-black/0 to-black/0"></div>
			<div class="absolute bottom-0 left-0 right-0 px-6 py-6 sm:px-10 sm:py-10">
				<div class="flex flex-wrap items-center gap-2">
					<span
						class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
					>
						{data.item.category}
					</span>
					<span
						class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
					>
						{new Date(data.item.date).toLocaleDateString('pt-BR')}
					</span>
				</div>
				<h1 class="mt-4 text-2xl font-extrabold tracking-tight text-white sm:text-3xl">
					{data.item.title}
				</h1>
				<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90">
					{data.item.dek}
				</p>
			</div>
		</div>

		<div class="px-6 py-8 sm:px-10">
			<div class="prose prose-slate max-w-none">
				{#if data.item.body?.length}
					{#each data.item.body as paragraph (paragraph)}
						<p>{paragraph}</p>
					{/each}
				{:else}
					<!-- <p>Conteúdo em breve. Este texto é um placeholder — depois você pode alimentar via banco/CMS.</p> -->
				{/if}
			</div>

			<!-- <div class="mt-8 rounded-2xl bg-white/80 p-5 ring-1 ring-black/5">
				<p class="text-sm text-(--text)">
					Quer que essa notícia puxe conteúdo de um banco? A UI já está pronta — é só trocar a fonte de dados.
				</p>
			</div> -->
		</div>
	</section>
</main>

