{% extends "errors/base_error.html" %}

{% block title %}Page non trouvée - Bilal Oil{% endblock %}

{% block error_content %}
    <!-- Icône d'erreur animée -->
    <div class="mb-6">
        <div class="error-animation">
            <i class="fas fa-search text-6xl text-gray-400 mb-4"></i>
        </div>
    </div>

    <!-- Code d'erreur -->
    <div class="mb-4">
        <h2 class="text-8xl font-bold text-gray-300">404</h2>
    </div>

    <!-- Message principal -->
    <h3 class="text-2xl font-bold text-gray-800 mb-4">
        Page non trouvée
    </h3>

    <!-- Description -->
    <p class="text-gray-600 mb-6 leading-relaxed">
        Désolé, la page que vous recherchez n'existe pas ou a été déplacée. 
        Elle a peut-être été supprimée, renommée ou vous avez saisi une URL incorrecte.
    </p>

    <!-- Suggestions -->
    <div class="bg-gray-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-lightbulb text-amber-500 mr-2"></i>
            Que pouvez-vous faire ?
        </h4>
        <ul class="text-left space-y-2 text-gray-600">
            <li class="flex items-start">
                <i class="fas fa-check text-green-500 mr-2 mt-1 text-sm"></i>
                Vérifiez l'orthographe de l'URL dans la barre d'adresse
            </li>
            <li class="flex items-start">
                <i class="fas fa-check text-green-500 mr-2 mt-1 text-sm"></i>
                Utilisez le menu de navigation pour trouver ce que vous cherchez
            </li>
            <li class="flex items-start">
                <i class="fas fa-check text-green-500 mr-2 mt-1 text-sm"></i>
                Retournez à la page d'accueil et naviguez à nouveau
            </li>
            <li class="flex items-start">
                <i class="fas fa-check text-green-500 mr-2 mt-1 text-sm"></i>
                Contactez-nous si vous pensez qu'il s'agit d'une erreur
            </li>
        </ul>
    </div>

    <!-- Pages populaires -->
    <div class="bg-amber-50 rounded-lg p-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-star text-amber-500 mr-2"></i>
            Pages populaires
        </h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-left">
            <a href="{% url 'bilal:stations' %}" class="text-amber-600 hover:text-amber-700 transition duration-300 flex items-center">
                <i class="fas fa-gas-pump mr-2"></i>
                Nos stations
            </a>
            <a href="{% url 'bilal:services' %}" class="text-amber-600 hover:text-amber-700 transition duration-300 flex items-center">
                <i class="fas fa-tools mr-2"></i>
                Nos services
            </a>
            <a href="{% url 'bilal:actualites' %}" class="text-amber-600 hover:text-amber-700 transition duration-300 flex items-center">
                <i class="fas fa-newspaper mr-2"></i>
                Actualités
            </a>
            <a href="{% url 'bilal:contact' %}" class="text-amber-600 hover:text-amber-700 transition duration-300 flex items-center">
                <i class="fas fa-envelope mr-2"></i>
                Contact
            </a>
        </div>
    </div>
{% endblock %}