{# Panneau latéral Réservation rapide — ouvert via Alpine.store('booking') #}
<div
	x-data="{}" x-show="$store.booking.open" x-cloak @keydown.escape.window="$store.booking.open = false" class="fixed inset-0 z-[100]" aria-modal="true" aria-label="Réservation rapide">
	{# Overlay #}
	<div x-show="$store.booking.open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="$store.booking.open = false" class="absolute inset-0 bg-editorial-ink/50 backdrop-blur-sm"></div>

	{# Panel #}
	<div
		x-show="$store.booking.open" x-transition:enter="ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="absolute right-0 top-0 h-full w-full max-w-md bg-editorial-cream border-l border-stone-300/50 shadow-2xl flex flex-col">
		{# Header #}
		<div class="flex items-center justify-between px-6 py-6 border-b border-stone-300/50">
			<div>
				<span class="font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute block">Réservation</span>
				<h2 class="font-display text-2xl text-editorial-ink tracking-tighter mt-1">Choisir vos dates</h2>
			</div>
			<button type="button" @click="$store.booking.open = false" class="p-2 -m-2 text-editorial-mute hover:text-editorial-ink transition-colors" aria-label="Fermer">
				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
			</button>
		</div>

		{# Suite pré-sélectionnée (si ouverture depuis une page chambre) #}
		<div x-show="$store.booking.roomName && $store.booking.roomName.length" x-cloak x-transition:enter="ease-out duration-200" x-transition:leave="ease-in duration-150" class="px-6 py-4 bg-editorial-paper/80 border-b border-stone-300/50 flex items-start justify-between gap-3">
			<div class="min-w-0">
				<p class="font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute">Suite sélectionnée</p>
				{# <div class="flex items-center gap-3">
				<img :src="$store.booking.roomImage || ''" alt="" class="w-10 h-10 rounded object-cover shrink-0" x-show="$store.booking.roomImage"> #}
				<p class="font-display text-editorial-ink mt-1" x-text="$store.booking.roomName"></p>
				{# </div> #}
			</div>
			<button type="button"
			        @click="$store.booking.roomSlug = null; $store.booking.roomName = null; $store.booking.roomImage = null"
			        class="p-1 -m-1 text-editorial-mute hover:text-editorial-ink transition-colors shrink-0"
			        aria-label="Effacer la sélection">
				<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
			</button>
		</div>

		{# Sélecteur de chambre (si ouverture hors page chambre + liste dispo) #}
		{% if chambres is defined and chambres|length > 0 %}
			<div x-data="{ roomPickerOpen: false }" x-show="!$store.booking.roomName || !$store.booking.roomName.length" x-cloak class="px-6 py-4 border-b border-stone-300/50">
				<p class="font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute mb-3">Choisir une suite</p>
				<div class="relative">
					<button type="button" @click="roomPickerOpen = !roomPickerOpen" class="w-full flex items-center gap-3 px-4 py-3 bg-white border border-stone-300/50 text-left font-body text-editorial-ink hover:border-editorial-ink/50 transition-colors">
						<span class="flex items-center gap-3 min-w-0 flex-1" x-show="$store.booking.roomSlug">
							<img :src="$store.booking.roomImage || ''" alt="" class="w-10 h-10 rounded object-cover shrink-0" x-show="$store.booking.roomImage">
							<span class="font-display truncate text-sm" x-text="$store.booking.roomName"></span>
						</span>
						<span class="text-editorial-mute flex-1" x-show="!$store.booking.roomSlug">Sélectionner…</span>
						<svg class="w-4 h-4 shrink-0 text-editorial-mute transition-transform" :class="roomPickerOpen && 'rotate-180'" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
					</button>
					<div x-show="roomPickerOpen" x-cloak x-transition:enter="ease-out duration-150" x-transition:leave="ease-in duration-100" @click.outside="roomPickerOpen = false" class="absolute top-full left-0 right-0 mt-1 py-1 bg-white border border-stone-300/50 shadow-lg z-10 max-h-56 overflow-y-auto">
						{% for chambre in chambres %}
							{% set img_src = chambre.image starts with 'http' ? chambre.image : base_url ~ chambre.image %}
							<button type="button" data-slug="{{ chambre.slug }}" data-name="{{ chambre.nom|e('html_attr') }}" data-image="{{ img_src|e('html_attr') }}" @click="$store.booking.roomSlug = $event.currentTarget.dataset.slug; $store.booking.roomName = $event.currentTarget.dataset.name; $store.booking.roomImage = $event.currentTarget.dataset.image; roomPickerOpen = false" class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-editorial-paper/80 text-left transition-colors">
								<img src="{{ img_src }}" alt="" class="w-10 h-10 rounded object-cover shrink-0">
								<span class="font-display text-editorial-ink text-sm">{{ chambre.nom }}</span>
							</button>
						{% endfor %}
					</div>
				</div>
			</div>
		{% endif %}

		{# Formulaire  #}
		<div class="flex flex-col flex-1 p-6 min-h-0" x-data="{ step: 'form' }" x-init="$watch('$store.booking.open', open => { if (open) step = 'form' })">
			<template x-if="step === 'form'">
				<form @submit.prevent="step = 'loading'; setTimeout(() => { step = 'success' }, 1500)" class="flex flex-col flex-1 flex-nowrap">
					<input type="hidden" name="room" x-bind:value="$store.booking.roomSlug || ''">
					<div class="space-y-6">
						<div>
							<label for="booking-arrival" class="block font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute mb-2">Arrivée</label>
							<input type="date" id="booking-arrival" name="arrival" required min="{{ "now"|date("Y-m-d") }}" class="w-full px-4 py-3 bg-white border border-stone-300/50 font-body text-editorial-ink focus:outline-none focus:border-editorial-ink transition-colors">
						</div>
						<div>
							<label for="booking-departure" class="block font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute mb-2">Départ</label>
							<input type="date" id="booking-departure" name="departure" required class="w-full px-4 py-3 bg-white border border-stone-300/50 font-body text-editorial-ink focus:outline-none focus:border-editorial-ink transition-colors">
						</div>
					</div>
					<div class="mt-auto pt-8 space-y-3">
						<button type="submit" class="w-full py-4 bg-editorial-ink text-editorial-cream font-body text-[11px] tracking-[0.2em] uppercase hover:bg-editorial-ink/90 transition-colors">
							Vérifier la disponibilité
						</button>
						<p class="text-center font-body text-editorial-mute text-xs">
							Ou
							<a href="{{ base_url }}#chambres" class="border-b border-stone-300/50 hover:border-editorial-ink">voir toutes les options</a>
						</p>
					</div>
				</form>
			</template>
			<template x-if="step === 'loading'">
				<div class="flex flex-col items-center justify-center flex-1 py-16" x-transition>
					<div class="rounded-full h-10 w-10 border-2 border-editorial-ink/30 border-t-editorial-ink animate-spin"></div>
					<p class="mt-6 font-display italic text-editorial-ink">Consultation de nos grimoires…</p>
				</div>
			</template>
			<template x-if="step === 'success'">
				<div class="flex flex-col justify-center flex-1 py-6 text-center" x-transition>
					<h3 class="font-display text-2xl text-editorial-ink tracking-tighter mb-3">Bonne nouvelle !</h3>
					<p class="font-body text-editorial-mute text-sm mb-8 leading-relaxed">
						Des alcôves sont encore libres pour vos dates.
					</p>
					<a href="https://bezinbrice.fr/" target="_blank" rel="noopener noreferrer" class="block w-full py-4 bg-editorial-ink text-editorial-cream font-body text-[11px] tracking-[0.2em] uppercase hover:bg-editorial-ink/90 transition-colors">
						Nous contacter
					</a>
					<button type="button" @click="step = 'form'" class="mt-4 font-body text-[11px] tracking-[0.2em] uppercase text-editorial-mute hover:text-editorial-ink border-b border-stone-300/50 hover:border-editorial-ink transition-colors">
						Modifier mes dates
					</button>
				</div>
			</template>
		</div>
	</div>
</div>