{% load lb_tags %}

<c-layouts.base title="Validador de Diplomas | Lo Justo E-Learning">
    <div class="bg-gradient-to-b from-emerald-950 to-zinc-950 text-white py-16 border-b border-emerald-800/60 shadow-2xl relative overflow-hidden">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4 relative z-10">
            <div class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-black uppercase tracking-widest">
                🔒 Sistema de Verificación Criptográfica & QR
            </div>
            <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-white leading-tight">
                Validador Oficial de <span class="text-amber-400">Certificaciones</span>
            </h1>
            <p class="text-zinc-300 text-sm sm:text-base max-w-xl mx-auto font-medium leading-relaxed">
                Ingresa el código único del diploma o escanea el código QR institucional para verificar la autenticidad y vigencia de la competencia técnica acreditada.
            </p>
        </div>
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-emerald-600/10 via-transparent to-transparent pointer-events-none"></div>
    </div>

    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-8 relative z-20">
        <div class="bg-white dark:bg-zinc-900 border-2 border-emerald-500/40 rounded-3xl p-8 sm:p-10 shadow-2xl space-y-8">
            <form method="get" action="{% url 'certificates:verify_search' %}" class="space-y-6">
                <div class="space-y-2">
                    <label for="code" class="block text-xs font-black uppercase tracking-widest text-zinc-600 dark:text-zinc-400">
                        Código Único de Diploma (Ej. LJ-2026-MET1)
                    </label>
                    <div class="relative">
                        <input
                            type="text"
                            id="code"
                            name="code"
                            required
                            placeholder="LJ-2026-XXXX"
                            class="input w-full pl-5 pr-32 py-6 bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-300 dark:border-zinc-700 focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/15 rounded-2xl text-lg font-mono font-bold uppercase tracking-wider text-zinc-900 dark:text-white transition-all"
                        />
                        <button type="submit" class="absolute right-2 top-2 bottom-2 px-6 bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider text-xs rounded-xl shadow-lg hover:shadow-emerald-600/30 transition-all flex items-center space-x-1 border-0">
                            <span>Validar</span>
                            <c-lbi.rmx.arrow-right w="1rem" h="1rem" />
                        </button>
                    </div>
                </div>
            </form>

            <div class="border-t border-zinc-100 dark:border-zinc-800 pt-6 grid grid-cols-1 md:grid-cols-2 gap-6 text-xs text-zinc-500 dark:text-zinc-400">
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0 font-black">1</div>
                    <div>
                        <span class="font-bold text-zinc-900 dark:text-white block">Código QR en Físico</span>
                        <span>Cada certificado impreso en PDF incluye un código QR verificable con cualquier cámara de smartphone.</span>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 rounded-full bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0 font-black">2</div>
                    <div>
                        <span class="font-bold text-zinc-900 dark:text-white block">Normativa e Imparcialidad</span>
                        <span>Garantiza la competencia metrológica del alumno/auditor bajo cláusula 6.2 de ISO/IEC 17025.</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerta de Ejemplo Rápido para Prueba -->
        <div class="mt-8 bg-amber-400/10 border border-amber-400/30 rounded-2xl p-4 text-center">
            <span class="text-xs font-bold text-amber-700 dark:text-amber-300">
                💡 Para probar la demostración en vivo, haz clic aquí o busca el código de prueba:
            </span>
            <a href="{% url 'certificates:verify_detail' certificate_code='LJ-2026-MET1' %}" class="font-mono font-black text-amber-600 dark:text-amber-400 underline ml-2">
                LJ-2026-MET1
            </a>
        </div>
    </div>
</c-layouts.base>
