@props(['banners'])
@if (!empty($banners))
    <div class="swiper hero-slider swiper-fade">
        <div class="swiper-wrapper">
            @foreach ($banners as $banner)
                @if ($banner['type'] == 'image')
                    <div class="swiper-slide swiper-slide-ctrl">
                        @if (!empty($banner['src']))
                            <a href="{{ $banner['url'] ?? '' }}">
                                <img src="{{ asset($banner['src']) }}" alt="">
                            </a>
                        @endif
                       
                        <div class="swiper-slide-cta">
                            <div class="container cta-bar">
                                <!-- <div class="h2 text-white">Banner Title</div> -->
                                <div class="bottom-bar">
                                    <a href="{{ $banner['url'] ?? '' }}" class="btn btn-left">@lang('frontend::frontend.index.index_consultation')</a>
                                    <a href="{{ $url['use_case'] ?? '' }}" class="btn btn-right">@lang('frontend::frontend.index.see_case_studies')</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @elseif ($banner['type'] == 'youtube')
                    <div class="swiper-slide swiper-slide-ctrl swiper-slide-video" data-youtube-id="{{ $banner['src'] ?? '' }}">
                        {{-- YT.Player จะสร้าง iframe เอง (ใช้ origin จาก browser) --}}
                        <div id="youtube-player-container-{{ $loop->index }}"
                             class="youtube-player-container"
                             data-youtube-id="{{ $banner['src'] ?? '' }}"></div>
                    </div>
                @endif
            @endforeach
        </div>
            
        <!-- Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
@endif