import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import { Reveal } from "@/components/Reveal";
import type { ImageMood } from "@/lib/angebote";
import { buildMetadata } from "@/lib/seo/metadata";
import { getSiteUrl } from "@/lib/seo/config";
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";

export const dynamic = "force-dynamic";

const DESCRIPTION = "Bildeindrücke aus der Arbeit von Anouma — Natur, Gemeinschaft und gemeinsame Räume.";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata({ title: "Impressionen", description: DESCRIPTION, path: "/impressionen" });
}

const gallery: { mood: ImageMood; label: string; span?: string }[] = [
  { mood: "moss", label: "Wald und Naturverbundenheit", span: "sm:row-span-2" },
  { mood: "rose", label: "Gemeinschaft und Begegnung" },
  { mood: "peach", label: "Schwangerschaft und Wachsen" },
  { mood: "sand", label: "Singen und Klang" },
  { mood: "caramel", label: "Kreativität und Hände", span: "sm:row-span-2" },
  { mood: "dustyrose", label: "Mutter und Kind" },
  { mood: "plum", label: "Stille und Innehalten" },
  { mood: "mauve", label: "Räume der Verbindung" },
];

export default async function ImpressionenPage() {
  const siteUrl = await getSiteUrl();

  return (
    <>
      <JsonLd data={webPageJsonLd({ name: "Impressionen", description: DESCRIPTION, url: `${siteUrl}/impressionen` })} />
      <PageHeader
        eyebrow="Impressionen"
        title="Einblicke in gemeinsame Räume"
        lead="Diese Galerie ist als Platzhalter-System angelegt — echte Fotografien lassen sich hier später direkt einsetzen, ohne das Layout zu verändern."
        crumbs={[{ title: "Impressionen" }]}
      />
      <Section tone="plain">
        <div className="grid auto-rows-[14rem] grid-cols-2 gap-4 sm:grid-cols-4">
          {gallery.map((item, i) => (
            <Reveal key={item.label} delay={Math.min(i * 0.04, 0.3)} className={item.span}>
              <ImagePlaceholder mood={item.mood} label={item.label} shape="soft" className="h-full w-full" />
            </Reveal>
          ))}
        </div>
      </Section>
    </>
  );
}