import type { Metadata } from "next";
import BrushStroke from "@/components/ui/BrushStroke";
import { dojoKun } from "@/lib/seed-data";

export const metadata: Metadata = {
  title: "Dōjō Kun — Die fünf Grundsätze",
  description:
    "Die fünf Leitsätze des Dōjō Kun nach Gichin Funakoshi: die Grundlage von Charakter und Haltung im Shotokan-Karate.",
};

export default function DojoKunPage() {
  return (
    <div className="bg-secondary py-section text-cream">
      <div className="mx-auto max-w-content px-6">
        <h1 className="font-display text-section-title leading-tight">Dōjō Kun</h1>
        <p className="mt-2 font-accent text-xl italic text-gray-200">Die fünf Grundsätze des Dojo</p>
        <BrushStroke />

        <p className="max-w-2xl text-base leading-relaxed text-gray-200">
          Am Anfang und am Ende jedes Trainings kniet die Gruppe und spricht gemeinsam das Dōjō Kun — fünf kurze
          Leitsätze, die Gichin Funakoshi überliefert hat. Sie sind kein Ritual um seiner selbst willen, sondern
          eine tägliche Erinnerung daran, worum es im Karate wirklich geht: nicht ums Gewinnen, sondern um die
          Arbeit an sich selbst. Jeder Satz beginnt mit &bdquo;Hitotsu&ldquo; — &bdquo;erstens&ldquo; — denn kein Grundsatz steht über dem
          anderen.
        </p>

        <ol className="mt-10 space-y-6">
          {dojoKun.map((p) => (
            <li
              key={p.nummer}
              className="grid gap-2 rounded-lg border-t-4 border-primary bg-white/8 p-6 sm:grid-cols-[3rem_1fr] sm:items-start"
            >
              <span className="font-display text-3xl text-primary/70">
                {String(p.nummer).padStart(2, "0")}
              </span>
              <div>
                <p className="text-xl text-accent">{p.kanji}</p>
                <p className="text-xs text-gray-400">{p.romaji}</p>
                <p className="mt-2 font-accent text-lg italic text-gray-200">{p.englisch}</p>
                <p className="mt-1 text-sm text-gray-400">{p.deutsch}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </div>
  );
}