import type { Metadata } from "next";
import Image from "next/image";
import BrushStroke from "@/components/ui/BrushStroke";
import DokumenteDownloads from "@/components/ui/DokumenteDownloads";
import { beltGrades } from "@/lib/seed-data";

export const metadata: Metadata = {
  title: "Gürtelgrade & Prüfungssystem",
  description:
    "Das Kyu und Dan System im Shotokan: alle Gürtelgrade vom Weissgurt bis zum Schwarzgurt mit Mindesttrainingszeiten.",
};

export default function PruefungenPage() {
  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">Gürtelgrade &amp; Prüfungssystem</h1>
      <BrushStroke />

      <p className="max-w-2xl text-base leading-relaxed text-gray-700">
        Im Karate wird der Ausbildungsstand durch die Farbe des Gürtels (Obi) sichtbar gemacht. Das System kennt
        zwei Stufen: die Schülergrade (Kyu) und die Meistergrade (Dan). Die Kyu Grade zählen absteigend — man
        beginnt als Anfänger mit dem 9. Kyu und arbeitet sich Grad für Grad bis zum 1. Kyu (Braungurt) hoch. Danach
        beginnen die Dan Grade, die aufsteigend zählen: Der 1. Dan (Shodan) ist der erste Schwarzgurt und zugleich
        der Beginn eines neuen Wegs — &bdquo;Shodan&ldquo; heisst wörtlich &bdquo;Anfangsstufe&ldquo;. In einer Prüfung (Kyū Shinsa) zeigen
        die Karateka vor einer Prüfungskommission ihr Können in Kihon (Grundschule), Kata (Formen) und Kumite
        (Partnerkampf). Zwischen den Prüfungen gilt jeweils eine Mindesttrainingszeit, denn im Shotokan zählt
        Reife vor Tempo.
      </p>

      <div className="mt-8 overflow-x-auto rounded-lg border border-gray-200">
        <table className="w-full min-w-[640px] text-left text-sm">
          <thead className="bg-gray-100 text-xs uppercase tracking-wide text-gray-700">
            <tr>
              <th className="px-4 py-3">Gürtel</th>
              <th className="px-4 py-3">Japanisch</th>
              <th className="px-4 py-3">Deutsch</th>
              <th className="px-4 py-3">Grad</th>
              <th className="px-4 py-3">Mindesttrainingszeit</th>
            </tr>
          </thead>
          <tbody>
            {beltGrades.map((g) => (
              <tr key={g.id} className="border-t border-gray-200">
                <td className="px-4 py-4">
                  {g.iconUrl ? (
                    <Image src={g.iconUrl} alt="" width={44} height={36} className="h-9 w-11 object-contain" />
                  ) : (
                    <span
                      className="inline-block h-4 w-9 rounded-sm border border-black/10"
                      style={{ backgroundColor: `var(${g.colorVar})` }}
                      aria-hidden="true"
                    />
                  )}
                </td>
                <td className="px-4 py-4">
                  {g.japanisch} ({g.kanji})
                </td>
                <td className="px-4 py-4 font-medium text-secondary">{g.deutsch}</td>
                <td className="px-4 py-4">{g.grad}</td>
                <td className="px-4 py-4 text-gray-700">{g.mindestzeit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <p className="mt-4 max-w-2xl text-xs text-gray-400">
        Die angegebenen Mindestzeiten sind Richtwerte bei regelmässigem Training (ca. 1–2× pro Woche). Massgebend
        ist immer der tatsächliche Ausbildungsstand.
      </p>

      <p className="mt-8 max-w-2xl text-base leading-relaxed text-gray-700">
        Prüfungen finden bei uns mehrmals pro Jahr statt, meist am Ende eines Trainingsabschnitts. Dein Trainer
        meldet dich an, wenn du bereit bist. Prüfungsgebühr und neue Lizenzmarke werden über den Verein
        abgerechnet.
      </p>

      <BrushStroke className="mt-14" />
      <DokumenteDownloads />
    </div>
  );
}