{% extends 'base.html.twig' %}

{% block title %}{{ chambre.nom }} | {{ hotel.nom }}{% endblock %}
{% block meta_description %}{{ chambre.description|striptags|slice(0, 155) }}{% if chambre.description|striptags|length > 155 %}…{% endif %}{% endblock %}

{% block content %}
	{# Hero image de la chambre #}
	<section class="relative h-[60vh] min-h-[400px] flex items-end overflow-hidden">
		<div class="absolute inset-0 z-0">
			<img src="{{ chambre.image }}" class="w-full h-full object-cover" alt="{{ chambre.nom }}">
			<div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/30 to-transparent"></div>
		</div>
		<div class="relative z-10 w-full container mx-auto px-4 pb-12">
			<span class="text-primary-light/90 text-xs uppercase tracking-[0.3em] font-body">{{ chambre.categorie }}</span>
			<h1 class="font-display text-4xl md:text-5xl lg:text-6xl text-white mt-2">{{ chambre.nom }}</h1>
		</div>
	</section>

	{# Contenu principal #}
	<section class="container mx-auto px-4 py-16 md:py-24">
		<div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
			<div class="lg:col-span-2">
				<p class="font-body text-stone-600 text-lg leading-relaxed">{{ chambre.description }}</p>
				{% if chambre.equipements|length > 0 %}
					<h2 class="font-display text-2xl text-stone-800 mt-12 mb-6">Les détails de la suite</h2>
					<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
						{% for equipement in chambre.equipements %}
							<li class="flex items-center gap-3 font-body text-stone-600">
								<span class="w-1.5 h-1.5 rounded-full bg-primary-dark shrink-0"></span>
								{{ equipement }}
							</li>
						{% endfor %}
					</ul>
				{% endif %}
			</div>

			<div class="lg:col-span-1">
				<aside class="sticky top-8 bg-white border border-stone-200/80 rounded-sm shadow-[0_2px_20px_rgba(0,0,0,0.06)] p-8">
					<div class="border-b border-stone-200 pb-6 mb-6">
						<p class="font-body text-stone-500 text-sm uppercase tracking-widest">À partir de</p>
						<p class="font-display text-3xl text-stone-800 mt-1"><span class="text-primary-dark">{{ chambre.prix_nuit }}</span> € <span class="text-base font-body font-normal text-stone-500">/ nuit</span></p>
					</div>
					{% if chambre.disponible %}
						{% set chambre_img = chambre.image starts with 'http' ? chambre.image : base_url ~ chambre.image %}
						<button type="button"
						        data-room-slug="{{ chambre.slug }}"
						        data-room-name="{{ chambre.nom|e('html_attr') }}"
						        data-room-image="{{ chambre_img|e('html_attr') }}"
						        @click="$store.booking.roomSlug = $event.currentTarget.dataset.roomSlug; $store.booking.roomName = $event.currentTarget.dataset.roomName || null; $store.booking.roomImage = $event.currentTarget.dataset.roomImage || null; $store.booking.open = true"
						        class="block w-full text-center bg-primary-dark hover:bg-primary text-primary-light font-display text-sm tracking-widest uppercase py-4 px-6 transition-colors duration-300 cursor-pointer">
							Réserver cette suite
						</button>
						<p class="text-stone-500 text-xs text-center mt-3">Disponible</p>
					{% else %}
						<p class="text-center text-stone-500 font-body py-4">Suite actuellement indisponible</p>
						<a href="{{ base_url }}#chambres" class="block w-full text-center border border-stone-300 text-stone-600 hover:bg-stone-50 font-display text-sm tracking-widest uppercase py-4 px-6 mt-3 transition-colors duration-300">
							Voir les autres suites
						</a>
					{% endif %}
					<a href="{{ base_url }}" class="block text-center text-primary-dark hover:text-accent font-body text-sm mt-6 border-b border-primary-dark/30 hover:border-accent w-fit mx-auto transition-colors duration-300">
						← Retourner à l'accueil
					</a>
				</aside>
			</div>
		</div>
	</section>
{% endblock %}