---
const steps = [
	{
		n: '01',
		title: 'Deck erstellen oder importieren',
		body: 'Leg ein neues Deck an und füge Karten über das Web-Interface hinzu — oder importiere deine bestehenden Anki-Decks direkt als .apkg-Datei. Decks aus der Bibliothek mit einem Klick übernehmen.',
	},
	{
		n: '02',
		title: 'Karten anlegen',
		body: 'Wähle den passenden Kartentyp und füll die Felder aus. Für Multiple-Choice-Karten zieht das System automatisch passende Distractors aus dem restlichen Deck — du gibst nur die richtige Antwort vor.',
	},
	{
		n: '03',
		title: 'Täglich kurz lernen',
		body: 'Der FSRS-Algorithmus berechnet für jede Karte den optimalen Wiederholungszeitpunkt. Du bewertest dich selbst (Nochmal / Schwer / Gut / Leicht) — damit kalibriert sich das System auf deinen persönlichen Vergessenskurve.',
	},
] as const;
---
<section class="border-b border-rule bg-white py-20 sm:py-28">
	<div class="mx-auto max-w-content px-6">
		<p class="section-label">So funktioniert's</p>
		<h2 class="mt-3 font-serif text-display text-ink">In drei Schritten zur täglichen Praxis.</h2>

		<div class="mt-12 grid gap-10 sm:grid-cols-3">
			{steps.map((s) => (
				<div>
					<span class="font-serif text-4xl font-bold text-rule">{s.n}</span>
					<h3 class="mt-4 font-semibold text-ink">{s.title}</h3>
					<p class="mt-2 text-sm leading-relaxed text-muted">{s.body}</p>
				</div>
			))}
		</div>
	</div>
</section>