{{# CTA Banner Section #}}
{{ if style == 'wave' }}
{{# Wave style — wave background on white #}}
<section class="hero-fullscreen relative overflow-hidden" style="background-image: url('{{ if bg_image }}{{ bg_image:url }}{{ else }}/assets/articles/uploads/2021/09/content_wave-bg1-2.png{{ /if }}'); background-position: center top; background-repeat: no-repeat; background-color: #ffffff; background-size: cover;">
    <div class="relative z-10 px-6 lg:px-[90px] pt-44 pb-24">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
            {{ if title }}
            <h2 class="font-nunito text-[22px] font-bold mb-4 text-white leading-snug">{{ title }}</h2>
            {{ /if }}
            {{ if description }}
            <p class="text-white/70 text-base leading-8 mb-8 max-w-2xl mx-auto">{{ description }}</p>
            {{ /if }}
            {{ if button_text }}
            <a href="{{ button_url ?? '/{ current_locale }/registration' }}"
               class="btn-glow inline-block px-8 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ button_text }}
            </a>
            {{ /if }}
        </div>
    </div>
</section>
{{ elseif style == 'simple' }}
{{# Simple style — white background #}}
<section class="py-14 full-bleed bg-white" data-aos="fade-up">
    <div class="max-w-3xl mx-auto text-center">
        {{ if title }}
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-4">{{ title }}</h2>
        {{ /if }}
        {{ if description }}
        <p class="text-[#696687] mb-8">{{ description }}</p>
        {{ /if }}
        {{ if button_text }}
        <a href="{{ button_url ?? '/{ current_locale }/registration' }}"
           class="btn-glow inline-block px-10 py-3.5 font-bold font-nunito rounded-lg bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg text-lg">
            {{ button_text }}
        </a>
        {{ /if }}
    </div>
</section>
{{ else }}
{{# Dark parallax style (default) #}}
<section class="hero-fullscreen relative overflow-hidden" style="background-image: url('{{ if bg_image }}{{ bg_image:url }}{{ else }}/assets/articles/uploads/2021/10/bluedrk.png{{ /if }}'); background-position: center center; background-repeat: no-repeat; background-color: #ffffff;">
    <div class="relative z-10 px-6 lg:px-[90px] py-20">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
            {{ if title }}
            <h2 class="font-nunito text-2xl md:text-3xl font-bold text-white mb-4 uppercase">{{ title }}</h2>
            {{ /if }}
            {{ if subtitle }}
            <p class="text-[#ffc70a] text-lg font-semibold mb-4">{{ subtitle }}</p>
            {{ /if }}
            {{ if description }}
            <p class="text-white/80 mb-8 leading-relaxed max-w-2xl mx-auto">{{ description }}</p>
            {{ /if }}
            {{ if button_text }}
            <a href="{{ button_url ?? '/{ current_locale }/registration' }}"
               class="btn-glow inline-block px-10 py-3.5 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ button_text }}
            </a>
            {{ /if }}
        </div>
    </div>
</section>
{{ /if }}