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

{% block title %}Contactez-nous - CSP Chauffage
{% endblock %}

{% block body %}
	<div
		class="container mx-auto px-4 py-8">
		{# En-tête #}
		<section class="mb-12 text-center mx-auto">
			<h1 class="text-4xl font-bold text-gray-800 mb-6">Contactez-nous</h1>
			<p class="text-lg text-gray-600">
				Vous avez un projet ou besoin d'un dépannage ? Remplissez le formulaire ci-dessous ou venez nous rencontrer.
			</p>
		</section>

		<div
			class="grid grid-cols-1 lg:grid-cols-2 gap-12 mx-auto mb-12">

			{# Colonne Gauche : Coordonnées & Plan #}
			<div
				class="space-y-8">
				{# Carte d'informations #}
				<div class="bg-white p-8 rounded shadow-sm border border-gray-200">
					<h2 class="text-2xl font-bold text-gray-800 mb-6">Nos Coordonnées</h2>

					<div class="space-y-4">
						<div class="flex items-start gap-4">
							<div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center text-blue-600 shrink-0">
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
								</svg>
							</div>
							<div>
								<p class="font-bold text-gray-800">Adresse</p>
								<p class="text-gray-600">123 Rue de l'Exemple<br>14000 Caen</p>
							</div>
						</div>

						<div class="flex items-start gap-4">
							<div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center text-blue-600 shrink-0">
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
								</svg>
							</div>
							<div>
								<p class="font-bold text-gray-800">Téléphone</p>
								<a href="tel:0102030405" class="text-blue-600 hover:underline">01 02 03 04 05</a>
							</div>
						</div>

						<div class="flex items-start gap-4">
							<div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center text-blue-600 shrink-0">
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
								</svg>
							</div>
							<div>
								<p class="font-bold text-gray-800">Email</p>
								<a href="mailto:contact@mail.fr" class="text-blue-600 hover:underline">contact@mail.fr</a>
							</div>
						</div>

						<div class="flex items-start gap-4">
							<div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center text-blue-600 shrink-0">
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
								</svg>
							</div>
							<div>
								<p class="font-bold text-gray-800">Horaires</p>
								<p class="text-gray-600">Lundi - Vendredi : 08h00 - 18h00</p>
							</div>
						</div>
					</div>
				</div>
				<div class="bg-white p-8 rounded shadow-sm border border-gray-200">
					<h2 class="text-2xl font-bold text-gray-800 mb-6">Nos zones d'interventions</h2>
					<p class="text-gray-600">CSP Chauffage intervient sur l’ensemble du département du Calvados, notamment :
					</p>
					<p class="text-gray-600">Caen • Lisieux • Bayeux • Ouistreham • Courseulles-sur-Mer • Cabourg • Deauville • Trouville-sur-Mer • Villers-sur-Mer • Pays d’Auge • Côte de Nacre • Côte Fleurie et toutes les communes environnantes.
					</p>
				</div>
			</div>

			{# Colonne Droite : Formulaire #}
			<div class="bg-gray-50 p-8 rounded shadow-md border border-gray-200">
				<h2 class="text-2xl font-bold text-gray-800 mb-6">Envoyez-nous un message</h2>

				{# Utilisation du fragment réutilisable #}
				{{ include('contact/_form.html.twig') }}
			</div>
		</div>
		{# Plan Google Maps (Placeholder) #}
		<div class="bg-gray-200 h-64 rounded shadow-sm flex items-center justify-center text-gray-500 border border-gray-300">
			<div class="text-center">
				<p class="font-bold text-lg mb-2">Plan Google Maps</p>
				<p class="text-sm">Intégration de l'iframe ici</p>
			</div>
		</div>
	</div>
{% endblock %}