---
import { Button } from "@/components/ui/button";
import DefaultLayout from "@/layouts/DefaultLayout.astro";
import { ArrowLeft } from "lucide-react";
---

<DefaultLayout title="404: Not Found" description="Sorry, the page you're looking for doesn't exist.">
  <div class="container mt-12 flex justify-center py-28 text-center lg:mt-20  lg:py-32">
    <div class="relative z-10 max-w-2xl">
      <h1 class="from-foreground to-foreground/70 relative mb-6 bg-linear-to-br bg-clip-text py-2 text-5xl font-bold text-transparent sm:text-6xl lg:text-7xl">
        Page Not Found
      </h1>

      <p class="text-muted-foreground mb-10 text-xl">
        {`Sorry, we couldn't find the page you're looking for. The page might have been removed or the URL might be
        incorrect.`}
      </p>

      <div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="/">
          <Button  size="lg" className="group min-w-[200px] gap-2">
            <ArrowLeft className="size-5 transition-transform group-hover:-translate-x-1" />
            Back to Home
          </Button>
        </a>
        <a href="/contact">
          <Button asChild variant="outline" size="lg" className="min-w-[200px]">
            Contact Support
          </Button>
        </a>
      </div>
    </div>
  </div>
</DefaultLayout>