
'use client';

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

export default function NotFound() {
  const router = useRouter();

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#fefdfb] via-white to-[#fefdfb]/50 p-4">
      <div className="max-w-2xl w-full text-center">
        <div className="mb-8">
          <div className="inline-flex items-center justify-center w-24 h-24 bg-primary/10 rounded-full mb-6">
            <Search className="h-12 w-12 text-primary" />
          </div>
          
          <h1 className="text-6xl font-heading font-bold text-gray-900 mb-4">
            404
          </h1>
          
          <h2 className="text-2xl font-heading font-semibold text-gray-800 mb-3">
            Page Not Found
          </h2>
          
          <p className="text-gray-600 mb-8 max-w-md mx-auto">
            The page you're looking for doesn't exist or has been moved. 
            Let's get you back on track.
          </p>
        </div>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            onClick={() => router.back()}
            variant="outline"
            className="gap-2"
          >
            <ArrowLeft className="h-4 w-4" />
            Go Back
          </Button>
          
          <Button
            asChild
            variant="default"
            className="gap-2"
          >
            <Link href="/">
              <Home className="h-4 w-4" />
              Back to Home
            </Link>
          </Button>
        </div>
        
        <div className="mt-12 pt-8 border-t border-gray-200">
          <p className="text-sm text-gray-500 mb-4">
            Popular Pages
          </p>
          
          <div className="flex flex-wrap gap-3 justify-center">
            <Link 
              href="/dashboard" 
              className="text-sm text-primary hover:underline"
            >
              Dashboard
            </Link>
            <span className="text-gray-300">•</span>
            <Link 
              href="/quotes" 
              className="text-sm text-primary hover:underline"
            >
              Quotes
            </Link>
            <span className="text-gray-300">•</span>
            <Link 
              href="/leads" 
              className="text-sm text-primary hover:underline"
            >
              Leads
            </Link>
            <span className="text-gray-300">•</span>
            <Link 
              href="/contracts" 
              className="text-sm text-primary hover:underline"
            >
              Contracts
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
