{% extends "base.html" %}

{% block title %}Account Pending Approval – Try English AI{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    body { font-family: 'Inter', sans-serif; }
    .dg { background-image:radial-gradient(rgba(6,182,212,0.45) 1px,transparent 1px);background-size:36px 36px; }
    .gc { background:rgba(6,182,212,0.04);border:1px solid rgba(6,182,212,0.15);border-radius:1rem; }
    .btn-p { display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a;font-weight:700;border-radius:0.5rem;padding:0.75rem 1.5rem;transition:all 0.2s;border:none;cursor:pointer;font-size:0.875rem; }
    .btn-p:hover { transform:translateY(-1px);box-shadow:0 0 24px rgba(6,182,212,0.25); }
    .btn-g { display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border:1px solid rgba(6,182,212,0.3);color:#e0f2fe;border-radius:0.5rem;padding:0.75rem 1.5rem;transition:all 0.2s;background:transparent;font-size:0.875rem;font-weight:600; }
    .btn-g:hover { background:rgba(6,182,212,0.08); }
    @keyframes fiu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
    .fiu { animation:fiu 0.6s ease-out; }
    @keyframes pulseGlow {
        0%,100% { box-shadow:0 0 0 0 rgba(251,191,36,0.4); }
        50% { box-shadow:0 0 0 16px rgba(251,191,36,0); }
    }
    .pulse-glow { animation:pulseGlow 2.4s infinite; }
    @keyframes spinSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .spin-slow { animation:spinSlow 9s linear infinite; }
</style>
{% endblock extra_css %}

{% block content %}
<div class="min-h-screen flex items-center justify-center px-4 py-12 relative" style="background:#04091a">
    <div class="absolute inset-0 dg opacity-30 pointer-events-none"></div>
    <div class="absolute left-1/3 top-1/4 w-96 h-96 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(99,102,241,0.10),transparent 70%)"></div>
    <div class="absolute right-1/4 bottom-1/3 w-72 h-72 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(251,191,36,0.07),transparent 70%)"></div>

    <div class="w-full max-w-lg relative z-10">
        <div class="gc overflow-hidden fiu">

            <!-- Top accent -->
            <div class="h-1" style="background:linear-gradient(90deg,#22d3ee,#6366f1,#a78bfa)"></div>

            <div class="p-8 sm:p-10 text-center">

                <!-- Animated icon -->
                <div class="flex justify-center mb-7">
                    <div class="relative">
                        <div class="w-20 h-20 rounded-full flex items-center justify-center pulse-glow" style="background:rgba(251,191,36,0.12);border:2px solid rgba(251,191,36,0.3)">
                            <i class="fas fa-clock text-3xl" style="color:#fbbf24"></i>
                        </div>
                        <div class="absolute -inset-2 rounded-full border-2 border-dashed spin-slow" style="border-color:rgba(251,191,36,0.3)"></div>
                    </div>
                </div>

                <h1 class="text-2xl sm:text-3xl font-bold text-white mb-3">Account Under Review</h1>
                <p class="text-sm mb-8 leading-relaxed" style="color:#94a3b8">
                    Your registration was submitted successfully! Our admin team is reviewing your account.
                    You’ll receive an email notification once approved.
                </p>

                <!-- Timeline -->
                <div class="text-left rounded-xl p-5 mb-6 space-y-4" style="background:rgba(6,182,212,0.04);border:1px solid rgba(6,182,212,0.1)">

                    <div class="flex items-start gap-3">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5" style="background:rgba(34,197,94,0.2);border:1px solid rgba(34,197,94,0.4)">
                            <i class="fas fa-check text-xs" style="color:#4ade80"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-white">Account Created</p>
                            <p class="text-xs" style="color:#94a3b8">Your information has been securely saved</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5" style="background:rgba(251,191,36,0.2);border:1px solid rgba(251,191,36,0.4)">
                            <i class="fas fa-clock text-xs" style="color:#fbbf24"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-white">Admin Review <span class="ml-1 text-xs rounded-full px-2 py-0.5" style="background:rgba(251,191,36,0.15);color:#fde68a">In Progress</span></p>
                            <p class="text-xs" style="color:#94a3b8">Your account is being reviewed by administration</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3 opacity-40">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5" style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1)">
                            <i class="fas fa-unlock text-xs" style="color:#94a3b8"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-white">Access Granted</p>
                            <p class="text-xs" style="color:#94a3b8">You’ll be notified by email when ready</p>
                        </div>
                    </div>
                </div>

                <!-- Info box -->
                <div class="flex items-start gap-3 rounded-xl p-4 mb-8 text-left" style="background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.15)">
                    <i class="fas fa-info-circle mt-0.5 flex-shrink-0" style="color:#22d3ee"></i>
                    <p class="text-sm leading-relaxed" style="color:#7dd3fc">
                        You cannot log in until your account is approved. This process typically takes
                        <strong class="text-white">1–2 business days</strong>. Check your email inbox (including spam folder) for updates.
                    </p>
                </div>

                <!-- Buttons -->
                <div class="flex flex-col sm:flex-row gap-3">
                    <a href="{{ url_for('auth.login') }}" class="btn-p flex-1"><i class="fas fa-sign-in-alt"></i> Back to Login</a>
                    <a href="{{ url_for('main.index') }}" class="btn-g flex-1"><i class="fas fa-home"></i> Go to Home</a>
                </div>
            </div>

            <!-- Bottom bar -->
            <div class="px-8 py-4 text-center" style="background:rgba(255,255,255,0.02);border-top:1px solid rgba(6,182,212,0.08)">
                <p class="text-xs" style="color:#475569">
                    Need help? Contact the <span class="font-medium" style="color:#94a3b8">English Department Office</span> — Mon–Fri, 9:00 AM – 5:00 PM
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 0.6s ease-out; }
    @keyframes pulse-ring {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
        70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    }
    .pulse-ring { animation: pulse-ring 2s infinite; }
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .spin-slow { animation: spin-slow 8s linear infinite; }
</style>
{% endblock extra_css %}

{% block content %}
<div class="bg-gray-50 min-h-screen flex items-center">
    <div class="max-w-lg mx-auto px-4 py-12 sm:px-6 w-full">

        <!-- Card -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden fade-in-up">

            <!-- Top gradient bar -->
            <div class="h-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

            <div class="p-8 sm:p-10 text-center">

                <!-- Animated Icon -->
                <div class="flex justify-center mb-6">
                    <div class="relative">
                        <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center pulse-ring">
                            <svg class="w-10 h-10 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <!-- Spinning ring decoration -->
                        <div class="absolute -inset-2 rounded-full border-2 border-dashed border-amber-300 spin-slow"></div>
                    </div>
                </div>

                <!-- Title -->
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-3">
                    Account Under Review
                </h1>
                <p class="text-gray-500 text-base mb-8 leading-relaxed">
                    Your registration was submitted successfully! Our admin team is reviewing your account. 
                    You'll receive an email notification once approved.
                </p>

                <!-- Steps timeline -->
                <div class="text-left bg-gray-50 rounded-xl p-5 mb-6 space-y-4">
                    <!-- Step 1 - Done -->
                    <div class="flex items-start gap-3">
                        <div class="w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Account Created</p>
                            <p class="text-xs text-gray-500">Your information has been securely saved</p>
                        </div>
                    </div>
                    <!-- Step 2 - In Progress -->
                    <div class="flex items-start gap-3">
                        <div class="w-7 h-7 rounded-full bg-amber-400 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Admin Review <span class="ml-1 text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">In Progress</span></p>
                            <p class="text-xs text-gray-500">Your account is being reviewed by administration</p>
                        </div>
                    </div>
                    <!-- Step 3 - Pending -->
                    <div class="flex items-start gap-3 opacity-50">
                        <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Access Granted</p>
                            <p class="text-xs text-gray-500">You'll be notified by email when ready</p>
                        </div>
                    </div>
                </div>

                <!-- Info box -->
                <div class="flex items-start gap-3 bg-blue-50 border border-blue-100 rounded-xl p-4 mb-8 text-left">
                    <svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    <p class="text-sm text-blue-700">
                        You cannot log in until your account is approved. This process typically takes 
                        <strong>1–2 business days</strong>. Check your email inbox (including spam folder) for updates.
                    </p>
                </div>

                <!-- Buttons -->
                <div class="flex flex-col sm:flex-row gap-3">
                    <a href="{{ url_for('auth.login') }}"
                        class="flex-1 bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors text-sm sm:text-base flex items-center justify-center gap-2">
                        <i class="fas fa-sign-in-alt"></i>
                        Back to Login
                    </a>
                    <a href="{{ url_for('main.index') }}"
                        class="flex-1 bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-200 transition-colors text-sm sm:text-base flex items-center justify-center gap-2">
                        <i class="fas fa-home"></i>
                        Go to Home
                    </a>
                </div>
            </div>

            <!-- Bottom help bar -->
            <div class="bg-gray-50 border-t border-gray-100 px-8 py-4 text-center">
                <p class="text-xs text-gray-500">
                    Need help? Contact the 
                    <span class="font-medium text-gray-700">English Department Office</span> — 
                    Mon–Fri, 9:00 AM – 5:00 PM
                </p>
            </div>
        </div>

    </div>
</div>
{% endblock %}