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

{% block title %}Landing Hero - 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-purple-100 text-purple-700 rounded">Organisme</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-secondary">Landing Hero</h1>
                    </div>
                    <p class="text-sm text-gray-500">Section hero principale de la landing page</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== EXPLICATION ===== #}
        <section class="mb-12 bg-gradient-to-r from-purple-50 to-purple-100/50 rounded-xl border border-purple-200 overflow-hidden">
            <div class="p-6">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'presentation-graph', size: 'lg', color: 'white' } %}
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <h2 class="text-lg font-semibold text-gray-900">Hero Landing Page</h2>
                            <span class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700 rounded">Public</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            Le Landing Hero est la section d'accroche principale. Il contient le <strong>titre</strong>, <strong>sous-titre</strong>,
                            un bouton <strong>CTA</strong> et un indicateur de scroll. Le fond utilise un gradient doux avec des <strong>blobs animes</strong>
                            pour creer une atmosphere moderne et dynamique.
                        </p>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">2</p>
                                <p class="text-xs text-gray-500">Atomes</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">3</p>
                                <p class="text-xs text-gray-500">Blobs</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">4</p>
                                <p class="text-xs text-gray-500">Animations</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">100vh</p>
                                <p class="text-xs text-gray-500">Hauteur</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== COMPOSITION ===== #}
        <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">Composition</h2>
                <p class="text-sm text-gray-500 mt-1">Atomes utilises</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                            Boutons
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">button</code>
                                <span class="text-gray-400">CTA primary, size xl</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
                            Icones
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">icon</code>
                                <span class="text-gray-400">scroll indicator (CSS)</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ===== UTILISATION ===== #}
        <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">Utilisation</h2>
                <p class="text-sm text-gray-500 mt-1">Exemple de code Twig</p>
            </div>
            <div class="p-6">
                <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm"><code>{% verbatim %}{% include '_organisms/landing/hero.html.twig' with {
    surtitle: 'BUBUL, METTEZ DU PETILLANT DANS VOS FORMATIONS !',
    title: 'Bubul, la plateforme IA qui permet aux formateurs de travailler l\'esprit leger !',
    subtitle: 'Des bulles d\'IA au service de votre enseignement. <strong>Moodia</strong> pour vos cours Moodle complets...',
    ctaUrl: '#beta-signup',
    ctaLabel: 'Inscrivez-vous a la beta'
} only %}{% endverbatim %}</code></pre>
            </div>
        </section>

        {# ===== DEMO VISUELLE ===== #}
        <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">Demo - Apercu</h2>
                <p class="text-sm text-gray-500 mt-1">Representation visuelle du composant</p>
            </div>
            <div class="p-6">
                {# Mini apercu du hero #}
                <div class="relative h-80 rounded-lg overflow-hidden">
                    {# Background gradient #}
                    <div class="absolute inset-0" style="background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 30%, #FFFFFF 70%, #F0F9FF 100%);"></div>

                    {# Blobs simplifies #}
                    <div class="absolute w-40 h-40 rounded-full bg-primary/20 blur-3xl top-0 right-0 animate-pulse"></div>
                    <div class="absolute w-32 h-32 rounded-full bg-secondary/20 blur-3xl bottom-0 left-0 animate-pulse" style="animation-delay: 0.5s;"></div>
                    <div class="absolute w-24 h-24 rounded-full bg-primary-light/20 blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" style="animation-delay: 1s;"></div>

                    {# Contenu #}
                    <div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-6">
                        <p class="text-xs font-bold tracking-widest text-primary mb-2">SURTITLE</p>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Titre Principal</h3>
                        <p class="text-sm text-gray-600 mb-4 max-w-md">Sous-titre avec description et possibilite d'utiliser du <strong>HTML</strong>.</p>
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'CTA Button',
                            href: '#',
                            variant: 'primary',
                            size: 'lg'
                        } only %}
                    </div>

                    {# Scroll indicator #}
                    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 text-gray-400">
                        <span class="text-xs">Decouvrir</span>
                        <div class="w-3 h-3 border-l-2 border-b-2 border-current rotate-[-45deg]"></div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== ANIMATIONS ===== #}
        <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">Animations</h2>
                <p class="text-sm text-gray-500 mt-1">Effets d'animation CSS</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <h4 class="font-medium text-blue-800 mb-2">Blobs flottants</h4>
                        <p class="text-sm text-blue-600">3 blobs avec animations @keyframes differentes (floatBlob1, floatBlob2, floatBlob3) de 20-30 secondes.</p>
                    </div>
                    <div class="p-4 bg-green-50 rounded-lg border border-green-200">
                        <h4 class="font-medium text-green-800 mb-2">Fade in up</h4>
                        <p class="text-sm text-green-600">Le contenu apparait avec un effet fadeInUp avec delais progressifs (0, 200ms, 400ms, 600ms).</p>
                    </div>
                    <div class="p-4 bg-purple-50 rounded-lg border border-purple-200">
                        <h4 class="font-medium text-purple-800 mb-2">Bounce scroll</h4>
                        <p class="text-sm text-purple-600">L'indicateur de scroll utilise une animation bounce lente de 2 secondes.</p>
                    </div>
                    <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                        <h4 class="font-medium text-yellow-800 mb-2">Blur effect</h4>
                        <p class="text-sm text-yellow-600">Les blobs utilisent filter: blur(100px) pour un effet doux et moderne.</p>
                    </div>
                </div>
            </div>
        </section>

        {# ===== DEMO RESPONSIVE ===== #}
        <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">Demo - Responsive</h2>
                <p class="text-sm text-gray-500 mt-1">Adaptations selon la taille d'ecran</p>
            </div>
            <div class="p-6 space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center text-sm">
                    <div class="p-4 bg-green-50 rounded-lg border border-green-200">
                        <p class="font-medium text-green-800">Desktop (lg+)</p>
                        <p class="text-green-600">Titre 3.5rem, blobs 500-700px</p>
                    </div>
                    <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                        <p class="font-medium text-yellow-800">Tablet (md-lg)</p>
                        <p class="text-yellow-600">Titre 3rem, blobs 300-400px</p>
                    </div>
                    <div class="p-4 bg-purple-50 rounded-lg border border-purple-200">
                        <p class="font-medium text-purple-800">Mobile (-md)</p>
                        <p class="text-purple-600">Titre 2.25rem, blobs 180-250px</p>
                    </div>
                </div>

                {# Tailles de blobs #}
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                    <h4 class="font-medium text-gray-800 mb-3">Tailles des blobs par breakpoint</h4>
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="py-2 text-left text-gray-600">Blob</th>
                                <th class="py-2 text-center text-gray-600">Desktop</th>
                                <th class="py-2 text-center text-gray-600">Tablet</th>
                                <th class="py-2 text-center text-gray-600">Mobile</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100">
                                <td class="py-2">Blob 1 (haut-droite)</td>
                                <td class="py-2 text-center text-primary">700px</td>
                                <td class="py-2 text-center text-yellow-600">400px</td>
                                <td class="py-2 text-center text-purple-600">250px</td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-2">Blob 2 (bas-gauche)</td>
                                <td class="py-2 text-center text-primary">600px</td>
                                <td class="py-2 text-center text-yellow-600">350px</td>
                                <td class="py-2 text-center text-purple-600">200px</td>
                            </tr>
                            <tr>
                                <td class="py-2">Blob 3 (centre)</td>
                                <td class="py-2 text-center text-primary">500px</td>
                                <td class="py-2 text-center text-yellow-600">300px</td>
                                <td class="py-2 text-center text-purple-600">180px</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {# ===== PARAMETRES ===== #}
        <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">Parametres</h2>
                <p class="text-sm text-gray-500 mt-1">Options de configuration</p>
            </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-6 py-3 text-left font-semibold text-gray-700">Parametre</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Type</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Defaut</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">surtitle</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">''</td>
                            <td class="px-6 py-4 text-gray-600">Texte au-dessus du titre (uppercase, tracking wide)</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">title</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">''</td>
                            <td class="px-6 py-4 text-gray-600">Titre principal (h1)</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">subtitle</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">''</td>
                            <td class="px-6 py-4 text-gray-600">Sous-titre (HTML autorise avec |raw)</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">ctaUrl</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'#beta-signup'</td>
                            <td class="px-6 py-4 text-gray-600">URL du bouton CTA</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">ctaLabel</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'Inscrivez-vous a la beta'</td>
                            <td class="px-6 py-4 text-gray-600">Texte du bouton CTA</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">showScroll</code></td>
                            <td class="px-6 py-4 text-gray-500">bool</td>
                            <td class="px-6 py-4 text-gray-500">true</td>
                            <td class="px-6 py-4 text-gray-600">Afficher l'indicateur de scroll</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">class</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">''</td>
                            <td class="px-6 py-4 text-gray-600">Classes CSS additionnelles sur la section</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== NOTES TECHNIQUES ===== #}
        <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">Notes Techniques</h2>
                <p class="text-sm text-gray-500 mt-1">Implementation</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold">1</span>
                    <div>
                        <h4 class="font-medium text-gray-900">Hauteur min-h-screen</h4>
                        <p class="text-sm text-gray-600">Le hero occupe 100% de la hauteur du viewport pour un impact visuel maximal.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold">2</span>
                    <div>
                        <h4 class="font-medium text-gray-900">Z-index des couches</h4>
                        <p class="text-sm text-gray-600">Background (z-0) → Blobs (z-0) → Contenu (z-10) pour une superposition correcte.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold">3</span>
                    <div>
                        <h4 class="font-medium text-gray-900">Styles inline</h4>
                        <p class="text-sm text-gray-600">Les animations CSS (@keyframes) sont definies dans une balise &lt;style&gt; directement dans le composant pour l'encapsulation.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold">4</span>
                    <div>
                        <h4 class="font-medium text-gray-900">HTML dans subtitle</h4>
                        <p class="text-sm text-gray-600">Le parametre subtitle utilise <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">|raw</code> pour permettre le HTML (balises &lt;strong&gt;, etc.).</p>
                    </div>
                </div>
            </div>
        </section>

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