<x-emails.layout :subject="'Your Secure OTP Code'" :headerTitle="config('app.name')" :headerUrl="route('user.verify.otp')">
    <!-- Header Title -->
    <h1
        style="margin:0 0 24px 0; font-size:28px; font-weight:700; color:#0369a1; text-align:center; letter-spacing:1px;">
        Verify Your Email
    </h1>

    <!-- Greeting -->
    <p style="margin:0 0 16px 0; font-size:16px; line-height:1.6; color:#333;">
        Hello,
    </p>

    <p style="margin:0 0 28px 0; font-size:16px; line-height:1.6; color:#555;">
        Please use the One-Time Password (OTP) below to verify your email and continue your secure registration process
        with <strong>{{ config('app.name') }}</strong>.
    </p>

    <!-- OTP Card -->
    <div
        style="
            margin:30px 0;
            padding:25px 0;
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
            border-radius:12px;
            text-align:center;
            color:#ffffff;
            font-family: 'Courier New', monospace;
            font-size:36px;
            font-weight:700;
            letter-spacing:12px;
            box-shadow:0 4px 12px rgba(0,0,0,0.1);
        ">
        {{ $otp }}
    </div>

    <!-- Info -->
    <p style="margin:0 0 24px 0; font-size:15px; color:#555; text-align:center;">
        This code will expire in <strong>10 minutes</strong>. For your security, do not share this code with anyone.
    </p>

    <!-- Button -->
    <div style="text-align:center; margin-top:30px;">
        <a href="{{ route('user.verify.otp') }}"
            style="
                display:inline-block;
                background: linear-gradient(90deg, #0ea5e9, #0284c7);
                color:#ffffff;
                font-size:16px;
                font-weight:600;
                text-decoration:none;
                padding:14px 36px;
                border-radius:8px;
                box-shadow:0 4px 12px rgba(0,0,0,0.15);
                transition:all 0.2s ease-in-out;
           "
            onmouseover="this.style.background='linear-gradient(90deg, #0284c7, #0ea5e9)';"
            onmouseout="this.style.background='linear-gradient(90deg, #0ea5e9, #0284c7)';">
            Go to Verification Page
        </a>
    </div>

    <!-- Footer Note -->
    <p style="margin-top:40px; font-size:14px; color:#555; text-align:center; line-height:1.6;">
        Thank you for choosing <strong>{{ config('app.name') }}</strong>.<br>
        &mdash; The {{ config('app.name') }} Team
    </p>
</x-emails.layout>
