{% extends 'base.html.twig' %}

{% block title %}Animations - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'gray' } %}
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-700 rounded">Token</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-secondary">Animations</h1>
                    </div>
                    <p class="text-sm text-gray-500">Classes d'animation disponibles dans le projet</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== SCROLL REVEAL ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Scroll Reveal</h2>
                <p class="text-sm text-gray-500 mt-1">Elements qui s'animent a l'entree dans le viewport</p>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-600 mb-6">
                    Les classes <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">reveal</code> et <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">reveal-delay-*</code> sont activees via l'<code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">IntersectionObserver</code>
                    dans le script landing. Les elements commencent invisibles (<code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">opacity: 0, translateY: 20px</code>) et s'animent a l'entree.
                </p>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Classe</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Delai</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Usage typique</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal</code></td><td class="px-4 py-3 text-gray-500">0ms</td><td class="px-4 py-3 text-gray-600">Element principal d'une section</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal reveal-delay-1</code></td><td class="px-4 py-3 text-gray-500">100ms</td><td class="px-4 py-3 text-gray-600">Deuxieme element</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal reveal-delay-2</code></td><td class="px-4 py-3 text-gray-500">200ms</td><td class="px-4 py-3 text-gray-600">Troisieme element (colonne droite)</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal reveal-delay-3</code></td><td class="px-4 py-3 text-gray-500">300ms</td><td class="px-4 py-3 text-gray-600">Quatrieme element</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal reveal-delay-4</code></td><td class="px-4 py-3 text-gray-500">400ms</td><td class="px-4 py-3 text-gray-600">Cinquieme element</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">reveal reveal-delay-5</code></td><td class="px-4 py-3 text-gray-500">500ms</td><td class="px-4 py-3 text-gray-600">Sixieme element</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 bg-gray-900 rounded-lg p-4">
                    <pre class="text-sm text-gray-100"><code>&lt;div class="reveal"&gt;Premier element&lt;/div&gt;
&lt;div class="reveal reveal-delay-2"&gt;Avec delai 200ms&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        {# ===== FADE IN UP ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Fade In Up</h2>
                <p class="text-sm text-gray-500 mt-1">Animation d'entree avec montee depuis le bas</p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-4 mb-6">
                    <div class="px-6 py-4 bg-primary/5 border border-primary/20 rounded-xl animate-fade-in-up">
                        <p class="text-sm font-medium text-primary">animate-fade-in-up</p>
                        <p class="text-xs text-gray-500">Delai 0</p>
                    </div>
                    <div class="px-6 py-4 bg-primary/5 border border-primary/20 rounded-xl animate-fade-in-up animation-delay-200">
                        <p class="text-sm font-medium text-primary">+ animation-delay-200</p>
                        <p class="text-xs text-gray-500">Delai 200ms</p>
                    </div>
                    <div class="px-6 py-4 bg-primary/5 border border-primary/20 rounded-xl animate-fade-in-up animation-delay-400">
                        <p class="text-sm font-medium text-primary">+ animation-delay-400</p>
                        <p class="text-xs text-gray-500">Delai 400ms</p>
                    </div>
                    <div class="px-6 py-4 bg-primary/5 border border-primary/20 rounded-xl animate-fade-in-up animation-delay-600">
                        <p class="text-sm font-medium text-primary">+ animation-delay-600</p>
                        <p class="text-xs text-gray-500">Delai 600ms</p>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Classe</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">animate-fade-in-up</code></td><td class="px-4 py-3 text-gray-600">Fade in avec translateY de 20px, 0.6s ease-out</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">animation-delay-200</code></td><td class="px-4 py-3 text-gray-600">Delai de 200ms</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">animation-delay-400</code></td><td class="px-4 py-3 text-gray-600">Delai de 400ms</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">animation-delay-600</code></td><td class="px-4 py-3 text-gray-600">Delai de 600ms</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {# ===== ORBIT ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Orbit — Hero LMS</h2>
                <p class="text-sm text-gray-500 mt-1">Animations d'orbite pour le hero de la landing principale</p>
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Classe</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Description</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">orbit-center-pulse</code></td><td class="px-4 py-3 text-gray-600">Pulse sur le logo central de la section orbit</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">orbit-anim-1</code></td><td class="px-4 py-3 text-gray-600">Orbite 1 — rotation 25s clockwise</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">orbit-anim-2</code></td><td class="px-4 py-3 text-gray-600">Orbite 2 — rotation 35s counter-clockwise</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">orbit-anim-3</code></td><td class="px-4 py-3 text-gray-600">Orbite 3 — rotation 45s clockwise</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">hero-orbital-wrapper</code></td><td class="px-4 py-3 text-gray-600">Conteneur de l'ensemble des orbites dans le hero</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {# ===== LMS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">LMS Partnership — Dots animes</h2>
                <p class="text-sm text-gray-500 mt-1">Indicateurs de statut dans le mockup serveur</p>
            </div>
            <div class="p-6">
                <div class="flex items-center gap-8 mb-6">
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-success lms-live-dot inline-block"></span>
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">lms-live-dot</code>
                        <span class="text-xs text-gray-500">Badge LIVE</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-success relative lms-pulse-dot inline-block"></span>
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">lms-pulse-dot</code>
                        <span class="text-xs text-gray-500">Status banner</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="w-1.5 h-1.5 rounded-full bg-success relative lms-status-badge-dot inline-block"></span>
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">lms-status-badge-dot</code>
                        <span class="text-xs text-gray-500">Tableau serveurs</span>
                    </div>
                </div>
                <p class="text-sm text-gray-500">Ces classes sont definies dans <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">assets/styles/pages/landing/landing.css</code>.</p>
            </div>
        </section>

        {# ===== TYPING DOT ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Typing Dot</h2>
                <p class="text-sm text-gray-500 mt-1">Indicateur de frappe dans les interfaces chat/mockup</p>
            </div>
            <div class="p-6">
                <div class="flex items-center gap-2 mb-4">
                    <span class="w-2 h-2 rounded-full bg-gray-400 animate-typing-dot inline-block"></span>
                    <span class="w-2 h-2 rounded-full bg-gray-400 animate-typing-dot inline-block" style="animation-delay: 0.15s;"></span>
                    <span class="w-2 h-2 rounded-full bg-gray-400 animate-typing-dot inline-block" style="animation-delay: 0.3s;"></span>
                    <span class="text-xs text-gray-400 ml-2">Indicateur "en train d'ecrire"</span>
                </div>
                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">animate-typing-dot</code>
                <span class="text-xs text-gray-400 ml-2">+ animation-delay progressif sur chaque dot</span>
            </div>
        </section>

        {# ===== BLOBS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Float Blobs — Hero Principal</h2>
                <p class="text-sm text-gray-500 mt-1">Blobs flottants dans le hero de la landing</p>
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Animation</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Duree</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-700">Position</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">floatBlob1</code></td><td class="px-4 py-3 text-gray-500">20s</td><td class="px-4 py-3 text-gray-600">Haut-droite, deplace de 30/20px</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">floatBlob2</code></td><td class="px-4 py-3 text-gray-500">25s</td><td class="px-4 py-3 text-gray-600">Bas-gauche, deplace de -20/30px</td></tr>
                            <tr><td class="px-4 py-3"><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">floatBlob3</code></td><td class="px-4 py-3 text-gray-500">30s</td><td class="px-4 py-3 text-gray-600">Centre, deplace de 25/-20px</td></tr>
                        </tbody>
                    </table>
                </div>
                <p class="text-sm text-gray-500 mt-4">Les @keyframes sont definis dans une balise <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">&lt;style&gt;</code> directement dans <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">hero.html.twig</code>.</p>
            </div>
        </section>

    </div>
</div>
{% endblock %}