{% extends 'base.html.twig' %}
{% import "_macros.html.twig" as macros %}
{% import "partials/_hero_macro.html.twig" as hero_macro %}

{% block title %}L'Expérience | {{ hotel.nom }}{% endblock %}
{% block meta_description %}Vivez l'expérience BibliHotel : petit-déjeuner littéraire, bibliothèque ouverte 24h, soirées et un service dédié aux amoureux des livres.{% endblock %}

{% block content %}
	{# Hero #}
	{{ hero_macro.hero_page(experience.titre, "Votre séjour", experience.sous_titre, experience.image_hero) }}

	{# Intro #}
	{{ macros.intro(experience.intro) }}

	{# Moments #}
	<section class="border-t border-stone-200/80">
		<div class="container mx-auto px-4 py-16 md:py-24">
			<div class="max-w-6xl mx-auto space-y-20 md:space-y-28">
				{% for moment in experience.moments %}
					<article class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center">
						<div class="{% if loop.index is even %}md:order-2{% endif %}">
							<div class="aspect-[4/3] rounded-sm overflow-hidden shadow-[0_4px_24px_rgba(0,0,0,0.08)]">
								<img src="{{ moment.image }}" alt="{{ moment.titre }}" class="w-full h-full object-cover">
							</div>
						</div>
						<div class="{% if loop.index is even %}md:order-1{% endif %}">
							<h2 class="font-display text-2xl md:text-3xl text-stone-800 mb-4">{{ moment.titre }}</h2>
							<p class="font-body text-stone-600 leading-relaxed">{{ moment.texte }}</p>
						</div>
					</article>
				{% endfor %}
			</div>
		</div>
	</section>

	{# CTA #}
	{% include 'partials/_cta.html.twig' %}
{% endblock %}