{{#
    @name Page Builder: CTA Banner / Vouchers
    @desc High-converting call-to-action strip or SumUp gift cards highlight
#}}

{{ if variant == 'voucher' }}
    {{# SumUp Gift Card Highlight Card #}}
    <section class="py-16 sm:py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{ partial:components/voucher_card }}
    </section>

{{ else }}
    {{# Appointment / Action Strip #}}
    <section class="py-16 sm:py-20 text-center {{ theme == 'dark' ? 'bg-neutral-900 text-white' : (theme == 'accent' ? 'bg-accent-dark text-white' : (theme == 'warm' ? 'bg-surface-warm/80 text-neutral-900 border-y border-neutral-200/80' : 'bg-white text-neutral-900 border-y border-neutral-200/60')) }}">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            {{ if kicker }}
                <div class="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase mb-3 {{ theme == 'dark' or theme == 'accent' ? 'text-accent-light' : 'text-accent-dark' }}">
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                    {{ kicker }}
                </div>
            {{ /if }}

            <h2 class="font-serif text-3xl sm:text-4xl font-bold mb-4">
                {{ title }}
            </h2>

            {{ if text }}
                <p class="text-base sm:text-lg mb-8 max-w-2xl mx-auto {{ theme == 'dark' or theme == 'accent' ? 'text-neutral-300' : 'text-neutral-600' }}">
                    {{ text }}
                </p>
            {{ /if }}

            <div class="flex flex-wrap items-center justify-center gap-4">
                {{ if show_phone_button }}
                    <a 
                        href="tel:{{ company:telephone_clean }}" 
                        class="inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-accent hover:bg-accent-hover text-white text-sm font-semibold transition-all shadow-sm"
                    >
                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 4V3z"/>
                        </svg>
                        <span>Call {{ company:telephone }}</span>
                    </a>
                {{ /if }}

                {{ if buttons }}
                    {{ buttons }}
                        <a 
                            href="{{ url }}" 
                            class="inline-flex items-center px-6 py-3.5 rounded-full {{ theme == 'dark' ? 'bg-white hover:bg-neutral-100 text-neutral-900' : 'bg-primary hover:bg-primary-hover text-white' }} text-sm font-semibold transition-all"
                        >
                            {{ label }}
                        </a>
                    {{ /buttons }}
                {{ /if }}
            </div>
        </div>
    </section>
{{ /if }}