@extends('layouts.tech')

@section('content')
<div class="min-h-screen bg-gray-50 pb-24 md:pb-0">
    <div class="mx-auto flex max-w-md flex-col px-4 py-10">
        <h1 class="text-3xl font-bold text-gray-900">Forgot password</h1>
        <p class="mt-2 text-sm text-gray-500">Enter your email and a new password to reset it instantly.</p>
        
        <form action="#" method="POST" class="mt-6 space-y-4 rounded-2xl border border-gray-100 bg-white p-6 shadow-lg">
            @csrf
            <div>
                <label for="email" class="block text-sm font-bold text-gray-700 mb-1">Email</label>
                <input id="email" type="email" required class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#109E38] focus:border-transparent" />
            </div>
            
            <div>
                <label for="password" class="block text-sm font-bold text-gray-700 mb-1">New password</label>
                <input id="password" type="password" required minlength="6" class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#109E38] focus:border-transparent" />
            </div>
            
            <button type="submit" class="w-full h-10 bg-[#109E38] hover:bg-green-700 text-white font-bold rounded-md transition-colors shadow-md">
                Reset password
            </button>
            
            <p class="text-center text-sm text-gray-500 mt-4">
                <a href="/" class="text-[#109E38] hover:underline font-bold">Back to login</a>
            </p>
        </form>
    </div>
</div>
@endsection