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

<div class="border-brand-sand rounded-sm border bg-white p-7 shadow-sm">
	<h2 class="mb-3 font-serif text-[22px] font-bold text-ink">
		{m.transcribe_coach_title()}
	</h2>
	<p class="mb-6 font-serif text-[15px] leading-relaxed text-ink-2">
		{m.transcribe_coach_preamble()}
	</p>

	<ol class="m-0 flex list-none flex-col gap-[18px] p-0">
		<!-- Step 1 -->
		<li aria-label="Schritt 1 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
			<span
				aria-hidden="true"
				class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
				>1</span
			>
			<div class="pt-0.5 font-serif text-base leading-snug text-ink">
				<strong>{m.transcribe_coach_step_1_title()}</strong>
				{m.transcribe_coach_step_1_body()}
				<TranscribeDragDemo />
			</div>
		</li>

		<!-- Step 2 -->
		<li aria-label="Schritt 2 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
			<span
				aria-hidden="true"
				class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
				>2</span
			>
			<div class="pt-0.5 font-serif text-base leading-snug text-ink">
				<strong>{m.transcribe_coach_step_2_title()}</strong>
				{m.transcribe_coach_step_2_body()}
			</div>
		</li>

		<!-- Step 3 -->
		<li aria-label="Schritt 3 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
			<span
				aria-hidden="true"
				class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
				>3</span
			>
			<div class="pt-0.5 font-serif text-base leading-snug text-ink">
				<strong>{m.transcribe_coach_step_3_title()}</strong>
			</div>
		</li>
	</ol>

	<div class="border-brand-sand mt-6 flex flex-wrap gap-4 border-t pt-3.5 font-sans text-[13px]">
		<a
			href="https://de.wikipedia.org/wiki/Kurrent"
			target="_blank"
			rel="noopener noreferrer"
			referrerpolicy="no-referrer"
			class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
		>
			{m.transcribe_coach_footer_kurrent()}
			<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
		</a>
		<a
			href="/hilfe/transkription"
			target="_blank"
			rel="noopener noreferrer"
			class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
		>
			{m.transcribe_coach_footer_richtlinien()}
			<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
		</a>
		<p class="w-full text-ink-3 [@media(pointer:coarse)]:hidden">
			{m.transcribe_coach_shortcut_hint_before()}
			<kbd
				class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
				>?</kbd
			>
			{m.transcribe_coach_shortcut_hint_after()}
		</p>
	</div>
</div>
