sesp-site/src/lib/components/ProgramPage.svelte

<script lang="ts">
	import { enrollment2026 } from '$lib/data/programs';
	import type { Program } from '$lib/data/programs';

	type Props = {
		program: Program;
	};

	const { program }: Props = $props();

	const accentBgByAccent = {
		blue: 'from-[color:var(--accent-blue)]/12',
		yellow: 'from-[color:var(--accent-yellow)]/14',
		green: 'from-[color:var(--accent-green)]/12',
		red: 'from-[color:var(--accent-red)]/12'
	} as const;

	const accentButtonByAccent = {
		blue: 'bg-[color:var(--accent-blue)] hover:bg-[color:var(--accent-blue)]/90 focus-visible:ring-[color:var(--accent-blue)]',
		yellow:
			'bg-[color:var(--accent-yellow)] text-slate-900 hover:bg-[color:var(--accent-yellow)]/90 focus-visible:ring-[color:var(--accent-yellow)]',
		green: 'bg-[color:var(--accent-green)] hover:bg-[color:var(--accent-green)]/90 focus-visible:ring-[color:var(--accent-green)]',
		red: 'bg-[color:var(--accent-red)] hover:bg-[color:var(--accent-red)]/90 focus-visible:ring-[color:var(--accent-red)]'
	} as const;
</script>

<svelte:head>
	<title>{program.name} | Secretaria de Esportes de Pernambuco</title>
	<meta name="description" content={program.shortDescription} />
</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={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`}
		>
			<div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
				<div class="min-w-0">
					<div class="flex items-center gap-4">
						<div
							class="grid h-16 w-16 place-items-center rounded-lg bg-white/90 ring-1 ring-black/5"
						>
							<img
								src={program.brandImageSrc}
								alt={`Logomarca ${program.name}`}
								class="h-11 w-11 object-contain"
								loading="eager"
								decoding="async"
							/>
						</div>
						<div>
							<h1 class="text-2xl font-bold tracking-tight text-(--text-strong) sm:text-3xl">
								{program.name}
							</h1>
							<p class="mt-1 text-sm text-(--text)">{program.shortDescription}</p>
						</div>
					</div>

					<p class="mt-6 max-w-3xl text-base leading-relaxed text-(--text)">
						{program.longDescription}
					</p>

					<div class="mt-6 grid gap-3 sm:grid-cols-2">
						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
								Inscrições 2026
							</p>
							<p class="mt-2 text-sm text-(--text)">
								De <strong>{enrollment2026.start}</strong> até <strong>{enrollment2026.end}</strong>.
							</p>
							<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
						</div>

						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
							<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
						</div>
					</div>

					<div class="mt-3 grid gap-3 sm:grid-cols-2">
						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
								Como funciona
							</p>
							<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
						</div>

						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
								Benefícios
							</p>
							<ul class="mt-2 space-y-2 text-sm text-(--text)">
								{#each program.benefits as item (item)}
									<li class="flex gap-2">
										<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">•</span>
										<span>{item}</span>
									</li>
								{/each}
							</ul>
						</div>
					</div>
				</div>

				<div class="flex w-full flex-col gap-3 md:w-auto md:min-w-[240px]">
					<a
						href={program.signupUrl}
						target="_blank"
						rel="noopener noreferrer"
						class={`inline-flex items-center justify-center gap-2 rounded-md px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
					>
						Inscrição
						<span aria-hidden="true">↗</span>
					</a>

					<a
						href={program.editalUrl}
						target="_blank"
						rel="noopener noreferrer"
						class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
					>
						Edital
						<span aria-hidden="true">↗</span>
					</a>

					<p class="text-center text-xs text-(--text-muted)">
						Os links serão abertos em nova aba.
					</p>
				</div>
			</div>
		</div>
	</section>
</main>