# Sekcja Bajek TROPO — Design

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Dodanie sekcji bajek na stronę TROPO — listing odcinków + strona czytania z bogatym formatowaniem (kolorowe dialogi, separatory scen, cytaty w ramkach).

**Architecture:** StoryService z metadanymi + osobne szablony Twig per odcinek. StoryController obsługuje /bajki i /bajki/{slug}. Treść bajki jako include Twig w layoucie show.html.twig.

**Tech Stack:** Symfony 8, Twig, Tailwind CSS v4, inline styles z CSS custom properties dla kolorów postaci.

---

### Task 1: StoryService — metadane bajek

**Files:**
- Create: `src/Service/StoryService.php`

**Step 1: Utwórz StoryService**

```php
<?php

namespace App\Service;

class StoryService
{
    private array $stories = [
        'scout-tajemnica-znikajacych-sladow' => [
            'slug' => 'scout-tajemnica-znikajacych-sladow',
            'title' => 'Scout i Tajemnica Znikających Śladów',
            'episode' => 1,
            'character' => 'scout',
            'readingTime' => 8,
            'excerpt' => 'W małym miasteczku Tropo, gdzie każdy dzień jest przygodą, mieszkał pies o imieniu Scout. Pewnego ranka znalazł dziwne ślady przed swoim domem...',
            'youtubeUrl' => null,
            'isNew' => true,
            'nextEpisode' => [
                'title' => 'Tajemnica Trzech Palców',
                'slug' => null,
            ],
        ],
    ];

    public function getAll(): array
    {
        return $this->stories;
    }

    public function getBySlug(string $slug): ?array
    {
        return $this->stories[$slug] ?? null;
    }

    public function getByCharacter(string $character): array
    {
        return array_filter($this->stories, fn(array $s) => $s['character'] === $character);
    }
}
```

**Step 2: Commit**

```bash
git add src/Service/StoryService.php
git commit -m "Add StoryService with episode 1 metadata"
```

---

### Task 2: StoryController — trasy /bajki i /bajki/{slug}

**Files:**
- Create: `src/Controller/StoryController.php`

**Step 1: Utwórz StoryController**

```php
<?php

namespace App\Controller;

use App\Service\CharacterService;
use App\Service\StoryService;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class StoryController extends AbstractController
{
    public function __construct(
        private StoryService $storyService,
        private CharacterService $characterService,
    ) {}

    #[Route('/bajki', name: 'app_stories')]
    public function index(): Response
    {
        return $this->render('story/index.html.twig', [
            'stories' => $this->storyService->getAll(),
            'characters' => $this->characterService->getAll(),
        ]);
    }

    #[Route('/bajki/{slug}', name: 'app_story_show')]
    public function show(string $slug): Response
    {
        $story = $this->storyService->getBySlug($slug);
        if (!$story) {
            throw $this->createNotFoundException();
        }

        $character = $this->characterService->getBySlug($story['character']);

        return $this->render('story/show.html.twig', [
            'story' => $story,
            'character' => $character,
        ]);
    }
}
```

**Step 2: Commit**

```bash
git add src/Controller/StoryController.php
git commit -m "Add StoryController with listing and show routes"
```

---

### Task 3: CSS — style dla bajek

**Files:**
- Modify: `assets/styles/app.css`

**Step 1: Dodaj style bajkowe na koniec app.css**

Dodaj po istniejących stylach:

```css
/* Story — dialogi */
.story-dialogue {
    padding-left: 1.5rem;
    border-left: 3px solid var(--dialogue-color, #9ca3af);
    margin: 1.25rem 0;
}

/* Story — separator scen */
.story-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2.5rem 0;
    color: #d1d5db;
}
.story-separator::before,
.story-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
```

**Step 2: Rebuild Tailwind**

```bash
php bin/console tailwind:build
```

**Step 3: Commit**

```bash
git add assets/styles/app.css
git commit -m "Add story dialogue and separator CSS"
```

---

### Task 4: Szablon listingu /bajki

**Files:**
- Create: `templates/story/index.html.twig`

**Step 1: Utwórz szablon listingu**

```twig
{% extends 'base.html.twig' %}
{% block title %}Przygody TROPO — Bajki na dobranoc{% endblock %}
{% block meta_description %}Czytaj z dzieckiem bajki o przygodach drużyny TROPO. Scout, Blitz, Nova i Echo zapraszają na bajki na dobranoc.{% endblock %}

{% block body %}
<section class="py-20">
    <div class="max-w-4xl mx-auto px-4">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-dark">Bajki na dobranoc</h1>
        <p class="mt-4 text-gray-500 text-lg">Czytaj z dzieckiem lub słuchaj na YouTube. Przygody drużyny TROPO w odcinkach.</p>

        <div class="mt-12 space-y-8">
            {% for story in stories %}
            {% set char = characters[story.character] ?? null %}
            <a href="{{ path('app_story_show', {slug: story.slug}) }}" class="group block bg-white rounded-2xl border border-gray-200 hover:shadow-xl transition-all duration-300 overflow-hidden">
                <div class="flex flex-col sm:flex-row">
                    <div class="sm:w-56 h-48 sm:h-auto shrink-0 flex items-center justify-center text-gray-400 text-sm"
                         style="background-color: {{ char ? char.color ~ '10' : '#f3f4f6' }}">
                        <div class="text-center">
                            <span class="text-5xl">{{ char ? char.emoji : '' }}</span>
                            <p class="mt-2 text-xs text-gray-400">Ilustracja wkrótce</p>
                        </div>
                    </div>
                    <div class="p-6 flex flex-col justify-center">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-xs font-medium text-gray-400">Odcinek {{ story.episode }}</span>
                            {% if story.isNew %}
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-blitz/10 text-blitz">NOWE</span>
                            {% endif %}
                            <span class="text-xs text-gray-400">~{{ story.readingTime }} min czytania</span>
                        </div>
                        <h2 class="text-xl font-bold text-dark group-hover:text-scout transition">{{ story.title }}</h2>
                        <p class="mt-2 text-sm text-gray-600 leading-relaxed">{{ story.excerpt }}</p>
                        <div class="mt-4 flex items-center gap-4">
                            <span class="text-sm font-semibold text-scout group-hover:underline">Czytaj &rarr;</span>
                            {% if story.youtubeUrl %}
                            <span class="text-sm font-medium text-gray-400 hover:text-red-500">Oglądaj na YouTube &rarr;</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </a>
            {% else %}
            <p class="text-gray-400 text-center py-12">Wkrótce pojawią się tutaj bajki.</p>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}
```

**Step 2: Commit**

```bash
git add templates/story/index.html.twig
git commit -m "Add story listing template"
```

---

### Task 5: Szablon odcinka — layout show.html.twig

**Files:**
- Create: `templates/story/show.html.twig`

**Step 1: Utwórz layout odcinka**

```twig
{% extends 'base.html.twig' %}
{% block title %}{{ story.title }} | Bajki TROPO{% endblock %}
{% block meta_description %}{{ story.excerpt }}{% endblock %}

{% block body %}
<article class="py-20">
    <div class="max-w-3xl mx-auto px-4">
        {# Nawigacja powrotna #}
        <a href="{{ path('app_stories') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Wszystkie bajki</a>

        {# Nagłówek #}
        <div class="mt-6 mb-10">
            <div class="flex items-center gap-3 mb-3">
                <span class="text-sm font-medium text-gray-400">Odcinek {{ story.episode }}</span>
                <span class="text-sm text-gray-400">~{{ story.readingTime }} min czytania</span>
                {% if character %}
                <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold"
                      style="background-color: {{ character.color }}15; color: {{ character.color }}">
                    {{ character.emoji }} {{ character.name }}
                </span>
                {% endif %}
            </div>
            <h1 class="text-3xl sm:text-4xl font-extrabold text-dark leading-tight">{{ story.title }}</h1>
        </div>

        {# Treść bajki — include odcinka #}
        <div class="story-content text-lg text-gray-700 leading-relaxed">
            {% include 'story/episodes/' ~ story.slug ~ '.html.twig' %}
        </div>

        {# Następny odcinek #}
        <div class="mt-16 pt-8 border-t border-gray-200">
            {% if story.nextEpisode %}
            <div class="bg-cream rounded-2xl border border-gray-200 p-6 text-center">
                <p class="text-sm text-gray-400 mb-1">Następny odcinek</p>
                {% if story.nextEpisode.slug %}
                <a href="{{ path('app_story_show', {slug: story.nextEpisode.slug}) }}" class="text-lg font-bold text-dark hover:text-scout transition">
                    {{ story.nextEpisode.title }} &rarr;
                </a>
                {% else %}
                <p class="text-lg font-bold text-gray-400">{{ story.nextEpisode.title }} — wkrótce</p>
                {% endif %}
            </div>
            {% endif %}

            {# CTA #}
            <div class="mt-8 text-center">
                <p class="text-gray-500 mb-4">Chcesz grać ze {{ character ? character.name : 'Scoutem' }}?</p>
                <a href="{{ path('app_download') }}" class="inline-flex items-center px-6 py-3 bg-blitz text-white font-semibold rounded-full hover:bg-blitz/90 transition">
                    Pobierz TROPO
                </a>
            </div>

            {% if story.youtubeUrl %}
            <div class="mt-6 text-center">
                <a href="{{ story.youtubeUrl }}" target="_blank" rel="noopener" class="text-sm font-medium text-gray-500 hover:text-red-500 transition">
                    Obejrzyj tę bajkę na YouTube &rarr;
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</article>
{% endblock %}
```

**Step 2: Commit**

```bash
git add templates/story/show.html.twig
git commit -m "Add story show layout template"
```

---

### Task 6: Treść odcinka 1 — sformatowany szablon Twig

**Files:**
- Create: `templates/story/episodes/scout-tajemnica-znikajacych-sladow.html.twig`

**Step 1: Utwórz sformatowaną treść bajki**

Konwersja treści z markdown na Twig z formatowaniem:
- Narracja: `<p>` z `mb-6`
- Dialogi: blok `.story-dialogue` z imieniem postaci w kolorze (inline style)
- Cytaty w grze: `<blockquote>` z `bg-cream border rounded-xl p-6 italic`
- Separatory: `.story-separator` z ikoną kompasu SVG
- Placeholder na ilustracje: szary prostokąt z tekstem

Treść odcinka 1 pełna (wszystkie 6 scen ze źródłowego markdown).

**Step 2: Commit**

```bash
git add templates/story/episodes/scout-tajemnica-znikajacych-sladow.html.twig
git commit -m "Add episode 1 formatted content template"
```

---

### Task 7: Nawigacja — dodanie "Bajki" do menu i stopki

**Files:**
- Modify: `templates/base.html.twig`

**Step 1: Dodaj link "Bajki" w navbar desktop** (linia ~48, między Blog a Pobierz)

```twig
<a href="{{ path('app_stories') }}" class="text-sm font-medium text-gray-600 hover:text-dark transition">Bajki</a>
```

**Step 2: Dodaj link "Bajki" w mobile menu** (linia ~68, między Blog a Pobierz)

```twig
<a href="{{ path('app_stories') }}" class="block text-sm font-medium text-gray-600">Bajki</a>
```

**Step 3: Dodaj link "Bajki" w stopce** (sekcja Odkrywaj, linia ~107, po Blog)

```twig
<li><a href="{{ path('app_stories') }}" class="text-gray-300 hover:text-white transition">Bajki</a></li>
```

**Step 4: Commit**

```bash
git add templates/base.html.twig
git commit -m "Add Bajki link to navbar, mobile menu, and footer"
```

---

### Task 8: Sekcja "Przygody Scouta" na stronie postaci

**Files:**
- Modify: `templates/character/show.html.twig`
- Modify: `src/Controller/CharacterController.php`

**Step 1: Zmodyfikuj CharacterController::show()** — dodaj stories do kontekstu

```php
use App\Service\StoryService;

// w konstruktorze:
public function __construct(
    private CharacterService $characterService,
    private StoryService $storyService,
) {}

// w show(), przed return:
$stories = $this->storyService->getByCharacter($slug);
// dodaj do render:
'stories' => $stories,
```

**Step 2: Dodaj sekcję "Przygody" w character/show.html.twig** — po sekcji "Ciekawostka", przed CTA (między liniami ~65 a ~67)

```twig
{# Przygody — bajki postaci #}
{% if stories is not empty %}
<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-6">Przygody {{ 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-white 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">Odcinek {{ 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">~{{ story.readingTime }} min czytania</p>
                    </div>
                    <span class="text-scout font-semibold text-sm group-hover:underline">Czytaj &rarr;</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
```

**Step 3: Commit**

```bash
git add src/Controller/CharacterController.php templates/character/show.html.twig
git commit -m "Add character stories section on character page"
```

---

### Task 9: Rebuild Tailwind + test manualny

**Step 1: Rebuild CSS**

```bash
php bin/console tailwind:build
```

**Step 2: Test manualny**

- Otwórz `/bajki` — sprawdź listing z kartą odcinka 1
- Otwórz `/bajki/scout-tajemnica-znikajacych-sladow` — sprawdź formatowanie bajki
- Otwórz `/postacie/scout` — sprawdź sekcję "Przygody Scouta"
- Sprawdź nawigację desktop i mobile — link "Bajki"
- Sprawdź stopkę — link "Bajki"
- Sprawdź 404 na `/bajki/nie-istnieje`

**Step 3: Commit finałowy**

```bash
git add -A
git commit -m "Rebuild Tailwind CSS for stories section"
```