"use client";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

export default function NotFoundPage() {
  const router = useRouter();
  return (
    <div className="grid min-h-svh place-items-center bg-background px-6 text-foreground">
      <div className="w-full max-w-sm text-center">
        <p className="font-mono text-xs tracking-[0.3em] text-muted-foreground uppercase">
          Cleo Minimarket
        </p>
        <h1 className="mt-4 text-7xl font-semibold tracking-tighter tabular-nums">
          404
        </h1>
        <p className="mt-3 text-lg font-medium">Halaman tidak ditemukan</p>
        <p className="mt-2 text-sm text-muted-foreground">
          Alamat yang dibuka tidak ada atau sudah dipindah.
        </p>
        <div className="mt-8 border-t border-dashed pt-6">
          <Button
            className="inline-flex h-10 items-center rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
            onClick={() => {
              router.back();
            }}
          >
            Kembali
          </Button>
        </div>
      </div>
    </div>
  );
}