import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { AngebotCard } from "@/components/AngebotCard";
import { CTA } from "@/components/CTA";
import { Reveal } from "@/components/Reveal";
import { getOffers } from "@/lib/payload/content";
import { moodForOffer } from "@/lib/angebote";
import { mediaUrl } from "@/lib/payload/media";
import { buildMetadata } from "@/lib/seo/metadata";
import { siteConfig } from "@/lib/site";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata({
    title: `Singkreise – ${siteConfig.name}`,
    description: "Gemeinsam singen. Verbinden. Heilen. Für Herz und Seele.",
    path: "/angebote/singkreise",
  });
}

export default async function SingkreisePage() {
  const offers = await getOffers();
  const singkreise = offers
    .filter((offer) => offer.category === "singkreise")
    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));

  return (
    <>
      <PageHeader
        eyebrow="Singkreise"
        title="Singkreise – miteinander singen, klingen und sein"
        lead="Gemeinsam singen. Verbinden. Heilen. Für Herz und Seele."
        crumbs={[{ title: "Angebote", href: "/angebote" }, { title: "Singkreise" }]}
      />

      <Section tone="plain">
        <div className="grid gap-6 sm:grid-cols-3">
          {singkreise.map((offer, i) => (
            <Reveal key={offer.slug} delay={i * 0.08}>
              <AngebotCard
                href={`/angebote/${offer.slug}`}
                title={offer.title}
                tagline={offer.shortDescription}
                mood={moodForOffer(offer)}
                imageSrc={mediaUrl(offer.image, "card")}
              />
            </Reveal>
          ))}
        </div>
      </Section>

      <CTA
        title="Deine Stimme erklingen lassen"
        lead="Ob offen für alle, für Schwangere oder für Mamas mit Baby — melde dich, wenn du einen Kreis besuchen möchtest."
      />
    </>
  );
}