{#
 # ============================================================================
 # ORGANISM: LANDING HERO TOOL
 # ============================================================================
 #
 # Section hero paramétrée pour les pages de présentation d'outils.
 # Réutilisable pour Moodia, Slidia, Serenia, Castia, Monalisia, SAM.
 # Fond identique au hero principal : FAFCFF + orbes floutées + grille de points.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre           | Type   | Défaut                  | Description                 |
 # |---------------------|--------|-------------------------|-----------------------------|
 # | toolName            | string | ''                      | Nom de l'outil              |
 # | toolColor           | string | 'primary'               | Token couleur CSS           |
 # | toolIcon            | string | 'rocket'                | Icône Solar                 |
 # | h1                  | string | ''                      | H1 SEO (obligatoire)        |
 # | subtitle            | string | ''                      | Sous-titre sous le H1       |
 # | badge               | string | null                    | Badge outil (dot + label)   |
 # | liveBadge           | string | null                    | Badge live pulsant          |
 # | pills               | array  | []                      | Trust pills [string]        |
 # | ctaUrl              | string | '#beta-signup'          | URL CTA principal           |
 # | ctaLabel            | string | 'Essayer gratuitement'  | Label CTA principal         |
 # | ctaSecondaryUrl     | string | null                    | URL CTA secondaire          |
 # | ctaSecondaryLabel   | string | null                    | Label CTA secondaire        |
 # | stats               | array  | []                      | [{value, label, sublabel}]  |
 # | screenshotNote      | string | ''                      | Note placeholder screenshot |
 # | gradientStart       | string | '#0A6BC4'               | Couleur début dégradé       |
 # | gradientEnd         | string | '#3AB8E8'               | Couleur fin dégradé         |
 # | visualHtml          | string | null                    | HTML mockup custom (droite) |
 # | class               | string | ''                      | Classes CSS additionnelles  |
 #
 # ============================================================================
 #}

{% set toolName = toolName ?? '' %}
{% set toolColor = toolColor ?? 'primary' %}
{% set toolIcon = toolIcon ?? 'rocket' %}
{% set h1 = h1 ?? '' %}
{% set subtitle = subtitle ?? '' %}
{% set badge = badge ?? null %}
{% set betaBadge = betaBadge ?? false %}
{% set ctaUrl = ctaUrl ?? '#beta-signup' %}
{% set ctaLabel = ctaLabel ?? 'Commencer maintenant' %}
{% set ctaSecondaryUrl = ctaSecondaryUrl ?? null %}
{% set ctaSecondaryLabel = ctaSecondaryLabel ?? null %}
{% set stats = stats ?? [] %}
{% set liveBadge = liveBadge ?? null %}
{% set pills = pills ?? [] %}
{% set visualHtml = visualHtml ?? null %}
{% set userCount = userCount ?? (tool_user_counts[toolName|lower] ?? null) %}
{% set userCountLabel = userCountLabel ?? ('formateurs utilisent déjà ' ~ toolName) %}
{% set screenshotNote = screenshotNote ?? ('Screenshot de l\'interface ' ~ toolName) %}
{% set gradientStart = gradientStart ?? '#0A6BC4' %}
{% set gradientEnd = gradientEnd ?? '#3AB8E8' %}
{% set class = class ?? '' %}
{% set visualWide = visualWide ?? false %}

<section class="relative min-h-[90vh] flex items-center overflow-hidden pt-24 pb-16 {{ class }}" id="hero-tool">

    {# ===== Background ===== #}
    <div class="absolute inset-0" style="background: #FAFCFF;"></div>

    {# Orbes floutées — dégradé aux couleurs de l'outil #}
    <div class="hidden lg:block absolute w-[600px] h-[600px] rounded-full opacity-[0.07] blur-[120px] -top-[200px] -left-[100px] pointer-events-none"
         style="background: radial-gradient(circle, {{ gradientStart }} 0%, {{ gradientEnd }} 100%);"></div>
    <div class="hidden lg:block absolute w-[500px] h-[500px] rounded-full opacity-[0.05] blur-[100px] -bottom-[100px] right-[10%] pointer-events-none"
         style="background: radial-gradient(circle, {{ gradientEnd }} 0%, {{ gradientStart }} 100%);"></div>
    <div class="hidden lg:block absolute w-[300px] h-[300px] rounded-full opacity-[0.04] blur-[80px] top-[30%] right-[30%] pointer-events-none"
         style="background: radial-gradient(circle, {{ gradientStart }} 0%, {{ gradientEnd }} 100%);"></div>

    {# Grille de points subtile #}
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
         style="background-image: radial-gradient(circle, {{ gradientStart }} 1px, transparent 1px); background-size: 40px 40px;"></div>

    {# Fondu bas pour enchaîner avec la section suivante #}
    <div class="absolute inset-x-0 bottom-0 h-[200px] z-[1] pointer-events-none"
         style="background: linear-gradient(to bottom, rgba(250,252,255,0) 0%, rgba(255,255,255,1) 100%);"></div>

    {# ===== Contenu ===== #}
    <div class="relative z-10 max-w-[1280px] mx-auto px-6 lg:px-8 w-full">
        <div class="grid grid-cols-1 {% if visualWide %}lg:grid-cols-[2fr,3fr]{% else %}lg:grid-cols-2{% endif %} gap-8 lg:gap-12 items-center">

            {# ===== Gauche : Texte ===== #}
            <div>

                {# Live badge — pulsing (ex: betaCount, Bêta ouverte) #}
                {% if liveBadge %}
                    <div class="inline-flex items-center gap-2 bg-white border border-gray-100 rounded-full px-4 py-1.5 mb-5 text-sm shadow-sm animate-fade-in-up" style="color: #5A6B7F;">
                        <span class="w-2 h-2 rounded-full flex-shrink-0" style="background: {{ gradientStart }}; box-shadow: 0 0 0 3px {{ gradientStart }}26; animation: heroLivePulse 2s ease-in-out infinite;"></span>
                        {{ liveBadge }}
                    </div>
                {% endif %}

                {# Badge — couleur dynamique de l'outil via customColor ; badge BETA optionnel à droite #}
                {% if badge %}
                    <div class="mb-8 animate-fade-in-up flex items-center gap-2 flex-wrap">
                        {% include '_atoms/badge/badge.html.twig' with {
                            label: badge,
                            customColor: gradientStart,
                            dot: true,
                            pulse: true,
                            size: 'md',
                            rounded: 'full'
                        } only %}
                        {% if betaBadge %}
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: 'BETA',
                                customColor: gradientStart,
                                size: 'md',
                                rounded: 'full'
                            } only %}
                        {% endif %}
                    </div>
                {% endif %}

                {# H1 #}
                <h1 class="font-display text-3xl sm:text-4xl md:text-5xl lg:text-[3.2rem] font-bold leading-[1.1] mb-6 animate-fade-in-up animation-delay-200"
                    style="color: #1A2B3F;">
                    {{ h1|raw }}
                </h1>

                {# Sous-titre #}
                {% if subtitle %}
                    <p class="text-lg lg:text-xl leading-relaxed mb-10 max-w-[520px] animate-fade-in-up animation-delay-400"
                       style="color: #5A6B7F;">
                        {{ subtitle|raw }}
                    </p>
                {% endif %}

                {# CTAs — layout responsive sans chevauchement #}
                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 animate-fade-in-up animation-delay-600 mb-3">
                    {% include '_atoms/button/button.html.twig' with {
                        label: ctaLabel,
                        href: ctaUrl,
                        gradientFrom: gradientStart,
                        gradientTo: gradientEnd,
                        size: 'lg'
                    } only %}
                    {% if ctaSecondaryUrl and ctaSecondaryLabel %}
                        {% include '_atoms/button/button.html.twig' with {
                            label: ctaSecondaryLabel,
                            href: ctaSecondaryUrl,
                            variant: 'outline',
                            size: 'lg'
                        } only %}
                    {% endif %}
                </div>

                {# Social proof sous les CTAs #}
                {% if userCount is not null and userCount > 0 %}
                    <div class="flex items-center gap-2.5 mt-8 mb-8 animate-fade-in-up animation-delay-600">
                        <div class="flex -space-x-1.5">
                            {% for i in 1..3 %}
                                <div class="w-6 h-6 rounded-full border-2 border-white flex items-center justify-center text-[0.5rem] font-bold text-white flex-shrink-0"
                                     style="background: linear-gradient(135deg, {{ gradientStart }}{{ ['CC','99','77'][i-1] }}, {{ gradientEnd }}{{ ['99','77','55'][i-1] }});">
                                    {{ ['F','A','M'][i-1] }}
                                </div>
                            {% endfor %}
                        </div>
                        <p class="text-xs" style="color: #8898AA;">
                            <span class="font-semibold" style="color: {{ gradientStart }};">{{ userCount }}+</span> {{ userCountLabel }}
                        </p>
                    </div>
                {% else %}
                    <div class="mt-4 mb-8"></div>
                {% endif %}

                {# Trust pills #}
                {% if pills|length > 0 %}
                    <div class="flex flex-wrap gap-2 mt-4 animate-fade-in-up animation-delay-600">
                        {% for pill in pills %}
                            <div class="inline-flex items-center gap-1.5 bg-white border border-gray-100 rounded-full px-3 py-1 text-xs shadow-sm" style="color: #5A6B7F;">
                                <span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 text-[0.5rem] text-white font-bold" style="background: linear-gradient(135deg, {{ gradientStart }}, {{ gradientEnd }});">✓</span>
                                {{ pill }}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {# Barre de stats #}
                {% if stats|length > 0 %}
                    <div class="flex flex-wrap gap-x-8 gap-y-4 pt-6 border-t border-gray-100 animate-fade-in-up animation-delay-600">
                        {% for stat in stats %}
                            <div>
                                <div class="font-display text-2xl font-bold"
                                     style="background: linear-gradient(135deg, {{ gradientStart }}, {{ gradientEnd }}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                                    {{ stat.value }}
                                </div>
                                <div class="text-sm font-semibold text-gray-800 mt-0.5">{{ stat.label }}</div>
                                {% if stat.sublabel is defined and stat.sublabel %}
                                    <div class="text-xs text-gray-400">{{ stat.sublabel }}</div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

            </div>

            {# ===== Droite : Aperçu de l'interface ===== #}
            <div class="hero-tool-visual-wrapper">
                {% if visualHtml %}
                    {{ visualHtml|raw }}
                {% else %}
                    <div class="rounded-2xl overflow-hidden"
                         style="border: 1px solid {{ gradientStart }}20; box-shadow: 0 24px 80px {{ gradientStart }}1A, 0 4px 16px rgba(0,0,0,0.05);">

                        {# Barre navigateur colorée #}
                        <div class="flex items-center gap-1.5 px-4 border-b"
                             style="background: linear-gradient(90deg, {{ gradientStart }}, {{ gradientEnd }}); border-color: {{ gradientStart }}30; height: 36px;">
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                            <div class="w-3 h-3 rounded-full bg-white/40"></div>
                            <span class="ml-3 font-mono text-xs text-white/70 select-none">bubul.app</span>
                        </div>

                        {# Zone screenshot / placeholder #}
                        <div class="aspect-[16/10] flex items-center justify-center"
                             style="background: linear-gradient(135deg, {{ gradientStart }}04 0%, {{ gradientEnd }}06 100%);">
                            <div class="text-center p-8">
                                <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-4"
                                     style="background: {{ gradientStart }}12; border: 1.5px solid {{ gradientStart }}25;">
                                    {% include '_atoms/icon/icon.html.twig' with { name: toolIcon, size: '4xl', color: toolColor } only %}
                                </div>
                                <p class="text-gray-400 text-sm font-medium max-w-[200px] mx-auto leading-relaxed">{{ screenshotNote }}</p>
                            </div>
                        </div>

                    </div>
                {% endif %}
            </div>

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

<style>
    /* Animations hero outil */
    .animate-fade-in-up {
        animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-600 { animation-delay: 0.6s; }

    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0);    }
    }

    /* Flottement du visuel droite */
    .hero-tool-visual-wrapper {
        opacity: 0;
        animation:
            heroFadeUp      0.7s 0.4s  cubic-bezier(0.16, 1, 0.3, 1) forwards,
            heroToolFloat   6s   1.1s  ease-in-out infinite;
    }

    @keyframes heroLivePulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
        50%       { box-shadow: 0 0 0 6px rgba(0,0,0,0.03); }
    }

    @keyframes heroToolFloat {
        0%, 100% { transform: translateY(0);    }
        50%      { transform: translateY(-8px); }
    }
</style>