import { useLocation } from "react-router-dom";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Home, ArrowLeft } from "lucide-react";

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-background px-4">
      <div className="text-center max-w-2xl mx-auto">
        <div className="mb-8">
          <h1 className="text-9xl font-display font-bold text-brass mb-4">404</h1>
          <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
            Page Not Found
          </h2>
          <p className="text-body-lg text-sage mb-8 max-w-md mx-auto">
            Sorry, we couldn't find the page you're looking for. It might have been moved or doesn't exist.
          </p>
        </div>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Button 
            size="lg" 
            onClick={() => window.history.back()}
            variant="outline"
            className="btn-shadow rounded-2xl"
          >
            <ArrowLeft className="mr-2 w-5 h-5" />
            Go Back
          </Button>
          <Button 
            size="lg" 
            onClick={() => window.location.href = '/'}
            className="btn-shadow rounded-2xl"
          >
            <Home className="mr-2 w-5 h-5" />
            Return Home
          </Button>
        </div>
        
        <p className="text-sage/70 text-sm mt-8">
          Need help? <a href="/contact" className="text-forest hover:text-brass gentle-transition underline">Contact us</a> or call <a href="tel:+13618543711" className="text-forest hover:text-brass gentle-transition underline">(361) 854-3711</a>
        </p>
      </div>
    </div>
  );
};

export default NotFound;
