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

{% block title %}Typography - 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]">Typography</h1>
                    </div>
                    <p class="text-sm text-gray-500">Styles typographiques pour titres, textes et labels</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== USAGE ===== #}
        <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">Usage</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-4">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/typography/typography.html.twig' with {
    text: 'Bienvenue sur Bubul',
    tag: 'h1',
    variant: 'h1',
    color: 'default'
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_atoms/typography/typography.html.twig</code></p>
            </div>
        </section>

        {# ===== ÉCHELLE TYPOGRAPHIQUE ===== #}
        <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">Échelle typographique</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6">
                <div class="space-y-6">
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Display</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Display Title', tag: 'h1', variant: 'display' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H1</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 1', tag: 'h1', variant: 'h1' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H2</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 2', tag: 'h2', variant: 'h2' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H3</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 3', tag: 'h3', variant: 'h3' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H4</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 4', tag: 'h4', variant: 'h4' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H5</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 5', tag: 'h5', variant: 'h5' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">H6</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Heading 6', tag: 'h6', variant: 'h6' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Lead</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Lead paragraph for introductions', variant: 'lead' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Body</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Body text for regular content', variant: 'body' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Body SM</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Smaller body text for secondary info', variant: 'body-sm' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Small</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Small text for footnotes', variant: 'small' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Caption</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Caption text', variant: 'caption' } %}
                    </div>
                    <div class="flex items-baseline gap-4 pb-4 border-b border-gray-100">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Label</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Form label', tag: 'label', variant: 'label' } %}
                    </div>
                    <div class="flex items-baseline gap-4">
                        <span class="w-24 text-xs text-gray-400 uppercase tracking-wider shrink-0">Overline</span>
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Overline text', variant: 'overline' } %}
                    </div>
                </div>
            </div>
        </section>

        {# ===== COULEURS ===== #}
        <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">Couleurs</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">color</code></p>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Default - Texte principal', variant: 'body', color: 'default' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Muted - Texte secondaire', variant: 'body', color: 'muted' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Light - Texte discret', variant: 'body', color: 'light' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Primary - Texte accentué', variant: 'body', color: 'primary' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Success - Message positif', variant: 'body', color: 'success' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Error - Message d\'erreur', variant: 'body', color: 'error' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Warning - Avertissement', variant: 'body', color: 'warning' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Info - Information', variant: 'body', color: 'info' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Cohorts - Couleur produit', variant: 'body', color: 'cohorts' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Gradient - Dégradé bleu Bubul', variant: 'h3', color: 'gradient' } %}
                    <div class="bg-gray-800 p-3 rounded-lg inline-block">
                        {% include '_atoms/typography/typography.html.twig' with { text: 'White - Sur fond sombre', variant: 'body', color: 'white' } %}
                    </div>
                </div>
            </div>
        </section>

        {# ===== GRAISSES ===== #}
        <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">Graisses</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">weight</code> (surcharge la variante)</p>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Light (300)', variant: 'body', weight: 'light' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Normal (400)', variant: 'body', weight: 'normal' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Medium (500)', variant: 'body', weight: 'medium' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Semibold (600)', variant: 'body', weight: 'semibold' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Bold (700)', variant: 'body', weight: 'bold' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Extrabold (800)', variant: 'body', weight: 'extrabold' } %}
                </div>
            </div>
        </section>

        {# ===== ALIGNEMENTS ===== #}
        <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">Alignements</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">align</code></p>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Texte aligné à gauche (défaut)', variant: 'body', align: 'left' } %}
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Texte centré', variant: 'body', align: 'center' } %}
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        {% include '_atoms/typography/typography.html.twig' with { text: 'Texte aligné à droite', variant: 'body', align: 'right' } %}
                    </div>
                </div>
            </div>
        </section>

        {# ===== POLICES ===== #}
        <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">Polices</h2>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-6 bg-gray-50 rounded-lg">
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Titres</p>
                        <p class="text-3xl font-bold font-[Poppins]">Poppins</p>
                        <p class="text-sm text-gray-500 mt-2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
                        <p class="text-sm text-gray-500">abcdefghijklmnopqrstuvwxyz</p>
                        <p class="text-sm text-gray-500">0123456789</p>
                    </div>
                    <div class="p-6 bg-gray-50 rounded-lg">
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Corps de texte</p>
                        <p class="text-3xl font-medium">Roboto</p>
                        <p class="text-sm text-gray-500 mt-2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
                        <p class="text-sm text-gray-500">abcdefghijklmnopqrstuvwxyz</p>
                        <p class="text-sm text-gray-500">0123456789</p>
                    </div>
                </div>
            </div>
        </section>

        {# ===== EXEMPLE : PAGE HERO ===== #}
        <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">Exemple : Section Hero</h2>
            </div>
            <div class="p-6">
                <div class="max-w-2xl mx-auto text-center py-8">
                    {% include '_atoms/typography/typography.html.twig' with { text: 'NOUVELLE FONCTIONNALITÉ', variant: 'overline', color: 'primary', align: 'center' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Créez des formations en quelques clics', tag: 'h1', variant: 'display', align: 'center', class: 'mt-4' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Bubul utilise l\'intelligence artificielle pour transformer vos documents PDF en parcours de formation Moodle complets et engageants.', variant: 'lead', color: 'muted', align: 'center', class: 'mt-6' } %}
                </div>
            </div>
        </section>

        {# ===== EXEMPLE : ARTICLE ===== #}
        <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">Exemple : Article</h2>
            </div>
            <div class="p-6">
                <article class="max-w-2xl">
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Guide de démarrage', tag: 'h2', variant: 'h2' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Apprenez à utiliser Bubul en 5 minutes', variant: 'lead', color: 'muted', class: 'mt-2' } %}

                    {% include '_atoms/typography/typography.html.twig' with { text: '1. Créer votre compte', tag: 'h3', variant: 'h3', class: 'mt-8' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Commencez par créer votre compte sur la plateforme. Vous recevrez des crédits gratuits pour tester toutes les fonctionnalités.', variant: 'body', class: 'mt-3' } %}

                    {% include '_atoms/typography/typography.html.twig' with { text: '2. Importer un document', tag: 'h3', variant: 'h3', class: 'mt-6' } %}
                    {% include '_atoms/typography/typography.html.twig' with { text: 'Uploadez votre PDF et laissez l\'IA analyser son contenu. Le système extrait automatiquement la structure et les informations clés.', variant: 'body', class: 'mt-3' } %}

                    {% include '_atoms/typography/typography.html.twig' with { text: 'Note: Les fichiers PDF de plus de 20 Mo ne sont pas supportés.', variant: 'small', color: 'muted', class: 'mt-2' } %}
                </article>
            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <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">Paramètres</h2>
            </div>
            <div class="p-6 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>text</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Contenu textuel</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tag</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">p</td><td class="py-2 px-3">h1-h6, p, span, label</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>variant</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">body</td><td class="py-2 px-3">display, h1-h6, lead, body, body-sm, small, caption, label, overline</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>weight</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">light, normal, medium, semibold, bold, extrabold</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>color</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">default</td><td class="py-2 px-3">default, muted, light, primary, success, error, warning, info, cohorts, white, inherit, gradient</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>align</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">left, center, right</td></tr>
                        <tr><td class="py-2 px-3"><code>class</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Classes additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

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