@php($trainers = $trainers ?? [])

<section data-coach-spotlight class="relative z-10 bg-[#131313] px-6 py-10 md:px-12">
    <div class="mx-auto max-w-7xl">
        <div class="rounded-3xl md:rounded-full bg-black px-6 py-5 md:px-10 md:py-7">
            <div class="flex items-center gap-6 md:gap-8">
                <div class="min-w-0 flex-1">
                    <div class="swiper" data-coach-spotlight-swiper>
                        <div class="swiper-wrapper">
                            @foreach ($trainers as $trainer)
                                <div class="swiper-slide">
                                    <div class="flex flex-col gap-4 md:flex-row md:items-center md:gap-8">
                                        <div class="flex min-w-0 items-center gap-3 lg:gap-8">
                                            <div class="shrink-0">
                                                <img
                                                    src="{{ $trainer['img'] ?? '' }}"
                                                    alt="{{ $trainer['name'] ?? '教練' }}"
                                                    class="h-16 w-16 rounded-full object-cover md:h-24 md:w-24"
                                                    loading="lazy"
                                                >
                                            </div>

                                            <div class="min-w-0">
                                                <div class="truncate  text-white">
                                                    <span class="text-xl font-semibold tracking-wide">{{ $trainer['name'] ?? '' }}</span>
                                                    <span class="text-base font-semibold tracking-wide">{{ $trainer['nameEn'] ?? '' }}</span>
                                                </div>
                                                <div class="mt-1 ">
                                                    <span class="text-sm text-white/60">{{ $trainer['club'] ?? '' }} {{ $trainer['job_title'] ?? '' }}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="hidden md:block h-16 w-px bg-white/10"></div>

                                        @if (!empty($trainer['lines']))
                                            <div class="hidden md:block min-w-0 text-sm leading-6 text-white/60">
                                                @foreach ($trainer['lines'] as $line)
                                                    <div class="truncate">{{ $line }}</div>
                                                @endforeach
                                            </div>

                                            <div class="md:hidden text-sm leading-6 text-white/60">
                                                {{ implode('、', $trainer['lines']) }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="shrink-0">
                    <div class="flex flex-col lg:inline-flex lg:flex-row items-center gap-6 lg:gap-3">
                        <button
                            type="button"
                            class="inline-flex h-8 w-8 lg:h-16 lg:w-16 items-center justify-center rounded-full bg-[#3a3a3a] text-white transition hover:bg-red-600 cursor-pointer hover:-translate-x-1"
                            aria-label="Previous coach"
                            data-coach-spotlight-prev
                        >
                            <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 rotate-180" aria-hidden="true">
                                <path d="M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>

                        <button
                            type="button"
                            class="inline-flex h-8 w-8 lg:h-16 lg:w-16 items-center justify-center rounded-full bg-[#3a3a3a] text-white transition hover:bg-red-600 cursor-pointer hover:translate-x-1"
                            aria-label="Next coach"
                            data-coach-spotlight-next
                        >
                            <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6" aria-hidden="true">
                                <path d="M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
