Section header

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { SectionHeader } from '@archeblack/ui';
</script>

<!-- El encabezado de «Recientes» en la página de inicio de Hermes: el título y «Ver todo el
     archivo» al final, en el acento. La sección toma su nombre del título (aria-labelledby).
     En una página real el título es un h2 (level por defecto); aquí es h4 porque vive en la documentación. -->
<section data-product="hermes" aria-labelledby="section-recent" style="width: 100%">
	<SectionHeader
		level={4}
		title="Recientes"
		titleId="section-recent"
		href="#publicaciones"
		linkLabel="Ver todo el archivo"
	/>
	<p style="margin: 0; color: var(--arche-color-text-muted)">
		Aquí va la grilla de tarjetas, 24 px debajo del encabezado.
	</p>
</section>

<script lang="ts">
	import { SectionHeader } from '@archeblack/ui';
</script>

<!-- Sin href no hay link: solo la regla y el título, como «Sigue leyendo» al pie de un post.
     Aquí es h4 porque vive en la documentación. -->
<div style="width: 100%">
	<SectionHeader level={4} title="Sigue leyendo" />
</div>

<script lang="ts">
	import { IndexList, IndexListItem, SectionHeader } from '@archeblack/ui';

	// El archivo de Hermes, por año.
	const years = [
		{
			year: '2026',
			posts: [
				{ title: 'El Alma Pide Locura', slug: 'el-alma-pide-locura', date: '2026-07-27T21:45:16Z' },
				{
					title: 'Lo que cambia cuando alguien escucha',
					slug: 'lo-que-cambia-cuando-alguien-escucha',
					date: '2026-05-03T01:33:44Z'
				},
				{
					title: 'El Daimon en la Máquina',
					slug: 'el-daimon-en-la-maquina',
					date: '2026-01-28T12:00:00Z'
				},
				{
					title: 'El Doctor que Bailó con el Tiempo',
					slug: 'el-doctor-que-bailo-con-el-tiempo',
					date: '2026-01-17T12:00:00Z'
				},
				{
					title: 'Lo Numinoso en CONTROL',
					slug: 'lo-numinoso-en-control',
					date: '2026-01-04T12:00:00Z'
				}
			]
		}
	];
</script>

<!-- El archivo por año (D11c): size="lg" pone el año en la voz display fluida del titular (de 44
     a 88 px), con la regla en border-strong y sin conteo. Debajo, las filas de IndexList, con la fecha sin el año.
     En una página real el año es un h2; aquí es h4 porque vive en la documentación. -->
<div style="display: grid; gap: var(--arche-spacing-10); width: 100%">
	{#each years as group (group.year)}
		<section aria-labelledby={`year-${group.year}`}>
			<SectionHeader level={4} size="lg" title={group.year} titleId={`year-${group.year}`} />
			<IndexList>
				{#each group.posts as post (post.slug)}
					<IndexListItem title={post.title} href={`#${post.slug}`} date={post.date} />
				{/each}
			</IndexList>
		</section>
	{/each}
</div>