anouma/app/(frontend)/angebote/[slug]/page.tsx

import type { Metadata } from "next";
import { notFound, permanentRedirect, redirect } from "next/navigation";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import { RichText } from "@/components/RichText";
import { CTA } from "@/components/CTA";
import { BookingWidget } from "@/components/booking/BookingWidget";
import { GroupRegistrationForm } from "@/components/GroupRegistrationForm";
import { getOfferBySlug } from "@/lib/payload/content";
import { moodForOffer } from "@/lib/angebote";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
import { OFFER_CATEGORIES } from "@/collections/Offers";
import { getCurrentCustomer } from "@/lib/auth/customer";
import { getSEOSettingsGlobal } from "@/lib/payload/globals";
import { resolveSeo } from "@/lib/seo/resolve";
import { buildMetadata } from "@/lib/seo/metadata";
import { getSiteUrl } from "@/lib/seo/config";
import { excerptFromRichText } from "@/lib/seo/textExcerpt";
import { JsonLd, serviceJsonLd } from "@/lib/seo/jsonld";
import { resolveRedirect } from "@/lib/seo/redirects";
import { siteConfig } from "@/lib/site";

export const dynamic = "force-dynamic";

type Args = { params: Promise<{ slug: string }> };
const WEEKDAY_LABELS: Record<string, string> = { monday: "Montag", tuesday: "Dienstag", wednesday: "Mittwoch", thursday: "Donnerstag", friday: "Freitag", saturday: "Samstag", sunday: "Sonntag" };

async function resolveOfferOrRedirect(slug: string) {
  const offer = await getOfferBySlug(slug);
  if (offer) return offer;

  const match = await resolveRedirect(`/angebote/${slug}`);
  if (match) {
    if (match.permanent) permanentRedirect(match.to);
    redirect(match.to);
  }
  return null;
}

export async function generateMetadata({ params }: Args): Promise<Metadata> {
  const { slug } = await params;
  const [offer, seoSettings] = await Promise.all([getOfferBySlug(slug), getSEOSettingsGlobal()]);
  if (!offer) return {};

  const resolved = resolveSeo({
    seo: offer.seo,
    fallbackTitle: `${offer.title} – ${siteConfig.name}`,
    fallbackDescription: () => offer.shortDescription,
    fallbackImage: offer.image,
    defaultOgImage: seoSettings.defaultOgImage,
  });
  return buildMetadata({
    title: resolved.title,
    description: resolved.description,
    path: `/angebote/${offer.slug}`,
    ogImageUrl: resolved.ogImageUrl,
    keywords: resolved.keywords,
    // Private single-session offers (e.g. "Einzelbegleitung") stay reachable
    // via their direct link but must never be indexed or listed.
    noindex: offer.visibility === "private",
  });
}

export default async function OfferDetailPage({ params }: Args) {
  const { slug } = await params;
  const offer = await resolveOfferOrRedirect(slug);
  if (!offer) notFound();

  const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;
  const customer = offer.bookable ? await getCurrentCustomer() : null;
  const siteUrl = await getSiteUrl();

  return (
    <>
      {offer.visibility !== "private" && (
        <JsonLd
          data={serviceJsonLd({
            offer,
            description: offer.seo?.description || excerptFromRichText(offer.description) || offer.shortDescription,
            imageUrl: mediaUrl(offer.image, "hero"),
            siteUrl,
            providerName: siteConfig.name,
          })}
        />
      )}
      <PageHeader
        eyebrow={categoryLabel}
        title={offer.title}
        lead={offer.shortDescription}
        crumbs={[{ title: "Angebote", href: "/angebote" }, { title: offer.title }]}
      />
      <div className="mx-auto -mt-10 max-w-5xl px-6 sm:px-8 lg:px-12">
        <div className="relative aspect-[21/9] w-full">
          <ImagePlaceholder
            mood={moodForOffer(offer)}
            label={offer.title}
            src={mediaUrl(offer.image, "hero")}
            alt={mediaAlt(offer.image) ?? offer.title}
            shape="soft"
            priority
            className="h-full w-full"
          />
        </div>
      </div>
      <Section tone="plain">
        <div className="mx-auto max-w-2xl">
          {(offer.price || offer.durationMinutes) && (
            <div className="mb-8 flex flex-wrap gap-6 rounded-2xl bg-anouma-cream-light p-5 text-sm">
              {offer.price && (
                <div>
                  <span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Preis</span>
                  <span className="text-base text-anouma-plum">{offer.price}</span>
                </div>
              )}
              {offer.durationMinutes && (
                <div>
                  <span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Dauer</span>
                  <span className="text-base text-anouma-plum">{offer.durationMinutes} Minuten</span>
                </div>
              )}
            </div>
          )}
          <RichText data={offer.description} />
        </div>
      </Section>

      {offer.bookingMode === "group" ? (
        <Section tone="cream">
          <div className="mx-auto max-w-2xl">
            <h2 className="mb-3 text-center font-serif text-3xl font-medium text-anouma-plum">Für die Gruppe anmelden</h2>
            {offer.groupInfo && <p className="mx-auto mb-6 max-w-xl text-center text-base leading-relaxed text-anouma-plum">{offer.groupInfo}</p>}
            {offer.groupSchedule && (
              <div className="mb-8 rounded-2xl bg-white p-5 text-sm text-anouma-plum">
                <p className="font-medium">Fester Termin</p>
                <p className="mt-1">{offer.groupSchedule.recurrence === "monthly" ? "Monatlich" : "Wöchentlich"}{offer.groupSchedule.weekday ? ` · ${WEEKDAY_LABELS[offer.groupSchedule.weekday] ?? offer.groupSchedule.weekday}` : ""}{offer.groupSchedule.startTime ? ` · ${offer.groupSchedule.startTime}` : ""}{offer.groupSchedule.endTime ? `–${offer.groupSchedule.endTime}` : ""}</p>
              </div>
            )}
            {offer.groupCapacity && <p className="mb-2 text-sm text-anouma-plum/75">Plätze: {offer.groupCapacity}</p>}
            {offer.registrationDeadline && <p className="mb-6 text-sm text-anouma-plum/75">Anmeldung möglich bis {new Date(offer.registrationDeadline).toLocaleDateString("de-DE")}</p>}
            <GroupRegistrationForm offerSlug={offer.slug!} />
          </div>
        </Section>
      ) : offer.bookable ? (
        <Section tone="cream">
          <div className="mx-auto max-w-3xl">
            <h2 className="mb-6 text-center font-serif text-3xl font-medium text-anouma-plum">Termin auswählen</h2>
            <BookingWidget offerSlug={offer.slug!} isLoggedIn={Boolean(customer)} isVerified={Boolean(customer?.emailVerified)} />
          </div>
        </Section>
      ) : (
        <CTA
          title="Interesse geweckt?"
          lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
        />
      )}
    </>
  );
}