import type { Metadata } from "next";
import Image from "next/image";
import BrushStroke from "@/components/ui/BrushStroke";
import { store } from "@/lib/store";

export const metadata: Metadata = {
  title: "Fotos – JKA-Karateclub Arbon",
  description:
    "Eindrücke aus dem Training und von Wettkämpfen des JKA-Karateclub Arbon — Shotokan-Karate in Arbon am Bodensee.",
};

export const dynamic = "force-dynamic";

export default async function FotosPage() {
  const photos = (await store.photos.read()).sort((a, b) => a.order - b.order);

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">Fotos</h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Eindrücke aus Training und Wettkampf
      </p>
      <BrushStroke />

      <p className="mb-10 max-w-2xl text-base leading-relaxed text-gray-700">
        Eindrücke aus dem Training und von Wettkämpfen des JKA-Karateclub Arbon — traditionelles
        Shotokan-Karate am Bodensee, von den Anfängen bis heute.
      </p>

      <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
        {photos.map((photo) => (
          <figure
            key={photo.id}
            className="mb-4 break-inside-avoid overflow-hidden rounded-lg"
          >
            <Image
              src={photo.src}
              alt={photo.alt}
              width={photo.width}
              height={photo.height}
              className="w-full object-cover"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            />
            {photo.caption && (
              <figcaption className="bg-secondary/80 px-3 py-1.5 text-xs text-cream/90 italic">
                {photo.caption}
              </figcaption>
            )}
          </figure>
        ))}
      </div>
    </div>
  );
}