<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
</script>

<div class="mx-auto max-w-4xl px-4 py-10">
	<div
		class="flex flex-col items-center justify-center rounded-sm border border-line bg-surface py-20 text-center shadow-sm"
	>
		<img
			src="/degruyter-icons/Simple/Large-32px/SVG/Action/Check/Check-Double-LG.svg"
			alt=""
			aria-hidden="true"
			class="mb-6 h-16 w-16"
		/>

		<h1 class="font-serif text-2xl font-medium text-ink">
			{m.enrich_done_heading()}
		</h1>

		<p class="mt-2 max-w-xs font-sans text-sm text-ink-2">
			{m.enrich_done_body()}
		</p>

		<div class="mt-8 flex flex-col items-center gap-4">
			<a
				href="/"
				class="bg-primary px-6 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
			>
				{m.btn_back_to_overview()}
			</a>

			<a
				href="/enrich"
				class="font-sans text-xs text-ink-2 transition-colors hover:text-ink hover:underline"
			>
				{m.enrich_back_to_list()}
			</a>
		</div>
	</div>
</div>
