{% import "_macros.html.twig" as macros %}
{% import "partials/_inputs.html.twig" as inputs %}
{% extends 'base.html.twig' %}
{% block title %}Accueil | Projet Twig | Hotel BibliHotel
{% endblock %}
{% block meta_description %}Découvrez l'Hotel BibliHotel en Twig, un hôtel de luxe qui raconte l'histoire de la littérature.
{% endblock %}

{% block content %}
	{# HERO #}
	<section class="relative min-h-screen flex items-end md:items-center overflow-hidden" x-data="{ scrollY: 0 }" @scroll.window="scrollY = window.pageYOffset">
		<div class="absolute inset-0 z-0">
			<div class="absolute inset-0 scale-105 md:scale-100" :style="'transform: translateY(' + scrollY * 0.25 + 'px) scale(' + (1 + scrollY * 0.0002) + ')'">
				<img src="{{ base_url }}{{ hotel.image_hero }}" class="w-full h-full object-cover" alt="Bibliothèque de l'hôtel">
			</div>
			<div class="absolute inset-0 bg-editorial-ink/40"></div>
		</div>
		<div class="relative z-10 w-full max-w-6xl mx-auto px-4 md:px-8 lg:px-12 pb-24 md:pb-32 pt-32">
			<div class="max-w-2xl">
				<span class="font-body text-[11px] uppercase tracking-[0.2em] text-white/80 mb-6 block">Une évasion littéraire</span>
				<h1 class="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-white tracking-tighter leading-[0.95] mb-8">
					Le sommeil des<br><span class="italic text-editorial-cream">grands auteurs</span>
				</h1>
				<p class="font-body text-stone-200/90 text-lg md:text-xl max-w-md mb-10 font-light leading-relaxed">
					{{ hotel.description }}
				</p>
				<a href="#chambres" class="inline-block border border-stone-300/50 text-white font-body text-[11px] tracking-[0.2em] uppercase py-3.5 px-6 hover:bg-white hover:text-editorial-ink transition-all duration-500">
					Découvrir nos suites
				</a>
			</div>
		</div>
	</section>

	{# SECTION CHAMBRES #}

	<section id="chambres" class="py-24 md:py-32 border-t border-stone-300/50">
		<div class="container mx-auto px-4 md:px-8">
			<div class="max-w-6xl mx-auto">
				<span class="font-body text-[11px] uppercase tracking-[0.2em] text-editorial-mute block mb-4">Collections</span>
				<h2 class="font-display text-4xl md:text-5xl lg:text-6xl text-editorial-ink tracking-tighter mb-20">Nos chambres</h2>
				<div x-data="{ filter: 'all' }">
					<div class="flex justify-center gap-4 mb-12">
						{{ macros.filter_button('all', 'Tous') }}
						{{ macros.filter_button('Prestige', 'Prestige') }}
						{{ macros.filter_button('Mystère', 'Mystère') }}
						{{ macros.filter_button('Belle Époque', 'Belle Époque') }}
					</div>
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16 justify-items-center">
						{% for chambre in chambres %}
							<div class="min-h-0 w-full max-w-sm justify-self-center">
								{% include 'partials/_card_chambre.html.twig' with { chambre: chambre } %}
							</div>
						{% endfor %}
					</div>
				</div>
				<div class="mt-16 text-center">
					<button type="button" @click="$store.booking.roomSlug = null; $store.booking.roomName = null; $store.booking.roomImage = null; $store.booking.open = true" class="inline-block border border-stone-300/50 text-editorial-ink font-body text-[11px] tracking-[0.2em] uppercase py-3.5 px-8 hover:bg-editorial-ink hover:text-editorial-cream transition-all duration-500 cursor-pointer">
						Réserver une chambre
					</button>
				</div>
			</div>
		</div>
	</section>
{% endblock %}