@if(!empty($data['items']))
<section class="brand-section section-padding fix pt-0" aria-label="Parceiros Institucionais">
    <div class="container">
        @if(!empty($data['title']))
        <div class="section-title row justify-content-center text-center">
            <div class="col-7">
                <h2 class="wow fadeInUp" data-wow-delay=".1s">{{ $data['title'] }}</h2>
            </div>
        </div>
        @endif
        <div class="swiper associados-slider">
            <div class="swiper-wrapper">
                @foreach($data['items'] as $assoc)
                <div class="swiper-slide">
                    <a href="#parceiroHomeModal"
                       class="text-decoration-none parceiro-home-trigger"
                       data-bs-toggle="modal"
                       data-bs-target="#parceiroHomeModal"
                       data-url="{{ $assoc['url'] ?? '#' }}"
                       aria-label="Ver detalhes de {{ $assoc['name'] ?? '' }}">
                        <div class="brand-img">
                            @include('v2-service-media::components.picture', [
                                'originalPath' => $assoc['image'] ?? '',
                                'alt'          => $assoc['name'] ?? '',
                                'class'        => 'associado-logo',
                                'lazy'         => true,
                            ])
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- Modal de detalhes do parceiro --}}
<div class="modal fade" id="parceiroHomeModal" tabindex="-1" role="dialog" aria-modal="true"
     aria-labelledby="parceiroHomeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <span id="parceiroHomeModalLabel" class="visually-hidden">Detalhes do parceiro</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body pt-0" id="parceiroHomeModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.associados-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
}
.associados-slider .brand-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width: 100%;
}
.associados-slider .brand-img img,
.associados-slider .brand-img picture {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
}
</style>

<script>
(function() {
    function loadSwiperAndInit() {
        if (typeof Swiper !== 'undefined') {
            initAssociadosSlider();
            return;
        }
        var tries = 0;
        var maxTries = 20;
        var interval = setInterval(function() {
            tries++;
            if (typeof Swiper !== 'undefined') {
                clearInterval(interval);
                initAssociadosSlider();
            } else if (tries >= maxTries) {
                clearInterval(interval);
            }
        }, 200);
    }

    function initAssociadosSlider() {
        var slider = document.querySelector('.associados-slider');
        if (!slider) return;
        if (slider.swiper) slider.swiper.destroy(true, true);
        try {
            new Swiper(slider, {
                slidesPerView: 5,
                spaceBetween: 30,
                speed: 600,
                loop: true,
                centeredSlides: true,
                watchSlidesProgress: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: true,
                },
                breakpoints: {
                    0: { slidesPerView: 2, spaceBetween: 15, loop: true },
                    576: { slidesPerView: 3, spaceBetween: 20, loop: true },
                    992: { slidesPerView: 4, spaceBetween: 25, loop: true },
                    1200: { slidesPerView: 5, spaceBetween: 30, loop: true },
                },
            });
        } catch(e) {
            console.warn('[AssociadosSlider] init failed:', e.message);
        }
    }

    var modalEl = document.getElementById('parceiroHomeModal');
    var modalBody = document.getElementById('parceiroHomeModalBody');
    if (modalEl && modalBody) {
        modalEl.addEventListener('show.bs.modal', function(event) {
            var trigger = event.relatedTarget;
            if (!trigger) return;
            var url = trigger.getAttribute('data-url');
            if (!url || url === '#') return;

            modalBody.innerHTML =
                '<div class="text-center py-4">' +
                '<div class="spinner-border text-primary" role="status">' +
                '<span class="visually-hidden">Carregando...</span>' +
                '</div></div>';

            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    modalBody.innerHTML = xhr.responseText;
                    var firstFocusable = modalBody.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])');
                    if (firstFocusable) {
                        setTimeout(function() { firstFocusable.focus(); }, 200);
                    }
                } else {
                    modalBody.innerHTML =
                        '<div class="text-center py-4 text-danger">' +
                        '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                        '<p>Erro ao carregar detalhes do parceiro.</p></div>';
                }
            };
            xhr.onerror = function() {
                modalBody.innerHTML =
                    '<div class="text-center py-4 text-danger">' +
                    '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                    '<p>Erro ao carregar detalhes do parceiro.</p></div>';
            };
            xhr.send();
        });
    }

    if (document.readyState === 'complete') {
        setTimeout(loadSwiperAndInit, 100);
    } else {
        window.addEventListener('load', function() {
            setTimeout(loadSwiperAndInit, 100);
        });
    }
})();
</script>
@endif