<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verifikasi Email - INTERIA</title>

    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        :root {
            --color-primary: #fef9c3;
            --color-secondary: #fed7aa;
            --brand-text: #78350f;
        }

        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            position: relative;
            overflow-x: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Background Decorations */
        body::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        body::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -15%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        /* Modern Card */
        .glass-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }

        /* Gradient Secondary - Match INTERIA Theme */
        .gradient-secondary {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%);
            color: #78350f !important;
        }

        .gradient-text {
            background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Button Styles */
        .btn-primary {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
        }

        .btn-outline {
            border: 2px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            border-color: #d97706;
            color: #d97706;
            background: #fffbeb;
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        @keyframes pulse-ring {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 15px rgba(217, 119, 6, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
            }
        }

        .pulse-animation {
            animation: pulse-ring 2s infinite;
        }

        /* Container */
        .verify-container {
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            padding: 1rem;
        }
    </style>
</head>

<body>
    <div class="verify-container animate-fade-in-up">
        <div class="glass-card rounded-2xl p-6 md:p-8 shadow-xl">

            <!-- Icon & Brand -->
            <div class="text-center mb-6">
                <div class="w-20 h-20 gradient-secondary rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg pulse-animation">
                    <i class="fas fa-envelope-open-text text-[#78350f] text-2xl"></i>
                </div>
                <h1 class="text-3xl font-bold gradient-text">INTERIA</h1>
                <p class="text-gray-500 text-xs mt-1">Toko Premium e-Commerce Anda</p>
            </div>

            <!-- Title -->
            <div class="text-center mb-5">
                <h2 class="text-xl font-bold text-slate-800 mb-2">Verifikasi Email Anda</h2>
                <p class="text-gray-500 text-sm leading-relaxed">
                    Terima kasih sudah mendaftar! Kami telah mengirimkan link verifikasi ke email Anda.
                    Silakan cek inbox atau folder spam Anda.
                </p>
            </div>

            <!-- Info Box -->
            <div class="mb-5 p-3 rounded-xl bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-100">
                <div class="flex items-start gap-2">
                    <i class="fas fa-info-circle text-amber-600 text-sm mt-0.5"></i>
                    <p class="text-xs text-amber-700">
                        Setelah klik link di email, Anda akan diarahkan ke halaman login secara otomatis.
                    </p>
                </div>
            </div>

            <!-- Success Message (setelah resend) -->
            @if (session('status') == 'verification-link-sent')
            <div class="mb-5 p-3 rounded-xl bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200">
                <div class="flex items-center gap-2">
                    <i class="fas fa-check-circle text-green-500 text-sm"></i>
                    <p class="text-xs font-medium text-green-700">
                        Link verifikasi baru telah dikirim ke email Anda!
                    </p>
                </div>
            </div>
            @endif

            <!-- Email Info - Menampilkan email user yang login -->
            @auth
            <div class="mb-5 p-3 rounded-xl bg-slate-50 border border-slate-200">
                <div class="flex items-center gap-2">
                    <i class="fas fa-envelope text-amber-600 text-sm"></i>
                    <div class="flex-1">
                        <p class="text-xs text-slate-600">Email terdaftar:</p>
                        <p class="text-sm font-semibold text-slate-800">
                            {{ Auth::user()->email }}
                        </p>
                    </div>
                </div>
            </div>
            @else
            <div class="mb-5 p-3 rounded-xl bg-red-50 border border-red-200">
                <div class="flex items-center gap-2">
                    <i class="fas fa-exclamation-triangle text-red-500 text-sm"></i>
                    <div class="flex-1">
                        <p class="text-xs text-red-700">
                            Anda belum login. Silakan <a href="{{ route('login') }}" class="font-medium underline">masuk terlebih dahulu</a> untuk verifikasi email.
                        </p>
                    </div>
                </div>
            </div>
            @endauth

            <!-- Resend Button - Hanya tampil jika user login -->
            @auth
            <form method="POST" action="{{ route('verification.send') }}" class="mb-3">
                @csrf
                <button type="submit"
                    class="w-full gradient-secondary font-semibold py-3.5 px-6 rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center gap-2 hover:-translate-y-0.5 hover:shadow-xl">
                    <i class="fas fa-paper-plane text-sm"></i>
                    <span>Kirim Ulang Email Verifikasi</span>
                </button>
            </form>
            @endauth

            <!-- Logout - Hanya tampil jika user login -->
            @auth
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                    class="w-full btn-outline text-gray-600 font-medium py-2.5 px-4 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 text-sm">
                    <i class="fas fa-sign-out-alt text-sm"></i>
                    <span>Keluar dari Akun</span>
                </button>
            </form>
            @endauth

            <!-- Back to Home -->
            <div class="mt-4 text-center">
                <a href="/" class="inline-flex items-center gap-1 text-gray-400 hover:text-gray-600 text-xs transition-colors group">
                    <i class="fas fa-arrow-left text-[10px] group-hover:-translate-x-1 transition-transform"></i>
                    <span>Kembali ke Beranda</span>
                </a>
            </div>
        </div>

        <!-- Footer - Minimal spacing -->
        <div class="mt-2 text-center">
            <p class="text-[11px] text-gray-400">
                © 2026 INTERIA. Toko Premium e-Commerce Anda
            </p>
        </div>
    </div>
</body>

</html>