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

{% block title %}Sanitaires & Plomberie - 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">Sanitaires et Plomberie</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.
							            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			</p>
		</section>

		{# Liste des Prestations #}
		<section class="mb-16">
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
				{% if services is not empty %}
					{% for service in services %}
						<a
							href="{{ path('app_plumbing_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">
							{# Placeholder Image #}
							<div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400 group-hover:bg-gray-300 transition-colors">
								<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>

								<div class="mt-4 text-right">
									<span class="text-sm font-semibold text-blue-600 uppercase group-hover:underline">
										Découvrir &rarr;
									</span>
								</div>
							</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 plomberie pour le moment.</p>
					</div>
				{% endif %}
			</div>
		</section>

		{# Call to Action / Contact #}
		<section class="bg-gray-800 text-white rounded p-12 text-center mt-12 mb-8 shadow-md">
			<h2 class="text-2xl font-bold mb-4">Un projet de rénovation ?</h2>
			<p class="text-gray-300 mb-8 max-w-2xl mx-auto">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullamer in dui mauris. 
							            Vivamus hendrerit arcu sed erat molestie vehicula.
			</p>
			<button data-action="click->contact-modal#open" class="inline-block bg-white text-gray-800 font-bold py-3 px-8 rounded hover:bg-gray-100 transition-colors shadow-lg">
				Demander un devis
			</button>
		</section>
	</div>
{% endblock %}