{% extends "base.html" %}

{% block title %}Password Reset – 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; }
    .pill { display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(6,182,212,0.3);background:rgba(6,182,212,0.08);color:#67e8f9; }
    .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;cursor:pointer;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.55s ease-out both; }
</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/4 top-1/4 w-80 h-80 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(99,102,241,0.12),transparent 70%)"></div>
    <div class="absolute right-1/4 bottom-1/4 w-64 h-64 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(6,182,212,0.09),transparent 70%)"></div>

    <div class="w-full max-w-lg relative z-10">

        <!-- Back link -->
        <a href="{{ url_for('auth.login') }}" class="inline-flex items-center gap-2 text-sm mb-6 fiu transition-colors" style="color:#94a3b8" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#94a3b8'">
            <i class="fas fa-arrow-left text-xs"></i> Back to Login
        </a>

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

            <div class="p-7 sm:p-10">
                <!-- Header -->
                <div class="flex items-center gap-4 mb-7">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0" style="background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.25)">
                        <i class="fas fa-key text-cyan-300 text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold text-white">Password Reset</h1>
                        <p class="text-sm mt-0.5" style="color:#94a3b8">Follow the steps below to regain access</p>
                    </div>
                </div>

                <!-- Alert notice -->
                <div class="flex items-start gap-3 rounded-xl p-4 mb-7" style="background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2)">
                    <i class="fas fa-info-circle mt-0.5 flex-shrink-0" style="color:#fbbf24"></i>
                    <p class="text-sm leading-relaxed" style="color:#fde68a">
                        For security, password resets are handled manually through your institution’s
                        <strong>English Department</strong> office. There is no self-service reset option.
                    </p>
                </div>

                <!-- Steps -->
                <div class="space-y-3 mb-7">
                    <p class="text-xs font-semibold uppercase tracking-widest mb-4" style="color:#67e8f9">Steps to reset your password</p>

                    <div class="flex gap-4 items-start rounded-xl px-4 py-3" style="background:rgba(6,182,212,0.04);border:1px solid rgba(6,182,212,0.1)">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5" style="background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a">1</div>
                        <div>
                            <p class="text-sm font-semibold text-white">Visit the English Department Office</p>
                            <p class="text-xs mt-0.5" style="color:#94a3b8">Head of Department — English Department</p>
                        </div>
                    </div>

                    <div class="flex gap-4 items-start rounded-xl px-4 py-3" style="background:rgba(99,102,241,0.04);border:1px solid rgba(99,102,241,0.1)">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5" style="background:linear-gradient(135deg,#6366f1,#a78bfa);color:#fff">2</div>
                        <div>
                            <p class="text-sm font-semibold text-white">Bring your student ID &amp; enrollment documents</p>
                            <p class="text-xs mt-0.5" style="color:#94a3b8">For identity verification</p>
                        </div>
                    </div>

                    <div class="flex gap-4 items-start rounded-xl px-4 py-3" style="background:rgba(139,92,246,0.04);border:1px solid rgba(139,92,246,0.1)">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5" style="background:linear-gradient(135deg,#a78bfa,#ec4899);color:#fff">3</div>
                        <div>
                            <p class="text-sm font-semibold text-white">Request a password reset</p>
                            <p class="text-xs mt-0.5" style="color:#94a3b8">Admin will reset your Try English AI account</p>
                        </div>
                    </div>
                </div>

                <!-- Contact info -->
                <div class="grid grid-cols-3 gap-3 rounded-xl p-4 mb-7 text-center" style="background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.12)">
                    <div>
                        <p class="text-xs font-medium uppercase tracking-wide" style="color:#67e8f9">Department</p>
                        <p class="text-sm font-semibold text-white mt-0.5">English Dept.</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium uppercase tracking-wide" style="color:#67e8f9">Office</p>
                        <p class="text-sm font-semibold text-white mt-0.5">HoD Office</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium uppercase tracking-wide" style="color:#67e8f9">Hours</p>
                        <p class="text-sm font-semibold text-white mt-0.5">Mon–Fri, 9–5</p>
                    </div>
                </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>
        </div>

        <p class="text-center text-sm mt-6 fiu" style="color:#475569">
            Don’t have an account?
            <a href="{{ url_for('auth.signup') }}" class="font-semibold ml-1" style="color:#67e8f9" onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">Sign up free</a>
        </p>
    </div>
</div>
{% endblock content %}
    <div class="max-w-lg w-full mx-auto px-4 py-12 sm:px-6">

        <!-- Back link -->
        <a href="{{ url_for('auth.login') }}"
           class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-indigo-600 transition-colors mb-6 group fade-in-up">
            <i class="fas fa-arrow-left text-xs group-hover:-translate-x-1 transition-transform"></i>
            Back to Login
        </a>

        <!-- Card -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden fade-in-up">
            <!-- Top bar -->
            <div class="h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

            <div class="p-7 sm:p-10">
                <!-- Header -->
                <div class="flex items-center gap-4 mb-7">
                    <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-key text-indigo-600 text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">Password Reset</h1>
                        <p class="text-sm text-gray-500 mt-0.5">Follow the steps below to regain access</p>
                    </div>
                </div>

                <!-- Alert -->
                <div class="flex items-start gap-3 bg-amber-50 border border-amber-200 rounded-xl p-4 mb-7">
                    <i class="fas fa-info-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
                    <p class="text-sm text-amber-800 leading-relaxed">
                        For security, password resets are handled manually through your institution's 
                        <strong>English Department</strong> office. There is no self-service reset option.
                    </p>
                </div>

                <!-- Steps -->
                <div class="space-y-3 mb-7">
                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Steps to reset your password</h3>
                    
                    <div class="flex gap-4 items-start bg-gray-50 rounded-xl px-4 py-3">
                        <div class="w-7 h-7 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">1</div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Visit the English Department Office</p>
                            <p class="text-xs text-gray-500 mt-0.5">Head of Department — English Department</p>
                        </div>
                    </div>

                    <div class="flex gap-4 items-start bg-gray-50 rounded-xl px-4 py-3">
                        <div class="w-7 h-7 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">2</div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Bring your student ID &amp; enrollment documents</p>
                            <p class="text-xs text-gray-500 mt-0.5">For identity verification</p>
                        </div>
                    </div>

                    <div class="flex gap-4 items-start bg-gray-50 rounded-xl px-4 py-3">
                        <div class="w-7 h-7 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">3</div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Request a password reset</p>
                            <p class="text-xs text-gray-500 mt-0.5">Admin will reset your Try English AI account</p>
                        </div>
                    </div>
                </div>

                <!-- Contact info -->
                <div class="bg-indigo-50 rounded-xl p-4 mb-7 grid grid-cols-1 sm:grid-cols-3 gap-3 text-center">
                    <div>
                        <p class="text-xs text-indigo-400 font-medium uppercase tracking-wide">Department</p>
                        <p class="text-sm font-semibold text-indigo-900 mt-0.5">English Dept.</p>
                    </div>
                    <div>
                        <p class="text-xs text-indigo-400 font-medium uppercase tracking-wide">Office</p>
                        <p class="text-sm font-semibold text-indigo-900 mt-0.5">HoD Office</p>
                    </div>
                    <div>
                        <p class="text-xs text-indigo-400 font-medium uppercase tracking-wide">Hours</p>
                        <p class="text-sm font-semibold text-indigo-900 mt-0.5">Mon–Fri, 9–5</p>
                    </div>
                </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 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors text-sm text-center 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 py-3 rounded-lg font-semibold hover:bg-gray-200 transition-colors text-sm text-center flex items-center justify-center gap-2">
                        <i class="fas fa-home"></i> Go to Home
                    </a>
                </div>
            </div>
        </div>

        <!-- Create account link -->
        <p class="text-center text-sm text-gray-500 mt-6 fade-in-up">
            Don't have an account?
            <a href="{{ url_for('auth.signup') }}" class="text-indigo-600 hover:text-indigo-700 font-semibold ml-1 transition-colors">
                Sign up free
            </a>
        </p>
    </div>
</div>
{% endblock content %}