import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Section, SectionHeading } from "@/components/Section";
import { ContactForm } from "@/components/ContactForm";
import { AngebotCard } from "@/components/AngebotCard";
import { Reveal } from "@/components/Reveal";
import { getBookingGlobal, getContactGlobal } from "@/lib/payload/globals";
import { getOffers } from "@/lib/payload/content";
import { moodForOffer } from "@/lib/angebote";
import { mediaUrl } from "@/lib/payload/media";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const booking = await getBookingGlobal();
  return {
    title: booking.title || "Termin buchen",
    description: booking.lead || "Kennenlernen & Termine vereinbaren.",
  };
}

export default async function TerminBuchenPage() {
  const [booking, contact, offers] = await Promise.all([getBookingGlobal(), getContactGlobal(), getOffers()]);
  const bookableOffers = offers.filter((offer) => offer.bookable);

  return (
    <>
      <PageHeader
        eyebrow={booking.eyebrow || "Termin buchen"}
        title={booking.title || "Kennenlernen & Termine vereinbaren"}
        lead={booking.lead}
        crumbs={[{ title: "Termin buchen" }]}
      />

      {bookableOffers.length > 0 && (
        <Section tone="plain">
          <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) => (
              <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>
      )}

      {booking.steps && booking.steps.length > 0 && (
        <Section tone="cream">
          <SectionHeading eyebrow="Ablauf" title="So findest du zu deinem Termin" />
          <div className="mt-14 grid gap-8 sm:grid-cols-3">
            {booking.steps.map((s, i) => (
              <Reveal key={s.id ?? s.title} delay={i * 0.08}>
                <p className="font-serif text-5xl font-medium text-anouma-rose">
                  {String(i + 1).padStart(2, "0")}
                </p>
                <h3 className="mt-4 font-serif text-xl font-medium text-anouma-plum">{s.title}</h3>
                <p className="mt-3 text-base leading-relaxed text-anouma-plum">{s.text}</p>
              </Reveal>
            ))}
          </div>
        </Section>
      )}

      <Section tone="plain">
        <div className="mx-auto max-w-xl">
          <SectionHeading
            title="Allgemeine Anfrage"
            lead={
              bookableOffers.length > 0
                ? "Für einen konkreten Termin wähle oben ein Angebot — hier kannst du auch einfach eine allgemeine Nachricht schreiben."
                : undefined
            }
            align="left"
          />
          <div className="mt-10">
            <ContactForm
              toEmail={contact.email}
              subjectPrefix="Terminanfrage über anouma.org"
              submitLabel="Terminanfrage senden"
            />
          </div>
          {booking.formNote && (
            <p className="mt-8 text-sm leading-relaxed text-anouma-plum/80">{booking.formNote}</p>
          )}
        </div>
      </Section>
    </>
  );
}