{{#
    @name Voucher Card
    @desc Prominent SumUp gift cards highlight component
#}}

<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-neutral-900 to-neutral-800 text-white p-6 sm:p-8 border border-neutral-700/60 shadow-lg">
    <div class="absolute -right-8 -top-8 w-40 h-40 bg-accent/20 rounded-full blur-2xl pointer-events-none"></div>
    
    <div class="relative z-10 flex flex-col sm:flex-row items-center gap-6">
        <div class="shrink-0 w-28 sm:w-36">
            <img src="/assets/images/voucher.jpg" alt="The Foundation Beauty Studio Gift Voucher" class="w-full h-auto rounded-lg shadow-md border border-white/10" />
        </div>

        <div class="flex-1 text-center sm:text-left">
            <div class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-accent/20 text-accent text-xs font-semibold tracking-wide uppercase mb-2">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                </svg>
                The Perfect Gift
            </div>

            <h3 class="font-serif text-2xl font-bold text-white mb-2">
                SumUp Gift Vouchers
            </h3>
            
            <p class="text-neutral-300 text-sm leading-relaxed mb-4">
                Treatments at The Foundation Beauty Studio make a fabulous gift. We provide monetary vouchers instantly online via SumUp, or call Victoria for bespoke treatment vouchers.
            </p>

            <div class="flex flex-wrap items-center justify-center sm:justify-start gap-3">
                <a 
                    href="{{ company:voucher_url }}" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-accent text-white hover:bg-accent-hover font-semibold text-sm transition-all shadow-sm hover:scale-[1.02]"
                >
                    <span>Buy SumUp Gift Card Online</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                </a>
                <span class="text-xs text-neutral-400">Instant digital delivery</span>
            </div>
        </div>
    </div>
</div>