{% extends 'base.html.twig' %}
{% block title %}Gra planszowa TROPO — Wydrukuj i graj!{% endblock %}
{% block meta_description %}Kooperacyjna gra planszowa TROPO do druku w domu. 4 bohaterów, 2 poziomy trudności, wspólna przygoda dla całej rodziny.{% endblock %}

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

{# ═══════════════════════════ HERO ═══════════════════════════ #}
<section class="py-20">
    <div class="max-w-5xl mx-auto px-4 text-center">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-dark">
           Gra planszowa kooperacyjna
        </h1>
        <p class="mt-4 text-gray-500 text-lg max-w-2xl mx-auto">
            Wydrukuj grę i stań się częścią drużyny Scouta, Blitza, Novy i&nbsp;Echa.
            Współpracujcie, by obudzić miasteczko Tropo!
        </p>
        <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
            <a href="{{ path('purchase_index') }}" class="btn btn-primary btn-lg">Odblokuj grę</a>
            <a href="#jak-grac" class="btn btn-outline btn-lg">Jak to działa?</a>
            <span class="hero-badge">Bonus w pakiecie TROPO+</span>
        </div>
    </div>
</section>

{# ═══════════════════════════ BOHATEROWIE ═══════════════════════════ #}
<section class="max-w-5xl mx-auto px-4 py-20">
    <div class="text-center mb-12">
        <p class="text-sm font-bold text-nova uppercase tracking-widest mb-3">Drużyna</p>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-dark">Postacie i ich unikalne moce</h2>
        <p class="mt-3 text-gray-400 max-w-lg mx-auto">Każdy bohater ma specjalną zdolność, która pomaga całej drużynie. Wybierzcie mądrze, kiedy jej użyć!</p>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
        {# Scout #}
        <div class="character-power-card" style="--char-accent: var(--color-scout)">
            {{ picture('images/characters/scout_ikona.png', 'char_icon', 'Scout', 'card-image') }}
            <p class="card-name">Scout</p>
            <p class="power-name">Nos Tropiciela</p>
            <p class="power-desc">Zagląda do talii kart i&nbsp;widzi, co czeka drużynę.</p>
        </div>

        {# Blitz #}
        <div class="character-power-card" style="--char-accent: var(--color-blitz)">
            {{ picture('images/characters/blitz_ikona.png', 'char_icon', 'Blitz', 'card-image') }}
            <p class="card-name">Blitz</p>
            <p class="power-name">Błysk</p>
            <p class="power-desc">Przesuwa graczy o&nbsp;dodatkowe pola na planszy.</p>
        </div>

        {# Nova #}
        <div class="character-power-card" style="--char-accent: var(--color-nova)">
            {{ picture('images/characters/nova_ikona.png', 'char_icon', 'Nova', 'card-image') }}
            <p class="card-name">Nova</p>
            <p class="power-name">Naprawa</p>
            <p class="power-desc">Pozwala wymienić pechową kartę na nową.</p>
        </div>

        {# Echo #}
        <div class="character-power-card" style="--char-accent: var(--color-echo)">
            {{ picture('images/characters/echo_ikona.png', 'char_icon', 'Echo', 'card-image') }}
            <p class="card-name">Echo</p>
            <p class="power-name">Zapis</p>
            <p class="power-desc">Zachowuje ważną kartę na&nbsp;później, gdy będzie najbardziej potrzebna.</p>
        </div>
    </div>
</section>

<div class="section-divider max-w-5xl mx-auto px-4"><span>&#9830;</span></div>

{# ═══════════════════════════ KOOPERACJA ═══════════════════════════ #}
<section class="max-w-5xl mx-auto px-4 pb-20">
    <div class="flex flex-col lg:flex-row gap-12 items-center">
        <div class="lg:w-1/2">
            <p class="text-sm font-bold text-echo uppercase tracking-widest mb-3">Mechanika</p>
            <h2 class="text-3xl sm:text-4xl font-extrabold text-dark leading-tight">Magia kooperacji</h2>
            <p class="mt-4 text-gray-500 leading-relaxed">
                W TROPO nie rywalizujecie ze sobą. <strong class="text-dark">Wszyscy wygrywają razem albo nikt nie wygrywa.</strong>
            </p>
            <p class="mt-3 text-gray-500 leading-relaxed">
                To uczy dzieci komunikacji, pomagania sobie i&nbsp;wspólnego rozwiązywania problemów.
                Każdy bohater ma swoją rolę — ale tylko razem mogą obudzić miasteczko.
            </p>
        </div>
        <div class="lg:w-1/2">
            <div class="relative rounded-2xl overflow-hidden p-8 sm:p-10" style="background: linear-gradient(135deg, rgba(22, 163, 74, 0.06), rgba(53, 120, 229, 0.06))">
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div class="bg-white/80 rounded-xl p-5 backdrop-blur-sm">
                        <span class="text-3xl block mb-2">🤝</span>
                        <p class="text-sm font-bold text-dark">Współpraca</p>
                        <p class="text-xs text-gray-400 mt-1">Wspólne decyzje</p>
                    </div>
                    <div class="bg-white/80 rounded-xl p-5 backdrop-blur-sm">
                        <span class="text-3xl block mb-2">💬</span>
                        <p class="text-sm font-bold text-dark">Komunikacja</p>
                        <p class="text-xs text-gray-400 mt-1">Planowanie ruchów</p>
                    </div>
                    <div class="bg-white/80 rounded-xl p-5 backdrop-blur-sm">
                        <span class="text-3xl block mb-2">🧩</span>
                        <p class="text-sm font-bold text-dark">Strategia</p>
                        <p class="text-xs text-gray-400 mt-1">Kiedy użyć mocy?</p>
                    </div>
                    <div class="bg-white/80 rounded-xl p-5 backdrop-blur-sm">
                        <span class="text-3xl block mb-2">🎉</span>
                        <p class="text-sm font-bold text-dark">Wspólna radość</p>
                        <p class="text-xs text-gray-400 mt-1">Wygrywamy razem!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="section-divider max-w-5xl mx-auto px-4"><span>&#9830;</span></div>

{# ═══════════════════════════ TRUDNOŚĆ ═══════════════════════════ #}
<section id="jak-grac" class="max-w-5xl mx-auto px-4 pb-20">
    <div class="text-center mb-12">
        <p class="text-sm font-bold text-blitz uppercase tracking-widest mb-3">Elastyczność</p>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-dark">Gra, która rośnie z dzieckiem</h2>
        <p class="mt-3 text-gray-400 max-w-lg mx-auto">Dwa warianty zasad — dobierz trudność do wieku i&nbsp;doświadczenia.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="difficulty-card" style="--diff-color: var(--color-echo)">
            <span class="diff-badge">&#127793; Odkrywca</span>
            <h3 class="text-xl font-bold text-dark mt-4">Wariant łatwy</h3>
            <p class="text-sm text-gray-400 mt-1">Sugerowany wiek: 5-6 lat</p>
            <p class="mt-4 text-gray-500 text-sm leading-relaxed">
                Skupienie na czystej przygodzie. Gramy bez skomplikowanych zdolności, a&nbsp;rodzic wspiera dzieci w&nbsp;czytaniu kart i&nbsp;realizowaniu zadań na planszy.
            </p>
            <ul class="mt-4 space-y-2 text-sm text-gray-500">
                <li class="flex items-center gap-2"><span class="text-echo">&#10003;</span> Bez limitu tur</li>
                <li class="flex items-center gap-2"><span class="text-echo">&#10003;</span> Łagodniejsze przeszkody</li>
                <li class="flex items-center gap-2"><span class="text-echo">&#10003;</span> Rodzic jako narrator</li>
            </ul>
        </div>

        <div class="difficulty-card" style="--diff-color: var(--color-blitz)">
            <span class="diff-badge">&#128293; Strateg</span>
            <h3 class="text-xl font-bold text-dark mt-4">Wariant trudny</h3>
            <p class="text-sm text-gray-400 mt-1">Sugerowany wiek: 7+ lat</p>
            <p class="mt-4 text-gray-500 text-sm leading-relaxed">
                Strategiczne wyzwanie. Limit <strong class="text-dark">25 tur</strong> na całą drużynę i&nbsp;potężniejsze przeszkody na planszy. Każda decyzja ma&nbsp;znaczenie.
            </p>
            <ul class="mt-4 space-y-2 text-sm text-gray-500">
                <li class="flex items-center gap-2"><span class="text-blitz">&#10003;</span> 25 tur na całą grę</li>
                <li class="flex items-center gap-2"><span class="text-blitz">&#10003;</span> Trudniejsze wyzwania</li>
                <li class="flex items-center gap-2"><span class="text-blitz">&#10003;</span> Pełne zdolności bohaterów</li>
            </ul>
        </div>
    </div>
</section>

<div class="section-divider max-w-5xl mx-auto px-4"><span>&#9830;</span></div>

{# ═══════════════════════════ DRUK ═══════════════════════════ #}
<section class="max-w-5xl mx-auto px-4 pb-20">
    <div class="text-center mb-12">
        <p class="text-sm font-bold text-scout uppercase tracking-widest mb-3">Druk</p>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-dark">Dwie wersje do wyboru</h2>
        <p class="mt-3 text-gray-400 max-w-lg mx-auto">Oba PDF-y zawierają planszę, karty i&nbsp;instrukcję. Ty wybierasz styl.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="print-option">
            <span class="text-5xl block mb-4">&#9999;&#65039;</span>
            <h3 class="text-xl font-bold text-dark">Wersja Eko</h3>
            <p class="text-sm text-gray-400 mt-2 leading-relaxed">
                Ekonomiczny druk czarno-biały. Idealny, by dzieci mogły <strong class="text-dark">same pokolorować postacie</strong> przed rozpoczęciem przygody.
            </p>
            <div class="mt-4 flex justify-center gap-3">
                <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">Plansza</span>
                <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">Karty</span>
                <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">Instrukcja</span>
            </div>
        </div>

        <div class="print-option" style="border-color: var(--color-nova)">
            <span class="text-5xl block mb-4">&#127912;</span>
            <h3 class="text-xl font-bold text-dark">Wersja Premium</h3>
            <p class="text-sm text-gray-400 mt-2 leading-relaxed">
                Pełny kolor, wysoka estetyka. Idealna do wydruku na sztywnym papierze jako <strong class="text-dark">trwała pamiątka z 1.&nbsp;Sezonu Bajek.</strong>
            </p>
            <div class="mt-4 flex justify-center gap-3">
                <span class="text-xs text-nova bg-nova/5 px-3 py-1 rounded-full">Plansza</span>
                <span class="text-xs text-nova bg-nova/5 px-3 py-1 rounded-full">Karty</span>
                <span class="text-xs text-nova bg-nova/5 px-3 py-1 rounded-full">Instrukcja</span>
            </div>
        </div>
    </div>
</section>

<div class="section-divider max-w-5xl mx-auto px-4"><span>&#9830;</span></div>

{# ═══════════════════════════ CHECKLIST ═══════════════════════════ #}
<section class="max-w-3xl mx-auto px-4 pb-20">
    <div class="text-center mb-12">
        <p class="text-sm font-bold text-dark uppercase tracking-widest mb-3">5 minut</p>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-dark">Gotowość do gry</h2>
        <p class="mt-3 text-gray-400 max-w-lg mx-auto">Wydrukuj PDF i przygotuj te kilka rzeczy z&nbsp;domu:</p>
    </div>

    <div class="space-y-3">
        <div class="checklist-item">
            <span class="checklist-icon">&#127922;</span>
            <div>
                <p class="font-bold text-dark text-sm">1 kostka sześcienna</p>
                <p class="text-xs text-gray-400">Zwykła kostka do gry</p>
            </div>
        </div>
        <div class="checklist-item">
            <span class="checklist-icon">&#9823;</span>
            <div>
                <p class="font-bold text-dark text-sm">Dowolne pionki</p>
                <p class="text-xs text-gray-400">Np. ludziki z klocków LEGO</p>
            </div>
        </div>
        <div class="checklist-item">
            <span class="checklist-icon">&#10024;</span>
            <div>
                <p class="font-bold text-dark text-sm">4 Żetony Przebudzenia</p>
                <p class="text-xs text-gray-400">Np. monety lub guziki</p>
            </div>
        </div>
        <div class="checklist-item">
            <span class="checklist-icon">&#129717;</span>
            <div>
                <p class="font-bold text-dark text-sm">12 Żetonów kamyków</p>
                <p class="text-xs text-gray-400">Np. fasolki lub koraliki</p>
            </div>
        </div>
    </div>
</section>

{# ═══════════════════════════ CTA ═══════════════════════════ #}
<section class="pb-20">
    <div class="max-w-3xl mx-auto px-4">
        <div class="relative rounded-3xl overflow-hidden p-10 sm:p-14 text-center"
             style="background: linear-gradient(135deg, var(--color-scout), var(--color-nova))">
            <h2 class="text-3xl sm:text-4xl font-extrabold text-white leading-tight">
                Gotowi na przygodę?
            </h2>
            <p class="mt-4 text-white/80 text-lg max-w-lg mx-auto">
                Gra planszowa jest częścią pakietu TROPO+. Odblokuj ją razem ze 100+ misjami w&nbsp;aplikacji.
            </p>
            <div class="mt-8">
                <a href="{{ path('purchase_index') }}" class="inline-block bg-white text-dark font-bold text-lg px-10 py-4 rounded-full hover:bg-white/90 transition shadow-lg">
                    Kup TROPO+
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock %}