<x-guest-layout>

<style>
    body{
        margin:0;
        font-family:'Inter',sans-serif;
        min-height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        background: linear-gradient(135deg,#93c5fd,#e9d5ff);
        padding:20px;
    }

    .auth-wrapper{
        width:100%;
        max-width:460px;
    }

    .auth-card{
        background:#fff;
        border-radius:20px;
        padding:32px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }

    .logo{
        display:flex;
        justify-content:center;
        margin-bottom:20px;
    }

    .title{
        text-align:center;
        font-size:28px;
        font-weight:700;
        color:#111827;
        margin-bottom:10px;
    }

    .subtitle{
        text-align:center;
        color:#6b7280;
        font-size:14px;
        line-height:1.7;
        margin-bottom:25px;
    }

    .success-box{
        background:#ecfdf5;
        border:1px solid #bbf7d0;
        color:#065f46;
        padding:14px;
        border-radius:12px;
        text-align:center;
        font-size:14px;
        margin-bottom:20px;
    }

    .btn-primary{
        width:100%;
        border:none;
        border-radius:10px;
        padding:12px;
        font-weight:600;
        color:#fff;
        cursor:pointer;
        background:linear-gradient(to right,#2563eb,#1d4ed8);
        transition:.3s;
    }

    .btn-primary:hover{
        transform:translateY(-1px);
    }

    .btn-outline{
        width:100%;
        border:1px solid #d1d5db;
        background:#f9fafb;
        color:#374151;
        border-radius:10px;
        padding:12px;
        font-weight:600;
        cursor:pointer;
        transition:.2s;
    }

    .btn-outline:hover{
        background:#f3f4f6;
    }

    .actions{
        display:flex;
        gap:12px;
        margin-top:24px;
    }

    @media(max-width:640px){

        .auth-card{
            padding:24px;
        }

        .actions{
            flex-direction:column;
        }

        .title{
            font-size:24px;
        }
    }
</style>

<div class="auth-wrapper">

    <div class="auth-card">

         <div class="logo">
            <video
                autoplay
                muted
                loop
                playsinline
                preload="auto"
                class="h-12 object-contain">
                <source src="{{ asset('public/assets/logo-nusaotp.webm') }}" type="video/webm">
            </video>
        </div>

         <div class="title">
            Verifikasi Email
        </div>

         <div class="subtitle">
            Kami telah mengirim link verifikasi ke email kamu.
            Silakan cek inbox atau folder spam untuk melanjutkan akses akun.
        </div>

         @if (session('status') == 'verification-link-sent')

            <div class="success-box">
                Link verifikasi baru berhasil dikirim ke email kamu.
            </div>

        @endif

         <div class="actions">

             <form method="POST"
                  action="{{ route('verification.send') }}"
                  class="w-full">

                @csrf

                <button type="submit" class="btn-primary">
                    Kirim Ulang
                </button>

            </form>

             <form method="POST"
                  action="{{ route('logout') }}"
                  class="w-full">

                @csrf

                <button type="submit" class="btn-outline">
                    Keluar
                </button>

            </form>

        </div>

    </div>

</div>

</x-guest-layout>