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

const rules = [
	{
		icon: '❓',
		title: m.richtlinien_rule_unleserlich_title(),
		body: m.richtlinien_rule_unleserlich_body(),
		beispielOutput: '[unleserlich]'
	},
	{
		icon: '✗',
		title: m.richtlinien_rule_durchgestrichen_title(),
		body: m.richtlinien_rule_durchgestrichen_body(),
		beispielOutput: '[durchgestrichen: der Text]'
	},
	{
		icon: 'ſ',
		title: m.richtlinien_rule_langes_s_title(),
		body: m.richtlinien_rule_langes_s_body(),
		beispielOutput: 's'
	},
	{
		icon: '?',
		title: m.richtlinien_rule_name_title(),
		body: m.richtlinien_rule_name_body(),
		beispielOutput: '[Müller?]'
	},
	{
		icon: '💬',
		title: m.richtlinien_rule_dialekt_title(),
		body: m.richtlinien_rule_dialekt_body()
	}
];

const klaerungChips = [
	m.richtlinien_klaer_abkuerzungen(),
	m.richtlinien_klaer_datumsformate(),
	m.richtlinien_klaer_umbrueche(),
	m.richtlinien_klaer_caps()
];
</script>

<svelte:head>
	<title>{m.richtlinien_title()} — Familienarchiv</title>
</svelte:head>

<main class="mx-auto max-w-2xl px-4 py-10 font-serif">
	<!-- Title -->
	<h1 class="mb-4 text-3xl font-bold text-ink">{m.richtlinien_title()}</h1>

	<!-- Intro -->
	<p class="mb-8 text-base leading-relaxed text-ink-2">{m.richtlinien_intro()}</p>

	<!-- Wikipedia info card -->
	<div class="border-brand-sand mb-10 rounded-sm border bg-white p-5 shadow-sm">
		<p class="mb-3 font-sans text-sm text-ink-2">{m.richtlinien_wiki_text()}</p>
		<a
			href="https://de.wikipedia.org/wiki/Kurrent"
			target="_blank"
			rel="noopener noreferrer"
			referrerpolicy="no-referrer"
			class="inline-flex items-center gap-1 font-sans text-sm font-medium text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
		>
			{m.richtlinien_wiki_link()}
			<span class="new-tab ml-1 text-[11px] text-ink-3">({m.common_opens_new_tab()})</span>
		</a>
	</div>

	<!-- Rules section -->
	<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.richtlinien_rules_label()}
	</h2>
	<div class="mb-10 flex flex-col gap-4">
		{#each rules as rule (rule.title)}
			<RichtlinienRuleCard
				icon={rule.icon}
				title={rule.title}
				body={rule.body}
				beispielOutput={rule.beispielOutput}
				beispielLabel={m.richtlinien_beispiel_label()}
			/>
		{/each}
	</div>

	<!-- Noch in Klärung -->
	<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.richtlinien_klaerung_label()}
	</h2>
	<p class="mb-4 font-serif text-sm leading-relaxed text-ink-2">
		{m.richtlinien_klaerung_intro()}
	</p>
	<div class="mb-10 flex flex-wrap gap-2">
		{#each klaerungChips as chip (chip)}
			<span
				class="border-brand-sand rounded-full border bg-white px-3 py-1 font-sans text-xs text-ink-2"
				>{chip}</span
			>
		{/each}
	</div>

	<!-- Closing card -->
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<h3 class="mb-2 font-serif text-lg font-bold text-ink">{m.richtlinien_closing_title()}</h3>
		<p class="font-serif text-sm leading-relaxed text-ink-2">{m.richtlinien_closing_body()}</p>
	</div>
</main>

<style>
@media print {
	:global(.app-nav) {
		display: none;
	}

	.new-tab {
		display: none;
	}

	@page {
		margin: 1.5cm;
	}
}
</style>
