import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Home, ArrowLeft, Search } from 'lucide-react';

const NotFound = () => {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
        {/* 404 Illustration */}
        <div className="mb-8">
          <div className="relative">
            <h1
              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[var(--neutral-800)] to-[var(--lavender-700)] leading-none"
              style={{ fontFamily: "'Inter', sans-serif" }}
            >
              404
            </h1>
            <div className="absolute inset-0 flex items-center justify-center">
              <Search className="h-24 w-24 text-brand-purple  opacity-30" />
            </div>
          </div>
        </div>

        {/* Message */}
        <h2
          className="text-3xl font-semibold text-[var(--purple-ink)] mb-4"
          style={{ fontFamily: "'Inter', sans-serif" }}
        >
          Page Not Found
        </h2>
        <p
          className="text-lg text-brand-purple  mb-8 max-w-md mx-auto"
          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
        >
          Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
        </p>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            onClick={() => navigate(-1)}
            variant="outline"
            className="rounded-xl border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-700)] px-6 py-6"
          >
            <ArrowLeft className="h-5 w-5 mr-2" />
            Go Back
          </Button>
          <Button
            onClick={() => navigate('/')}
            className="rounded-xl bg-gradient-to-r from-brand-purple  to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-brand-purple  text-white px-6 py-6"
          >
            <Home className="h-5 w-5 mr-2" />
            Back to Home
          </Button>
        </div>

        {/* Help Text */}
        <div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
          <p
            className="text-sm text-brand-purple "
            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
          >
            Need help? Contact us at{' '}
            <a
              href="mailto:support@loaftx.org"
              className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
            >
              support@loaftx.org
            </a>
          </p>
        </div>
      </Card>
    </div>
  );
};

export default NotFound;