import Link from "next/link";
import { Logo } from "@/components/ui/logo";
import { Button } from "@/components/ui/button";

export const metadata = { title: "Account deletion · Fetcha" };

export default function GoodbyePage() {
  return (
    <div className="relative flex min-h-dvh flex-col">
      <div className="absolute inset-0 -z-10 grid-bg opacity-60" aria-hidden />
      <header className="container-page flex h-16 items-center">
        <Logo />
      </header>
      <main className="flex flex-1 items-start justify-center px-4 pb-16 pt-6 sm:pt-12">
        <div className="w-full max-w-[440px] animate-fade-up rounded-xl border border-border bg-bg-elevated p-6 shadow-md sm:p-8">
          <h1 className="text-xl font-semibold tracking-tight">Account deletion</h1>
          <p className="mt-1.5 text-[13.5px] leading-relaxed text-fg-muted">Sorry to see you go. Here is what happens next.</p>
          <ol className="mt-6 grid gap-4 text-[13.5px] leading-relaxed">
            <li className="flex gap-3">
              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-bg-muted font-mono text-[12px] tabular">1</span>
              <span>
                <span className="font-medium">Requested.</span> <span className="text-fg-muted">If you just asked to delete your account, we sent a confirmation link to your email. Nothing is removed until you click it. The link expires after 24 hours.</span>
              </span>
            </li>
            <li className="flex gap-3">
              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-bg-muted font-mono text-[12px] tabular">2</span>
              <span>
                <span className="font-medium">Confirmed.</span> <span className="text-fg-muted">If you arrived here from that link, your login is now disabled, every API key is rejected and you have been signed out.</span>
              </span>
            </li>
            <li className="flex gap-3">
              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-bg-muted font-mono text-[12px] tabular">3</span>
              <span>
                <span className="font-medium">Purged after 7 days.</span> <span className="text-fg-muted">Projects, keys, request logs and usage records are permanently erased 7 days after confirmation. To recover the account within that window, email support@fetcha.co from the deleted address.</span>
              </span>
            </li>
          </ol>
          <div className="mt-6 flex flex-wrap items-center gap-2 border-t border-border pt-5">
            <Button asChild variant="outline" size="sm">
              <Link href="/">Back to fetcha.co</Link>
            </Button>
            <Button asChild variant="ghost" size="sm">
              <a href="mailto:support@fetcha.co?subject=Account%20deletion">Contact support</a>
            </Button>
          </div>
        </div>
      </main>
      <footer className="container-page pb-6 text-center text-[12px] text-fg-subtle">
        <Link href="/legal/privacy" className="hover:text-fg">Privacy Policy</Link> · <Link href="/legal/terms" className="hover:text-fg">Terms</Link>
      </footer>
    </div>
  );
}