@push('styles')
 <style>
     .swiper {
         width: 100%;
         height: 100%;
         padding: 20px 0;
     }

     .swiper-slide {
         text-align: center;
         background: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 </style>
 @endpush

 <div class="min-h-screen bg-luxury-cream py-12">
     <h1 class="text-2xl text-center font-bold text-luxury-action-secondary mx-auto mb-4">
         @switch(session('locale', config('app.locale')))
         @case('en')
         {{ $websiteContent->menu_title_en }}
         @break
         @case('fa')
         {{ $websiteContent->menu_title_fa }}
         @break
         @case('ar')
         {{ $websiteContent->menu_title_ar }}
         @break
         @endswitch
     </h1>
     <p class="text-lg text-center text-luxury-action-secondary mx-auto mb-6"> @switch(session('locale', config('app.locale')))
         @case('en')
         {{ $websiteContent->menu_sub_title_en }}
         @break
         @case('fa')
         {{ $websiteContent->menu_sub_title_fa }}
         @break
         @case('ar')
         {{ $websiteContent->menu_sub_title_ar }}
         @break
         @endswitch
     </p>
     <div class="container mx-auto px-6">
         <div class="mySwiper swiper swiper-container w-full mb-6" wire:ignore x-data="{ selectedCategory: @entangle('selectedCategory').live, selectedCategoryIndex: 0}">
             <div class="swiper-wrapper">
                 @foreach($categories as $index => $category)
                 <div class="swiper-slide h-auto">
                    <button
                    :class="{
                        '!bg-luxury-action-secondary !text-luxury-action': selectedCategoryIndex === {{ $index }},
                        '!bg-luxury-action !text-luxury-action-secondary hover:!bg-luxury-action-secondary hover:!text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold': selectedCategoryIndex !== {{ $index }}
                    }"
                    wire:click="selectCategory({{ $category->id }})"
                    @click="selectedCategoryIndex = {{ $index }}"
                    class="px-3 py-3 rounded hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold">
                    {{ $category->translations->first()->name }}
                </button>
                 </div>
                 @endforeach
             </div>
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" wire:key="{{$selectedCategory}}">
             @foreach($dishes as $dish)
             <div class="bg-white rounded-2xl overflow-hidden hover:shadow-lg transition-shadow duration-300">
                 <div class="relative h-64">
                     <img
                         src="{{ asset(Storage::url($dish['media'][0]['path'])) }}"
                         alt="{{ $dish['translations'][0]['name'] }}"
                         class="w-full h-full object-cover">
                     <div class="text-white px-3 py-1 relative w-full flex justify-content-end">
                         <span class="font-inter text-luxury-gold font-semibold text-sm pt-1">${{ $dish['price'] }}</span>
                     </div>
                 </div>
                 <div class="p-4 h-32 mb-2">
                     <h3 class="font-playfair text-lg font-semibold text-luxury-action-secondary mb-2">
                         {{ $dish['translations'][0]['name'] }}
                     </h3>
                     <p>{{ $dish['translations'][0]['description'] }}</p>
                 </div>
             </div>
             @endforeach
         </div>
     </div>
 </div>
 <!-- Mobile Category Selector -->

 @push('js')
 <!-- Swiper JS -->
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {


         const swiper = new Swiper('.mySwiper', {
             // Optional parameters
             slidesPerView: 1.2,
             spaceBetween: 15,
             centeredSlides: false,
             initialSlide: 0,
             // Responsive breakpoints
             breakpoints: {
                 // when window width is >= 320px
                 320: {
                     slidesPerView: 3,
                     spaceBetween: 10,
                     centeredSlides: false,
                     initialSlide: 0
                 },
                 // when window width is >= 768px
                 768: {
                     slidesPerView: 5,
                     spaceBetween: 15,
                     centeredSlides: false
                 }
             },
             // If we need pagination
             pagination: {
                 el: '.swiper-pagination',
                 clickable: true,
             },
             // Navigation arrows
             navigation: {
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
             },
             // Enable touch/swipe
             touchRatio: 1,
             // Allow interaction with buttons while dragging
             preventClicks: false,
             preventClicksPropagation: false,
             // Make buttons draggable
             allowTouchMove: true,
             // Improve touch handling for buttons
             touchMoveStopPropagation: false,
             // Enable draggable cursor
             grabCursor: true,
             // Add scrollbar to indicate more content
             scrollbar: {
                 el: '.swiper-scrollbar',
                 draggable: true,
                 hide: false,
             },
         });

     });
 </script>
 @endpush