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

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

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

    {# ===== HEADER ===== #}
    <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">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Atomes</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Logo</h1>
                    </div>
                    <p class="text-sm text-gray-500">Logos Bubul en différentes versions</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== NAVIGATION RAPIDE ===== #}
        <nav class="mb-8 bg-white rounded-xl p-4 shadow-sm border border-gray-200">
            <div class="flex flex-wrap gap-2">
                <a href="#versions" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Versions</a>
                <a href="#usage" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Usage</a>
                <a href="#detailed" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Logo Detailed</a>
                <a href="#simple" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Logo Simple</a>
                <a href="#with-text" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Logo With Text</a>
                <a href="#sam-logo" class="px-3 py-1.5 text-sm rounded-lg bg-violet-100 text-violet-700 hover:bg-violet-200 transition-colors font-medium">SAM Logo</a>
                <a href="#guidelines" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Guidelines</a>
            </div>
        </nav>

        {# ===== VERSIONS ===== #}
        <section id="versions" 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">Versions du logo</h2>
                <p class="text-sm text-gray-500 mt-1">Deux versions selon le contexte d'utilisation</p>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-8">

                    {# Logo détaillé #}
                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <div class="p-8 bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center min-h-[200px]">
                            {% include '_atoms/logo/logo.html.twig' with {
                                variant: 'detailed',
                                size: 'xl'
                            } %}
                        </div>
                        <div class="p-4 border-t border-gray-200">
                            <h3 class="font-semibold text-gray-900">Logo detailed</h3>
                            <p class="text-sm text-gray-500 mt-1">Avec degradés et effets visuels</p>
                            <div class="mt-3 flex flex-wrap gap-2">
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Page login</span>
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Landing page</span>
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Marketing</span>
                            </div>
                        </div>
                    </div>

                    {# Logo simple #}
                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <div class="p-8 bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center min-h-[200px]">
                            {% include '_atoms/logo/logo.html.twig' with {
                                variant: 'simple',
                                size: 'xl'
                            } %}
                        </div>
                        <div class="p-4 border-t border-gray-200">
                            <h3 class="font-semibold text-gray-900">Logo simple</h3>
                            <p class="text-sm text-gray-500 mt-1">Version simplifiée SVG</p>
                            <div class="mt-3 flex flex-wrap gap-2">
                                {% include '_atoms/tag/tag.html.twig' with {label: 'Sidebar',color: 'success'} %}
                                {% include '_atoms/tag/tag.html.twig' with {label: 'Favicon',color: 'success'} %}
                                {% include '_atoms/tag/tag.html.twig' with {label: 'Header compact',color: 'success'} %}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        {# ===== USAGE ===== #}
        <section id="usage" 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">Usage</h2>
            </div>
            <div class="p-6 space-y-6">

                {# Paramètres #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Paramètres</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600">
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">variant</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">'detailed'</code></td>
                                    <td class="py-2 px-3">Version: <code>detailed</code>, <code>simple</code></td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">size</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">'md'</code></td>
                                    <td class="py-2 px-3">Taille: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code></td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">class</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">''</code></td>
                                    <td class="py-2 px-3">Classes CSS additionnelles</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Exemples de code #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Exemples</h3>
                    <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                        <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Logo detailed (défaut) #}
{% include '_atoms/logo/logo.html.twig' %}

{# Logo detailed grande taille #}
{% include '_atoms/logo/logo.html.twig' with {
    variant: 'detailed',
    size: 'xl'
} %}

{# Logo simple #}
{% include '_atoms/logo/logo.html.twig' with {
    variant: 'simple',
    size: 'lg'
} %}

{# Logo avec texte #}
{% include '_atoms/logo/logo-with-text.html.twig' with {
    showIcon: true,
    showBadge: true,
    size: 'lg'
} %}{% endverbatim %}</code></pre>
                    </div>
                    <div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
                        <strong>Fichier :</strong> <code class="bg-blue-100 px-1 rounded">templates/_atoms/logo/logo.html.twig</code>
                    </div>
                </div>

            </div>
        </section>

        {# ===== LOGO DETAILED - TAILLES ===== #}
        <section id="detailed" 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">Logo Detailed</h2>
                <p class="text-sm text-gray-500 mt-1">Tailles disponibles pour le logo avec dégradés</p>
            </div>
            <div class="p-6 space-y-8">

                {# Tailles #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Tailles</h3>
                    <div class="flex items-end gap-8 flex-wrap">
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'xs' } %}
                            <p class="text-xs text-gray-500 mt-2">xs (24px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'sm' } %}
                            <p class="text-xs text-gray-500 mt-2">sm (32px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'md' } %}
                            <p class="text-xs text-gray-500 mt-2">md (48px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'lg' } %}
                            <p class="text-xs text-gray-500 mt-2">lg (64px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'xl' } %}
                            <p class="text-xs text-gray-500 mt-2">xl (96px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: '2xl' } %}
                            <p class="text-xs text-gray-500 mt-2">2xl (128px)</p>
                        </div>
                    </div>
                </div>

                {# Sur différents fonds #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Sur différents fonds</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="p-6 bg-white border border-gray-200 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-gray-100 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-primary rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-gray-900 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'detailed', size: 'lg' } %}
                        </div>
                    </div>
                </div>

            </div>
        </section>

        {# ===== LOGO SIMPLE - TAILLES ===== #}
        <section id="simple" 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">Logo Simple</h2>
                <p class="text-sm text-gray-500 mt-1">Tailles disponibles pour le logo simplifié</p>
            </div>
            <div class="p-6 space-y-8">

                {# Tailles #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Tailles</h3>
                    <div class="flex items-end gap-6 flex-wrap">
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'xs' } %}
                            <p class="text-xs text-gray-500 mt-2">xs (24px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'sm' } %}
                            <p class="text-xs text-gray-500 mt-2">sm (32px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'md' } %}
                            <p class="text-xs text-gray-500 mt-2">md (48px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'lg' } %}
                            <p class="text-xs text-gray-500 mt-2">lg (64px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'xl' } %}
                            <p class="text-xs text-gray-500 mt-2">xl (96px)</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: '2xl' } %}
                            <p class="text-xs text-gray-500 mt-2">2xl (128px)</p>
                        </div>
                    </div>
                </div>

                {# Sur différents fonds #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Sur différents fonds</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="p-6 bg-white border border-gray-200 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-gray-100 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-primary rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'lg' } %}
                        </div>
                        <div class="p-6 bg-gray-900 rounded-lg flex items-center justify-center">
                            {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'lg' } %}
                        </div>
                    </div>
                </div>

            </div>
        </section>

        {# ===== LOGO WITH TEXT ===== #}
        <section id="with-text" 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">Logo With Text</h2>
                <p class="text-sm text-gray-500 mt-1">Logo avec le texte "Bubul" et badge BETA</p>
            </div>
            <div class="p-6 space-y-8">

                {# Paramètres #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Paramètres</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600">
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">showIcon</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">true</code></td>
                                    <td class="py-2 px-3">Afficher l'icône SVG</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">showText</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">true</code></td>
                                    <td class="py-2 px-3">Afficher le texte "Bubul"</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">showBadge</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">true</code></td>
                                    <td class="py-2 px-3">Afficher le badge "BETA"</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">size</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">'md'</code></td>
                                    <td class="py-2 px-3">Taille: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code></td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">inline</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">false</code></td>
                                    <td class="py-2 px-3">Version inline (pour titres)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Variantes #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Variantes</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {# Complet #}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-6 bg-gray-50 flex items-center justify-center min-h-[80px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-white">
                                <p class="text-sm font-medium text-gray-700">Complet (défaut)</p>
                                <p class="text-xs text-gray-500">Icône + Bubul + BETA</p>
                            </div>
                        </div>
                        {# Texte + Badge #}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-6 bg-gray-50 flex items-center justify-center min-h-[80px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-white">
                                <p class="text-sm font-medium text-gray-700">Texte + Badge</p>
                                <p class="text-xs text-gray-500">Bubul + BETA</p>
                            </div>
                        </div>
                        {# Icône + Texte #}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-6 bg-gray-50 flex items-center justify-center min-h-[80px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' with { showBadge: false } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-white">
                                <p class="text-sm font-medium text-gray-700">Icône + Texte</p>
                                <p class="text-xs text-gray-500">Sans badge BETA</p>
                            </div>
                        </div>
                        {# Texte seul #}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-6 bg-gray-50 flex items-center justify-center min-h-[80px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false, showBadge: false } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-white">
                                <p class="text-sm font-medium text-gray-700">Texte seul</p>
                                <p class="text-xs text-gray-500">Juste "Bubul"</p>
                            </div>
                        </div>
                    </div>
                </div>

                {# Tailles #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Tailles</h3>
                    <div class="flex items-end gap-8 flex-wrap">
                        <div class="text-center">
                            {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false, size: 'sm' } %}
                            <p class="text-xs text-gray-500 mt-2">sm</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false, size: 'md' } %}
                            <p class="text-xs text-gray-500 mt-2">md</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false, size: 'lg' } %}
                            <p class="text-xs text-gray-500 mt-2">lg</p>
                        </div>
                        <div class="text-center">
                            {% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: false, size: 'xl' } %}
                            <p class="text-xs text-gray-500 mt-2">xl</p>
                        </div>
                    </div>
                </div>

                {# Code #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Code</h3>
                    <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                        <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Complet #}
{% include '_atoms/logo/logo-with-text.html.twig' %}

{# Sans badge #}
{% include '_atoms/logo/logo-with-text.html.twig' with { showBadge: false } %}

{# Texte seul (inline pour titre) #}
{% include '_atoms/logo/logo-with-text.html.twig' with {
    showIcon: false,
    showBadge: false,
    inline: true
} %}

{# Grande taille #}
{% include '_atoms/logo/logo-with-text.html.twig' with { size: 'lg' } %}{% endverbatim %}</code></pre>
                    </div>
                    <div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
                        <strong>Fichier :</strong> <code class="bg-blue-100 px-1 rounded">templates/_atoms/logo/logo-with-text.html.twig</code>
                    </div>
                </div>

            </div>
        </section>

        {# ===== SAM LOGO ===== #}
        <section id="sam-logo" 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-violet-50">
                <div class="flex items-center gap-3">
                    {% include '_atoms/icon/sam-logo.html.twig' with { size: 'sm' } only %}
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">SAM Logo</h2>
                        <p class="text-sm text-gray-500 mt-0.5">Logo produit SAM — Suivi Apprenants Moodle</p>
                    </div>
                </div>
            </div>
            <div class="p-6 space-y-8">

                {# États : activé / désactivé #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">États</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-8 bg-gradient-to-br from-violet-50 to-purple-50 flex items-center justify-center min-h-[140px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' with {
                                    variant: 'sam',
                                    subtitle: 'Analytics Moodle',
                                    showBadge: false,
                                    size: 'lg'
                                } %}
                            </div>
                            <div class="p-4 border-t border-gray-200">
                                <h4 class="font-semibold text-gray-900">Activé</h4>
                                <p class="text-xs text-gray-500 mt-1"><code class="bg-gray-100 px-1 rounded">disabled: false</code> (défaut)</p>
                            </div>
                        </div>
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="p-8 bg-gray-50 flex items-center justify-center min-h-[140px]">
                                {% include '_atoms/logo/logo-with-text.html.twig' with {
                                    variant: 'sam',
                                    subtitle: 'Analytics Moodle',
                                    showBadge: false,
                                    size: 'lg',
                                    disabled: true
                                } %}
                            </div>
                            <div class="p-4 border-t border-gray-200">
                                <h4 class="font-semibold text-gray-900">Désactivé</h4>
                                <p class="text-xs text-gray-500 mt-1"><code class="bg-gray-100 px-1 rounded">disabled: true</code> — grayscale + opacity-40</p>
                            </div>
                        </div>
                    </div>
                </div>

                {# Tailles #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Tailles</h3>
                    <div class="flex items-end gap-8 flex-wrap p-6 bg-gray-50 rounded-xl">
                        {% for s in ['sm', 'md', 'lg', 'xl'] %}
                            <div class="text-center">
                                {% include '_atoms/logo/logo-with-text.html.twig' with {
                                    variant: 'sam',
                                    subtitle: 'Analytics Moodle',
                                    showBadge: false,
                                    size: s
                                } %}
                                <p class="text-xs text-gray-500 mt-3">{{ s }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {# Icône seule #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Icône seule</h3>
                    <div class="flex items-end gap-6 flex-wrap p-6 bg-gray-50 rounded-xl">
                        {% for s, px in {'xs': 16, 'sm': 20, 'md': 28, 'lg': 36, 'xl': 44, '2xl': 56} %}
                            <div class="text-center">
                                {% include '_atoms/icon/sam-logo.html.twig' with { size: s } only %}
                                <p class="text-xs text-gray-500 mt-2">{{ s }} ({{ px }}px)</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {# Paramètres #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Paramètres</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                                    <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600">
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">variant</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">'bubul'</code></td>
                                    <td class="py-2 px-3">Mettre <code>'sam'</code> pour activer le logo SAM</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">disabled</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">false</code></td>
                                    <td class="py-2 px-3">Applique <code>grayscale opacity-40</code> sur l'ensemble</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">subtitle</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">null</code></td>
                                    <td class="py-2 px-3">Sous-titre (ex: <code>'Analytics Moodle'</code>)</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">size</code></td>
                                    <td class="py-2 px-3">string</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">'md'</code></td>
                                    <td class="py-2 px-3">Taille : <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code></td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">showIcon / showText / showBadge</code></td>
                                    <td class="py-2 px-3">bool</td>
                                    <td class="py-2 px-3"><code class="bg-gray-100 px-1 rounded">true / true / true</code></td>
                                    <td class="py-2 px-3">Contrôle fins des éléments affichés</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Code #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Code</h3>
                    <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                        <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Logo SAM avec sous-titre (activé) #}
{% include '_atoms/logo/logo-with-text.html.twig' with {
    variant: 'sam',
    subtitle: 'Analytics Moodle',
    showBadge: false,
    size: 'lg'
} %}

{# Logo SAM désactivé #}
{% include '_atoms/logo/logo-with-text.html.twig' with {
    variant: 'sam',
    subtitle: 'Analytics Moodle',
    showBadge: false,
    disabled: true
} %}

{# Icône SAM seule #}
{% include '_atoms/icon/sam-logo.html.twig' with { size: 'md' } only %}{% endverbatim %}</code></pre>
                    </div>
                    <div class="mt-3 flex gap-3 flex-wrap">
                        <div class="p-3 bg-violet-50 border border-violet-200 rounded-lg text-sm text-violet-800">
                            <strong>Logo with text :</strong> <code class="bg-violet-100 px-1 rounded">templates/_atoms/logo/logo-with-text.html.twig</code>
                        </div>
                        <div class="p-3 bg-violet-50 border border-violet-200 rounded-lg text-sm text-violet-800">
                            <strong>Icône raster :</strong> <code class="bg-violet-100 px-1 rounded">templates/_atoms/icon/sam-logo.html.twig</code>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        {# ===== GUIDELINES ===== #}
        <section id="guidelines" 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">Guidelines</h2>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6">

                    {# Do #}
                    <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <h3 class="font-medium text-green-800 flex items-center gap-2 mb-3">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            A faire
                        </h3>
                        <ul class="space-y-2 text-sm text-green-700">
                            <li>Utiliser <code class="bg-green-100 px-1 rounded">variant: 'detailed'</code> pour les pages d'accueil et marketing</li>
                            <li>Utiliser <code class="bg-green-100 px-1 rounded">variant: 'simple'</code> pour la navigation (sidebar, header)</li>
                            <li>Respecter les espaces minimum autour du logo</li>
                            <li>Utiliser les couleurs de la charte (primary, white)</li>
                        </ul>
                    </div>

                    {# Don't #}
                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <h3 class="font-medium text-red-800 flex items-center gap-2 mb-3">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            A eviter
                        </h3>
                        <ul class="space-y-2 text-sm text-red-700">
                            <li>Déformer ou étirer le logo</li>
                            <li>Utiliser des couleurs non approuvées</li>
                            <li>Placer le logo sur un fond trop chargé</li>
                            <li>Réduire en dessous de <code class="bg-red-100 px-1 rounded">xs</code> (icône) ou <code class="bg-red-100 px-1 rounded">sm</code> (logo detailed)</li>
                        </ul>
                    </div>

                </div>

                {# Zones de sécurité #}
                <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="font-medium text-gray-800 mb-3">Zone de sécurité</h3>
                    <p class="text-sm text-gray-600">
                        Toujours maintenir un espace minimum autour du logo équivalent à <strong>25%</strong> de sa hauteur.
                        Cela garantit une bonne lisibilité et un aspect professionnel.
                    </p>
                </div>
            </div>
        </section>

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