{#
 # ============================================================================
 # ORGANISM: LANDING PRICING
 # ============================================================================
 #
 # Section tarification avec formules comparatives sous forme de tableau.
 # 100% Tailwind CSS — aucun bloc <style> ni style="" statique.
 # Seules les couleurs dynamiques (toolColor depuis DB) restent en style="".
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/button/button.html.twig
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre            | Type   | Defaut                          | Description                                        |
 # |----------------------|--------|---------------------------------|----------------------------------------------------|
 # | eyebrow              | string | 'NOS FORMULES'                  | Eyebrow text above title                           |
 # | title                | string | 'Commencez simplement,...'      | H2 title (HTML allowed for gradient)               |
 # | cornerEyebrow        | string | 'Comparer les offres'           | Top-left corner eyebrow                            |
 # | cornerTitle          | string | 'Trouvez la formule...'         | Top-left corner title                              |
 # | cornerDescription    | string | (auto from tool names)          | (conservé pour compatibilité, non affiché)         |
 # | recommendedLabel     | string | 'Recommandé'                    | Label on recommended plan badge                    |
 # | tokensSectionLabel   | string | 'Enveloppe mensuelle'           | Section header for tokens                          |
 # | tokensRowLabel       | string | 'Tokens / mois'                 | Label for tokens row                               |
 # | tokensRowDesc        | string | 'budget total disponible'       | Description under tokens row label                 |
 # | equivSectionLabel    | string | 'Ce que vous pouvez créer'      | Section header for equivalences                    |
 # | equivSectionHint     | string | '— choisissez librement,...'    | Hint text after equiv section label                |
 # | mixHintLabel         | string | 'ou un mix de tout ça'          | Hint row label                                     |
 # | enterpriseHintLabel  | string | 'Volume réel selon devis'       | Enterprise column hint text                        |
 # | featuresSectionLabel | string | 'Fonctionnalités incluses'      | Section header for features                        |
 # | class                | string | ''                              | Classes CSS additionnelles sur la section          |
 # | ctaUrl               | string | '#'                             | URL cible des boutons CTA                          |
 # | plans                | array  | []                              | Tableau des formules                               |
 # | featureRows          | array  | []                              | Lignes du tableau de fonctionnalites               |
 # | equivTools           | array  | []                              | Mapping equivalences vers codes outils DB          |
 #
 # plans[]: { id, name, tagline, price, period, tokens, recommended, equivalences[], featureValues[], ctaLabel }
 # plans[].equivalences[]: { label, value }
 # featureRows[]: { label, desc, idx }
 # equivTools[]: { code, fallback, featureIdx? }
 #
 # ============================================================================
 #}

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

{% set class = class ?? '' %}
{% set ctaUrl = ctaUrl ?? '#' %}
{% set plans = plans ?? [] %}
{% set featureRows = featureRows ?? [] %}
{% set equivTools = equivTools ?? [] %}

{% set eyebrow              = eyebrow              ?? 'NOS FORMULES' %}
{% set title                = title                ?? 'Commencez simplement, <span style="background: linear-gradient(to right, var(--color-gradient-start), var(--color-primary), var(--color-gradient-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">évoluez à votre rythme</span>' %}
{% set cornerEyebrow        = cornerEyebrow        ?? 'Comparer les offres' %}
{% set cornerTitle          = cornerTitle          ?? 'Trouvez la formule adaptée à vos besoins.' %}
{% set recommendedLabel     = recommendedLabel     ?? 'Recommandé' %}
{% set tokensSectionLabel   = tokensSectionLabel   ?? 'Enveloppe mensuelle' %}
{% set tokensRowLabel       = tokensRowLabel       ?? 'Tokens / mois' %}
{% set equivSectionLabel    = equivSectionLabel    ?? 'Ce que vous pouvez créer' %}
{% set equivSectionHint     = equivSectionHint     ?? ' — choisissez librement, combinez à votre guise' %}
{% set equivDataIsReal      = equivDataIsReal      ?? false %}
{% set mixHintLabel         = mixHintLabel         ?? 'ou un mix de tout ça' %}
{% set enterpriseHintLabel  = enterpriseHintLabel  ?? 'Volume réel selon devis' %}
{% set featuresSectionLabel = featuresSectionLabel ?? 'Fonctionnalités incluses' %}

{# cornerDescription conservé pour compatibilité #}
{% set defaultCornerDescription %}
    {{- (tool_details['moodia'].name ?? 'MoodIA') -}},
    {{- ' ' ~ (tool_details['slidia'].name ?? 'Slidia') -}},
    {{- ' ' ~ (tool_details['serenia'].name ?? 'SerénIA') -}},
    {{- ' ' ~ (tool_details['monalisia'].name ?? 'Monalisia') -}},
    {{- ' ' ~ (tool_details['castia'].name ?? 'Castia') -}}
    et {{ tool_details['promptly'].name ?? 'Promptly' }} inclus dans chaque offre.
{% endset %}
{% set cornerDescription = cornerDescription ?? defaultCornerDescription %}

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

<section class="section py-28 lg:py-32 {{ class }}" id="tarifs" style="background: #FAFCFF;">
    {# Orbs décoratifs — mêmes paramètres visuels que le hero #}
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
        <div class="absolute -top-24 -left-24 w-[480px] h-[480px] rounded-full opacity-[0.06] blur-3xl"
             style="background: radial-gradient(circle, var(--color-primary) 0%, var(--color-gradient-end) 100%);"></div>
        <div class="absolute -bottom-16 -right-16 w-[360px] h-[360px] rounded-full opacity-[0.05] blur-3xl"
             style="background: radial-gradient(circle, var(--color-gradient-end) 0%, var(--color-primary) 100%);"></div>
    </div>
    <div class="max-w-[1480px] mx-auto px-4 lg:px-6 relative">

        {# ===== Header ===== #}
        <div class="text-center mb-12 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 lg:text-[2.75rem] font-bold text-[#1A2B3F] mb-4">
                {{ title|raw }}
            </h2>
        </div>

        {# ===== Billing toggle ===== #}
        <div class="flex flex-col items-center gap-2 mb-10 reveal">
            <div class="inline-flex items-center bg-white border border-gray-200 shadow-sm rounded-full p-1 gap-1">
                <button id="pt-btn-monthly" onclick="ptSetBilling('monthly')"
                        class="flex items-center gap-2 px-5 py-2 rounded-full text-sm font-semibold transition-all duration-200 text-[#5A6B7F]">
                    Mensuel
                </button>
                <button id="pt-btn-annual" onclick="ptSetBilling('annual')"
                        class="flex items-center gap-2 px-5 py-2 rounded-full text-sm font-semibold transition-all duration-200 bg-primary text-white shadow-sm">
                    Annuel
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#10B981;">−17%</span>
                </button>
            </div>
            <p id="pt-billing-note" class="text-[0.72rem] text-[#9AAABB] hidden">Facturé mensuellement — engagement d'un an</p>
        </div>

        {# ===== Table ===== #}
        <div class="overflow-x-auto pb-4 reveal" style="-webkit-overflow-scrolling: touch;">
        <div class="rounded-[20px] overflow-visible shadow-[0_4px_32px_rgba(26,43,63,0.09)] bg-white min-w-[720px]">
            <table class="w-full border-collapse" style="table-layout: fixed;">

                {# ===== THEAD ===== #}
                <thead>
                    <tr>

                        {# Corner cell #}
                        <th class="w-[200px] min-w-[160px] bg-white border-b border-[#E8EFF7] rounded-tl-[20px] align-bottom p-0">
                            <div class="px-6 pb-8 text-left">
                                <p class="font-secondary font-bold text-[0.6rem] tracking-[2px] uppercase text-primary mb-3">{{ cornerEyebrow }}</p>
                                <p class="font-display text-lg font-bold leading-snug text-[#1A2B3F]">{{ cornerTitle }}</p>
                            </div>
                        </th>

                        {% for plan in plans %}
                            {# h-px : active la résolution height:100% pour les enfants (table height trick) #}
                            {# w-[200px] : largeur fixe pour que le scroll horizontal fonctionne sur mobile #}
                            <th class="relative align-top p-0 h-px w-[220px] min-w-[190px]
                                {{ plan.recommended
                                    ? 'bg-gradient-to-br from-[#0C81E4] to-[#0A6BC4] border-l border-r border-b border-[#BDD9F5] border-t-[3px] border-t-primary z-10 shadow-[4px_0_28px_rgba(12,129,228,0.2),-4px_0_28px_rgba(12,129,228,0.2)]'
                                    : 'bg-white border-l border-b border-[#E8EFF7]'
                                }}
                                {{ loop.last ? 'rounded-tr-[20px]' : '' }}">

                                <div class="h-full flex flex-col">

                                {# Badge recommandé — spacer invisible de même hauteur pour les autres colonnes #}
                                {% if plan.recommended %}
                                    <div class="flex items-center justify-center gap-2 py-2 px-5 bg-white/15 shrink-0">
                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="white"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                        <span class="font-secondary font-bold text-white text-[0.7rem] tracking-widest uppercase">{{ recommendedLabel }}</span>
                                    </div>
                                {% else %}
                                    <div class="h-[33px] shrink-0"></div>
                                {% endif %}

                                <div class="flex-1 flex flex-col px-6 pt-6 pb-7 text-left">

                                    <h3 class="font-display text-2xl font-bold mb-2 {{ plan.recommended ? 'text-white' : 'text-[#1A2B3F]' }}">
                                        {{ plan.name }}
                                    </h3>

                                    <p class="text-sm font-normal leading-relaxed mb-5 h-24 overflow-hidden {{ plan.recommended ? 'text-white/70' : 'text-[#5A6B7F]' }}">
                                        {{ plan.tagline }}
                                    </p>

                                    {# Price #}
                                    <div class="mb-3">
                                        {% if not plan.isCustomPrice %}
                                            <div class="flex items-baseline gap-1.5 mb-1">
                                                <span class="pt-price font-display font-extrabold text-[2.6rem] leading-none {{ plan.recommended ? 'text-white' : 'text-[#1A2B3F]' }}"
                                                      data-monthly="{{ plan.priceMonthly ?? 0 }}"
                                                      data-annual="{{ plan.priceAnnual ?? plan.priceMonthly ?? 0 }}">
                                                    {%- if (plan.priceAnnual ?? plan.priceMonthly ?? 0) == 0 -%}
                                                        Gratuit
                                                    {%- else -%}
                                                        {{ plan.priceAnnual ?? plan.priceMonthly ?? 0 }}€
                                                    {%- endif -%}
                                                </span>
                                            </div>
                                            <div class="text-xs {{ plan.recommended ? 'text-white/55' : 'text-[#8A96A8]' }}">par utilisateur / mois</div>
                                            <div class="mt-1 text-[0.7rem] font-medium {{ plan.recommended ? 'text-white/40' : 'text-[#B0BCC9]' }} pt-billing-label"
                                                 data-annual="{{ plan.commitmentLabel ?? 'Engagement d\'un an' }}">
                                                {{ plan.commitmentLabel ?? 'Engagement d\'un an' }}
                                            </div>
                                        {% else %}
                                            <span class="font-display font-extrabold text-[2.6rem] leading-none block mb-1 text-[#1A2B3F]">Sur mesure</span>
                                            <div class="text-xs text-[#8A96A8]">par utilisateur / mois</div>
                                            <div class="mt-1 text-[0.7rem] font-medium text-[#B0BCC9]">Selon devis</div>
                                        {% endif %}
                                    </div>

                                    <div class="mt-auto pt-3">
                                        {% include '_atoms/button/button.html.twig' with {
                                            label: plan.ctaLabel,
                                            href: plan.ctaUrl ?? ctaUrl,
                                            variant: plan.recommended ? 'white' : 'primary',
                                            size: 'md',
                                            width: 'full'
                                        } only %}
                                    </div>

                                </div>
                                </div>{# /h-full flex flex-col #}
                            </th>
                        {% endfor %}
                    </tr>
                </thead>

                <tbody>

                    {# ===== TOKENS SECTION ===== #}
                    <tr class="bg-[#F4F7FB]">
                        <td colspan="{{ plans|length + 1 }}" class="py-2.5 px-5 border-t border-b border-[#E0E8F2]">
                            <div class="flex items-center gap-2">
                                <span class="flex items-center justify-center w-5 h-5 rounded-md bg-primary/10">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0C81E4" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l3 3"/></svg>
                                </span>
                                <span class="font-secondary text-[0.65rem] font-bold uppercase tracking-[1.8px] text-[#7A8EA8]">{{ tokensSectionLabel }}</span>
                            </div>
                        </td>
                    </tr>
                    <tr class="bg-white even:bg-[#F8FAFD] hover:bg-[#EEF5FD] transition-colors duration-150">
                        <td class="flex flex-col gap-0.5 py-3 px-5 text-[0.85rem] font-medium text-[#2D3A4A] bg-inherit">
                            {{ tokensRowLabel }}
                        </td>
                        {% for plan in plans %}
                            <td class="text-center py-3 px-2.5 border-l border-[#EDF2F8] align-middle {{ plan.recommended ? 'bg-primary-muted border-l border-r border-[#BDD9F5]' : '' }}">
                                <strong class="{{ plan.id == 'enterprise' ? 'text-[0.9rem] font-semibold italic text-[#5A6B7F]' : 'text-[0.9rem] font-bold text-[#1A2B3F]' }} {{ plan.recommended ? '!text-primary' : '' }}">{{ plan.tokens }}</strong>
                            </td>
                        {% endfor %}
                    </tr>

                    {# Accumulation des tokens #}
                    <tr class="bg-white even:bg-[#F8FAFD] hover:bg-[#EEF5FD] transition-colors duration-150 border-b border-[#EDF2F8]">
                        <td class="flex flex-col gap-0.5 py-3 px-5 text-[0.85rem] font-medium text-[#2D3A4A] bg-inherit">
                            Accumulation des tokens
                            <span class="text-[0.72rem] font-normal text-[#9AAABB]">Reportez vos tokens non utilisés d'un mois sur l'autre</span>
                        </td>
                        {% for plan in plans %}
                            <td class="text-center py-3 px-2.5 border-l border-[#EDF2F8] align-middle {{ plan.recommended ? 'bg-primary-muted border-l border-r border-[#BDD9F5]' : '' }}">
                                {% set storageVal = plan.featureValues[6] is defined ? plan.featureValues[6] : false %}
                                {% if storageVal is same as(false) %}
                                    <span class="text-base text-[#C8D3E0]">—</span>
                                {% else %}
                                    <span class="text-sm font-semibold {{ plan.recommended ? 'text-primary' : 'text-[#1A2B3F]' }}">{{ storageVal }}</span>
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>

                    {# ===== EQUIVALENCES SECTION ===== #}
                    <tr class="bg-[#F4F7FB]">
                        <td colspan="{{ plans|length + 1 }}" class="py-2.5 px-5 border-t border-b border-[#E0E8F2]">
                            <div class="flex items-center gap-2">
                                <span class="flex items-center justify-center w-5 h-5 rounded-md bg-primary/10 shrink-0">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0C81E4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                                </span>
                                <span class="font-secondary text-[0.65rem] font-bold uppercase tracking-[1.8px] text-[#7A8EA8]">{{ equivSectionLabel }}</span>
                                <span class="font-primary text-[0.72rem] text-[#9AAABB]">{{ equivSectionHint }}</span>
                                {% if equivDataIsReal %}
                                    <span class="ml-auto inline-flex items-center gap-1 text-[0.68rem] text-[#9AAABB]">
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                        Basé sur les vraies générations de la plateforme
                                    </span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>

                    {% for et in equivTools %}
                        {% set toolIdx   = loop.index0 %}
                        {% set toolName  = tool_details[et.code].name  ?? et.fallback %}
                        {% set toolIcon  = tool_details[et.code].icon  ?? ('bubul-' ~ et.code) %}
                        {% set toolColor = tool_color_details[et.code].primary ?? '#0C81E4' %}
                        <tr class="bg-white hover:bg-[#EEF5FD] transition-colors duration-150 {{ loop.last ? 'border-b-2 border-b-[#E0E8F2]' : 'border-b border-b-[#EDF2F8]' }}">
                            <td class="flex flex-row items-center gap-2.5 py-3 px-5 text-[0.82rem] font-semibold text-[#3A4A5C] bg-inherit">
                                {# toolColor est dynamique (DB) → style="" inévitable #}
                                <span class="w-6 h-6 rounded-lg flex items-center justify-center shrink-0"
                                      style="background: {{ toolColor }}18;">
                                    {% include '_atoms/icon/icon.html.twig' with { name: toolIcon, size: 'xs', colorPrimary: toolColor, colorSecondary: toolColor } only %}
                                </span>
                                {{ toolName }}
                            </td>
                            {% for plan in plans %}
                                <td class="text-center py-2.5 px-2.5 border-l border-[#EDF2F8] align-middle text-[0.82rem] font-semibold text-[#1A2B3F]
                                    {{ plan.recommended ? 'bg-primary-muted border-l border-r border-[#BDD9F5] !text-primary' : '' }}">
                                    {# Outils binaires (featureIdx défini) : on affiche ✓/— même pour les plans custom,
                                       car la feature est soit incluse soit pas — pas une question de volume tokens. #}
                                    {% if et.featureIdx is defined %}
                                        {% if plan.featureValues[et.featureIdx] %}
                                            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-success">
                                                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                            </span>
                                        {% else %}
                                            <span class="text-base text-[#C8D3E0]">—</span>
                                        {% endif %}
                                    {% elseif plan.isCustomPrice %}
                                        <span class="text-[#5A6B7F] italic text-[0.75rem]">{{ enterpriseHintLabel }}</span>
                                    {% else %}
                                        {{ plan.equivalences[toolIdx].value }}
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}

                    {# Note "ou un mix" #}
                    <tr>
                        <td class="py-1.5 px-5 text-[0.75rem] italic text-[#B0BCC9]">{{ mixHintLabel }}</td>
                        {% for plan in plans %}
                            <td class="border-l border-[#EDF2F8] {{ plan.recommended ? 'bg-primary-muted border-r border-[#BDD9F5]' : '' }}"></td>
                        {% endfor %}
                    </tr>


                    {# ===== FEATURES SECTION ===== #}
                    <tr class="bg-[#F4F7FB]">
                        <td colspan="{{ plans|length + 1 }}" class="py-2.5 px-5 border-t border-b border-[#E0E8F2]">
                            <div class="flex items-center gap-2">
                                <span class="flex items-center justify-center w-5 h-5 rounded-md bg-primary/10">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0C81E4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                                </span>
                                <span class="font-secondary text-[0.65rem] font-bold uppercase tracking-[1.8px] text-[#7A8EA8]">{{ featuresSectionLabel }}</span>
                            </div>
                        </td>
                    </tr>
                    {% for row in featureRows %}
                        <tr class="bg-white even:bg-[#F8FAFD] hover:bg-[#EEF5FD] transition-colors duration-150 border-b border-[#EDF2F8]">
                            <td class="flex flex-col gap-0.5 py-3 px-5 text-[0.85rem] font-medium text-[#2D3A4A] bg-inherit">
                                {{ row.label }}
                                {% if row.desc is defined %}
                                    <span class="text-[0.72rem] font-normal text-[#9AAABB]">{{ row.desc }}</span>
                                {% endif %}
                            </td>
                            {% for plan in plans %}
                                <td class="text-center py-3 px-2.5 border-l border-[#EDF2F8] align-middle
                                    {{ plan.recommended ? 'bg-primary-muted border-l border-r border-[#BDD9F5]' : '' }}">
                                    {% set fval = plan.featureValues[row.idx] %}
                                    {% if fval is same as(false) %}
                                        <span class="text-base text-[#C8D3E0]">—</span>
                                    {% elseif fval is same as(true) %}
                                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-success">
                                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                        </span>
                                    {% else %}
                                        <span class="text-sm font-semibold {{ plan.recommended ? 'text-primary' : 'text-[#1A2B3F]' }}">{{ fval }}</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}

                </tbody>
            </table>
        </div>
        </div>{# /overflow-x-auto #}

    </div>
</section>

<script>
function ptSetBilling(type) {
    const isAnnual = type === 'annual';

    // Mise à jour des prix (valeurs réelles annuel / mensuel)
    document.querySelectorAll('.pt-price').forEach(function(el) {
        const price = parseFloat(isAnnual ? el.dataset.annual : el.dataset.monthly);
        el.textContent = price === 0 ? 'Gratuit' : price + '€';
    });

    // Mise à jour du label d'engagement
    document.querySelectorAll('.pt-billing-label').forEach(function(el) {
        el.textContent = isAnnual ? (el.dataset.annual || 'Engagement d\'un an') : 'Sans engagement';
    });

    // Note "facturé mensuellement"
    const note = document.getElementById('pt-billing-note');
    if (note) note.classList.toggle('hidden', !isAnnual);

    // Mise à jour des boutons du toggle
    const btnAnnual  = document.getElementById('pt-btn-annual');
    const btnMonthly = document.getElementById('pt-btn-monthly');
    const activeClasses   = ['bg-primary', 'text-white', 'shadow-sm'];
    const inactiveClasses = ['text-[#5A6B7F]'];

    if (isAnnual) {
        btnAnnual.classList.add(...activeClasses);
        btnAnnual.classList.remove(...inactiveClasses);
        btnMonthly.classList.remove(...activeClasses);
        btnMonthly.classList.add(...inactiveClasses);
    } else {
        btnMonthly.classList.add(...activeClasses);
        btnMonthly.classList.remove(...inactiveClasses);
        btnAnnual.classList.remove(...activeClasses);
        btnAnnual.classList.add(...inactiveClasses);
    }
}

// Initialisation : synchronise l'état visuel avec le mode annuel par défaut
document.addEventListener('DOMContentLoaded', function() { ptSetBilling('annual'); });
</script>