{% extends 'base.html.twig' %}
{% block title %}{{ 'badges.title'|trans({'%count%': totalCount}) }}{% endblock %}
{% block meta_description %}{{ 'badges.meta_description'|trans({'%count%': totalCount}) }}{% endblock %}

{% block body %}
{% from '_macros/image.html.twig' import picture %}
{% set charColors = {scout: 'scout', blitz: 'blitz', nova: 'nova', echo: 'echo'} %}
{% set charNames = {scout: 'Scout', blitz: 'Blitz', nova: 'Nova', echo: 'Echo'} %}
{% set locNames = {home: 'badges.location_home'|trans, park: 'badges.location_park'|trans} %}

{# Hero #}
<section class="py-20 bg-gradient-to-b from-cream to-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-dark">{{ 'badges.heading'|trans }}</h1>
        <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
            {{ 'badges.subtitle'|trans({'%count%': totalCount}) }}
        </p>
        <div class="mt-10 flex justify-center gap-12">
            <div>
                <p class="text-4xl font-extrabold text-dark">{{ totalCount }}</p>
                <p class="text-sm text-gray-500">{{ 'badges.count_badges'|trans }}</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold text-dark">4</p>
                <p class="text-sm text-gray-500">{{ 'badges.count_characters'|trans }}</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold text-dark">{{ homeCount }}</p>
                <p class="text-sm text-gray-500">{{ 'badges.count_home'|trans }}</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold text-dark">{{ parkCount }}</p>
                <p class="text-sm text-gray-500">{{ 'badges.count_park'|trans }}</p>
            </div>
        </div>
    </div>
</section>

{# Filters #}
<section class="bg-white border-b border-gray-100">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex flex-wrap gap-3 justify-center">
            <a href="{{ path('app_badges') }}"
               class="px-4 py-2 rounded-full text-sm font-semibold border-2 transition {{ not filters.character and not filters.location ? 'bg-dark text-white border-dark' : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300' }}">
                {{ 'badges.filter_all'|trans }}
            </a>
            {% for slug, name in charNames %}
            <a href="{{ path('app_badges', {character: slug}) }}"
               class="px-4 py-2 rounded-full text-sm font-semibold border-2 transition"
               style="{{ filters.character == slug ? 'background-color: var(--color-' ~ slug ~ '); color: white; border-color: var(--color-' ~ slug ~ ')' : 'border-color: var(--color-' ~ slug ~ '); color: var(--color-' ~ slug ~ ')' }}">
                {{ name }}
            </a>
            {% endfor %}
            <span class="border-l border-gray-200 mx-1"></span>
            {% for locSlug, locName in locNames %}
            <a href="{{ path('app_badges', filters|merge({location: locSlug})) }}"
               class="px-4 py-2 rounded-full text-sm font-semibold border-2 transition {{ filters.location == locSlug ? 'bg-dark text-white border-dark' : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300' }}">
                {{ locName }}
            </a>
            {% endfor %}
        </div>
    </div>
</section>

{# Badge grid #}
<section class="py-16 bg-cream">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            {% for badge in badges %}
            {% set char = badge.character %}
            {% set color = charColors[char] ?? 'gray-400' %}
            <div class="bg-white rounded-2xl p-4 border-2 hover:shadow-lg transition-shadow flex items-center gap-3" style="border-color: var(--color-{{ color }})">
                <div class="w-10 h-10 rounded-full overflow-hidden border-2 shrink-0" style="border-color: var(--color-{{ color }})">
                    {{ picture('images/characters/' ~ char ~ '_ikona.png', 'char_icon', charNames[char] ?? char, 'w-full h-full object-cover rounded-full') }}
                </div>
                <div class="min-w-0">
                    <h3 class="font-bold text-dark text-sm leading-tight">{{ badge.name }}</h3>
                    <span class="text-xs text-gray-500">{{ locNames[badge.location] ?? badge.location }}</span>
                </div>
            </div>
            {% endfor %}
        </div>

        {% if badges is empty %}
        <div class="text-center py-12">
            <p class="text-gray-500">{{ 'badges.empty'|trans }}</p>
        </div>
        {% endif %}
    </div>
</section>

{# CTA #}
<section class="py-16 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-2xl font-bold text-dark">{{ 'badges.cta_title'|trans }}</h2>
        <a href="{{ path('app_download') }}" class="mt-6 inline-flex items-center px-8 py-4 bg-blitz text-white text-lg font-bold rounded-full hover:bg-blitz/90 transition shadow-lg">
            {{ 'badges.cta_button'|trans }}
        </a>
    </div>
</section>
{% endblock %}