@php
    $featuredSpotlightTabs = [
        'mekanlar' => [
            'label' => 'Düğün Mekanları',
            'icon' => 'bi-buildings',
            'items' => [
                ['title' => 'Gümüştepe Kır Bahçesi’nde Yaz Düğünü', 'image' => 'd1.jpg', 'rating' => '4.9', 'location' => 'Bursa, Nilüfer', 'price' => '1.350 TL', 'price_unit' => 'kişi başı', 'type' => 'Kır Düğün Salonu', 'type_icon' => 'bi-house-door', 'meta_label' => 'Kapasite:', 'meta_value' => '300-750', 'meta_icon' => 'bi-people'],
                ['title' => 'Uludağ Panorama – Dağ Manzaralı Düğün', 'image' => 'd2.jpg', 'rating' => '4.7', 'location' => 'Bursa, Osmangazi', 'price' => '95.000 TL', 'price_unit' => 'paket', 'featured' => true, 'type' => 'Balo Salonu', 'type_icon' => 'bi-bank', 'meta_label' => 'Kapasite:', 'meta_value' => '250-650', 'meta_icon' => 'bi-people'],
                ['title' => 'Setbaşı Köşk’te Açık Hava Daveti', 'image' => 'd3.jpg', 'rating' => '4.7', 'location' => 'Bursa, Yıldırım', 'price' => '1.850 TL', 'price_unit' => 'kişi başı', 'type' => 'Tarihi Mekân', 'type_icon' => 'bi-building', 'meta_label' => 'Kapasite:', 'meta_value' => '150-400', 'meta_icon' => 'bi-people'],
                ['title' => 'Sahil Yalısı – Deniz Kenarı Düğün', 'image' => 'd4.jpg', 'rating' => '5.0', 'location' => 'Bursa, Mudanya', 'price' => '120.000 TL', 'price_unit' => 'paket', 'type' => 'Otel & Balo Salonu', 'type_icon' => 'bi-buildings', 'meta_label' => 'Kapasite:', 'meta_value' => '200-500', 'meta_icon' => 'bi-people'],
            ],
        ],
        'kuafor' => [
            'label' => 'Kuaför & Güzellik',
            'icon' => 'bi-scissors',
            'items' => [
                ['title' => 'Liva Bridal Hair Studio', 'image' => 'gunes-ark_qcdwg7yR.jpg', 'rating' => '4.9', 'location' => 'Bursa, Nilüfer', 'price' => '3.500 TL', 'price_unit' => 'paket', 'featured' => true, 'type' => 'Kuaför', 'type_icon' => 'bi-scissors', 'meta_label' => 'İşlem:', 'meta_value' => 'Gelin Saçı', 'meta_icon' => 'bi-magic'],
                ['title' => 'Miray Beauty Center', 'image' => 'miyaser-turban-tasarim_NZrnMwEQ.jpg', 'rating' => '4.8', 'location' => 'Bursa, Osmangazi', 'price' => '5.000 TL', 'price_unit' => 'paket', 'type' => 'Güzellik Merkezi', 'type_icon' => 'bi-stars', 'meta_label' => 'İşlem:', 'meta_value' => 'Saç & Makyaj', 'meta_icon' => 'bi-brush'],
                ['title' => 'Rose Kuaför & Güzellik Merkezi', 'image' => 'isu-london-hair-design_eNG7U1c5.jpg', 'rating' => '4.7', 'location' => 'Bursa, Mudanya', 'price' => '7.500 TL', 'price_unit' => 'paket', 'featured' => true, 'type' => 'Kuaför & Güzellik', 'type_icon' => 'bi-flower1', 'meta_label' => 'İşlem:', 'meta_value' => 'Komple Paket', 'meta_icon' => 'bi-gem'],
                ['title' => 'Elegance Make Up Studio', 'image' => 'emre-hergul-kuafor_xere9vMz.jpg', 'rating' => '4.6', 'location' => 'Bursa, Yıldırım', 'price' => '2.750 TL', 'price_unit' => 'paket', 'type' => 'Güzellik Merkezi', 'type_icon' => 'bi-palette', 'meta_label' => 'İşlem:', 'meta_value' => 'Makyaj', 'meta_icon' => 'bi-brush'],
            ],
        ],
        'hizmetler' => [
            'label' => 'Hizmetler',
            'icon' => 'bi-stars',
            'items' => [
                ['title' => 'Nisa Flowers Event', 'image' => 'nisa-flowers_UfQ80yB8.jpeg', 'rating' => '4.9', 'location' => 'Bursa, Yıldırım', 'price' => '8.000 TL', 'price_unit' => 'paket', 'featured' => true, 'type' => 'Organizasyon', 'type_icon' => 'bi-balloon-heart', 'meta_label' => 'Hizmet:', 'meta_value' => 'Kına Organizasyonu', 'meta_icon' => 'bi-stars'],
                ['title' => 'Serhan Serter Wedding Dreams', 'image' => 'serter-fotograf_LD2Lbemt.jpg', 'rating' => '4.8', 'location' => 'Bursa, Nilüfer', 'price' => '12.000 TL', 'price_unit' => 'paket', 'type' => 'Fotoğraf Çekimi', 'type_icon' => 'bi-camera', 'meta_label' => 'Hizmet:', 'meta_value' => 'Çekim & Albüm', 'meta_icon' => 'bi-camera2'],
                ['title' => 'Liva Gelin Arabaları', 'image' => 'liva-gelin-arabalari_cOc9u8V6.jpg', 'rating' => '4.7', 'location' => 'Bursa, Osmangazi', 'price' => '8.000 TL', 'price_unit' => 'paket', 'featured' => true, 'type' => 'Araç Kiralama', 'type_icon' => 'bi-car-front-fill', 'meta_label' => 'Araç:', 'meta_value' => 'Lüks & VIP', 'meta_icon' => 'bi-car-front'],
                ['title' => 'Burcu Ataş Orchestra', 'image' => 'elmas-wedding_ga1RXE2j.jfif', 'rating' => '4.6', 'location' => 'Bursa, Mudanya', 'price' => '15.000 TL', 'price_unit' => 'paket', 'type' => 'Müzisyen', 'type_icon' => 'bi-music-note-list', 'meta_label' => 'Hizmet:', 'meta_value' => 'Orkestra', 'meta_icon' => 'bi-music-note-beamed'],
            ],
        ],
    ];
@endphp

<section class="dm-featured-wrap">
    <div class="dm-featured-head">
        <div class="dm-featured-title">
            <div class="dm-featured-title-icon">
                <i class="bi bi-grid-3x3-gap-fill"></i>
            </div>

            <h2>
                <strong>ÖNE ÇIKAN</strong>
                <span>MEKANLAR</span>
            </h2>
        </div>

        <div class="dm-featured-actions">
            <div class="dm-featured-tabs" id="featuredSpotlightTabs">
                @foreach($featuredSpotlightTabs as $tabId => $tab)
                    <button class="dm-tab-btn{{ $loop->first ? ' active' : '' }}" type="button" data-tab="{{ $tabId }}">
                        <i class="bi {{ $tab['icon'] }}"></i>
                        {{ $tab['label'] }}
                    </button>
                @endforeach
            </div>

            <div class="dm-slider-nav">
                <button class="dm-nav-btn" type="button" id="featuredSpotlightPrev" aria-label="Önceki">
                    <i class="bi bi-chevron-left"></i>
                </button>

                <button class="dm-nav-btn" type="button" id="featuredSpotlightNext" aria-label="Sonraki">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    @foreach($featuredSpotlightTabs as $tabId => $tab)
        <div class="dm-tab-pane{{ $loop->first ? ' active' : '' }}" id="{{ $tabId }}">
            <div class="dm-slider-shell">
                <div class="dm-slider-track">
                    @foreach($tab['items'] as $item)
                        <a href="#" class="dm-feature-card">
                            <img src="{{ asset('storage/assets/images/' . $item['image']) }}" alt="{{ $item['title'] }}">

                            <div class="dm-card-top">
                                <div class="dm-card-badges">
                                    <span class="dm-rating-badge">{{ $item['rating'] }}</span>

                                    @if(!empty($item['featured']))
                                        <span class="dm-card-featured">
                                            <i class="bi bi-lightning-charge-fill"></i>
                                            Öne Çıkan
                                        </span>
                                    @endif
                                </div>

                                <span class="dm-location-badge">
                                    <i class="bi bi-geo-alt"></i>
                                    {{ $item['location'] }}
                                </span>
                            </div>

                            <div class="dm-card-bottom">
                                <h3 class="dm-card-title">{{ $item['title'] }}</h3>

                                <div class="dm-card-price">
                                    {{ $item['price'] }}
                                    <small>{{ $item['price_unit'] }}</small>
                                </div>

                                <div class="dm-card-meta">
                                    <div class="dm-meta-item type">
                                        <i class="bi {{ $item['type_icon'] }}"></i>
                                        {{ $item['type'] }}
                                    </div>

                                    <div class="dm-meta-item capacity">
                                        <i class="bi {{ $item['meta_icon'] }}"></i>
                                        <strong>{{ $item['meta_label'] }}</strong>
                                        {{ $item['meta_value'] }}
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    @endforeach
</section>