import type { Metadata } from "next";
import BrushStroke from "@/components/ui/BrushStroke";
import ContactForm from "@/components/ui/ContactForm";
import { siteConfig } from "@/lib/site-config";
import { store } from "@/lib/store";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Kontakt & Anfahrt",
  description:
    "Kontaktiere den JKA-Karateclub Arbon oder komm zu einem Probetraining. Trainingshalle im Bergli-Quartier, 9320 Arbon.",
};

const mapsSrc = `https://maps.google.com/maps?q=${encodeURIComponent(
  `${siteConfig.address.street ?? siteConfig.address.building}, ${siteConfig.address.zip} ${siteConfig.address.city}`
)}&output=embed`;

const TAG_ORDER = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"];

export default function KontaktPage() {
  const sessions = store.trainingSessions.read()
    .filter((s) => s.aktiv)
    .sort((a, b) => TAG_ORDER.indexOf(a.tag) - TAG_ORDER.indexOf(b.tag));

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">Kontakt &amp; Anfahrt</h1>
      <BrushStroke />
      <p className="max-w-2xl text-base leading-relaxed text-gray-700">
        Du hast eine Frage oder möchtest zu einem Probetraining vorbeikommen? Schreib uns über das Formular oder
        komm einfach zu einer Trainingszeit vorbei — wir freuen uns auf dich.
      </p>

      <div className="mt-10 grid gap-12 lg:grid-cols-[1.1fr_0.9fr]">
        <div id="kontakt-formular" className="scroll-mt-24 rounded-lg border border-gray-200 bg-white p-6 sm:p-8">
          <ContactForm />
        </div>

        <div className="space-y-8">
          <div>
            <h2 className="font-display text-xl text-secondary">Adresse</h2>
            <address className="mt-2 space-y-0.5 not-italic text-sm text-gray-700">
              <p>{siteConfig.name}</p>
              <p>{siteConfig.address.building}</p>
              {siteConfig.address.street && <p>{siteConfig.address.street}</p>}
              <p>
                {siteConfig.address.zip} {siteConfig.address.city}, {siteConfig.address.canton === "TG" ? "Thurgau" : siteConfig.address.canton}
              </p>
            </address>
            <p className="mt-3 space-x-3 text-sm text-gray-700">
              <a href={`mailto:${siteConfig.contact.email}`} className="hover:text-primary">
                {siteConfig.contact.email}
              </a>
              <span>·</span>
              <a href={`tel:${siteConfig.contact.phone.replace(/\s/g, "")}`} className="hover:text-primary">
                {siteConfig.contact.phone}
              </a>
            </p>
          </div>

          <div>
            <h2 className="font-display text-xl text-secondary">Trainingszeiten</h2>
            <ul className="mt-2 space-y-1 text-sm text-gray-700">
              {sessions.map((s) => (
                <li key={s.id}>{s.tag}: {s.startTime} – {s.endTime} Uhr ({s.gruppe})</li>
              ))}
            </ul>
            <p className="mt-2 text-xs text-gray-400">
              Kinder-Karate (ab 8 Jahren) findet über {siteConfig.partnerClub.name} in Aadorf statt — siehe{" "}
              <a href={siteConfig.partnerClub.url} target="_blank" rel="noopener noreferrer" className="underline hover:text-primary">
                karate-aadorf.ch
              </a>
              .
            </p>
          </div>

          <div className="overflow-hidden rounded-lg border border-gray-200">
            <iframe
              title="Standort JKA-Karateclub Arbon"
              src={mapsSrc}
              width="100%"
              height="280"
              loading="lazy"
              className="block"
            />
          </div>
        </div>
      </div>
    </div>
  );
}