@extends('layouts.notification')

@section('content')
    <!-- Header -->
    <h3 style="margin: 0 0 20px 0; font-size: 22px; font-weight: 600; color: #193b5c; text-transform: uppercase; text-align: center; line-height: 1.3;">
        PASSWORD RESET REQUEST
    </h3>

    <!-- Greeting -->
    <p style="margin: 0 0 15px 0; font-size: 16px; line-height: 1.6; color: #333333; font-weight: 600;">
        Hello {{ $user->first_name }}!
    </p>

    <!-- Intro Message -->
    <p style="margin: 0 0 20px 0; font-size: 16px; line-height: 1.6; color: #333333;">
        You are receiving this email because we received a password reset request for your <strong>{{ config('app.name') }}</strong> account.
        Use the One-Time Password (OTP) below to reset your password securely.
    </p>

    <!-- OTP Reset Card -->
    <div style="background: #f9f9f9; border-radius: 8px; padding: 25px; margin: 25px 0; border: 1px solid #eaeaea; text-align: center;">
        <div style="font-weight: 600; color: #193b5c; font-size: 14px; margin-bottom: 10px; text-transform: uppercase;">
            YOUR PASSWORD RESET CODE
        </div>
        <div style="color: #333333; font-size: 32px; font-weight: 700; letter-spacing: 8px; margin: 15px 0; padding: 10px; background: #ffffff; border: 2px dashed #193b5c; border-radius: 6px; display: inline-block; min-width: 200px;">
            {{ $otp }}
        </div>
        <div style="font-size: 14px; color: #666666; margin-top: 10px;">
            This OTP is valid for <strong>10 minutes</strong>
        </div>
    </div>

    <!-- Security Alert -->
    <div style="background: #fff5f5; border: 1px solid #ffcccc; padding: 18px; margin: 25px 0; border-radius: 6px;">
        <p style="margin: 0 0 12px 0; font-size: 16px; line-height: 1.6; color: #d63031; font-weight: 600;">
         IMPORTANT SECURITY NOTICE
        </p>
        <ul style="margin: 0; padding-left: 20px; color: #666666; font-size: 14px; line-height: 1.5;">
            <li><strong>Do not share</strong> this OTP with anyone</li>
            <li>Our support team will <strong>never</strong> ask for this code</li>
            <li>This code will expire in <strong>10 minutes</strong> for security</li>
            <li>If you didn't request this reset, please secure your account immediately</li>
        </ul>
    </div>


    <!-- No Action Required Notice -->
    <div style="border-top: 1px solid #eaeaea; padding-top: 20px; margin-top: 25px;">
        <p style="margin: 0 0 10px 0; font-size: 15px; line-height: 1.6; color: #666666; text-align: center;">
            <strong>If you didn't request a password reset:</strong><br>
            No further action is required. Your account remains secure.
            However, if you receive multiple unexpected reset emails, please contact our support team immediately.
        </p>
    </div>

    <!-- Support Information -->
    <div style="border-top: 1px solid #eaeaea; padding-top: 20px; margin-top: 20px;">
        <p style="margin: 0 0 10px 0; font-size: 14px; line-height: 1.6; color: #666666; text-align: center;">
            Need assistance? Contact our support team at
            <a href="mailto:operations@afridata.remonode.com" style="color: #193b5c; text-decoration: none; font-weight: 600;">
               operations@afridata.com.ng
            </a>
        </p>
    </div>

    @push('styles')
    <style type="text/css">
        /* Mobile Responsiveness */
        @media screen and (max-width: 600px) {
            h3 {
                font-size: 20px !important;
                line-height: 1.4 !important;
                margin: 0 0 15px 0 !important;
            }

            p {
                font-size: 15px !important;
            }

            /* OTP Card styling for mobile */
            div[style*="background: #f9f9f9"] {
                padding: 20px 15px !important;
                margin: 20px 0 !important;
            }

            /* OTP code styling for mobile */
            div[style*="font-size: 32px"] {
                font-size: 28px !important;
                letter-spacing: 6px !important;
                padding: 8px !important;
                min-width: 180px !important;
            }

            /* Security alert box */
            div[style*="background: #fff5f5"] {
                padding: 15px !important;
                margin: 20px 0 !important;
            }

            /* Instructions box */
            div[style*="background: #f8f9fa"] {
                padding: 15px !important;
                margin: 15px 0 !important;
            }
        }

        /* Extra small devices */
        @media screen and (max-width: 480px) {
            h3 {
                font-size: 18px !important;
            }

            p, div {
                font-size: 14px !important;
            }

            div[style*="font-size: 32px"] {
                font-size: 24px !important;
                letter-spacing: 4px !important;
                min-width: 160px !important;
            }
        }
    </style>
    @endpush
@endsection