@extends('email.mail')

@section('body')
    <table role="presentation" cellspacing="0" cellpadding="30" width="600" align="center"
        style="background-color: #ffffff;">
        <tr>
            <td style="padding: 40px 30px;">
                <!-- Icon -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center" style="padding-bottom: 30px;">
                            <div
                                style="width: 80px; height: 80px; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">
                                <img src="https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/Jton8QmEzfVfkCXKPM6rZ9SMqk6sbQzWheUHUsWe.png"
                                    alt="Password Reset" width="50" height="50" style="display: block; margin: auto;">
                            </div>
                        </td>
                    </tr>
                </table>

                <!-- Greeting -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center">
                            <h2
                                style="font-size: 24px; color: #000000; font-weight: 600; margin: 0 0 10px 0; padding: 0; text-transform: uppercase; letter-spacing: 1.5px;">
                                Hello {{ $firstName }},
                            </h2>
                        </td>
                    </tr>
                </table>

                <!-- Message -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center"
                            style="font-size: 14px; font-weight: 400; color: #000000; line-height: 22px; letter-spacing: 0.5px; padding: 10px 0 30px 0;">
                            We received a request to reset your password for your <b style="font-weight: 700;">Ibson Eco Rental</b>
                            account. Use the OTP below to complete the password reset process.
                        </td>
                    </tr>
                </table>

                <!-- OTP Box -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center" style="padding: 20px 0;">
                            <div
                                style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 20px 40px; border-radius: 12px; display: inline-block; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);">
                                <p
                                    style="margin: 0; padding: 0; font-size: 12px; font-weight: 500; color: #d1fae5; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;">
                                    Your OTP Code
                                </p>
                                <h1
                                    style="margin: 0; padding: 0; font-size: 36px; font-weight: 700; color: #ffffff; letter-spacing: 8px; font-family: 'Courier New', monospace;">
                                    {{ $otp }}
                                </h1>
                            </div>
                        </td>
                    </tr>
                </table>

                <!-- Expiration Notice -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center"
                            style="font-size: 13px; font-weight: 400; color: #ef4444; line-height: 20px; letter-spacing: 0.5px; padding: 20px 0;">
                            <b style="font-weight: 700;">⏰ Important:</b> This OTP will expire in 5 minutes
                        </td>
                    </tr>
                </table>

                <!-- Security Notice -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td
                            style="font-size: 13px; font-weight: 400; color: #ffffff; line-height: 20px; letter-spacing: 0.5px; padding: 15px 20px; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); border-radius: 8px; margin-top: 20px;">
                            <b style="font-weight: 700;">🔒 Security Reminder:</b><br>
                            • Never share this OTP with anyone<br>
                            • Our team will never ask for your OTP<br>
                            • If you didn't request this reset, please ignore this email or contact our support team
                        </td>
                    </tr>
                </table>

                <!-- Support Info -->
                <table role="presentation" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td align="center"
                            style="font-size: 12px; font-weight: 300; color: #666666; line-height: 18px; padding: 30px 0 0 0;">
                            Need help? Contact our support team at
                            <a href="mailto:{{ config('mail.from.address') }}"
                                style="color: #16a34a; text-decoration: none; font-weight: 500;">
                                {{ config('mail.from.address') }}
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
@endsection