import React from 'react';
import { Link } from 'react-router-dom';

const NotFoundPage = () => {
  return (
    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen flex items-center">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-6xl font-bold text-bio-green dark:text-green-400 mb-4 drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">404</h1>
        <h2 className="text-3xl font-bold text-gray-800 dark:text-white mb-6 drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">Page Not Found</h2>
        <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto drop-shadow bg-gradient-to-r from-gray-600 to-gray-500 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
          Sorry, the page you're looking for doesn't exist or has been moved.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <Link 
            to="/" 
            className="bg-gradient-to-r from-bio-green to-green-500 text-white font-bold py-3 px-8 rounded-lg hover:from-green-500 hover:to-green-600 transition shadow-lg text-center drop-shadow"
          >
            Go Home
          </Link>
          <Link 
            to="/directory" 
            className="bg-gradient-to-r from-bio-purple to-purple-500 text-white font-bold py-3 px-8 rounded-lg hover:from-purple-500 hover:to-purple-600 transition shadow-lg text-center drop-shadow"
          >
            Browse Directory
          </Link>
        </div>
      </div>
    </div>
  );
};

export default NotFoundPage;