import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Home, ArrowLeft, Search } from "lucide-react"

export default function NotFound() {
  return (
    <main className="min-h-[80vh] flex items-center justify-center bg-background">
      <div className="container mx-auto px-4">
        <div className="max-w-md mx-auto text-center">
          <div className="text-8xl font-bold text-primary/20 mb-4">404</div>
          <h1 className="text-3xl font-bold text-foreground mb-4">Page Not Found</h1>
          <p className="text-muted-foreground mb-8">
            Sorry, we couldn&apos;t find the page you&apos;re looking for. The page might have been moved or deleted.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild>
              <Link href="/">
                <Home className="w-4 h-4 mr-2" />
                Go Home
              </Link>
            </Button>
            <Button variant="outline" asChild>
              <Link href="/blog">
                <Search className="w-4 h-4 mr-2" />
                Browse Blog
              </Link>
            </Button>
          </div>
          <div className="mt-12 pt-8 border-t border-border">
            <p className="text-sm text-muted-foreground mb-4">Popular Pages</p>
            <div className="flex flex-wrap justify-center gap-2">
              <Link href="/mindmap-generator" className="text-sm text-primary hover:underline">
                Mind Map Generator
              </Link>
              <span className="text-muted-foreground">-</span>
              <Link href="/ai-summary-generator" className="text-sm text-primary hover:underline">
                AI Summary
              </Link>
              <span className="text-muted-foreground">-</span>
              <Link href="/plans" className="text-sm text-primary hover:underline">
                Pricing
              </Link>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}