<x-guest-layout>
    <!-- Header Section -->
    <div class="text-center mb-8">
        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center relative">
            <i class="fas fa-envelope-open-text text-purple-600 dark:text-purple-400 text-3xl"></i>
            <div class="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-teal-500 animate-pulse">
                <i class="fas fa-exclamation text-white text-xs flex items-center justify-center h-full"></i>
            </div>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
            Verifikasi Email Anda
        </h2>
        <p class="text-gray-600 dark:text-gray-300 mt-2">
            Satu langkah lagi untuk mengaktifkan akun Anda
        </p>
    </div>

    <!-- Progress Indicator -->
    <div class="mb-8">
        <div class="flex items-center justify-center space-x-4">
            <div class="flex flex-col items-center">
                <div class="w-10 h-10 rounded-full bg-teal-600 text-white flex items-center justify-center">
                    <i class="fas fa-user-check"></i>
                </div>
                <span class="text-xs mt-2 text-teal-600 dark:text-teal-400">Registrasi</span>
            </div> 
            <div class="w-16 h-1 bg-teal-600"></div>
            <div class="flex flex-col items-center">
                <div class="w-10 h-10 rounded-full bg-teal-600 text-white flex items-center justify-center animate-pulse">
                    <i class="fas fa-envelope"></i>
                </div>
                <span class="text-xs mt-2 font-medium text-gray-800 dark:text-white">Verifikasi Email</span>
            </div>
            <div class="w-16 h-1 bg-gray-300 dark:bg-slate-600"></div>
            <div class="flex flex-col items-center">
                <div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-slate-600 text-gray-500 dark:text-gray-400 flex items-center justify-center">
                    <i class="fas fa-check"></i>
                </div>
                <span class="text-xs mt-2 text-gray-500 dark:text-gray-400">Selesai</span>
            </div>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="mb-6 p-6 rounded-xl border border-purple-100 dark:border-purple-900/30 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/10 dark:to-slate-800/50">
        <div class="text-center">
            <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300 mb-3">
                <i class="fas fa-mail-bulk mr-2"></i>
                Periksa Kotak Masuk Anda
            </h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">
                Kami telah mengirim email verifikasi ke:<br>
                <span class="font-medium text-teal-600 dark:text-teal-400">{{ auth()->user()->email }}</span>
            </p>
            
            <!-- Email Animation -->
            <div class="relative w-32 h-24 mx-auto mb-6">
                <div class="absolute inset-0 bg-gray-200 dark:bg-slate-700 rounded-lg"></div>
                <div class="absolute top-2 left-2 w-28 h-20 bg-white dark:bg-slate-800 rounded-lg shadow-md flex items-center justify-center">
                    <i class="fas fa-envelope text-purple-500 text-2xl animate-bounce"></i>
                </div>
                <div class="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-teal-500 animate-ping"></div>
            </div>
        </div>
    </div>

    <!-- Status Messages -->
    @if (session('status') == 'verification-link-sent')
        <div class="mb-6 p-4 rounded-lg border border-green-100 dark:border-green-900/30 bg-green-50 dark:bg-green-900/10 animate-fade-in">
            <div class="flex items-center">
                <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
                <div>
                    <p class="font-medium text-green-800 dark:text-green-300">
                        Tautan verifikasi baru telah dikirim!
                    </p>
                    <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                        Periksa folder spam jika email tidak ditemukan.
                    </p>
                </div>
            </div>
        </div>
    @endif

    <!-- Action Buttons -->
    <div class="space-y-4">
        <!-- Resend Button -->
        <form method="POST" action="{{ route('verification.send') }}">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center py-3 px-4 bg-gradient-to-r from-purple-600 to-teal-600 hover:from-purple-700 hover:to-teal-700 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 rounded-lg font-semibold text-white group">
                <i class="fas fa-paper-plane mr-2 group-hover:animate-pulse"></i>
                {{ __('Kirim Ulang Email Verifikasi') }}
            </button>
        </form>

        <!-- Divider -->
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300 dark:border-slate-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-4 bg-white dark:bg-slate-800 text-gray-500 dark:text-gray-400">
                    Opsi Lainnya
                </span>
            </div>
        </div>

        <!-- Logout Button -->
        <form method="POST" action="{{ route('logout') }}" class="pt-2">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center py-3 px-4 border-2 border-gray-300 dark:border-slate-600 hover:border-gray-400 dark:hover:border-slate-500 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-all duration-200 group">
                <i class="fas fa-sign-out-alt text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 mr-2"></i>
                <span class="font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white">
                    {{ __('Keluar dari Akun') }}
                </span>
            </button>
        </form>
    </div>

    <!-- Help Section -->
    <div class="mt-8 p-4 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
        <div class="flex items-start">
            <i class="fas fa-question-circle text-teal-500 mt-0.5 mr-3"></i>
            <div>
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Tidak menerima email?
                </p>
                <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                    <li class="flex items-center">
                        <i class="fas fa-search mr-2 text-xs"></i>
                        Periksa folder spam atau junk mail
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-user-check mr-2 text-xs"></i>
                        Pastikan email yang dimasukkan benar
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-clock mr-2 text-xs"></i>
                        Tunggu beberapa menit, lalu coba kirim ulang
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Contact Support -->
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            Masih mengalami masalah?
            <a href="#" class="font-medium text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 transition-colors ml-1 inline-flex items-center">
                Hubungi Support
                <i class="fas fa-external-link-alt ml-1 text-xs"></i>
            </a>
        </p>
    </div>

    <style>
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fade-in 0.5s ease-out;
        }
    </style>

    <script>
        // Add animation to the resend button
        document.addEventListener('DOMContentLoaded', function() {
            const resendBtn = document.querySelector('button[type="submit"]');
            
            resendBtn.addEventListener('click', function(e) {
                // Show loading state
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Mengirim...';
                this.disabled = true;
                
                // Revert after 3 seconds
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                }, 3000);
            });
            
            // Auto-check for email verification every 10 seconds
            setInterval(() => {
                fetch(window.location.href, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    // Check if verification is complete
                    if (!html.includes('verify-email')) {
                        window.location.reload();
                    }
                });
            }, 10000);
        });
    </script>
</x-guest-layout>