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: "Karate Katas — Shotokan",
  description:
    "Die Katas des Shotokan-Karate: von den Heian-Formen für Anfänger bis zu den fortgeschrittenen Katas nach JKA-Richtlinien.",
};

type KataEntry = { name: string; searchQuery: string };

const heianSerie: KataEntry[] = [
  { name: "Heian Shodan", searchQuery: "JKA Heian Shodan kata demonstration" },
  { name: "Heian Nidan", searchQuery: "JKA Heian Nidan kata demonstration" },
  { name: "Heian Sandan", searchQuery: "JKA Heian Sandan kata demonstration" },
  { name: "Heian Yondan", searchQuery: "JKA Heian Yondan kata demonstration" },
  { name: "Heian Godan", searchQuery: "JKA Heian Godan kata demonstration" },
];

const tekkiSerie: KataEntry[] = [
  { name: "Tekki Shodan", searchQuery: "JKA Tekki Shodan kata demonstration" },
  { name: "Tekki Nidan", searchQuery: "JKA Tekki Nidan kata demonstration" },
  { name: "Tekki Sandan", searchQuery: "JKA Tekki Sandan kata demonstration" },
];

const fortgeschritteneKatas: KataEntry[] = [
  { name: "Bassai Dai", searchQuery: "JKA Bassai Dai kata demonstration" },
  { name: "Kanku Dai", searchQuery: "JKA Kanku Dai kata demonstration" },
  { name: "Empi", searchQuery: "JKA Empi kata demonstration shotokan" },
  { name: "Jion", searchQuery: "JKA Jion kata demonstration" },
  { name: "Hangetsu", searchQuery: "JKA Hangetsu kata demonstration" },
  { name: "Jitte", searchQuery: "JKA Jitte kata demonstration shotokan" },
  { name: "Gankaku", searchQuery: "JKA Gankaku kata demonstration" },
  { name: "Sochin", searchQuery: "JKA Sochin kata demonstration" },
  { name: "Niju Shiho", searchQuery: "JKA Nijushiho kata demonstration" },
  { name: "Bassai Sho", searchQuery: "JKA Bassai Sho kata demonstration" },
  { name: "Kanku Sho", searchQuery: "JKA Kanku Sho kata demonstration" },
  { name: "Chinte", searchQuery: "JKA Chinte kata demonstration" },
  { name: "Meikyo", searchQuery: "JKA Meikyo kata demonstration shotokan" },
  { name: "Unsu", searchQuery: "JKA Unsu kata demonstration" },
  { name: "Gojushiho Dai", searchQuery: "JKA Gojushiho Dai kata demonstration" },
  { name: "Gojushiho Sho", searchQuery: "JKA Gojushiho Sho kata demonstration" },
  { name: "Nijushiho", searchQuery: "JKA Nijushiho kata demonstration" },
  { name: "Wankan", searchQuery: "JKA Wankan kata demonstration shotokan" },
];

function youtubeSearchUrl(query: string) {
  return `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;
}

function PlayIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5 ml-1 inline-block align-middle" aria-hidden="true">
      <path d="M6.3 2.84A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.27l9.344-5.891a1.5 1.5 0 000-2.538L6.3 2.84z" />
    </svg>
  );
}

export default function KatasPage() {
  return (
    <div className="mx-auto max-w-content px-6 py-section">
      {/* Heading */}
      <h1 className="font-display text-section-title leading-tight text-secondary">
        Karate Katas
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Die Formen des Shotokan — lebendiges Lehrbuch der Kampfkunst
      </p>
      <BrushStroke />

      {/* Intro */}
      <div className="max-w-2xl space-y-5 text-base leading-relaxed text-gray-700">
        <p>
          Eine Kata ist ein festgelegter Bewegungsablauf, der einen Kampf gegen
          mehrere imaginäre Gegner darstellt. Jede Bewegung, jeder Stand und
          jede Technik ist durchdacht und überliefert — Kata ist das lebendige
          Lehrbuch des Karate, in dem die Meister vergangener Generationen ihr
          Wissen kodiert haben.
        </p>
        <p>
          Im Shotokan-Karate umfasst das Kata-Repertoire 26 Formen, die auf
          Gichin Funakoshi zurückgehen und später von Masatoshi Nakayama und der
          Japan Karate Association (JKA) systematisch verfeinert wurden. Das
          Spektrum reicht von den zugänglichen Heian-Formen für Anfänger bis zu
          den anspruchsvollen fortgeschrittenen Katas, deren Beherrschung Jahre
          intensiven Trainings erfordert.
        </p>
      </div>

      {/* Training photo + video */}
      <div className="my-10 grid gap-6 max-w-3xl sm:grid-cols-2">
        <div className="overflow-hidden rounded-lg">
          <Image
            src="/images/club/DSCF0297-1024x683-640x480.jpg"
            alt="Katatraining beim JKA-Karateclub Arbon"
            width={640}
            height={480}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="overflow-hidden rounded-lg shadow-sm">
          <div className="aspect-video w-full">
            <iframe
              src="https://www.youtube.com/embed/OztWOFMSNbo"
              title="Team Kata + Bunkai Unsu — Japan, Finale 21. WKF World Karate Championships"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="w-full h-full"
            />
          </div>
        </div>
      </div>

      <p className="mb-6 max-w-2xl text-sm text-gray-500 italic">
        Klicke bei jeder Kata auf «Demo ansehen» um den Bewegungsablauf direkt auf YouTube zu sehen.
      </p>

      {/* Kata groups */}
      <div className="mt-2 space-y-8 max-w-3xl">

        {/* Heian-Serie */}
        <ScrollReveal>
          <div className="rounded-lg bg-cream border border-gray-200 p-6">
            <h2 className="font-display text-2xl text-secondary mb-1">
              Heian-Serie
            </h2>
            <p className="text-sm text-primary font-semibold mb-3 uppercase tracking-wide">
              5 Katas · Für Anfänger und Kyu-Grade
            </p>
            <p className="text-sm leading-relaxed text-gray-700 mb-4">
              Die fünf Heian-Katas (平安, „Frieden und Wohlbefinden") bilden das
              Fundament des Shotokan-Kata-Systems. Sie wurden von Meister
              Funakoshi so konzipiert, dass Anfänger die wichtigsten Techniken,
              Stände und Richtungswechsel systematisch erlernen. Das Bestehen der
              Kyu-Prüfungen ist direkt mit dem Beherrschen dieser Formen
              verbunden.
            </p>
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {heianSerie.map((kata) => (
                <li key={kata.name}>
                  <a
                    href={youtubeSearchUrl(kata.searchQuery)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between rounded bg-white border border-gray-200 px-3 py-2.5 text-sm font-medium text-secondary hover:border-primary hover:text-primary transition-colors duration-fast group"
                  >
                    <span>{kata.name}</span>
                    <span className="text-xs text-gray-400 group-hover:text-primary transition-colors whitespace-nowrap ml-2">
                      Demo ansehen <PlayIcon />
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </ScrollReveal>

        {/* Tekki-Serie */}
        <ScrollReveal delayMs={80}>
          <div className="rounded-lg bg-white border border-gray-200 p-6 shadow-sm">
            <h2 className="font-display text-2xl text-secondary mb-1">
              Tekki-Serie
            </h2>
            <p className="text-sm text-primary font-semibold mb-3 uppercase tracking-wide">
              3 Katas · Fortgeschrittene Kyu-Grade
            </p>
            <p className="text-sm leading-relaxed text-gray-700 mb-4">
              Die Tekki-Katas (鉄騎, „Eisernes Reiten") werden ausschliesslich im
              Kiba-dachi (Grätschstand) ausgeführt und bewegen sich lateral —
              links und rechts entlang einer einzigen Linie. Sie schulen
              besonders die Hüftarbeit, die Standfestigkeit und die Kraft kurzer,
              explosiver Techniken. Tekki Shodan wird typischerweise ab dem
              braunen Gurt eingeführt.
            </p>
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {tekkiSerie.map((kata) => (
                <li key={kata.name}>
                  <a
                    href={youtubeSearchUrl(kata.searchQuery)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between rounded bg-cream border border-gray-200 px-3 py-2.5 text-sm font-medium text-secondary hover:border-primary hover:text-primary transition-colors duration-fast group"
                  >
                    <span>{kata.name}</span>
                    <span className="text-xs text-gray-400 group-hover:text-primary transition-colors whitespace-nowrap ml-2">
                      Demo ansehen <PlayIcon />
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </ScrollReveal>

        {/* Fortgeschrittene Katas */}
        <ScrollReveal delayMs={160}>
          <div className="rounded-lg bg-gray-100 border border-gray-200 p-6">
            <h2 className="font-display text-2xl text-secondary mb-1">
              Fortgeschrittene Katas
            </h2>
            <p className="text-sm text-primary font-semibold mb-3 uppercase tracking-wide">
              18 Katas · Ab Dan-Niveau und höhere Kyu-Grade
            </p>
            <p className="text-sm leading-relaxed text-gray-700 mb-4">
              Die fortgeschrittenen Shotokan-Katas verlangen eine tiefgreifende
              Beherrschung aller Grundtechniken. Viele dieser Formen haben
              Wurzeln in okinawanischen und chinesischen Kampfkünsten und wurden
              von der JKA kodifiziert. Sie unterscheiden sich stark in Charakter,
              Rhythmus und Tempo — von der kraftvollen Bassai Dai bis zur
              technisch anspruchsvollsten aller Shotokan-Katas, der Unsu.
            </p>
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {fortgeschritteneKatas.map((kata) => (
                <li key={kata.name}>
                  <a
                    href={youtubeSearchUrl(kata.searchQuery)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between rounded bg-white border border-gray-200 px-3 py-2.5 text-sm font-medium text-secondary hover:border-primary hover:text-primary transition-colors duration-fast group"
                  >
                    <span>{kata.name}</span>
                    <span className="text-xs text-gray-400 group-hover:text-primary transition-colors whitespace-nowrap ml-2">
                      Demo ansehen <PlayIcon />
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </ScrollReveal>
      </div>

      {/* JKA note */}
      <p className="mt-10 max-w-2xl text-sm leading-relaxed text-gray-700 border-l-4 border-primary pl-4">
        Im Training des Shotokan Karate Club Arbon werden die Katas nach den
        Richtlinien der Japan Karate Association (JKA) unterrichtet — der
        weltweit führenden Shotokan-Organisation mit Sitz in Tokio.
      </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>
  );
}