{{--
    Shared testimonial modal (white card: image + full text + name/role).
    Render once per page. Any element with class .testimonial-zoom and data-src / data-name / data-role
    inside a [data-testimonial] container opens it; the full text is read from that container's .testimonial-text.
--}}
@once
    <div id="testimonialModal" class="hidden fixed inset-0 z-modal bg-black/60 flex items-center justify-center p-4"
        role="dialog" aria-modal="true" aria-labelledby="testimonialModalName">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
            <button type="button" id="testimonialModalClose" aria-label="Close"
                class="absolute top-3 right-3 z-10 w-10 h-10 rounded-full bg-gray-100 text-gray-900 text-2xl leading-none flex items-center justify-center hover:bg-gray-200">
                &times;
            </button>

            <div class="grid grid-cols-1 md:grid-cols-5">
                <div class="md:col-span-2 bg-gray-100 md:rounded-l-2xl rounded-t-2xl md:rounded-tr-none overflow-hidden">
                    <img id="testimonialModalImg" src="" alt="" class="w-full h-56 md:h-full object-cover">
                </div>
                <div class="md:col-span-3 p-6 md:p-8 flex flex-col gap-4">
                    <i class="fa-solid fa-quote-left text-2xl text-secondary" aria-hidden="true"></i>
                    <div id="testimonialModalText" class="text-gray-800 text-base leading-relaxed"></div>
                    <div>
                        <p id="testimonialModalName" class="font-bold text-primary text-lg"></p>
                        <p id="testimonialModalRole" class="text-gray-600 text-sm"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            (function() {
                const modal = document.getElementById("testimonialModal");
                const img = document.getElementById("testimonialModalImg");
                const textEl = document.getElementById("testimonialModalText");
                const nameEl = document.getElementById("testimonialModalName");
                const roleEl = document.getElementById("testimonialModalRole");
                const closeBtn = document.getElementById("testimonialModalClose");
                let opener = null;

                function open(btn) {
                    opener = btn;
                    img.src = btn.dataset.src;
                    img.alt = btn.dataset.name || "";
                    nameEl.textContent = btn.dataset.name || "";
                    roleEl.textContent = (btn.dataset.role || "").trim();
                    const card = btn.closest("[data-testimonial]");
                    const text = card ? card.querySelector(".testimonial-text") : null;
                    textEl.innerHTML = text ? text.innerHTML : "";
                    modal.classList.remove("hidden");
                    document.body.classList.add("overflow-hidden");
                    closeBtn.focus();
                }

                function close() {
                    modal.classList.add("hidden");
                    document.body.classList.remove("overflow-hidden");
                    img.src = "";
                    if (opener) opener.focus();
                }

                // Delegated: works for every slider/list on the page, including cloned loop slides
                document.addEventListener("click", (e) => {
                    const btn = e.target.closest(".testimonial-zoom");
                    if (btn) open(btn);
                });
                closeBtn.addEventListener("click", close);
                modal.addEventListener("click", (e) => {
                    if (e.target === modal) close();
                });
                document.addEventListener("keydown", (e) => {
                    if (e.key === "Escape" && !modal.classList.contains("hidden")) close();
                });
            })();
        </script>
    @endpush
@endonce