import type { Metadata } from "next";
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 { Reveal } from "@/components/Reveal";
import { OrganicBlob } from "@/components/OrganicBlob";
import { getAboutGlobal } from "@/lib/payload/globals";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const about = await getAboutGlobal();
  return {
    title: about.title || "Über mich",
    description: "Mein Weg, meine Werte und was mich bewegt.",
  };
}

export default async function UeberMichPage() {
  const about = await getAboutGlobal();
  const hasClosing = about.closingHighlight || about.closingParagraph;

  return (
    <>
      <PageHeader
        eyebrow={about.eyebrow || "Über mich"}
        title={about.title || "Mein Weg, meine Werte und was mich bewegt"}
        crumbs={[{ title: "Über mich" }]}
      />

      <Section tone="plain">
        <div className="grid gap-14 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
          <Reveal className="lg:sticky lg:top-28">
            <div className="relative mx-auto aspect-[4/5] w-full max-w-sm lg:max-w-none">
              <ImagePlaceholder
                mood="dustyrose"
                label="Portrait"
                src={mediaUrl(about.portrait, "hero")}
                alt={mediaAlt(about.portrait)}
                priority
                className="h-full w-full"
              />
            </div>
          </Reveal>
          <div className="max-w-2xl">
            <Reveal>
              <RichText data={about.body} />
            </Reveal>
          </div>
        </div>
      </Section>

      {hasClosing && (
        <section className="relative overflow-hidden bg-anouma-plum py-24 text-anouma-cream-light">
          <OrganicBlob tone="mauve" className="-left-24 top-0 h-96 w-96 opacity-25" />
          <div className="relative mx-auto max-w-3xl px-6 text-center sm:px-8">
            <Reveal>
              {about.closingLead && (
                <p className="text-lg text-anouma-cream-light/90">{about.closingLead}</p>
              )}
              {about.closingHighlight && (
                <p className="mt-6 text-balance font-serif text-3xl italic leading-snug sm:text-4xl">
                  „{about.closingHighlight}“
                </p>
              )}
              {about.closingParagraph && (
                <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-anouma-cream-light/90">
                  {about.closingParagraph}
                </p>
              )}
            </Reveal>
          </div>
        </section>
      )}

      <CTA
        title="Lust, dich kennenzulernen"
        lead="Wenn dich mein Weg anspricht, freue ich mich, dich in einem persönlichen Gespräch kennenzulernen."
      />
    </>
  );
}