<script lang="ts">
	import ProgramCard from '$lib/components/ProgramCard.svelte';
	import { programs } from '$lib/data/programs';
</script>

<svelte:head>
	<title>Secretaria de Esportes de Pernambuco</title>
	<meta
		name="description"
		content="Página institucional da Secretaria de Esportes de Pernambuco (SESP-PE) com acesso aos programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco."
	/>
</svelte:head>

<div class="min-h-dvh 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="min-w-0">
				<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
					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>
				<p class="mt-1 text-sm text-(--text)">
					Informações e acesso rápido aos programas institucionais.
				</p>
			</div>

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

	<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
		<section class="overflow-hidden rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-10">
			<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
				<div class="max-w-3xl">
					<h2 class="text-2xl font-bold tracking-tight text-(--text-strong) sm:text-3xl">
						Programas da Secretaria
					</h2>
					<p class="mt-2 text-base leading-relaxed text-(--text)">
						Selecione um programa para acessar a página com os links oficiais de <strong>inscrição</strong> e
						<strong>edital</strong>.
					</p>
				</div>
				<div class="flex flex-wrap gap-2">
					<span class="pill">Links oficiais</span>
					<span class="pill">Inscrição e edital</span>
					<span class="pill">Nova aba</span>
				</div>
			</div>

			<div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
				{#each programs as program (program.id)}
					<ProgramCard {program} />
				{/each}
			</div>
		</section>

		<section class="mt-10 grid gap-4 md:grid-cols-2">
			<div class="rounded-2xl bg-white/80 p-6 ring-1 ring-black/5">
				<h3 class="text-base font-bold text-(--text-strong)">Como participar</h3>
				<ul class="mt-3 space-y-2 text-sm text-(--text)">
					<li class="flex gap-2">
						<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">1.</span>
						<span>Escolha o programa e leia o edital.</span>
					</li>
					<li class="flex gap-2">
						<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">2.</span>
						<span>Realize a inscrição no formulário oficial.</span>
					</li>
					<li class="flex gap-2">
						<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">3.</span>
						<span>Acompanhe comunicados e prazos conforme o edital.</span>
					</li>
				</ul>
			</div>

			<div class="rounded-2xl bg-white/80 p-6 ring-1 ring-black/5">
				<h3 class="text-base font-bold text-(--text-strong)">Atendimento e transparência</h3>
				<p class="mt-3 text-sm leading-relaxed text-(--text)">
					Esta página reúne acessos para facilitar a participação. Para regras, documentos exigidos e
					cronogramas, consulte sempre o <strong>edital</strong> do programa.
				</p>
			</div>
		</section>
	</main>

	<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 • Programas oficiais</p>
				</div>
			</div>

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