import Link from 'next/link'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Home, Search, ArrowLeft, Server } from 'lucide-react'

export default function NotFound() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Header />
      <main className="flex-1 flex items-center justify-center py-12">
        <div className="container max-w-2xl text-center">
          {/* 404 Visual */}
          <div className="mb-8">
            <div className="flex items-center justify-center space-x-4 mb-6">
              <div className="w-16 h-16 bg-gradient-hero rounded-lg flex items-center justify-center">
                <Server className="w-8 h-8 text-white" />
              </div>
              <div className="text-6xl font-bold text-primary">404</div>
            </div>
            <h1 className="text-3xl font-bold tracking-tight mb-4">Page Not Found</h1>
            <p className="text-xl text-muted-foreground mb-8">
              Oops! The page you're looking for seems to have wandered off into the digital void.
            </p>
          </div>

          {/* Helpful Actions */}
          <Card>
            <CardContent className="pt-6 space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Button asChild className="h-12">
                  <Link href="/">
                    <Home className="w-4 h-4 mr-2" />
                    Go Home
                  </Link>
                </Button>
                
                <Button asChild variant="outline" className="h-12">
                  <Link href="/services">
                    <Search className="w-4 h-4 mr-2" />
                    Browse Services
                  </Link>
                </Button>
              </div>

              <div className="text-sm text-muted-foreground">
                <p className="mb-2">Common pages you might be looking for:</p>
                <div className="flex flex-wrap justify-center gap-4">
                  <Link href="/about" className="text-primary hover:underline">About Us</Link>
                  <Link href="/contact" className="text-primary hover:underline">Contact</Link>
                  <Link href="/tools" className="text-primary hover:underline">Web Tools</Link>
                  <Link href="/auth" className="text-primary hover:underline">Sign In</Link>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Fun Error Message */}
          <div className="mt-8 p-4 bg-muted rounded-lg">
            <p className="text-sm text-muted-foreground">
              <strong>Error Code:</strong> 404 - Page Not Found<br />
              <strong>Suggestion:</strong> Check the URL for typos or use the navigation menu above
            </p>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}