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, getSEOSettingsGlobal } from "@/lib/payload/globals";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
import { resolveSeo } from "@/lib/seo/resolve";
import { buildMetadata } from "@/lib/seo/metadata";
import { getSiteUrl } from "@/lib/seo/config";
import { excerptFromRichText } from "@/lib/seo/textExcerpt";
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";
import { siteConfig } from "@/lib/site";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const [about, seoSettings] = await Promise.all([getAboutGlobal(), getSEOSettingsGlobal()]);
  const resolved = resolveSeo({
    seo: about.seo,
    fallbackTitle: `Über mich – ${siteConfig.name}`,
    fallbackDescription: () => excerptFromRichText(about.body) || seoSettings.defaultDescription || "Mein Weg, meine Werte und was mich bewegt.",
    fallbackImage: about.portrait,
    defaultOgImage: seoSettings.defaultOgImage,
  });
  return buildMetadata({
    title: resolved.title,
    description: resolved.description,
    path: "/ueber-mich",
    ogImageUrl: resolved.ogImageUrl,
    keywords: resolved.keywords,
  });
}

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

  return (
    <>
      <JsonLd
        data={webPageJsonLd({
          name: about.title || "Über mich",
          description: excerptFromRichText(about.body) || "Mein Weg, meine Werte und was mich bewegt.",
          url: `${siteUrl}/ueber-mich`,
        })}
      />
      <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."
      />
    </>
  );
}