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";
import { siteConfig } from "@/lib/site-config";
import kumiteIllustration from "@/components/logo2-768x581.jpg";

export const metadata: Metadata = {
  title: "Unser Karate Dojo Arbon – JKA-Karateclub Arbon",
  description:
    "Der JKA-Karateclub Arbon: traditionelles Shotokan-Karate unter der Leitung von Roland Ammermüller, 5. Dan. Mitglied bei SKR, FSK und JKA. Erwachsenentraining, Wettkampf und Selbstverteidigung.",
};

const offerings = [
  "Traditionelles JKA Shotokan Karate",
  "Erwachsenentraining",
  "Wettkampftraining",
  "Aktive Teilnahme an Wettkämpfen",
  "Selbstverteidigungs- und Verhaltenstraining in brenzligen Situationen",
];

const associations = siteConfig.associations;

export default function VereinPage() {
  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">
        Unser Karate Dojo Arbon
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Traditionelles Shotokan-Karate am Bodensee — seit Jahrzehnten
      </p>
      <BrushStroke />

      {/* Intro */}
      <div className="max-w-2xl space-y-5 text-base leading-relaxed text-gray-700">
        <p>
          Wir alle sind in der Lage, Schönheit wahrzunehmen und die Gesetzmässigkeit und Harmonie
          in der Natur und Kunst zu erkennen. Nutzen Sie bitte diese Fähigkeit, in Ihrem Interesse,
          die richtige Karateschule zu wählen. Richtiges traditionelles Karate folgt genau diesen
          Gesetzen.
        </p>
        <p>
          Bewegungen sollen von Schönheit, Eleganz und Geschmeidigkeit geprägt sein. Gutes
          traditionelles Karate ist flexibel, katzenartig, weich und schnell.
        </p>
        <p>
          Das Netz und die Turnhallen sind leider voll von sonderbaren Beispielen. Diese Tatsache
          macht es einem Einsteiger nicht leicht, eine gute Wahl zu treffen. Bevor Sie Ihre Wahl
          treffen, vergleichen Sie — wir messen uns gerne.
        </p>
      </div>

      {/* Main photo */}
      <div className="my-10 max-w-2xl overflow-hidden rounded-lg">
        <Image
          src="/images/club/IMG_20220926_204627-1024x768-640x480.jpg"
          alt="Der JKA-Karateclub Arbon nach dem Training"
          width={640}
          height={480}
          className="w-full object-cover"
          priority
        />
      </div>

      <BrushStroke />

      {/* What we offer */}
      <section className="mt-14">
        <ScrollReveal>
          <h2 className="font-display text-3xl text-secondary">Was wir anbieten</h2>
        </ScrollReveal>
        <div className="mt-6 flex items-center justify-between gap-10">
          <ul className="space-y-3">
            {offerings.map((item, i) => (
              <ScrollReveal key={item} delayMs={i * 60}>
                <li className="flex items-start gap-3 text-base leading-relaxed text-gray-700">
                  <span
                    className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary"
                    aria-hidden="true"
                  />
                  {item}
                </li>
              </ScrollReveal>
            ))}
          </ul>
          <ScrollReveal delayMs={120} className="hidden md:block ml-auto">
            <Image
              src={kumiteIllustration}
              alt="Karate Kumite — Wettkampf und Sparring"
              width={360}
              height={272}
              className="mix-blend-multiply opacity-70"
              aria-hidden="true"
            />
          </ScrollReveal>
        </div>
      </section>

      <BrushStroke className="mt-14" />

      {/* Verbandsmitgliedschaften */}
      <section className="mt-14">
        <ScrollReveal>
          <h2 className="font-display text-3xl text-secondary">Verbandsmitgliedschaften</h2>
        </ScrollReveal>
        <p className="mb-6 mt-3 max-w-2xl text-base leading-relaxed text-gray-700">
          Der JKA-Karateclub Arbon ist Mitglied in anerkannten nationalen und internationalen
          Karate-Verbänden und garantiert damit eine Ausbildung nach höchsten Standards.
        </p>

        {/* Associations list + SKR logo */}
        <div className="flex flex-wrap items-start gap-8">
          <ul className="space-y-3">
            {associations.map((assoc, i) => (
              <ScrollReveal key={assoc.name} delayMs={i * 60}>
                <li className="flex items-start gap-3 text-base text-gray-700">
                  <span
                    className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-accent"
                    aria-hidden="true"
                  />
                  <a
                    href={assoc.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline hover:text-primary"
                  >
                    {assoc.name}
                  </a>
                </li>
              </ScrollReveal>
            ))}
          </ul>

          {/* SKR Yudanshakai badge */}
          <ScrollReveal delayMs={100}>
            <figure className="flex flex-col items-center gap-2">
              <div className="overflow-hidden rounded-full border-2 border-gray-200">
                <Image
                  src="/images/skr-yudanshakai-logo.jpg"
                  alt="SKR Yudanshakai Logo"
                  width={80}
                  height={80}
                  className="object-cover"
                />
              </div>
              <figcaption className="text-center text-xs text-gray-400 italic leading-snug max-w-[5rem]">
                SKR Yudanshakai
              </figcaption>
            </figure>
          </ScrollReveal>
        </div>
      </section>

      <BrushStroke className="mt-14" />

      {/* Dojoleiter */}
      <section className="mt-14">
        <ScrollReveal>
          <h2 className="font-display text-3xl text-secondary">Dojoleiter</h2>
        </ScrollReveal>

        <div className="mt-8 grid gap-10 md:grid-cols-[auto_1fr] md:items-start">
          {/* Photo */}
          <ScrollReveal>
            <div className="overflow-hidden rounded-lg">
              <Image
                src="/images/club/DSCF0322-1024x683-640x480.jpg"
                alt={`${siteConfig.sensei.name} leitet das Training im JKA-Karateclub Arbon`}
                width={640}
                height={480}
                className="w-full max-w-xs object-cover md:w-64"
              />
            </div>
          </ScrollReveal>

          {/* Bio */}
          <ScrollReveal delayMs={80}>
            <div className="space-y-4 text-base leading-relaxed text-gray-700">
              <div>
                <h3 className="font-display text-2xl text-primary">{siteConfig.sensei.name}</h3>
                <p className="mt-1 font-accent text-base italic text-gray-400">
                  {siteConfig.sensei.grade}
                </p>
              </div>
              <p>
                Roland Ammermüller ist seit Jahrzehnten der Cheftrainer und Dojoleiter des
                JKA-Karateclub Arbon. Als{" "}
                <strong className="text-secondary">Europameister im Kumite</strong> und{" "}
                <strong className="text-secondary">Schweizermeister</strong> sowie{" "}
                <strong className="text-secondary">
                  langjähriges Mitglied der Schweizer Nationalmannschaft
                </strong>{" "}
                blickt er auf eine aussergewöhnliche Karriere im Wettkampfkarate zurück. Als
                ehemaliger{" "}
                <strong className="text-secondary">Schweizer Nationaltrainer FSK</strong> hat er
                massgeblich zur Entwicklung des Shotokan-Karate in der Schweiz beigetragen.
              </p>
              <p>
                Heute gibt er dieses Wissen im Dojo in Arbon weiter — an Anfänger ebenso wie an
                erfahrene Karateka. Sein Unterricht verbindet technische Präzision mit einem
                tiefen Verständnis für die menschliche Seite des Karate: Geduld, Respekt und die
                Bereitschaft, nie aufzuhören zu lernen.
              </p>
              <Link
                href="/verein/trainer-vorstand"
                className="inline-block text-sm font-medium text-primary underline hover:text-primary-light"
              >
                Vollständige Biographie →
              </Link>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* CTA */}
      <div className="mt-16 rounded-lg bg-secondary px-8 py-10 text-center">
        <h3 className="font-display text-2xl text-cream">
          Interesse geweckt?
        </h3>
        <p className="mt-3 text-sm leading-relaxed text-cream/70">
          Erleben Sie das Dojo aus erster Hand — ein kostenloses Probetraining ist jederzeit
          möglich. Kommen Sie einfach vorbei oder nehmen Sie vorab Kontakt auf.
        </p>
        <Link
          href="/kontakt"
          className="mt-6 inline-block rounded bg-primary px-8 py-3.5 font-semibold text-cream transition-colors duration-fast hover:bg-primary-light"
        >
          Kontakt aufnehmen
        </Link>
      </div>
    </div>
  );
}