{#
 # ============================================================================
 # ORGANISM: AUTH VALUE PANEL
 # ============================================================================
 # Panneau gauche des pages auth — carousel marketing à 3 slides.
 # Le logo Bubul est placé dans le panneau droit (login-form), pas ici.
 # Auto-advance toutes les 5s + dots cliquables (controller : shared--auth-slider).
 #
 # PARAMÈTRES
 # | Paramètre   | Type   | Défaut | Description                      |
 # |-------------|--------|--------|----------------------------------|
 # | class       | string | ''     | Classes additionnelles           |
 # ============================================================================
 #}

{% set class = class ?? '' %}

<div class="relative w-full lg:w-1/2 hidden lg:flex flex-col items-center justify-center
            lg:min-h-screen p-4 lg:p-12 overflow-hidden
            bg-gradient-to-br from-blue-50 to-blue-100 {{ class }}">

    {# Orbs décoratifs — couleurs Bubul #}
    <div class="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-40 blur-3xl pointer-events-none"
         aria-hidden="true"
         style="background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); animation: orbFloat 7s ease-in-out infinite;"></div>
    <div class="absolute -bottom-32 -left-32 w-80 h-80 rounded-full opacity-30 blur-3xl pointer-events-none"
         aria-hidden="true"
         style="background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); animation: orbFloat2 9s ease-in-out infinite;"></div>

    {# Carousel — max-w-lg pour garantir des headlines sur 2 lignes max #}
    <div class="relative z-10 flex flex-col items-center justify-center w-full max-w-lg"
         data-controller="shared--auth-slider"
         data-shared--auth-slider-interval-value="5000"
         data-action="mouseenter->shared--auth-slider#pause mouseleave->shared--auth-slider#resume">

        {# Slides stack — min-h dimensionné pour le worst case (illustration + headline 2 lignes + tagline 3 lignes + marges) #}
        <div class="relative w-full min-h-[580px]">

            {# ===== Slide 1 — La noblesse du métier ===== #}
            <div data-shared--auth-slider-target="slide"
                 class="absolute inset-0 flex flex-col items-center justify-center text-center transition-opacity duration-700 ease-in-out opacity-100">
                <div class="w-full max-w-xs xl:max-w-sm mb-6">
                    {% include '_atoms/illustration/illustration.html.twig' with {
                        name: 'learning',
                        colorPrimary: 'var(--color-primary)',
                        size: 'fluid',
                        class: 'w-full h-auto'
                    } only %}
                </div>
                <h2 class="text-3xl xl:text-4xl font-medium text-gray-900 leading-[1.25] mb-3 tracking-tight">
                    Plus de temps pour<br>ce qui compte vraiment.
                </h2>
                <p class="text-gray-500 text-sm max-w-xs leading-relaxed min-h-[4.5rem]">
                    La pédagogie. L'humain. La transmission. Le reste, on s'en charge.
                </p>
            </div>

            {# ===== Slide 2 — La suite interconnectée ===== #}
            <div data-shared--auth-slider-target="slide"
                 class="absolute inset-0 flex flex-col items-center justify-center text-center transition-opacity duration-700 ease-in-out opacity-0 pointer-events-none">
                <div class="w-full max-w-xs xl:max-w-sm mb-6">
                    {% include '_atoms/illustration/illustration.html.twig' with {
                        name: 'online-world',
                        colorPrimary: 'var(--color-primary)',
                        size: 'fluid',
                        class: 'w-full h-auto'
                    } only %}
                </div>
                <h2 class="text-3xl xl:text-4xl font-medium text-gray-900 leading-[1.25] mb-3 tracking-tight">
                    Concevoir. Animer. Suivre.<br>Sans changer d'outil.
                </h2>
                <p class="text-gray-500 text-sm max-w-xs leading-relaxed min-h-[4.5rem]">
                    La suite IA pensée pour le quotidien des formateurs.
                </p>
            </div>

            {# ===== Slide 3 — La fierté ===== #}
            <div data-shared--auth-slider-target="slide"
                 class="absolute inset-0 flex flex-col items-center justify-center text-center transition-opacity duration-700 ease-in-out opacity-0 pointer-events-none">
                <div class="w-full max-w-xs xl:max-w-sm mb-6">
                    {% include '_atoms/illustration/illustration.html.twig' with {
                        name: 'graduation-hats',
                        colorPrimary: 'var(--color-primary)',
                        size: 'fluid',
                        class: 'w-full h-auto'
                    } only %}
                </div>
                <h2 class="text-3xl xl:text-4xl font-medium text-gray-900 leading-[1.25] mb-3 tracking-tight">
                    Des formations qui<br>ne ressemblent à rien d'autre.
                </h2>
                <p class="text-gray-500 text-sm max-w-xs leading-relaxed min-h-[4.5rem]">
                    Le standard premium pour les pros de la formation.
                </p>
            </div>
        </div>

        {# Dots de navigation — mt-10 pour garantir une marge claire avec le tagline (même sur 3 lignes) #}
        <div class="flex items-center gap-2 mt-10" role="tablist" aria-label="Navigation slides marketing">
            <button type="button"
                    data-shared--auth-slider-target="dot"
                    data-action="click->shared--auth-slider#goTo"
                    data-index="0"
                    class="h-2 w-6 rounded-full bg-primary transition-all duration-300 cursor-pointer"
                    aria-label="Slide 1"></button>
            <button type="button"
                    data-shared--auth-slider-target="dot"
                    data-action="click->shared--auth-slider#goTo"
                    data-index="1"
                    class="h-2 w-2 rounded-full bg-gray-300 transition-all duration-300 cursor-pointer"
                    aria-label="Slide 2"></button>
            <button type="button"
                    data-shared--auth-slider-target="dot"
                    data-action="click->shared--auth-slider#goTo"
                    data-index="2"
                    class="h-2 w-2 rounded-full bg-gray-300 transition-all duration-300 cursor-pointer"
                    aria-label="Slide 3"></button>
        </div>

    </div>
</div>