{% extends 'base.html.twig' %}
{% block title %}{{ 'error.not_found.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'error.not_found.meta_description'|trans }}{% endblock %}

{% block body %}
<section class="py-32">
    <div class="max-w-xl mx-auto px-4 text-center">
        <p class="text-8xl font-extrabold text-scout/20">404</p>
        <h1 class="mt-4 text-3xl font-extrabold text-dark">{{ 'error.not_found.heading'|trans }}</h1>
        <p class="mt-4 text-lg text-gray-500">{{ 'error.not_found.subtitle'|trans }}</p>
        <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ path('app_home') }}" class="px-6 py-3 bg-scout text-white font-semibold rounded-full hover:bg-scout/90 transition">
                {{ 'error.not_found.home'|trans }}
            </a>
            <a href="{{ path('app_stories') }}" class="px-6 py-3 bg-white border border-gray-200 text-gray-600 font-semibold rounded-full hover:bg-gray-50 transition">
                {{ 'error.not_found.stories'|trans }}
            </a>
        </div>
    </div>
</section>
{% endblock %}