{% extends "base.html" %}

{% block title %}Enlace No Encontrado - Renako{% endblock %}

{% block content %}
<div class="min-h-96 flex items-center justify-center">
    <div class="text-center max-w-md mx-auto">
        <div class="mb-8">
            {% if error_message and 'expirado' in error_message %}
                <i class="fas fa-clock text-8xl text-orange-300 mb-4"></i>
                <h1 class="text-6xl font-bold text-gray-900 mb-4">⏰</h1>
                <h2 class="text-2xl font-semibold text-gray-700 mb-4">Enlace Expirado</h2>
                <p class="text-gray-600 mb-8">
                    Este enlace ha expirado y ya no está disponible. Los enlaces tienen una duración limitada por seguridad.
                </p>
            {% else %}
                <i class="fas fa-unlink text-8xl text-gray-300 mb-4"></i>
                <h1 class="text-6xl font-bold text-gray-900 mb-4">404</h1>
                <h2 class="text-2xl font-semibold text-gray-700 mb-4">Enlace No Encontrado</h2>
                <p class="text-gray-600 mb-8">
                    Lo sentimos, el enlace que estás buscando no existe o ha sido eliminado.
                </p>
            {% endif %}
        </div>
        
        <div class="space-y-4">
            <a 
                href="{{ url_for('index') }}" 
                class="inline-flex items-center px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105"
            >
                <i class="fas fa-home mr-2"></i>
                Volver al Inicio
            </a>
            
            <div class="text-sm text-gray-500">
                <p>¿Necesitas ayuda? Verifica que el enlace esté escrito correctamente.</p>
            </div>
        </div>
        
        <!-- Sugerencias -->
        <div class="mt-12 bg-gray-50 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
                Posibles causas:
            </h3>
            <ul class="text-left text-sm text-gray-600 space-y-2">
                <li class="flex items-start">
                    <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
                    El enlace fue eliminado por su creador
                </li>
                <li class="flex items-start">
                    <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
                    El código del enlace fue escrito incorrectamente
                </li>
                <li class="flex items-start">
                    <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
                    El enlace ha expirado o nunca existió
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}