{#
 # ============================================================================
 # ORGANISM: LANDING SOCIAL PROOF
 # ============================================================================
 #
 # 4-column stat bar displaying key metrics with gradient numbers.
 # Fully parameterized: all stats passed via Twig parameters.
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre | Type   | Defaut                     | Description                    |
 # |-----------|--------|----------------------------|--------------------------------|
 # | stats     | array  | (default 4 Bubul stats)    | [{value, label, sublabel, gradient}] |
 # | class     | string | ''                         | Additional CSS classes         |
 #
 # ============================================================================
 # STRUCTURE D'UNE STAT (stats[])
 # ============================================================================
 #
 # | Cle       | Type   | Description                                          |
 # |-----------|--------|------------------------------------------------------|
 # | value     | string | Display value (e.g. '80+', '20min')                  |
 # | label     | string | Primary label                                        |
 # | sublabel  | string | Secondary label below                                |
 # | gradient  | string | CSS gradient for the value (e.g. 'linear-gradient(...)') |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # Default:
 # {% include '_organisms/landing/social-proof.html.twig' only %}
 #
 # Custom stats:
 # {% include '_organisms/landing/social-proof.html.twig' with {
 #     stats: [{ value: '14', label: 'Voix disponibles', sublabel: 'françaises', gradient: '...' }]
 # } only %}
 #
 # ============================================================================
 #}

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

{# Couleurs dynamiques depuis la DB #}
{% set _sereniaSecondary  = tool_color_details['serenia'].secondary  ?? '#7C3AED' %}
{% set _sereniaPrimary    = tool_color_details['serenia'].primary    ?? '#A78BFA' %}
{% set _monalisiaSecondary = tool_color_details['monalisia'].secondary ?? '#ED8600' %}
{% set _monalisiaPrimary   = tool_color_details['monalisia'].primary   ?? '#F59E0B' %}

{% set defaultStats = [
    {
        value: '80+',
        label: 'Formateurs',
        sublabel: 'déjà en bêta',
        gradient: 'linear-gradient(135deg, var(--color-primary-dark), var(--color-primary))'
    },
    {
        value: '20min',
        label: 'Pour 7h de',
        sublabel: 'contenu',
        gradient: 'linear-gradient(135deg, ' ~ _sereniaSecondary ~ ', ' ~ _sereniaPrimary ~ ')'
    },
    {
        value: '100%',
        label: 'RGPD',
        sublabel: 'Conforme',
        gradient: 'linear-gradient(135deg, var(--color-success-dark), var(--color-success))'
    },
    {
        value: '6',
        label: 'Outils',
        sublabel: 'intégrés',
        gradient: 'linear-gradient(135deg, ' ~ _monalisiaSecondary ~ ', ' ~ _monalisiaPrimary ~ ')'
    }
] %}

{% set stats = stats ?? defaultStats %}

<section id="social-proof-stats" class="relative bg-white py-16 pb-14 {{ class }}">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-{{ stats|length }} gap-8 md:gap-0">
            {% for stat in stats %}
                <div class="text-center px-5 relative reveal {{ not loop.first ? 'reveal-delay-' ~ loop.index0 : '' }}">
                    <div class="social-proof-number font-display text-[2rem] md:text-[2.75rem] font-extrabold leading-none mb-2"
                         style="background: {{ stat.gradient }}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                        {{ stat.value }}
                    </div>
                    <div class="font-secondary text-[0.9rem] font-semibold text-[#1A2B3F]">{{ stat.label }}</div>
                    <div class="text-[0.85rem] text-[#8A96A8]">{{ stat.sublabel }}</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<style>
    /* Separator lines between stats — nth-child selectors cannot be done with Tailwind */
    @media (min-width: 768px) {
        .social-proof-number { font-family: 'Sora', 'Poppins', sans-serif; }
        #social-proof-stats .grid > div:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 0; top: 10%; height: 80%;
            width: 1px;
            background: #E4EBF5;
        }
    }
</style>