import type { Metadata } from "next";
import Link from "next/link";
import { CookiePreferencesForm } from "@/components/consent/CookiePreferencesForm";
import { Eyebrow } from "@/components/ui/SectionHeading";
import { Breadcrumbs } from "@/components/ui/Structured";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "Cookie Preferences",
  description:
    "Switch optional analytics on or off for axidysmedia.com, see exactly what is recorded on your device, and withdraw your consent at any time.",
  path: routes.cookiePreferences,
  ogKey: "cookie-preferences",
});

export default function CookiePreferencesPage() {
  return (
    <div className="container-narrow pb-24 pt-8 lg:pb-32 lg:pt-10">
      <Breadcrumbs
        items={[
          { name: "Home", href: routes.home },
          { name: "Cookie preferences", href: routes.cookiePreferences },
        ]}
      />
      <header className="mt-10 lg:mt-14">
        <Eyebrow>Legal</Eyebrow>
        <h1 id="page-title" className="mt-6 text-display-lg">
          Cookie preferences.
        </h1>
        <p className="mt-6 text-lead text-ink-soft">
          This site uses essential storage by default. Anything optional stays off until you switch it on here, and you
          can change your mind at any time. Your choice is saved in this browser and never sent to us.
        </p>
      </header>

      <CookiePreferencesForm />

      <p className="mt-10 text-[0.9375rem] text-muted">
        Our{" "}
        <Link href={routes.cookiePolicy} className="link-underline text-ink">
          cookie policy
        </Link>{" "}
        lists every item this site can store, what it is called, and how long it lasts. Our{" "}
        <Link href={routes.privacy} className="link-underline text-ink">
          privacy policy
        </Link>{" "}
        covers personal data more generally.
      </p>
    </div>
  );
}