{{# Logo Strip Section #}}
{{ if display_mode == 'carousel' }}
{{# Carousel mode with Alpine.js #}}
<section class="py-16 full-bleed bg-[#f7f8fa]">
    <div class="max-w-6xl mx-auto text-center">
        {{ if title }}
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-10 title-underline-center" data-aos="fade-up">
            {{ title }}
        </h2>
        {{ /if }}
        {{ if logos }}
        <div x-data="{
            offset: 0,
            visible: window.innerWidth >= 768 ? 6 : 3,
            total: {{ logos | count }},
            interval: null,
            init() {
                window.addEventListener('resize', () => {
                    this.visible = window.innerWidth >= 768 ? 6 : 3;
                    if (this.offset > this.total - this.visible) this.offset = Math.max(0, this.total - this.visible);
                });
                this.startAutoplay();
                this.$el.addEventListener('mouseenter', () => this.stopAutoplay());
                this.$el.addEventListener('mouseleave', () => this.startAutoplay());
            },
            startAutoplay() { this.interval = setInterval(() => this.next(), 3000); },
            stopAutoplay() { clearInterval(this.interval); },
            next() { this.offset = this.offset < this.total - this.visible ? this.offset + 1 : 0; },
            prev() { this.offset = this.offset > 0 ? this.offset - 1 : this.total - this.visible; }
        }" class="relative overflow-hidden" data-aos="fade-up" data-aos-delay="100">
            <button @click="prev()" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-[#3b3663] hover:bg-[#f7f8fa] transition-colors">
                <i class="fa-solid fa-chevron-left"></i>
            </button>
            <div class="overflow-hidden mx-12">
                <div class="flex transition-transform duration-500 ease-in-out" :style="'transform: translateX(-' + (offset * (100 / visible)) + '%)'">
                    {{ logos }}
                    <div class="shrink-0 px-4 flex items-center justify-center" :style="'width: ' + (100 / visible) + '%'">
                        <img src="{{ url }}" alt="Partner logo" class="h-16 md:h-20 object-contain">
                    </div>
                    {{ /logos }}
                </div>
            </div>
            <button @click="next()" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-[#3b3663] hover:bg-[#f7f8fa] transition-colors">
                <i class="fa-solid fa-chevron-right"></i>
            </button>
        </div>
        {{ /if }}
    </div>
</section>
{{ else }}
{{# Static mode #}}
<section class="py-8 hero-fullscreen bg-white" data-aos="fade-up">
    <div class="max-w-[1400px] mx-auto px-6 lg:px-[90px]">
        {{ if title }}
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-8 text-center title-underline-center">{{ title }}</h2>
        {{ /if }}
        {{ if logos }}
        <div class="flex items-center justify-between w-full flex-wrap gap-6">
            {{ logos }}
            <img src="{{ url }}" alt="Partner logo" class="w-32 md:w-40 object-contain">
            {{ /logos }}
        </div>
        {{ /if }}
    </div>
</section>
{{ /if }}