@extends('layouts.auth')

@section('title', 'Forgot Password')

@section('content')
    <div class="flex items-center justify-center min-h-screen">
        <div class="w-full max-w-sm bg-amber-50 rounded-lg shadow-md p-6">
            {{-- Logo --}}
            <div class="flex justify-center mb-2">
                <img src="{{ asset('android-chrome-192x192.png') }}" alt="Logo 1" class="h-16 w-16">
            </div>

            <hr class="border-0 h-0.5 bg-amber-700">
            <h1 class="text-lg font-bold text-amber-900 text-center my-2">Forgot Your Password?</h1>
            <p class="text-sm font-bold text-amber-700 text-center mb-2">
                <i class="fas fa-info-circle mr-1"></i> Reset Assistance
            </p>

            {{-- Illustration --}}
            <div class="flex justify-center my-2">
                <img src="{{ asset('images/forgot-password-illustration.webp') }}" alt="Forgot Password" class="h-40 w-auto">
            </div>

            <p class="text-sm text-amber-800 text-center mb-6">
                If you’ve forgotten your password, please contact your <br>
                <span class="font-semibold text-amber-900">System Administrator</span> to reset it.
            </p>

            {{-- Back to login --}}
            <div class="mt-4 text-center">
                <a href="{{ route('login') }}"
                   class="text-xs font-semibold text-amber-700 hover:underline">
                    ← Back to Login
                </a>
            </div>

            <hr class="border-0 h-0.5 bg-amber-700 mt-6">

            {{-- Powered by --}}
            <div class="mt-4 text-center">
                <div class="flex justify-center mb-2">
                    <img src="{{ asset('cdsl_logo.png') }}" alt="CDSL Logo" class="h-8 w-8">
                </div>
                <p class="text-xs text-amber-600">Powered by <span class="font-semibold">CDSL</span></p>
            </div>
        </div>
    </div>
@endsection