{#
 # ============================================================================
 # MOLECULE: UPGRADE BANNER
 # ============================================================================
 #
 # Bannière d'upsell affichée sous la carte du plan actuel. Propose
 # automatiquement le plan supérieur :
 #
 #   freemium → Pro
 #   starter  → Pro
 #   pro      → Expert
 #   expert   → (rien — bannière non rendue)
 #
 # Reste silencieuse si le plan actuel est le plan maximum ou inconnu.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre        | Type   | Défaut    | Description                       |
 # |------------------|--------|-----------|-----------------------------------|
 # | currentPlanSlug  | string | (requis)  | Slug du plan actuel               |
 # | upgradeUrl       | string | (requis)  | URL de la page upgrade            |
 #
 # ============================================================================
 #}

{%- set currentPlanSlug = currentPlanSlug ?? null -%}
{%- set upgradeUrl = upgradeUrl ?? '#' -%}

{%- set nextPlan = {
    'freemium': { 'slug': 'pro',    'name': 'Pro' },
    'starter':  { 'slug': 'pro',    'name': 'Pro' },
    'pro':      { 'slug': 'expert', 'name': 'Expert' }
}[currentPlanSlug] ?? null -%}

{% if nextPlan %}
    <div class="flex items-center justify-between gap-4 px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl border border-blue-100">
        <div>
            <p class="text-sm font-semibold text-gray-800">Passez à {{ nextPlan.name }}</p>
            <p class="text-xs text-gray-400 mt-0.5">Plus de tokens et toutes les fonctionnalités avancées</p>
        </div>
        <a href="{{ upgradeUrl }}"
           style="background: linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%);"
           class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white hover:brightness-110 transition-all whitespace-nowrap flex-shrink-0 shadow-sm">
            {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'sm', color: 'white' } only %}
            Passer en {{ nextPlan.name }}
        </a>
    </div>
{% endif %}