<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import { reveal } from '$lib/motion/reveal';
	import { webPage } from '$lib/seo';

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Actualités', path: '/actualites/' }
	];
</script>

<Seo
	title="Actualités"
	description="Communiqués, commémorations et annonces du GONG et de sa mémoire en Guadeloupe."
	path="/actualites/"
	graph={[webPage('/actualites/', 'Actualités du GONG', 'Communiqués et commémorations.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Actualités</h1>

		{#if data.actualites.length}
			<ul class="grille">
				{#each data.actualites as a, i (a.slug)}
					<li>
						<a class="card card--link" href="/actualites/{a.slug}/" use:reveal={i}>
							{#if a.couverture}
								<img class="cover" src={a.couverture} alt={a.couvertureAlt} loading="lazy" decoding="async" />
							{/if}
							<time datetime={a.iso} class="date">{a.date}</time>
							<h2>{a.titre}</h2>
							<p>{a.chapeau}</p>
						</a>
					</li>
				{/each}
			</ul>
		{:else}
			<p class="lecture muted">Aucune actualité pour le moment.</p>
		{/if}
	</div>
</main>

<style>
	.grille {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--space-3);
	}
	.cover {
		width: calc(100% + 2 * var(--space-3));
		margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.date {
		font-size: 0.8rem;
		color: var(--muted-fort);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.grille h2 {
		font-size: 1.2rem;
		text-transform: none;
		margin: 0.3rem 0;
	}
	.grille p {
		color: var(--muted);
		margin: 0;
	}
	.muted {
		color: var(--muted);
	}
</style>
