{#
 # ============================================================================
 # ORGANISM: LANDING TRUST & COMPLIANCE
 # ============================================================================
 #
 # 2-column layout: text + compliance badges left, compliance panel right.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut                          | Description                                  |
 # |------------|--------|---------------------------------|----------------------------------------------|
 # | class      | string | ''                              | Classes CSS additionnelles sur la section     |
 # | eyebrow    | string | 'CONFIANCE & CONFORMITE'        | Petit texte en haut                          |
 # | title      | string | 'Confidentialite et...'         | Titre H2 (HTML autorise pour gradient span)  |
 # | subtitle   | string | 'Bubul est concu...'            | Paragraphe descriptif                        |
 # | badges     | array  | (default 4 badges)              | Badges de conformite (grille 2x2)            |
 # | panelItems | array  | (default 4 items)               | Items du panneau de conformite               |
 # | panelTitle | string | 'conformité — vue d\'ensemble'  | Panel window title bar text                  |
 #
 # badges[]: { iconName, iconColor, iconBg, label }
 # panelItems[]: { iconName, iconColor, iconBg, title, desc, tagClass, tagLabel }
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # {% include '_organisms/landing/trust.html.twig' with {
 #     eyebrow: 'CONFIANCE & CONFORMITE',
 #     title: 'Confidentialite et transparence <span class="...">des le premier jour</span>',
 #     subtitle: 'Bubul est concu avec la confidentialite au coeur...',
 #     badges: [ { iconName: 'shield', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.08)', label: 'Hebergement EU' } ],
 #     panelItems: [ { iconName: 'shield', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.1)', title: '...', desc: '...', tagClass: 'trust-tag--active', tagLabel: 'Actif' } ]
 # } only %}
 #
 # ============================================================================
 #}

{# ============================================================================
   DEFAULT VALUES
   ============================================================================ #}

{% set class = class ?? '' %}
{% set eyebrow = eyebrow ?? 'CONFIANCE & CONFORMITÉ' %}
{% set title = title ?? 'Confidentialité et transparence <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">dès le premier jour</span>' %}
{% set subtitle = subtitle ?? 'Bubul est conçu avec la confidentialité au cœur de son architecture. Nos serveurs d\'hébergement sont basés en Europe, vos données ne sont jamais réutilisées pour entraîner des modèles IA, et chaque requête affiche son impact écologique en temps réel.' %}
{% set defaultBadges = [
    { iconName: 'shield',       iconColor: 'primary', iconBg: 'rgba(12, 129, 228, 0.08)', label: 'Hébergement EU' },
    { iconName: 'check-circle', iconColor: 'cohorts', iconBg: 'rgba(124, 58, 237, 0.08)', label: 'Loi IA européenne' },
    { iconName: 'lock',         iconColor: 'success', iconBg: 'rgba(48, 147, 68, 0.08)',  label: 'Données non réutilisées' },
    { iconName: 'bolt',         iconColor: 'warning', iconBg: 'rgba(245, 158, 11, 0.08)', label: 'Empreinte CO₂ suivie' }
] %}
{% set badges = badges ?? defaultBadges %}

{% set defaultPanelItems = [
    {
        iconName: 'shield', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.1)',
        title: 'Hébergement européen',
        desc: 'Nos serveurs Bubul sont hébergés en Europe. Conformité RGPD complète en cours — les traitements IA via OpenAI relèvent du droit américain.',
        tagClass: 'trust-tag--progress', tagLabel: 'En cours'
    },
    {
        iconName: 'check-circle', iconColor: 'info', iconBg: 'rgba(6,182,212,0.1)',
        title: 'Conforme AI Act',
        desc: 'Transparence algorithmique complète. Traçabilité de chaque génération.',
        tagClass: 'trust-tag--active', tagLabel: 'Actif'
    },
    {
        iconName: 'lock', iconColor: 'primary', iconBg: 'rgba(12,129,228,0.1)',
        title: 'Vos données vous appartiennent',
        desc: 'Vos contenus ne sont jamais utilisés pour entraîner des modèles IA.',
        tagClass: 'trust-tag--guaranteed', tagLabel: 'Garanti'
    },
    {
        iconName: 'bolt', iconColor: 'info', iconBg: 'rgba(6,182,212,0.1)',
        title: 'Empreinte carbone visible',
        desc: 'Chaque requête affiche son impact en Wh et CO2 estimé.',
        tagClass: 'trust-tag--tracked', tagLabel: 'Tracké'
    }
] %}
{% set panelItems = panelItems ?? defaultPanelItems %}
{% set panelTitle = panelTitle ?? 'conformité — vue d\'ensemble' %}

{# Tag style map — replaces .trust-tag + modifier classes (moved from landing.css to Tailwind) #}
{% set tagStyleMap = {
    'trust-tag--active':     'text-[0.65rem] font-bold px-2.5 py-[3px] rounded-full whitespace-nowrap shrink-0 uppercase tracking-[0.5px] bg-[rgba(48,147,68,0.1)] text-success',
    'trust-tag--progress':   'text-[0.65rem] font-bold px-2.5 py-[3px] rounded-full whitespace-nowrap shrink-0 uppercase tracking-[0.5px] bg-[rgba(245,158,11,0.1)] text-[#D97706]',
    'trust-tag--guaranteed': 'text-[0.65rem] font-bold px-2.5 py-[3px] rounded-full whitespace-nowrap shrink-0 uppercase tracking-[0.5px] bg-[rgba(12,129,228,0.1)] text-primary',
    'trust-tag--tracked':    'text-[0.65rem] font-bold px-2.5 py-[3px] rounded-full whitespace-nowrap shrink-0 uppercase tracking-[0.5px] bg-[rgba(245,158,11,0.1)] text-[#D97706]'
} %}

{# ============================================================================
   HTML OUTPUT
   ============================================================================ #}

<section class="section py-28 lg:py-32 bg-white {{ class }}" id="confiance">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-[1fr_1.2fr] gap-10 lg:gap-20 items-center">

            {# ===== Left: Text ===== #}
            <div class="reveal">
                <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-4 uppercase">{{ eyebrow }}</p>
                <h2 class="font-display text-3xl md:text-4xl font-bold mb-6" style="color: #1A2B3F;">
                    {{ title|raw }}
                </h2>
                <p class="text-lg leading-relaxed mb-10" style="color: #5A6B7F;">
                    {{ subtitle }}
                </p>

                {# Compliance badges #}
                {% if badges|length > 0 %}
                    <div class="grid grid-cols-2 gap-4">
                        {% for badge in badges %}
                            <div class="flex items-center gap-2.5 py-3 px-4 rounded-[14px] bg-white border border-[#E4EBF5] transition-all duration-base hover:border-primary-light hover:shadow-[0_4px_12px_rgba(12,129,228,0.06)]">
                                <span class="w-9 h-9 rounded-[10px] flex items-center justify-center shrink-0" style="background: {{ badge.iconBg }};">
                                    {% include '_atoms/icon/icon.html.twig' with { name: badge.iconName, size: 'md', color: badge.iconColor } only %}
                                </span>
                                <span class="text-[0.85rem] font-semibold text-[#1A2B3F]">{{ badge.label }}</span>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            {# ===== Right: Compliance Panel ===== #}
            <div class="reveal reveal-delay-2">
                <div class="bg-white border border-[#E4EBF5] rounded-3xl overflow-hidden shadow-[0_12px_40px_rgba(12,129,228,0.08)]">
                    {# Panel header #}
                    <div class="flex items-center gap-3 py-3 px-4 border-b border-[#E4EBF5]">
                        <div class="flex items-center gap-1.5">
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#FF5F57;"></span>
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#FFBD2E;"></span>
                            <span class="w-[10px] h-[10px] rounded-full inline-block" style="background:#28CA41;"></span>
                        </div>
                        <span style="font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:#8A96A8;">{{ panelTitle }}</span>
                    </div>

                    {# Compliance items #}
                    {% if panelItems|length > 0 %}
                        <div class="p-4 flex flex-col gap-3">
                            {% for item in panelItems %}
                                <div class="flex items-start gap-3 py-3.5 px-4 rounded-[14px] border border-[#E4EBF5] transition-all duration-base hover:border-[rgba(12,129,228,0.2)] hover:bg-[rgba(12,129,228,0.02)]">
                                    <div class="w-9 h-9 rounded-[10px] flex items-center justify-center shrink-0" style="background: {{ item.iconBg }};">
                                        {% include '_atoms/icon/icon.html.twig' with { name: item.iconName, size: 'sm', color: item.iconColor } only %}
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm font-semibold text-[#1A2B3F] mb-0.5">{{ item.title }}</div>
                                        <div class="text-[0.78rem] text-[#5A6B7F] leading-relaxed">{{ item.desc }}</div>
                                    </div>
                                    <span class="{{ tagStyleMap[item.tagClass] ?? '' }}">{{ item.tagLabel }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>