{% extends "jobs/base.html" %}
{% load i18n %}
{% load static %}

{% block head_title %}{% trans "Verify Your Email" %}{% endblock %}

{% block content %}
<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-[80vh] flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 animate__animated animate__fadeInUp">
        
        <!-- ✉️ Main Card -->
        <div class="bg-white rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100 p-8 md:p-12 text-center relative">
            
            <!-- Floating Decoration -->
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-600/10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-600/10 rounded-full blur-3xl"></div>

            <!-- Icon Section -->
            <div class="relative mx-auto w-24 h-24 mb-8">
                <div class="absolute inset-0 bg-blue-100 rounded-full animate-ping opacity-25"></div>
                <div class="relative flex items-center justify-center w-24 h-24 bg-gradient-to-br from-blue-600 to-blue-700 rounded-full shadow-lg text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </div>
            </div>

            <!-- Content -->
            <h2 class="text-3xl font-black text-slate-900 mb-4 tracking-tight uppercase">
                Inbox Check <span class="text-blue-600 italic">Kariye Bhai!</span>
            </h2>
            
            <p class="text-slate-500 font-medium mb-8 leading-relaxed">
                {% blocktrans %}Humne aapko ek verification link bheja hai. Kripya apna email check karein aur account activate karne ke liye link par click karein.{% endblocktrans %}
            </p>

            <!-- Steps Box -->
            <div class="bg-slate-50 rounded-3xl p-6 text-left mb-8 border border-slate-100 shadow-inner">
                <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Kya Karna Hai?</h4>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3">
                        <div class="mt-1 w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                            <i class="fas fa-check text-[10px] text-green-600"></i>
                        </div>
                        <p class="text-sm text-slate-600 font-bold">Apna registered email kholein.</p>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="mt-1 w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                            <i class="fas fa-check text-[10px] text-green-600"></i>
                        </div>
                        <p class="text-sm text-slate-600 font-bold">"Videsh Chalo" wala mail dhundhein.</p>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="mt-1 w-5 h-5 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
                            <i class="fas fa-exclamation text-[10px] text-amber-600"></i>
                        </div>
                        <p class="text-sm text-slate-600 font-bold italic">Mail na mile toh <span class="text-slate-900 underline decoration-amber-400">Spam/Junk</span> folder check karein.</p>
                    </li>
                </ul>
            </div>

            <!-- Actions -->
            <div class="space-y-4">
                <a href="{% url 'home' %}" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-4 rounded-2xl shadow-xl transition-all hover:scale-[1.02] active:scale-95 no-underline">
                    Home Par Chalein
                </a>
                
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mt-6">
                    Aapka sapna, hamari zimmedari ❤️
                </p>
            </div>
        </div>

        <!-- Help Link -->
        <div class="text-center">
            <p class="text-sm text-slate-400">
                Koi dikat aa rahi hai? <a href="/contact" class="text-blue-600 font-bold hover:underline">Sampark Karein</a>
            </p>
        </div>
    </div>
</div>

<style>
    /* Professional Scrollbar if needed */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; }
</style>
{% endblock %}