import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import BrushStroke from "@/components/ui/BrushStroke";
import ScrollReveal from "@/components/ui/ScrollReveal";

export const metadata: Metadata = {
  title: "Kihon — Grundschule des Shotokan",
  description:
    "Kihon: die Grundtechniken des Shotokan-Karate — Stände, Blocks, Stösse und Tritte nach JKA-Standard.",
};

type TechniqueRow = { japanese: string; german: string };

const stande: TechniqueRow[] = [
  { japanese: "Zenkutsu-dachi", german: "Langer Vorwärtsstand (ca. 60/40 Gewichtsverteilung)" },
  { japanese: "Kokutsu-dachi", german: "Rückwärtsstand (ca. 30/70 Gewichtsverteilung)" },
  { japanese: "Kiba-dachi", german: "Grätschstand / Reiterstand" },
  { japanese: "Fudo-dachi", german: "Naturstand (gefestigter Stand)" },
  { japanese: "Heisoku-dachi", german: "Geschlossener Stand (Füsse zusammen)" },
  { japanese: "Musubi-dachi", german: "Fersen zusammen, Fussspitzen 45° nach aussen" },
  { japanese: "Heiko-dachi", german: "Paralleler Stand, schulterbreit" },
];

const blocks: TechniqueRow[] = [
  { japanese: "Gedan-barai", german: "Tiefblock — Abwehr unterer Angriffe" },
  { japanese: "Age-uke", german: "Aufwärtsblock — Abwehr hoher Angriffe" },
  { japanese: "Soto-uke", german: "Aussenblock — von aussen nach innen" },
  { japanese: "Uchi-uke", german: "Innenblock — von innen nach aussen" },
  { japanese: "Shuto-uke", german: "Schwerthandblock — mit der Handkante" },
];

const tsukiUchi: TechniqueRow[] = [
  { japanese: "Oi-zuki", german: "Gleichschrittiger Stoss (mit dem vorderen Arm vorwärtsschreitend)" },
  { japanese: "Gyaku-zuki", german: "Gegenseitiger Stoss (mit dem hinteren Arm)" },
  { japanese: "Kizami-zuki", german: "Jab — schneller Stoss mit dem vorderen Arm" },
  { japanese: "Uraken-uchi", german: "Schlag mit dem Rücken der Faust" },
  { japanese: "Shuto-uchi", german: "Schwerthandschlag — mit der Handkante" },
  { japanese: "Empi-uchi", german: "Ellbogenstoss — kurz und explosiv" },
];

const keri: TechniqueRow[] = [
  { japanese: "Mae-geri", german: "Fronttritt — gerade nach vorne (keage: Hebetritt / kekomi: Stossvariante)" },
  { japanese: "Yoko-geri keage", german: "Seitwärtshebetritt — nach aussen oben" },
  { japanese: "Yoko-geri kekomi", german: "Seitlicher Stossvariante — mit der Ferse" },
  { japanese: "Mawashi-geri", german: "Rundtritt — bogenförmig von aussen" },
  { japanese: "Ushiro-geri", german: "Rückwärtsstossvariante — mit der Ferse nach hinten" },
];

function TechniqueTable({
  title,
  subtitle,
  rows,
  delayMs = 0,
}: {
  title: string;
  subtitle: string;
  rows: TechniqueRow[];
  delayMs?: number;
}) {
  return (
    <ScrollReveal delayMs={delayMs}>
      <div className="rounded-lg border border-gray-200 overflow-hidden">
        <div className="bg-secondary px-4 py-3">
          <h2 className="font-display text-lg text-cream">{title}</h2>
          <p className="text-xs text-gray-400 mt-0.5">{subtitle}</p>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[480px] text-left text-sm">
            <thead className="bg-gray-100 text-xs uppercase tracking-wide text-gray-700">
              <tr>
                <th className="px-4 py-2 w-2/5">Japanisch</th>
                <th className="px-4 py-2">Deutsch / Beschreibung</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr
                  key={row.japanese}
                  className={`border-t border-gray-200 ${
                    i % 2 === 0 ? "bg-white" : "bg-cream"
                  }`}
                >
                  <td className="px-4 py-3 font-medium text-secondary whitespace-nowrap">
                    {row.japanese}
                  </td>
                  <td className="px-4 py-3 text-gray-700">{row.german}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </ScrollReveal>
  );
}

export default function KihonPage() {
  return (
    <div className="mx-auto max-w-content px-6 py-section">
      {/* Heading */}
      <h1 className="font-display text-section-title leading-tight text-secondary">
        Kihon
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        基本 · Die Grundtechniken des Shotokan-Karate
      </p>
      <BrushStroke />

      {/* Intro */}
      <div className="max-w-2xl space-y-5 text-base leading-relaxed text-gray-700">
        <p>
          „Kihon" (基本) bedeutet auf Japanisch „Grundlage" oder „Basis". Im
          Karate bezeichnet es das isolierte Üben einzelner Techniken — Stände,
          Blocks, Stösse, Schläge und Tritte — bis sie zur zweiten Natur werden.
          Kihon ist die erste der drei Säulen des Karate-Trainings, auf der Kata
          und Kumite aufbauen.
        </p>
        <p>
          Das Besondere am Kihon-Training im Shotokan: Es geht nicht um blosse
          Wiederholung, sondern um die kompromisslose Qualität jeder einzelnen
          Ausführung. Korrekte Hüftarbeit (<span className="italic">koshi no kaiten</span>),
          optimale Spannung und Entspannung (<span className="italic">kime</span>) und präzise
          Atemtechnik (<span className="italic">kokyu</span>) werden mit jeder Wiederholung tiefer
          verankert.
        </p>
      </div>

      {/* Training photo + video side by side */}
      <div className="my-10 grid gap-6 md:grid-cols-2 max-w-4xl">
        <div className="overflow-hidden rounded-lg">
          <Image
            src="/images/club/DSCF0286-1024x683-640x480.jpg"
            alt="Kihon-Training beim JKA-Karateclub Arbon"
            width={640}
            height={480}
            className="w-full object-cover"
          />
        </div>
        <div className="aspect-video overflow-hidden rounded-lg shadow-sm">
          <iframe
            src="https://www.youtube.com/embed/fhRJXLEKI9U"
            title="Kihon — Grundtechniken des Karate"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            className="w-full h-full"
          />
        </div>
      </div>

      {/* Technique tables */}
      <div className="max-w-3xl space-y-6">
        <TechniqueTable
          title="Stände (Dachi)"
          subtitle="Die Basis — Stabilität und Mobilität"
          rows={stande}
          delayMs={0}
        />
        <TechniqueTable
          title="Blocktechniken (Uke-waza)"
          subtitle="Abwehr von Angriffen auf verschiedene Körperzonen"
          rows={blocks}
          delayMs={80}
        />
        <TechniqueTable
          title="Stoss- und Schlagtechniken (Tsuki / Uchi)"
          subtitle="Angriffstechniken mit Faust, Handkante und Ellbogen"
          rows={tsukiUchi}
          delayMs={160}
        />
        <TechniqueTable
          title="Tritte (Keri-waza)"
          subtitle="Bein- und Fusstechniken"
          rows={keri}
          delayMs={240}
        />
      </div>

      {/* Kihon in training */}
      <ScrollReveal delayMs={0}>
        <div className="mt-10 max-w-2xl rounded-lg bg-cream border border-gray-200 p-6">
          <h2 className="font-display text-2xl text-secondary mb-3">
            Kihon im Training
          </h2>
          <div className="space-y-4 text-sm leading-relaxed text-gray-700">
            <p>
              <span className="font-semibold text-secondary">Reihenkihon</span> —
              Techniken werden in Linien durch die Trainingshalle ausgeführt, oft
              kombiniert: z. B. drei Oi-zuki vorwärts, drehen, Gedan-barai,
              weitergehen. Diese Form schult Bewegungsfluss, Gleichgewicht in der
              Fortbewegung und Ausdauer.
            </p>
            <p>
              <span className="font-semibold text-secondary">Stationäres Kihon</span> —
              Einzelne Techniken werden auf der Stelle in hoher Wiederholungszahl
              geübt, oft mit Fokus auf korrekte Hüftrotation und Kime. Ideal für
              die Vertiefung von Qualitätsdetails.
            </p>
            <p>
              <span className="font-semibold text-secondary">Partner-Kihon</span> —
              Grundschulkampf mit festgelegtem Ablauf (z. B. Sanbon-kumite,
              Gohon-kumite). Der Angriff ist definiert, die Abwehr klar — so
              werden Distanz und Timing unter realistischen Bedingungen trainiert.
            </p>
          </div>
        </div>
      </ScrollReveal>

      {/* JKA note */}
      <p className="mt-10 max-w-2xl text-sm leading-relaxed text-gray-700 border-l-4 border-primary pl-4">
        Im JKA-Karateclub Arbon wird Kihon nach den Richtlinien der Japan
        Karate Association unterrichtet. Die technischen Standards der JKA
        gelten weltweit als Massstab für korrektes Shotokan-Karate.
      </p>

      {/* CTA */}
      <Link
        href="/kontakt#kontakt-formular"
        className="mt-10 inline-block rounded bg-primary px-8 py-3.5 font-semibold text-cream transition-colors duration-fast hover:bg-primary-light"
      >
        Komm zum Probetraining
      </Link>
    </div>
  );
}