{% extends 'base.html.twig' %}
{% block title %}Kolorowanki i gry do druku — TROPO{% endblock %}
{% block meta_description %}Darmowe kolorowanki, memory, bingo na spacer i dyplom dla dziecka — z bohaterami TROPO. Pobierz albo wydrukuj na A4.{% endblock %}

{% macro card(page, accent, box) %}
{% from '_macros/image.html.twig' import picture %}
<article class="bg-white rounded-3xl border-2 border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition" style="--card-accent: {{ accent }}">
    <a href="{{ path('app_coloring_print', {slug: page.slug}) }}" class="block bg-white p-3 border-b-2 border-gray-100" aria-label="Wydrukuj: {{ page.title }}">
        {{ picture(page.image, 'coloring_thumb', 'Kolorowanka: ' ~ page.title, 'w-full ' ~ box ~ ' object-contain') }}
    </a>
    <div class="p-4 flex flex-col gap-3 flex-1">
        <h3 class="font-display text-lg font-bold text-dark leading-tight">{{ page.title }}</h3>
        <div class="mt-auto flex gap-2">
            <a href="{{ path('app_coloring_print', {slug: page.slug}) }}"
               class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-full text-white text-sm font-semibold transition hover:opacity-90"
               style="background: {{ accent }}">🖨️ Drukuj</a>
            <a href="{{ asset(page.image) }}" download="TROPO kolorowanka - {{ page.title }}.png"
               class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-full text-sm font-semibold border-2 transition hover:bg-gray-50"
               style="border-color: {{ accent }}; color: {{ accent }}">⬇️ Pobierz</a>
        </div>
    </div>
</article>
{% endmacro %}

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

{# Hero #}
<section class="py-20 pb-6">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="font-display text-4xl sm:text-5xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">Kolorowanki i gry do druku</h1>
        <p class="mt-4 text-gray-500 text-lg max-w-2xl mx-auto">Kolorowanki, memory, bingo na spacer i dyplom — do wydrukowania na kartce A4. Za darmo, bez zapisywania się.</p>
        <nav class="mt-8 flex flex-wrap justify-center gap-3 text-sm font-semibold" aria-label="Rodzaje kolorowanek">
            <a href="#postacie" class="px-4 py-2 rounded-full bg-scout/10 text-scout hover:bg-scout/20 transition">Postacie</a>
            <a href="#druzyna" class="px-4 py-2 rounded-full bg-blitz/10 text-blitz hover:bg-blitz/20 transition">Cała drużyna</a>
            <a href="#sceny" class="px-4 py-2 rounded-full bg-nova/10 text-nova hover:bg-nova/20 transition">Sceny z bajek</a>
            <a href="#memory" class="px-4 py-2 rounded-full bg-echo/10 text-echo hover:bg-echo/20 transition">Memory</a>
            <a href="#bingo" class="px-4 py-2 rounded-full bg-echo/10 text-echo hover:bg-echo/20 transition">Bingo na spacer</a>
            <a href="#dyplom" class="px-4 py-2 rounded-full bg-nova/10 text-nova hover:bg-nova/20 transition">Dyplom</a>
        </nav>
    </div>
</section>

<div class="max-w-6xl mx-auto px-4 pb-20 space-y-16">

    {# Characters #}
    <section id="postacie" class="scroll-mt-24">
        <h2 class="font-display text-2xl sm:text-3xl font-extrabold text-dark">Postacie</h2>
        <p class="mt-1 text-gray-500">Każdy bohater na osobnej kartce.</p>
        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for page in characterPages %}
                {{ coloring.card(page, characters[page.character].color ?? '#3578E5', 'aspect-square') }}
            {% endfor %}
        </div>
    </section>

    {# Whole team #}
    <section id="druzyna" class="scroll-mt-24">
        <h2 class="font-display text-2xl sm:text-3xl font-extrabold text-dark">Cała drużyna</h2>
        <p class="mt-1 text-gray-500">Scout, Blitz, Nova i Echo razem — do kolorowania we dwoje albo z rodzeństwem.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for page in groupPages %}
                {{ coloring.card(page, '#FF6B35', 'aspect-[3/2]') }}
            {% endfor %}
        </div>
    </section>

    {# Story scenes #}
    <section id="sceny" class="scroll-mt-24">
        <h2 class="font-display text-2xl sm:text-3xl font-extrabold text-dark">Sceny z bajek</h2>
        <p class="mt-1 text-gray-500">Przeczytajcie bajkę, a potem pokolorujcie jej ulubioną chwilę.</p>
        {% for group in sceneGroups %}
            {% set accent = characters[group.story.character].color ?? '#7B2D8E' %}
            <div class="mt-8">
                <div class="flex flex-wrap items-baseline justify-between gap-2">
                    <h3 class="font-display text-xl font-bold text-dark">
                        <span class="text-sm font-semibold uppercase tracking-widest mr-2" style="color: {{ accent }}">Odcinek {{ group.story.episode }}</span>
                        {{ group.story.title }}
                    </h3>
                    <a href="{{ path('app_story_show', {slug: group.story.slug}) }}" class="text-sm font-semibold hover:underline" style="color: {{ accent }}">Czytaj bajkę →</a>
                </div>
                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for page in group.pages %}
                        {{ coloring.card(page, accent, 'aspect-[3/2]') }}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </section>

    {# Printable memory #}
    <section id="memory" class="scroll-mt-24">
        <h2 class="font-display text-2xl sm:text-3xl font-extrabold text-dark">Memory do wydruku</h2>
        <p class="mt-1 text-gray-500">12 par na dwóch kartkach A4 i kartka rewersów. Wytnijcie, potasujcie i grajcie całą rodziną.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            {% for slug, set in memorySets %}
            <a href="{{ path('app_memory', {set: slug}) }}" class="bg-white rounded-3xl border-2 border-gray-100 overflow-hidden flex flex-col hover:shadow-lg transition">
                <div class="grid grid-cols-3 gap-2 p-3 border-b-2 border-gray-100">
                    {% for image in set.images|slice(0, 3) %}
                        <div class="aspect-square rounded-xl overflow-hidden border-4" style="border-color: {{ set.accent }}">
                            {{ picture(image, 'memory_card', '', 'w-full h-full object-cover') }}
                        </div>
                    {% endfor %}
                </div>
                <div class="p-4 flex items-center justify-between gap-3">
                    <div>
                        <h3 class="font-display text-lg font-bold text-dark leading-tight">{{ set.title }}</h3>
                        <p class="text-sm text-gray-500">{{ set.description }}</p>
                    </div>
                    <span class="shrink-0 px-4 py-2 rounded-full text-white text-sm font-semibold" style="background: {{ set.accent }}">Otwórz</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </section>

    {# Walk bingo + diploma #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <section id="bingo" class="scroll-mt-24 bg-white rounded-3xl border-2 border-gray-100 p-6 flex flex-col gap-3">
            <div class="flex items-center gap-4">
                <img src="{{ asset('images/kolorowanki/echo.png') }}" alt="" class="w-20 h-20 object-contain" loading="lazy">
                <div>
                    <h2 class="font-display text-2xl font-extrabold text-dark leading-tight">Jesienne bingo tropiciela</h2>
                    <p class="text-sm text-gray-500">Karta na spacer: 16 rzeczy do znalezienia w parku i lesie, okienka do rysowania. Inna karta dla każdego dziecka.</p>
                </div>
            </div>
            <a href="{{ path('app_bingo', {set: 'jesien'}) }}" class="mt-auto self-start px-5 py-2 rounded-full bg-echo text-white text-sm font-semibold hover:opacity-90 transition">Otwórz bingo</a>
        </section>
        <section id="dyplom" class="scroll-mt-24 bg-white rounded-3xl border-2 border-gray-100 p-6 flex flex-col gap-3">
            <div class="flex items-center gap-4">
                <span class="w-20 h-20 shrink-0 rounded-2xl bg-nova/10 flex items-center justify-center text-4xl" aria-hidden="true">🏅</span>
                <div>
                    <h2 class="font-display text-2xl font-extrabold text-dark leading-tight">Dyplom Tropiciela</h2>
                    <p class="text-sm text-gray-500">Wpisz imię, wybierz osiągnięcie — za misje, bajki, bingo albo Przygodę — i wydrukuj dyplom od drużyny TROPO.</p>
                </div>
            </div>
            <a href="{{ path('app_diploma') }}" class="mt-auto self-start px-5 py-2 rounded-full bg-nova text-white text-sm font-semibold hover:opacity-90 transition">Zrób dyplom</a>
        </section>
    </div>

    <p class="text-center text-sm text-gray-400">Wszystkie materiały możesz drukować do użytku domowego, w przedszkolu i w szkole. © TROPO</p>
</div>
{% endblock %}