{% extends 'base.html.twig' %}
{% block title %}{{ 'characters.index.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'characters.index.meta_description'|trans }}{% endblock %}

{% block body %}
{% from '_macros/image.html.twig' import picture %}
<section class="py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-center text-dark">{{ 'characters.index.heading'|trans }}</h1>
        <p class="mt-4 text-center text-gray-500 text-lg max-w-xl mx-auto">{{ 'characters.index.subtitle'|trans }}</p>

        <div class="mt-16 grid grid-cols-1 sm:grid-cols-2 gap-8">
            {% set charColors = {scout: 'scout', blitz: 'blitz', nova: 'nova', echo: 'echo'} %}
            {% for slug, char in characters %}
            <a href="{{ path('app_character_show', {slug: slug}) }}"
               class="char-card group bg-white rounded-2xl p-8 border-2 hover:shadow-2xl transition-all duration-300" style="--char-color: var(--color-{{ charColors[slug] }})">
                <div class="flex items-center gap-6">
                    <div class="w-28 h-28 shrink-0 rounded-full bg-white border-4 p-1 overflow-hidden group-hover:scale-110 transition-transform duration-300" style="border-color: var(--color-{{ charColors[slug] }})">
                        {{ picture('images/characters/' ~ slug ~ '_ikona.png', 'char_icon', char.name, 'w-full h-full object-cover rounded-full') }}
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-dark">{{ char.name }}</h2>
                        <p class="text-{{ charColors[slug] }} font-medium">{{ char.species }}</p>
                        <p class="mt-2 text-sm text-gray-500 italic">"{{ char.motto }}"</p>
                    </div>
                </div>
                <p class="mt-4 text-sm text-gray-600 leading-relaxed">{{ char.personality[:120] }}...</p>
                <div class="mt-4 flex flex-wrap gap-2">
                    {% for skill in char.skills %}
                    <span class="px-2 py-1 rounded-lg text-xs font-medium bg-{{ charColors[slug] }}/10 text-{{ charColors[slug] }}">{{ skill }}</span>
                    {% endfor %}
                </div>
                <p class="mt-4 text-sm font-semibold text-{{ charColors[slug] }} group-hover:underline">{{ 'characters.index.meet_me'|trans }}</p>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}