@extends('email.mail')

@section('body')
    <!-- Content Table -->
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td style="padding: 40px 30px; text-align: center;">

                <!-- Lock Icon -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding-bottom: 30px;">
                            <img src="{{ config('app.aws_url') }}/mail_layout/hand_shake.png" alt="WAC Charge Map"
                                width="80" height="80"
                                style="display: block; border: 0; max-width: 80px; height: auto; margin: 0 auto;" />
                        </td>
                    </tr>
                </table>

                <!-- Greeting -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding-bottom: 20px;">
                            <h1
                                style="margin: 0; padding: 0; font-size: 24px; color: #333333; font-weight: 600; line-height: 32px; font-family: Arial, Helvetica, sans-serif;">
                                Hello {{ $name }},
                            </h1>
                        </td>
                    </tr>
                </table>

                <!-- Message -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding-bottom: 30px;">
                            <p
                                style="margin: 0; padding: 0; font-size: 14px; color: #666666; line-height: 22px; font-family: Arial, Helvetica, sans-serif;">
                                We received a request to reset your password. Please use the following One-Time Password
                                (OTP) to complete the process:
                            </p>
                        </td>
                    </tr>
                </table>

                <!-- OTP Code Box -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding: 25px 0;">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td
                                        style="background-color: #f0fdf4; border: 2px solid #16a34a; border-radius: 8px; padding: 20px 40px;">
                                        <span
                                            style="font-size: 32px; color: #16a34a; font-weight: 700; letter-spacing: 8px; font-family: 'Courier New', Courier, monospace;">
                                            {{ $otp }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <!-- Expiration Notice -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding-top: 20px; padding-bottom: 10px;">
                            <p
                                style="margin: 0; padding: 0; font-size: 13px; color: #dc2626; line-height: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: 500;">
                                This OTP will expire in 10 minutes
                            </p>
                        </td>
                    </tr>
                </table>

                <!-- Security Warning -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" style="padding-top: 15px;">
                            <p
                                style="margin: 0; padding: 0; font-size: 12px; color: #999999; line-height: 18px; font-family: Arial, Helvetica, sans-serif;">
                                If you didn't request this password reset, please ignore this email or contact support if
                                you have concerns.
                            </p>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
@endsection