import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { RichText, extractHeadings } from "../components/RichText";
import { SectionTOC } from "../components/SectionTOC";
import { getLegalPage } from "../lib/payload";

export const metadata: Metadata = {
  title: "Impressum",
  description: "Angaben gemäß § 5 TMG für einfach produktiv.",
  alternates: { canonical: "/impressum" },
};

export default async function ImpressumPage() {
  const page = await getLegalPage("impressum");
  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">Impressum</span>
          </p>
          <p
            className="font-semibold text-h-feature text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            Impressum
          </p>
          <p className="text-body text-text-muted">Angaben gemäß § 5 TMG</p>
        </Reveal>

        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-16 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 — the LegalPages
                collection's richText field is deliberately generic
                (shared shape across Impressum/Datenschutz/AGB/Widerruf),
                so a bespoke brand callout like this doesn't belong inside
                it; hardcoding it here matches how VersandSections.tsx
                keeps structural/brand elements in code and only pulls
                the actual numbers/copy that need single-sourcing from
                data. */}
            <div className="bg-bg-muted flex flex-col gap-3 items-start p-6 rounded-md w-full">
              <img alt="" src="/icon-trust-leaf.png" className="size-7 object-contain" />
              <p
                className="font-semibold text-body text-text-primary"
                style={{ fontFamily: "var(--font-lora)" }}
              >
                Nachhaltigkeit
              </p>
              <p className="text-body-sm text-text-muted">
                Diese Website wird mit Ökostrom betrieben und ist klimafreundlich gehostet.
              </p>
              <p className="text-body-sm text-text-muted">Für eine bessere Zukunft – für uns alle.</p>
              <div className="h-[0.125rem] w-8 bg-brand" />
            </div>
          </div>

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