{% extends 'base.html.twig' %}

{% block title %}{{ 'error.404.title'|trans }} - {{ parent() }}{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center text-center">
        <div class="col-lg-6">
            <div class="error-page">
                <div class="error-code text-primary mb-4">
                    <i class="fas fa-exclamation-triangle fa-5x"></i>
                </div>
                
                <h1 class="display-1 fw-bold text-primary">404</h1>
                <h2 class="mb-4">{{ 'error.404.heading'|trans }}</h2>
                
                <p class="lead text-muted mb-5">
                    {{ 'error.404.description'|trans }}
                </p>

                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                    <a href="{{ path('app_home') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-home me-2"></i>{{ 'error.404.back_home'|trans }}
                    </a>
                    <a href="{{ path('catalog_index') }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-search me-2"></i>{{ 'error.404.browse_catalog'|trans }}
                    </a>
                </div>

                <div class="mt-5">
                    <h5 class="text-muted">{{ 'error.404.suggestions'|trans }} :</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ path('catalog_index') }}" class="text-decoration-none">
                            <i class="fas fa-chess-rook me-2"></i>{{ 'error.404.discover_antiques'|trans }}
                        </a></li>
                        <li><a href="{{ path('directory_index') }}" class="text-decoration-none">
                            <i class="fas fa-users me-2"></i>{{ 'error.404.dealer_directory'|trans }}
                        </a></li>
                        <li><a href="{{ path('app_contact') }}" class="text-decoration-none">
                            <i class="fas fa-envelope me-2"></i>{{ 'error.404.contact_us'|trans }}
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-page {
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.display-1 {
    font-size: 8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>
{% endblock %}