feat: add CMS inquiries and group bookings

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

@@ -6,6 +6,7 @@ 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";
@@ -23,6 +24,7 @@ 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);
@@ -123,7 +125,23 @@ export default async function OfferDetailPage({ params }: Args) {
         </div>
       </Section>
 
-      {offer.bookable ? (
+      {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>

app/(frontend)/kontakt/page.tsx

@@ -32,9 +32,11 @@ export async function generateMetadata(): Promise<Metadata> {
   });
 }
 
-export default async function KontaktPage() {
+export default async function KontaktPage({ searchParams }: { searchParams: Promise<{ subject?: string }> }) {
   const contact = await getContactGlobal();
   const siteUrl = await getSiteUrl();
+  const params = await searchParams;
+  const isAppointment = params.subject === "Terminanfrage";
 
   return (
     <>
@@ -58,7 +60,7 @@ export default async function KontaktPage() {
       <Section tone="plain">
         <div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">
           <Reveal>
-            <ContactForm toEmail={contact.email} />
+            <ContactForm subjectPrefix={isAppointment ? "Terminanfrage" : "Allgemeine Anfrage"} type={isAppointment ? "appointment" : "contact"} submitLabel={isAppointment ? "Terminanfrage senden" : "Nachricht senden"} />
           </Reveal>
 
           <Reveal delay={0.1} className="space-y-8">
@@ -70,12 +72,9 @@ export default async function KontaktPage() {
                 <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
                   E-Mail
                 </span>
-                <a
-                  href={`mailto:${contact.email}`}
-                  className="text-lg text-anouma-plum hover:text-anouma-mauve-dark"
-                >
+                <span className="text-lg text-anouma-plum">
                   {contact.email}
-                </a>
+                </span>
               </p>
               {contact.phone && (
                 <p>

app/(frontend)/termin-buchen/page.tsx

@@ -4,7 +4,7 @@ import { Section, SectionHeading } from "@/components/Section";
 import { ContactForm } from "@/components/ContactForm";
 import { AngebotCard } from "@/components/AngebotCard";
 import { Reveal } from "@/components/Reveal";
-import { getBookingGlobal, getContactGlobal, getSEOSettingsGlobal } from "@/lib/payload/globals";
+import { getBookingGlobal, getSEOSettingsGlobal } from "@/lib/payload/globals";
 import { getOffers } from "@/lib/payload/content";
 import { moodForOffer } from "@/lib/angebote";
 import { mediaUrl } from "@/lib/payload/media";
@@ -36,7 +36,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function TerminBuchenPage() {
-  const [booking, contact, offers] = await Promise.all([getBookingGlobal(), getContactGlobal(), getOffers()]);
+  const [booking, offers] = await Promise.all([getBookingGlobal(), getOffers()]);
   const bookableOffers = offers.filter((offer) => offer.bookable);
   const siteUrl = await getSiteUrl();
 
@@ -56,8 +56,25 @@ export default async function TerminBuchenPage() {
         crumbs={[{ title: "Termin buchen" }]}
       />
 
+      <Section tone="cream">
+        <div className="mx-auto grid max-w-4xl gap-5 md:grid-cols-2">
+          <a href="#freie-termine" className="rounded-3xl bg-white p-7 transition-transform hover:-translate-y-1">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-anouma-dustyrose">Direkt buchen</p>
+            <h2 className="mt-3 font-serif text-2xl font-medium text-anouma-plum">Freien Termin auswählen</h2>
+            <p className="mt-3 text-sm leading-relaxed text-anouma-plum/80">Wähle ein Angebot, einen freien Tag und eine passende Uhrzeit im Kalender.</p>
+            <span className="mt-5 inline-flex rounded-full bg-anouma-mauve-dark px-5 py-2.5 text-sm font-medium text-white">Zum Kalender</span>
+          </a>
+          <a href="/kontakt?subject=Terminanfrage" className="rounded-3xl bg-anouma-plum p-7 transition-transform hover:-translate-y-1">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-anouma-cream-light/75">Persönlich abstimmen</p>
+            <h2 className="mt-3 font-serif text-2xl font-medium text-white">Anfrage stellen</h2>
+            <p className="mt-3 text-sm leading-relaxed text-white/80">Wenn du keinen freien Kalendertermin brauchst oder etwas Besonderes besprechen möchtest.</p>
+            <span className="mt-5 inline-flex rounded-full bg-white px-5 py-2.5 text-sm font-medium text-anouma-plum">Zur Kontaktseite</span>
+          </a>
+        </div>
+      </Section>
+
       {bookableOffers.length > 0 && (
-        <Section tone="plain">
+        <Section tone="plain" id="freie-termine">
           <SectionHeading eyebrow="Angebot auswählen" title="Wofür möchtest du einen Termin?" />
           <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {bookableOffers.map((offer, i) => (
@@ -105,14 +122,11 @@ export default async function TerminBuchenPage() {
           />
           <div className="mt-10">
             <ContactForm
-              toEmail={contact.email}
               subjectPrefix="Terminanfrage über anouma.org"
+              type="appointment"
               submitLabel="Terminanfrage senden"
             />
           </div>
-          {booking.formNote && (
-            <p className="mt-8 text-sm leading-relaxed text-anouma-plum/80">{booking.formNote}</p>
-          )}
         </div>
       </Section>
     </>