import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { VersandSections } from "./components/VersandSections";
import { VersandTOC, MobileVersandTOC } from "./components/VersandTOC";
import { getShippingSettings } from "../lib/payload";

export const metadata: Metadata = {
  title: "Versand",
  description:
    "Versandkosten, Lieferzeiten und Liefergebiet für Bestellungen bei einfach produktiv.",
  alternates: { canonical: "/versand" },
};

export default async function VersandPage() {
  const shipping = await getShippingSettings();

  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">Versand</span>
          </p>
          <p
            className="font-semibold text-h-feature text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            Versand
          </p>
          <p className="text-body text-text-muted">
            Transparent, fair und pünktlich — alles zu Kosten, Lieferzeiten und Liefergebiet.
          </p>
        </Reveal>

        {/* MobileSectionTOC counterpart — below lg: only, see
            SectionTOC.tsx's own comment. */}
        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
          <MobileVersandTOC />
        </div>

        <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:block lg:sticky lg:top-32 lg:self-start">
            <VersandTOC />
          </div>
          <div className="w-full lg:flex-1 max-w-[45rem]">
            <VersandSections withAnchors shipping={shipping} />
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}