import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { KeyRound } from 'lucide-react';

export default function ForgotPassword() {
    return (
        <div className="min-h-screen flex flex-col justify-center items-center px-4 bg-slate-50 font-sans">
            <Head title="Reset Password - Employer Portal" />

            <div className="w-full max-w-md bg-white rounded-2xl shadow-sm border border-slate-200 p-8 text-center space-y-6">
                <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto border border-blue-200">
                    <KeyRound className="w-8 h-8 text-[#185FA5]" />
                </div>

                <div className="space-y-2">
                    <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Forgot Password</h1>
                    <p className="text-sm text-gray-600">
                        Enter your registration email address and we'll send you a password reset link.
                    </p>
                </div>

                <div className="space-y-4 text-left">
                    <div>
                        <label className="block text-xs font-medium text-gray-700 mb-1">Email Address</label>
                        <input
                            type="email"
                            placeholder="name@company.com"
                            className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]"
                            autoFocus
                        />
                    </div>

                    <button
                        type="button"
                        className="w-full bg-[#185FA5] hover:bg-[#0C447C] text-white rounded-xl h-11 font-semibold text-sm transition-colors shadow-sm"
                    >
                        Send Reset Link
                    </button>
                </div>

                <div className="pt-2">
                    <Link href="/employer/login" className="text-xs text-[#185FA5] font-bold hover:underline">
                        Return to Sign in
                    </Link>
                </div>
            </div>
        </div>
    );
}
