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

{% block title %}- Contact
{% endblock %}

{% block stylesheets %}

	<style>
		#call-to-action {
			display: none;
		}
	</style>

{% endblock %}

{% block javascripts %}

	<script src="https://www.google.com/recaptcha/api.js" async defer></script>

{% endblock %}

{% block body %}

	<div class="page-title dark-background">
		<div class="container position-relative">
			<h2>Contact</h2>
		</div>
	</div>

	<section id="contact" class="contact section">

		<div class="mb-5">
			<iframe style="width: 100%; height: 400px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1653.9749335647048!2d-6.84614226059021!3d33.993821437115784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda76c9079908029%3A0x721256944c4bc289!2s4%20Rue%20Zalagh%2C%20Rabat%2010000!5e0!3m2!1sfr!2sma!4v1739368603530!5m2!1sfr!2sma" frameborder="0" allowfullscreen=""></iframe>
		</div>
		<!-- End Google Maps -->

		<div class="container" data-aos="fade">
			<div class="row gy-5 gx-lg-5">
				<div class="col-lg-4">
					<div class="info">
						<div class="info-item d-flex">
							<h3>Contactez-nous</h3>
						</div>
						<div class="info-item d-flex">
							<i class="bi bi-geo-alt flex-shrink-0"></i>
							<div>
								<h4>Adresse:</h4>
								<p>
									<a href="https://maps.app.goo.gl/U9BWvJfA7aqUUqwd9">4 Rue Zalagh, Rabat
									</a>
								</p>
							</div>
						</div>
						<!-- End Info Item -->

						<div class="info-item d-flex">
							<i class="bi bi-envelope flex-shrink-0"></i>
							<div>
								<h4>Email:</h4>
								<p>
									<a href="mailto:contact@nsquare-group.com">contact@nsquare-group.com</a>
								</p>
							</div>
						</div>
						<!-- End Info Item -->

						<div class="info-item d-flex">
							<i class="bi bi-phone flex-shrink-0"></i>
							<div>
								<h4>Appelez-nous:</h4>
								<p>
									<a href="tel:05380-08624">05380-08624</a>
								</p>
							</div>
						</div>
						<!-- End Info Item -->
					</div>
				</div>

				<div class="col-lg-8">
					<form id="contactForm" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
						<div class="row gy-4">
							<div class="col-md-6">
								<input type="text" name="name" class="form-control" placeholder="Votre Nom" required="">
							</div>
							<div class="col-md-6 ">
								<input type="email" class="form-control" name="email" placeholder="Votre Email" required="">
							</div>
							<div class="col-md-12">
								<input type="text" class="form-control" name="subject" placeholder="Sujet" required="">
							</div>
							<div class="col-md-12">
								<textarea class="form-control" name="message" rows="6" placeholder="Message" required=""></textarea>
							</div>

							<div class="col-md-12 text-center">
								<div class="loading">Chargement...</div>
								<div class="error-message"></div>
								<div class="sent-message">Votre message a bien été envoyé !</div>

								<div class="g-recaptcha" data-sitekey="6LdlJN4qAAAAAA384FqxliIEVFdLxyaR6P_b5XWL" data-callback="onSubmit" required=""></div>
								<button type="submit">Envoyer</button>

								<!-- reCAPTCHA widget -->
							</div>
						</div>

					</form>
				</div>
				<!-- End Contact Form -->
			</div>
		</div>
	</section>
	<!-- /Contact Section -->
{% endblock %}