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

{% block title %}Concept | {{ hotel.nom }}{% endblock %}
{% block meta_description %}Découvrez le concept du BibliHotel : un hôtel de luxe dédié aux livres et à la littérature, au cœur de Paris.{% endblock %}

{% block content %}
	{# Hero #}
	{{ hero_macro.hero_page(concept.titre, "Notre philosophie", concept.sous_titre, concept.image_hero) }}

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

	{# Valeurs #}
	<section class="border-t border-stone-200/80 bg-stone-50/50">
		<div class="container mx-auto px-4 py-16 md:py-24">
			<div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-10">
				{% for valeur in concept.valeurs %}
					<article class="group bg-white rounded-sm overflow-hidden border border-stone-200/80 shadow-[0_2px_16px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_rgba(120,53,15,0.12)] transition-all duration-500 flex flex-col">
						<div class="aspect-[4/3] overflow-hidden">
							<img src="{{ valeur.image }}" alt="{{ valeur.titre }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
						</div>
						<div class="p-6 lg:p-8 flex flex-col flex-1">
							<h2 class="font-display text-xl md:text-2xl text-stone-800 mb-3 group-hover:text-primary-dark transition-colors duration-300">{{ valeur.titre }}</h2>
							<p class="font-body text-stone-600 leading-relaxed flex-1">{{ valeur.texte }}</p>
						</div>
					</article>
				{% endfor %}
			</div>
		</div>
	</section>
	{# CTA #}
	{% include 'partials/_cta.html.twig' %}

{% endblock %}