{# templates/heating/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Chauffage & Climatisation - CSP Chauffage
{% endblock %}

{% block body %}
	<div
		class="container mx-auto px-4 py-8">

		{# En-tête de la page #}
		<section class="mb-12 text-center max-w-4xl mx-auto">
			<h1 class="text-4xl font-bold text-gray-800 mb-6">Chauffage et Climatisation</h1>
			<p class="text-lg text-gray-600 leading-relaxed">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
							            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</section>

		{# Liste des sous-pages (Prestations) #}
		<section class="mb-16">
			<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
				{% if services is not empty %}
					{% for service in services %}
						<a href="{{ path('app_heating_show', {'slug': service.slug}) }}" class="group block bg-white rounded shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
							<div
								class="h-48 bg-gray-200 flex items-center justify-center text-gray-400 group-hover:bg-gray-300 transition-colors">
								{# Placeholder pour image de couverture #}
								<span class="text-sm font-medium uppercase tracking-wider">Image
									{{ service.title }}</span>
							</div>
							<div class="p-6">
								<h2 class="text-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors">
									{{ service.title }}
								</h2>
								<p class="text-gray-600 text-sm line-clamp-3">
									{{ service.description|striptags|slice(0, 100) }}...
								</p>
								<span class="inline-block mt-4 text-sm font-semibold text-blue-600 uppercase group-hover:underline">
									En savoir plus &rarr;
								</span>
							</div>
						</a>
					{% endfor %}
				{% else %}
					{# Fallback visuel #}
					<div class="col-span-full text-center py-12 bg-gray-50 border border-dashed border-gray-300 rounded">
						<p class="text-gray-500 italic">Aucune prestation de chauffage créée pour le moment.</p>
					</div>
				{% endif %}
			</div>
		</section>

		{# Call to Action / Contact Rapide #}
		<section class="bg-gray-100 rounded p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-6 border border-gray-200">
			<div class="text-center md:text-left">
				<h3 class="text-2xl font-bold text-gray-800 mb-2">Besoin d'un conseil ?</h3>
				<p class="text-gray-600">Nos experts sont là pour vous guider dans le choix de votre installation.</p>
			</div>
			<button data-action="click->contact-modal#open" class="bg-gray-800 text-white font-bold py-3 px-8 rounded hover:bg-gray-700 transition-colors whitespace-nowrap">
				Nous contacter
			</button>
		</section>
	</div>
{% endblock %}