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

{% from '_macros/image.html.twig' import picture %}
{% block body %}

{# Hero #}
<section class="py-20 pb-0">
    <div class="max-w-4xl mx-auto px-4">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-center text-dark">{{ 'stories.index.heading'|trans }}</h1>
        <p class="mt-4 text-gray-500 text-lg text-center">{{ 'stories.index.subtitle'|trans }}</p>
    </div>
</section>

{# Seasons #}
<div class="max-w-4xl mx-auto px-4 pb-20">
    {% for season in seasons %}
    <div class="mt-8">
        {# Season header — book chapter opener #}
        <div class="season-header">
            <div class="season-number">{{ 'stories.index.season'|trans({'%number%': season.number}) }}</div>
            <h2 class="season-title">{{ season.name }}</h2>
            <p class="season-meta">{{ season.stories|length }} {{ season.stories|length == 1 ? 'odcinek' : (season.stories|length < 5 ? 'odcinki' : 'odcinków') }}</p>
        </div>

        {# Episode cards #}
        <div class="space-y-4">
            {% for story in season.stories %}
            {% set char = characters[story.character] ?? null %}
            {% set accent = char ? char.color : '#3578E5' %}
            <a href="{{ path('app_story_show', {slug: story.slug}) }}"
               class="episode-card"
               style="--card-accent: {{ accent }}; animation-delay: {{ loop.index0 * 80 }}ms">

                {# Visual #}
                <div class="episode-card-visual"
                     style="background: linear-gradient(135deg, {{ accent }}08 0%, {{ accent }}15 100%)">
                    <span class="episode-number-badge" style="background: {{ accent }}">{{ story.episode }}</span>
                    <div class="flex items-center justify-center w-full h-full">
                        <span class="episode-emoji">{{ char ? char.emoji : '' }}</span>
                    </div>
                </div>

                {# Body #}
                <div class="episode-card-body">
                    <div class="episode-card-badges">
                        {% if story.isNew | default(false) %}
                            <span class="episode-badge episode-badge-new">{{ 'stories.index.new_badge'|trans }}</span>
                        {% endif %}
                        {% if story.isSeasonFinale | default(false) %}
                            <span class="episode-badge episode-badge-finale">{{ 'stories.index.finale_badge'|trans }}</span>
                        {% endif %}
                        <span class="episode-badge episode-badge-time">{{ 'stories.index.reading_time'|trans({'%time%': story.readingTime}) }}</span>
                    </div>
                    <h3 class="episode-card-title">{{ story.title }}</h3>
                    <p class="episode-card-excerpt">{{ story.excerpt }}</p>
                    <span class="episode-card-cta">{{ 'stories.index.read'|trans }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <p class="text-gray-400 text-center py-20 text-lg">{{ 'stories.index.empty'|trans }}</p>
    {% endfor %}
</div>
{% endblock %}