@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;">
        VERIFY YOUR EMAIL ADDRESS
    </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;">
        Thank you for registering with <strong>{{ config('app.name') }}</strong>!
        To complete your registration and access your account, please verify your email address using the One-Time Password (OTP) below.
    </p>

    <!-- OTP Verification 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 VERIFICATION 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 Notice -->
    <p style="margin: 25px 0 15px 0; font-size: 14px; line-height: 1.6; color: #666666; text-align: center;">
        <strong>Important:</strong> For your security, never share your verification code with anyone.
        Our team will never ask for this code.
    </p>

    <!-- Support Information -->
    <div style="border-top: 1px solid #eaeaea; padding-top: 20px; margin-top: 25px;">
        <p style="margin: 0 0 10px 0; font-size: 14px; line-height: 1.6; color: #666666;">
            Need help? Contact our support team at
            <a href="mailto:operations@api.bb.remonode.com" style="color: #193b5c; text-decoration: none; font-weight: 600;">
                operations@api.bb.remonode.com
            </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 box */
            div[style*="background: #fff8f8"] {
                padding: 15px !important;
                margin: 20px 0 !important;
            }

            /* Info sections */
            div[style*="margin-bottom: 15px"] {
                margin-bottom: 12px !important;
                padding-bottom: 12px !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