{% extends 'base.html.twig' %}

{% block title %}Contact | Scobat SAS{% endblock %}


{% block body %}
	<main role="main">
		<div class="contact">
			<img src="{{ asset("images/semi-trapeze-contact.svg") }}" alt="Forme géométrique représentant un demi trapèze" class="contact-morph">
			<div class="container">
				<section class="formulaire-carte">
					{% for message in app.flashes('success') %}
						<div class="alert alert-success" role="alert">
							<p class="title">Succès</p>
							<p class="message">{{ message }}</p>
						</div>
					{% endfor %}
					<div class="row contact-form">
						<div class="col-6">
							<div class="title-section">
								<span>Parlez-nous de votre projet</span>
								<h2>Contactez nous</h2>
								<img class="a-propos-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
							</div>
							{{ form_start(form, {attr: {'data-turbo': 'false'}}) }}
								<div class="row formulaire">
									<div class="col-6">
										<div class="form-group">
											<div class="label">
												{{ form_label(form.name) }}
												<img class="label-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
											</div>
											{{ form_widget(form.name) }}
										</div>
									</div>
									<div class="col-6">
										<div class="form-group">
											<div class="label">
												{{ form_label(form.surname) }}
												<img class="label-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
											</div>
											{{ form_widget(form.surname) }}
										</div>
									</div>
									<div class="col-6">
										<div class="form-group">
											<div class="label">
												{{ form_label(form.email) }}
												<img class="label-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
											</div>
											{{ form_widget(form.email) }}
										</div>
									</div>
									<div class="col-6">
										<div class="form-group">
											<div class="label">
												{{ form_label(form.phone) }}
												<img class="label-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
											</div>
											{{ form_widget(form.phone) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-group">
											<div class="label">
												{{ form_label(form.message) }}
												<img class="label-ligne" src="{{ asset("images/title-underline.svg") }}" alt="Ligne jaune">
											</div>
											{{ form_widget(form.message) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-check">
											{{ form_widget(form.isLegal) }}
											{{ form_label(form.isLegal) }}
										</div>
									</div>
								</div>
								{{ form_widget(form) }}
								<button class="btn btn-jaune-not-rounded" type="submit">Envoyer</button>
							{{ form_end(form) }}
						</div>
						<div class="col-6 carte">
							<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2678.874517631902!2d3.306255876731779!3d47.822649173033085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47efb11df3100a4d%3A0x92e156c9658abd6d!2sSCOBAT%20SAS!5e0!3m2!1sfr!2sfr!4v1712306317526!5m2!1sfr!2sfr"
							        width="514" height="514" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
							</iframe>
						</div>
						<div class="col-6 coordonnees">
							<div class="flex-row justify-between">
								<div class="phone">
									<img src="{{ asset('images/icons/phone.svg') }}" alt="icone de téléphone">
									<div class="text">
										<span class="titre">
											Téléphone
										</span>
										<span>
											<a href="tel:+33386736431">
												03 86 73 64 31
											</a>
										</span>
									</div>
								</div>
								<div class="adresse">
									<img src="{{ asset('images/icons/map.svg') }}" alt="icon map">
									<div class="text">
										<span class="titre">
											Adresse
										</span>
										<span>
											<a target="_blank" href="https://www.google.com/maps/place/SCOBAT+SAS/@47.822646,3.308831,16z/data=!4m6!3m5!1s0x47efb11df3100a4d:0x92e156c9658abd6d!8m2!3d47.8226456!4d3.3088308!16s%2Fg%2F11rd_8wzrc?hl=fr&entry=ttu">
												2 Ruelle Falcucci, 89110 Le Val-d’Ocre
											</a>
										</span>
									</div>
								</div>
								<div class="mail">
									<img src="{{ asset('images/icons/mail.svg') }}" alt="icone adresse mail">
									<div class="text">
										<span class="titre">
											Adresse mail
										</span>
										<span>
											<a href="mailto:contact@scobat-sas.fr">
												contact@scobat-sas.fr
											</a>
										</span>
									</div>
								</div>
								<div class="facebook">
									<a target="_blank" href="https://www.facebook.com/SCOBATSAS">
										<img src="{{ asset('images/icons/facebook.svg') }}" alt="Logo Facebook">
									</a>
									<div class="text">
										<span>
											<a target="_blank" href="https://www.facebook.com/SCOBATSAS">
												Suivez-nous
											</a>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
		{% include 'components/_bandeau-avis.html.twig' %}
	</main>
{% endblock %}