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

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const contact = await getContactGlobal();
  return {
    title: contact.title || "Kontakt",
    description: contact.lead || "Ich freue mich, von dir zu hören.",
  };
}

export default async function KontaktPage() {
  const contact = await getContactGlobal();

  return (
    <>
      <PageHeader
        eyebrow={contact.eyebrow || "Kontakt"}
        title={contact.title || "Ich freue mich, von dir zu hören"}
        lead={contact.lead}
        crumbs={[{ title: "Kontakt" }]}
      />

      <Section tone="plain">
        <div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">
          <Reveal>
            <ContactForm toEmail={contact.email} />
          </Reveal>

          <Reveal delay={0.1} className="space-y-8">
            <div className="relative aspect-[4/3] w-full">
              <ImagePlaceholder mood="mauve" label="Kontakt" className="h-full w-full" />
            </div>
            <div className="space-y-3 text-anouma-plum">
              <p>
                <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"
                >
                  {contact.email}
                </a>
              </p>
              {contact.phone && (
                <p>
                  <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
                    Telefon
                  </span>
                  <span className="text-lg text-anouma-plum">{contact.phone}</span>
                </p>
              )}
              {contact.region && (
                <p>
                  <span className="block text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
                    Region
                  </span>
                  <span className="text-lg text-anouma-plum">{contact.region}</span>
                </p>
              )}
            </div>
          </Reveal>
        </div>
      </Section>
    </>
  );
}