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

{% block title %}{{ lang == 'pl' ? 'Nadchodzące niezwykłe święta' : 'Upcoming Unusual Holidays' }}{% if firstDate and lastDate %}: {{ firstDate }} – {{ lastDate }}{% endif %} | Ferrio{% endblock %}
{% block meta_description %}{% if days|length > 0 %}{% set total = 0 %}{% for d in days %}{% set total = total + d.holidays|length %}{% endfor %}{{ lang == 'pl' ? total ~ ' świąt w dniach ' ~ firstDate ~ ' – ' ~ lastDate ~ '. Przeglądaj niezwykłe święta na każdy dzień tygodnia.' : total ~ ' holidays from ' ~ firstDate ~ ' to ' ~ lastDate ~ '. Browse unusual celebrations for every day of the week.' }}{% else %}{{ lang == 'pl' ? 'Przeglądaj nadchodzące niezwykłe święta na cały tydzień' : 'Browse upcoming unusual holidays for the week ahead' }}{% endif %}{% endblock %}

{% block meta_extra %}
    {% set page_title = (lang == 'pl' ? 'Nadchodzące niezwykłe święta' : 'Upcoming Unusual Holidays') ~ (firstDate and lastDate ? ': ' ~ firstDate ~ ' – ' ~ lastDate : '') ~ ' | Ferrio' %}
    {% if days|length > 0 %}
        {% set total = 0 %}
        {% for d in days %}{% set total = total + d.holidays|length %}{% endfor %}
        {% set page_desc = lang == 'pl' ? total ~ ' świąt w dniach ' ~ firstDate ~ ' – ' ~ lastDate ~ '. Przeglądaj niezwykłe święta na każdy dzień tygodnia.' : total ~ ' holidays from ' ~ firstDate ~ ' to ' ~ lastDate ~ '. Browse unusual celebrations for every day of the week.' %}
    {% else %}
        {% set page_desc = lang == 'pl' ? 'Przeglądaj nadchodzące niezwykłe święta na cały tydzień' : 'Browse upcoming unusual holidays for the week ahead' %}
    {% endif %}
    {% set page_url = url('upcoming', {week: weekOffset}) %}

    {% include 'partials/meta_tags.html.twig' with {
        meta_title: page_title,
        meta_description: page_desc,
        meta_url: page_url,
        meta_prev: url('upcoming', {week: weekOffset - 1}),
        meta_next: url('upcoming', {week: weekOffset + 1}),
    } %}

    {# Prevent indexing of far-offset pages to avoid thin/duplicate content #}
    {% if weekOffset|abs > 4 %}
        <meta name="robots" content="noindex, follow">
    {% endif %}

    {# JSON-LD Structured Data #}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "CollectionPage",
        "name": "{{ page_title|e('js') }}",
        "description": "{{ page_desc|e('js') }}",
        "url": "{{ page_url|e('js') }}",
        "isPartOf": {
            "@type": "WebSite",
            "name": "Ferrio",
            "url": "{{ url('home')|e('js') }}"
        },
        "breadcrumb": {
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "{{ lang == 'pl' ? 'Strona główna' : 'Home' }}",
                    "item": "{{ url('home')|e('js') }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "{{ lang == 'pl' ? 'Nadchodzące święta' : 'Upcoming Holidays' }}",
                    "item": "{{ page_url|e('js') }}"
                }
            ]
        }{% if days|length > 0 %},
        "mainEntity": {
            "@type": "ItemList",
            "numberOfItems": {{ days|length }},
            "itemListElement": [
                {% for day in days %}
                {
                    "@type": "ListItem",
                    "position": {{ loop.index }},
                    "item": {
                        "@type": "WebPage",
                        "name": "{{ day.formattedDate|e('js') }}",
                        "url": "{{ url('day', {month: day.month, day: day.day})|e('js') }}",
                        "description": "{{ day.holidays|length }} {{ lang == 'pl' ? 'świąt' : 'holidays' }}"
                    }
                }{{ not loop.last ? ',' : '' }}
                {% endfor %}
            ]
        }{% endif %}
    }
    </script>
{% endblock %}

{% block body %}
    <main id="main-content" class="mb-16 sm:mb-20 md:mb-24 px-4">
        {% include 'partials/header.html.twig' %}

        <h1 class="sr-only">{{ lang == 'pl' ? 'Nadchodzące niezwykłe święta' : 'Upcoming Unusual Holidays' }}</h1>

        {# Week navigation #}
        <div class="mb-4 sm:mb-6 flex items-center justify-center gap-2 sm:gap-4">
            <a href="{{ path('upcoming', {week: weekOffset - 1}) }}"
               class="flex items-center gap-1 sm:gap-2 px-3 py-2 sm:px-4 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm sm:text-base font-semibold rounded-lg shadow hover:shadow-lg transition-all duration-200 hover:scale-105">
                <svg class="w-4 h-4 sm:w-5 sm: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>Previous</title><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
                <span class="hidden sm:inline">{{ lang == 'pl' ? 'Poprzedni tydzień' : 'Previous Week' }}</span>
                <span class="sm:hidden">{{ lang == 'pl' ? 'Wstecz' : 'Prev' }}</span>
            </a>

            {% if weekOffset == 0 %}
                <span class="px-3 py-2 sm:px-4 text-sm sm:text-base font-semibold rounded-lg shadow transition-all duration-200 border-2 border-amber-400 dark:border-amber-600 text-amber-700 dark:text-amber-400 bg-white dark:bg-gray-800 opacity-40 cursor-default">
                    {{ lang == 'pl' ? 'Dzisiaj' : 'Today' }}
                </span>
            {% else %}
                <a href="{{ path('upcoming', {week: 0}) }}"
                   class="px-3 py-2 sm:px-4 text-sm sm:text-base font-semibold rounded-lg shadow transition-all duration-200 border-2 border-amber-400 dark:border-amber-600 text-amber-700 dark:text-amber-400 bg-white dark:bg-gray-800 hover:shadow-lg hover:scale-105">
                    {{ lang == 'pl' ? 'Dzisiaj' : 'Today' }}
                </a>
            {% endif %}

            <a href="{{ path('upcoming', {week: weekOffset + 1}) }}"
               class="flex items-center gap-1 sm:gap-2 px-3 py-2 sm:px-4 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm sm:text-base font-semibold rounded-lg shadow hover:shadow-lg transition-all duration-200 hover:scale-105">
                <span class="hidden sm:inline">{{ lang == 'pl' ? 'Następny tydzień' : 'Next Week' }}</span>
                <span class="sm:hidden">{{ lang == 'pl' ? 'Dalej' : 'Next' }}</span>
                <svg class="w-4 h-4 sm:w-5 sm: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>Next</title><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
            </a>
        </div>

        {# Content #}
        {% if hasError %}
            {% include 'partials/error.html.twig' %}
        {% else %}
            <div class="space-y-4 sm:space-y-6">
                {% for day in days %}
                    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-xl p-4 sm:p-6 border border-gray-100 dark:border-gray-700 hover:shadow-2xl transition-shadow duration-300">
                        <div class="flex items-start gap-3 sm:gap-4 mb-3 sm:mb-4">
                            <div class="shrink-0 p-2 sm:p-3 bg-linear-to-br from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-lg">
                                <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-700 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>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>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 mb-1">
                                    <h2 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-white wrap-break-word">
                                        {{ day.formattedDate }}
                                    </h2>
                                    <span class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
                                        {% if day.daysFromToday == 0 %}
                                            {{ lang == 'pl' ? 'Dzisiaj' : 'Today' }}
                                        {% elseif day.daysFromToday < 0 %}
                                            {% set abs = day.daysFromToday|abs %}
                                            {{ lang == 'pl' ? abs ~ ' dni temu' : (abs == 1 ? '1 day ago' : abs ~ ' days ago') }}
                                        {% else %}
                                            {{ lang == 'pl' ? 'Za ' ~ day.daysFromToday ~ ' dni' : (day.daysFromToday == 1 ? 'In 1 day' : 'In ' ~ day.daysFromToday ~ ' days') }}
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="space-y-2 sm:space-y-3 mt-2 sm:mt-3">
                                    {% for holiday in day.holidays %}
                                        {% set has_desc = holiday.description is not empty %}
                                        <a href="{{ path('day', {month: day.month, day: day.day}) }}#{{ loop.index0 }}"
                                           class="block w-full text-left p-2 sm:p-3 rounded-lg transition-all duration-200 group border border-transparent {{ has_desc ? 'hover:bg-amber-50 dark:hover:bg-gray-700/50 hover:border-amber-200 dark:hover:border-amber-800' : '' }}">
                                            <div class="mb-1">
                                                <span class="font-medium text-sm sm:text-base text-gray-900 dark:text-white break-words {{ has_desc ? 'group-hover:text-amber-600 dark:group-hover:text-amber-400' : '' }}">
                                                    {{ holiday.name }}
                                                </span>
                                            </div>
                                            {% if has_desc %}
                                                <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 ml-3.5 sm:ml-4 leading-relaxed">
                                                    {{ holiday.description|length > 100 ? holiday.description|slice(0, 100)|trim ~ '...' : holiday.description }}
                                                </p>
                                            {% endif %}
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </main>
{% endblock %}