import React from 'react';
import kololo from '../assets/kololo.jpg';

export default function ForgotPassword() {
  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background image */}
      <div
        className="absolute inset-0 w-full h-full z-0"
        style={{ 
          backgroundImage: `linear-gradient(rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.25)), url(${kololo})`, 
          backgroundSize: 'cover', 
          backgroundPosition: 'center'
        }}
        aria-hidden="true"
      />
      <div className="relative z-20 w-full max-w-md p-4 md:p-6 bg-white/90 rounded-2xl shadow-2xl animate-fade-in-up flex flex-col gap-2">
        <h2 className="text-3xl font-extrabold mb-4 text-blue-800 text-center drop-shadow">Forgot Password</h2>
        <form className="space-y-6">
          <div>
            <label className="block text-blue-900 font-semibold mb-1">Enter your email address</label>
            <input type="email" className="w-full px-4 py-2 border border-blue-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 bg-blue-50/60 transition" />
          </div>
          <button type="submit" className="w-full bg-gradient-to-r from-blue-700 to-blue-500 text-white py-2 rounded-lg font-bold shadow hover:from-blue-800 hover:to-blue-600 transition mb-2">Send Reset Link</button>
          <div className="text-sm text-center text-blue-900">
            <a href="/login" className="text-blue-600 hover:underline font-semibold">Back to Login</a>
          </div>
        </form>
      </div>
    </div>
  );
}
