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

{% set is_pl = app.request.locale == 'pl' %}

{% block title %}404 - Ferrio{% endblock %}
{% block meta_description %}{{ is_pl ? 'Strona nie znaleziona' : 'Page not found' }}{% endblock %}

{% block meta_extra %}
    <meta name="robots" content="noindex">
{% endblock %}

{% block body %}
    <main id="main-content" class="flex items-center justify-center px-4 py-16">
        <div class="text-center max-w-md">
            <div class="mb-8 flex justify-center">
                <div class="p-6 bg-amber-100 dark:bg-amber-900/30 rounded-full">
                    <svg class="w-16 h-16 text-amber-600 dark:text-amber-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><title>Error</title><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
                </div>
            </div>

            <h1 class="text-6xl sm:text-7xl font-bold text-gray-900 dark:text-white mb-4">404</h1>

            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">
                {{ is_pl ? 'Strona nie znaleziona' : 'Page Not Found' }}
            </h2>

            <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
                {{ is_pl ? 'Strona, której szukasz, nie istnieje lub została przeniesiona.' : 'The page you are looking for does not exist or has been moved.' }}
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                <a href="{{ path('home') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-linear-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 dark:from-amber-500 dark:to-orange-500 dark:hover:from-amber-600 dark:hover:to-orange-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><title>Home</title><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                    <span>{{ is_pl ? 'Dzisiejsze święta' : "Today's Holidays" }}</span>
                </a>

                <a href="{{ path('upcoming', {week: 0}) }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-full shadow hover:shadow-lg transition-all duration-200 hover:scale-105">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><title>Calendar</title><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>
                    <span>{{ is_pl ? 'Nadchodzące święta' : 'Upcoming Holidays' }}</span>
                </a>
            </div>
        </div>
    </main>
{% endblock %}