<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ session('is_rtl', false) ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ __('Password Reset Verification') }}</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #1f2937;">

    <!-- Wrapper Table -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f3f4f6; padding: 40px 15px;">
        <tr>
            <td align="center">
                
                <!-- Main Card Container -->
                <table width="100%" max-width="500" cellpadding="0" cellspacing="0" border="0" style="max-width: 500px; background-color: #ffffff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);">
                    
                    <!-- App Header -->
                    <tr>
                        <td align="center" style="padding: 30px 20px; background-color: #f8fafc; border-bottom: 1px solid #f3f4f6;">
                            <h1 style="margin: 0; color: #2563eb; font-size: 24px; font-weight: 900; letter-spacing: -0.5px;">
                                {{ config('app.name') }}
                            </h1>
                        </td>
                    </tr>

                    <!-- Body Content -->
                    <tr>
                        <td style="padding: 40px 30px; text-align: center;">
                            
                            <div style="margin-bottom: 20px;">
                                <span style="display: inline-block; padding: 10px; background-color: #eff6ff; border-radius: 50px;">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: block;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                                </span>
                            </div>

                            <h2 style="margin: 0 0 10px; color: #111827; font-size: 22px;">{{ __('Verification Code') }}</h2>
                            
                            <p style="margin: 0 0 25px; font-size: 15px; color: #4b5563; line-height: 1.6;">
                                {{ __('Hello') }} <strong>{{ $user->name }}</strong>,<br>
                                {{ __('We received a request to reset your password. Please use the following code to complete the verification process.') }}
                            </p>

                            <!-- OTP Box -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
                                <tr>
                                    <td align="center">
                                        <div style="background-color: #f8fafc; border: 2px dashed #bfdbfe; border-radius: 12px; padding: 20px; display: inline-block;">
                                            <span style="font-family: 'Courier New', Courier, monospace; font-size: 36px; font-weight: 900; color: #1e40af; letter-spacing: 8px;">
                                                {{ $otp }}
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            <p style="margin: 0 0 10px; font-size: 13px; color: #ef4444; font-weight: bold;">
                                {{ __('This code will expire in 15 minutes.') }}
                            </p>
                            
                            <p style="margin: 0; font-size: 13px; color: #9ca3af; line-height: 1.5;">
                                {{ __('If you did not request this, you can safely ignore this email. Your password will remain unchanged.') }}
                            </p>

                        </td>
                    </tr>

                    <!-- Footer Help -->
                    <tr>
                        <td align="center" style="padding: 20px 30px; background-color: #f8fafc; border-top: 1px solid #e5e7eb;">
                            <p style="margin: 0; font-size: 13px; color: #6b7280;">
                                {{ __('Need help? Contact our support team.') }}
                            </p>
                        </td>
                    </tr>
                </table>

                <!-- Bottom Copyright -->
                <table width="100%" max-width="500" cellpadding="0" cellspacing="0" border="0" style="max-width: 500px; margin-top: 25px;">
                    <tr>
                        <td align="center" style="padding: 0 20px;">
                            <p style="margin: 0; font-size: 12px; color: #9ca3af; line-height: 1.5;">
                                &copy; {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}<br>
                                {{ __('Security Note: Never share your OTP code with anyone.') }}
                            </p>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

</body>
</html>