import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Section, SectionHeading } from "@/components/Section";
import { ContactForm } from "@/components/ContactForm";
import { Reveal } from "@/components/Reveal";
import { getBookingGlobal, getContactGlobal } from "@/lib/payload/globals";

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] = await Promise.all([getBookingGlobal(), getContactGlobal()]);

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

      {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="Nachricht senden" 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>
    </>
  );
}