import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { draftMode } from "next/headers";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { RichText, extractHeadings } from "../components/RichText";
import { LiveRichText } from "../components/LiveRichText";
import { SectionTOC, MobileSectionTOC } from "../components/SectionTOC";
import { getLegalPage } from "../lib/payload";
import { formatMonthYear } from "../lib/format";

export const metadata: Metadata = {
  title: "Datenschutzerklärung",
  description: "Datenschutzerklärung von einfach produktiv — wie wir mit deinen Daten umgehen.",
  alternates: { canonical: "/datenschutz" },
};

export default async function DatenschutzPage() {
  const { isEnabled: isPreview } = await draftMode();
  const page = await getLegalPage("datenschutz", { draft: isPreview });
  const headings = page ? extractHeadings(page.content) : [];

  return (
    <>
      <main className="flex flex-col flex-1 bg-bg-base">
        <Reveal className="flex flex-col gap-3 items-start pb-6 pt-10 px-[var(--layout-padding-x)] w-full">
          <p className="flex items-center gap-2 text-body-sm text-text-muted">
            <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
            <span>›</span>
            <span className="text-text-primary">Datenschutz</span>
          </p>
          <p
            className="font-semibold text-h-feature text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            Datenschutzerklärung
          </p>
          {page && <p className="text-body text-text-muted">Stand: {formatMonthYear(page.updatedAt)}</p>}
        </Reveal>

        {/* MobileSectionTOC — below lg: only, see SectionTOC.tsx's own
            comment. Outside the sidebar's `hidden lg:flex` wrapper below
            (that wrapper's `hidden` would hide this too otherwise). */}
        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
          <MobileSectionTOC sections={headings} />
        </div>

        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
          <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
            <SectionTOC sections={headings} />

            {/* Static, not part of the CMS content — same reasoning as
                the Impressum page's Nachhaltigkeit card: a bespoke brand
                callout doesn't belong in the generic LegalPages richText
                field shared across all 4 legal page types. */}
            <div className="bg-bg-muted flex flex-col gap-3 items-start p-6 rounded-md w-full">
              <Image alt="" src="/icon-trust-leaf.png" width={28} height={28} className="size-7 object-contain" />
              <p
                className="font-semibold text-body text-text-primary"
                style={{ fontFamily: "var(--font-lora)" }}
              >
                Nachhaltigkeit ist für uns mehr als ein Schlagwort.
              </p>
              <p className="text-body-sm text-text-muted">
                Auch im digitalen Raum gehen wir bewusst und verantwortungsvoll mit Daten um.
              </p>
              <div className="h-[0.125rem] w-8 bg-brand" />
            </div>
          </div>

          <div className="w-full lg:flex-1 min-w-0">
            {page ? (
              isPreview ? <LiveRichText initialContent={page.content} /> : <RichText content={page.content} />
            ) : (
              <p className="text-body text-text-muted">Inhalte werden gerade aktualisiert.</p>
            )}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}