{{-- Booking Overlay (Mobile: Bottom Sheet / Desktop: Centered Modal) --}}

{{-- Backdrop --}}
<div
    x-show="bookingOpen"
    x-cloak
    @click="bookingOpen = false"
    @open-booking.window="bookingOpen = true"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
></div>

{{-- Booking Panel --}}
<div
    x-show="bookingOpen"
    x-cloak
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="translate-y-full md:translate-y-0 md:opacity-0 md:scale-95"
    x-transition:enter-end="translate-y-0 md:opacity-100 md:scale-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="translate-y-0 md:opacity-100 md:scale-100"
    x-transition:leave-end="translate-y-full md:translate-y-0 md:opacity-0 md:scale-95"
    class="fixed z-50 bg-white shadow-2xl overflow-y-auto
           inset-x-0 bottom-0 rounded-t-3xl max-h-[90vh]
           md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl md:w-full md:max-w-md md:max-h-[85vh]"
>
    {{-- Handle (mobile only) --}}
    <div class="sticky top-0 bg-white pt-3 pb-2 px-6 md:hidden">
        <div class="w-12 h-1 bg-umami-gray rounded-full mx-auto"></div>
    </div>

    <div class="px-6 pb-8 md:p-8">
        {{-- Header --}}
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-bold text-umami-dark">Prenota un Tavolo</h3>
            <button @click="bookingOpen = false" class="p-2 text-gray-400 hover:text-umami-text">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        {{-- Form --}}
        @livewire('booking-form')
    </div>
</div>

{{-- Desktop Sidebar Widget --}}
<div class="hidden md:block fixed right-6 top-1/2 -translate-y-1/2 z-30">
    <div
        x-data="{ collapsed: true }"
        :class="collapsed ? 'w-auto' : 'w-80'"
        class="bg-white rounded-2xl shadow-xl transition-all duration-300 overflow-hidden"
    >
        {{-- Collapsed Button --}}
        <button
            x-show="collapsed"
            @click="collapsed = false"
            class="flex items-center gap-2 px-4 py-3 bg-umami-accent text-white font-semibold hover:bg-umami-accent transition-colors w-full"
        >
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            Prenota
        </button>

        {{-- Expanded Form --}}
        <div x-show="!collapsed" x-collapse>
            <div class="p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-umami-dark">Prenota Subito</h3>
                    <button @click="collapsed = true" class="text-gray-400 hover:text-umami-text">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                @livewire('booking-form', ['compact' => true])
            </div>
        </div>
    </div>
</div>