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

<div class="mx-auto max-w-4xl px-4 py-10">
	<div
		class="border-brand-sand flex flex-col items-center justify-center rounded-sm border bg-white 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-brand-navy">
			{m.enrich_done_heading()}
		</h1>

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

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

			<a
				href="/enrich"
				class="font-sans text-xs text-gray-400 underline-offset-4 transition-colors hover:text-brand-navy hover:underline"
			>
				{m.enrich_back_to_list()}
			</a>
		</div>
	</div>
</div>
