{#
 # ============================================================================
 # ORGANISM: LANDING CTA
 # ============================================================================
 #
 # Full-width gradient CTA section with register button.
 # Fully parameterized: all visible text passed via Twig parameters.
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut                              | Description              |
 # |------------|--------|-------------------------------------|--------------------------|
 # | badge      | string | 'Freemium — 50 000 tokens/mois...'  | Badge text above title   |
 # | titleHtml  | string | 'Tous les outils Bubul,...'          | H2 title (HTML allowed)  |
 # | subtitle   | string | 'Sans carte bancaire...'            | Subtitle paragraph       |
 # | ctaLabel   | string | 'Créer mon compte gratuitement'     | Button label             |
 # | ctaUrl     | string | path('app_login')                | Button URL               |
 # | class      | string | ''                                  | Classes CSS              |
 #
 # ============================================================================
 #}

{% set class    = class    ?? '' %}
{% set badge    = badge    ?? 'Freemium — 50 000 tokens/mois offerts' %}
{% set titleHtml = titleHtml ?? 'Tous les outils Bubul,<br>gratuitement dès aujourd\'hui.' %}
{% set subtitle = subtitle ?? 'Sans carte bancaire. Créez cours, diaporamas, podcasts et infographies pédagogiques dès votre inscription.' %}
{% set ctaLabel = ctaLabel ?? 'Créer mon compte gratuitement' %}
{% set ctaUrl   = ctaUrl   ?? path('app_login') %}

<section class="section {{ class }}" style="background: linear-gradient(to bottom, white 0%, #EEF5FD 15%, #EEF5FD 75%, white 100%); scroll-margin-top: 80px; padding: 48px 0 56px;">
    <div class="max-w-[1000px] mx-auto px-6 lg:px-8">
        <div class="relative rounded-[20px] overflow-hidden reveal">
            <div class="cta-card-bg absolute inset-0 opacity-[0.92]" style="background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-gradient-end) 100%);"></div>

            <div class="relative z-10 text-center px-6 py-14 sm:px-10 sm:py-16 lg:px-24 lg:py-20">

                {# Badge #}
                <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full mb-5" style="background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);">
                    <span class="text-white/90 text-[0.65rem] font-semibold tracking-wider uppercase">{{ badge }}</span>
                </div>

                {# Headline #}
                <h2 class="font-display text-3xl sm:text-4xl lg:text-[2.6rem] font-bold text-white mb-4 leading-tight">
                    {{ titleHtml|raw }}
                </h2>
                <p class="text-white/60 text-base mb-10 max-w-[480px] mx-auto leading-relaxed">
                    {{ subtitle }}
                </p>

                {# CTA Button #}
                <a href="{{ ctaUrl }}"
                   class="inline-flex items-center justify-center px-8 py-4 rounded-xl font-semibold text-base transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)] hover:shadow-[0_12px_32px_rgba(0,0,0,0.25)] hover:-translate-y-1 active:translate-y-0"
                   style="background: white; color: var(--color-primary);">
                    {{ ctaLabel }}
                </a>

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