import { Metadata, Viewport } from "next";
import Link from "next/link";
import { buttonVariants } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";

export const metadata: Metadata = {
  title: "Page Not Found | Ember Market",
  description: "The page you're looking for doesn't exist or has been moved.",
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: [
    { media: "(prefers-color-scheme: dark)", color: "#000000" },
    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
  ],
};

export default function NotFound() {
  return (
    <div className="h-screen w-full flex flex-col items-center justify-center gap-6 bg-background text-foreground">
      <div className="flex flex-col items-center gap-2">
        <h1 className="text-5xl font-bold">404</h1>
        <h2 className="text-2xl font-semibold">Page Not Found</h2>
        <p className="text-muted-foreground text-center max-w-md">
          The page you're looking for doesn't exist or has been moved.
        </p>
      </div>
      
      <Link 
        href="/" 
        className={buttonVariants({ variant: "default" })}
      >
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to Home
      </Link>
    </div>
  );
}