import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: { absolute: "Newsletter abgemeldet | Toolaro" },
  description: "Toolaro Newsletter-Abmeldung.",
  robots: { index: false, follow: false },
};

export default async function NewsletterUnsubscribedPage({
  searchParams,
}: {
  searchParams: Promise<{ status?: string }>;
}) {
  const { status } = await searchParams;
  const success = status === "success";

  return (
    <main className="mx-auto flex min-h-[70vh] max-w-2xl items-center px-4 py-16">
      <section className="w-full border-2 border-ink-primary bg-surface-base p-8 shadow-[6px_6px_0_rgb(var(--brand-500))]">
        <p
          className="mb-3 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-brand-500"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Newsletter
        </p>
        <h1 className="font-display text-3xl font-bold uppercase tracking-tight text-ink-primary">
          {success ? "Du bist vom Newsletter abgemeldet." : "Der Abmeldelink ist ungültig."}
        </h1>
        <p className="mt-4 leading-7 text-ink-secondary">
          {success
            ? "Du erhältst keine Toolaro Newsletter mehr. Systemmails für Account, Sicherheit und Zahlungen bleiben davon unberührt."
            : "Bitte verwalte deinen Newsletter-Status im Account oder nutze den aktuellen Abmeldelink aus einer Newsletter-Mail."}
        </p>
        <Link
          href="/account"
          className="mt-6 inline-flex items-center border-2 border-ink-primary bg-brand-500 px-5 py-3 text-[0.8rem] font-bold uppercase tracking-[0.06em] text-surface-base shadow-[4px_4px_0_rgb(var(--ink-primary))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[0_0_0_rgb(var(--ink-primary))]"
        >
          Zum Account
        </Link>
      </section>
    </main>
  );
}