{% extends 'base.html.twig' %}
{% block title %}{{ 'characters.show.title'|trans({'%name%': character.name, '%species%': character.species}) }}{% endblock %}
{% block meta_description %}{{ 'characters.show.meta_description'|trans({'%name%': character.name, '%species%': character.species, '%motto%': character.motto}) }}{% endblock %}

{% set charColors = {scout: 'scout', blitz: 'blitz', nova: 'nova', echo: 'echo'} %}
{% set color = charColors[character.slug] ?? 'gray-400' %}

{% block body %}
{% from '_macros/image.html.twig' import picture %}
{# Hero #}
<section class="bg-gradient-to-b from-{{ color }}/10 to-white py-20">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center gap-10">
            {# Character avatar #}
            <div class="w-48 h-48 shrink-0 rounded-full bg-white border-4 border-{{ color }} p-1 overflow-hidden">
                {{ picture('images/characters/' ~ character.slug ~ '_full.png', 'char_full', character.name, 'w-full h-full object-cover rounded-full', 'eager') }}
            </div>

            <div>
                <h1 class="text-4xl sm:text-5xl font-extrabold text-dark">{{ character.name }}</h1>
                <p class="text-xl text-{{ color }} font-semibold mt-1">{{ character.species }}</p>
                <p class="mt-4 text-lg text-gray-600 italic">"{{ character.motto }}"</p>
                <div class="mt-4 flex flex-wrap gap-2">
                    {% for loc in character.locations %}
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">{{ loc }}</span>
                    {% endfor %}
                    {% for diff in character.difficulty %}
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">{{ diff }}</span>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

{# Osobowość #}
<section class="py-16 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-dark mb-4">{{ 'characters.show.personality'|trans }}</h2>
        <p class="text-gray-600 leading-relaxed text-lg">{{ character.personality }}</p>
    </div>
</section>

{# Historia — styl pergaminu #}
<section class="py-16 bg-cream">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-dark mb-4">{{ 'characters.show.backstory'|trans }}</h2>
        <div class="bg-amber-50 border border-amber-200 rounded-2xl p-8 shadow-inner">
            <p class="text-gray-700 leading-relaxed text-lg font-serif italic">{{ character.backstory }}</p>
        </div>
    </div>
</section>

{# Ciekawostka #}
<section class="py-16 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-blue-50 border border-blue-200 rounded-2xl p-8 flex gap-4 items-start">
            <span class="text-3xl shrink-0">💡</span>
            <div>
                <h2 class="text-lg font-bold text-dark mb-2">{{ 'characters.show.fun_fact'|trans }}</h2>
                <p class="text-gray-700 leading-relaxed">{{ character.funFact }}</p>
            </div>
        </div>
    </div>
</section>

{# Przygody — bajki postaci #}
{% if stories is defined and stories is not empty %}
<section class="py-16 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-dark mb-6">{{ 'characters.show.adventures'|trans({'%name%': character.name}) }}</h2>
        <div class="space-y-4">
            {% for story in stories %}
            <a href="{{ path('app_story_show', {slug: story.slug}) }}" class="group block bg-cream rounded-xl border border-gray-200 hover:shadow-lg transition p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-xs font-medium text-gray-400">{{ 'characters.show.episode'|trans({'%number%': story.episode}) }}</span>
                        <h3 class="text-lg font-bold text-dark group-hover:text-scout transition">{{ story.title }}</h3>
                        <p class="text-sm text-gray-500 mt-1">{{ 'characters.show.reading_time'|trans({'%time%': story.readingTime}) }}</p>
                    </div>
                    <span class="text-scout font-semibold text-sm group-hover:underline shrink-0 ml-4">{{ 'characters.show.read'|trans }} &rarr;</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{# Jakie misje + skills #}
<section class="py-16 bg-cream">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-dark mb-4">{{ 'characters.show.missions_title'|trans }}</h2>
        <p class="text-gray-600 leading-relaxed text-lg mb-4">{{ character.missionTypes }}</p>
        <p class="text-gray-500 text-sm mb-6">{{ 'characters.show.missions_coop'|trans({'%name%': character.name}) }}</p>
        <div class="flex flex-wrap gap-3">
            {% for skill in character.skills %}
            <span class="px-4 py-2 rounded-xl text-sm font-semibold bg-{{ color }}/10 text-{{ color }} border border-{{ color }}/20">
                {{ skill }}
            </span>
            {% endfor %}
        </div>
    </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">
        <p class="text-2xl font-bold text-dark">{{ 'characters.show.play_cta'|trans({'%name%': character.name}) }}</p>
        <a href="{{ path('app_download') }}" class="mt-6 inline-flex items-center px-8 py-4 bg-{{ color }} text-white text-lg font-bold rounded-full hover:opacity-90 transition shadow-lg">
            {{ 'characters.show.download'|trans }}
        </a>
    </div>
</section>

{# Nawigacja prev/next #}
<section class="py-8 bg-cream border-t border-gray-100">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
        <a href="{{ path('app_character_show', {slug: prev.slug}) }}" class="flex items-center gap-2 text-sm font-semibold text-gray-500 hover:text-dark transition">
            <span>←</span>
            <span>{{ prev.name }}</span>
        </a>
        <a href="{{ path('app_characters') }}" class="text-sm text-gray-400 hover:text-dark transition">{{ 'characters.show.all_characters'|trans }}</a>
        <a href="{{ path('app_character_show', {slug: next.slug}) }}" class="flex items-center gap-2 text-sm font-semibold text-gray-500 hover:text-dark transition">
            <span>{{ next.name }}</span>
            <span>→</span>
        </a>
    </div>
</section>
{% endblock %}