{% extends '@App/base.html.twig' %}

{% block title %}Page introuvable{% endblock %}

{% block body %}
    <main class="min-vh-100 d-flex align-items-center justify-content-center px-3 py-5 bg-light">
        <section class="text-center" style="max-width:760px">
            <div class="display-1 fw-bold text-secondary mb-3">404</div>
            <h1 class="h2 fw-bold mb-3">Cette page est introuvable</h1>
            <p class="text-muted fs-5 mb-2">Le lien suivi est incorrect, expiré ou la page a été déplacée.</p>
            {% if fromPath %}
                <p class="text-muted small">Chemin demandé : <strong>{{ fromPath }}</strong></p>
            {% endif %}
            <div class="d-flex flex-column flex-sm-row justify-content-center gap-3 mt-4">
                <a href="{{ homeUrl }}" class="btn btn-primary btn-lg">Retour à l'accueil</a>
                <button type="button" class="btn btn-light btn-lg border" onclick="window.history.back()">Revenir en arrière</button>
            </div>
            <div class="card border-0 shadow-sm mt-5 text-start">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Besoin d'aide ?</h2>
                    <p class="text-muted mb-3">Si le problème persiste, le support peut vous aider.</p>
                    <a href="mailto:{{ supportEmail }}" class="fw-semibold">Contacter le support</a>
                </div>
            </div>
            {% if quickLinks is not empty %}
                <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
                    {% for link in quickLinks %}
                        <a href="{{ link.url }}" class="text-decoration-none fw-semibold">{{ link.label }}</a>
                    {% endfor %}
                </div>
            {% endif %}
        </section>
    </main>
{% endblock %}