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

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

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('front/css/contact.css') }}"/>
{% endblock %}

{% block body %}

	{# ========================= HERO ========================= #}
	<section class="contact-hero">
		<div class="contact-hero-overlay"></div>
		<div class="container contact-hero-content">
			<h1 class="contact-hero-title">LET'S<br>CONNECT,<br>LET'S ICHTAH.</h1>
			<p class="contact-hero-subtitle">
				UNE QUESTION, UNE RÉSERVATION OU SIMPLEMENT L'ENVIE<br>
				D'ÉCHANGER ? NOTRE ÉQUIPE EST LÀ POUR VOUS<br>
				ACCOMPAGNER ET VOUS RÉPONDRE RAPIDEMENT.
			</p>
		</div>
	</section>

	{# ========================= CONTACT FORM + INFO ========================= #}
	<section class="contact-main">
		<div class="container">
			<div class="contact-grid">

				{# Left: Info #}
				<div class="contact-info">
					<div class="contact-info-block">
						<p><strong>Adresse :</strong> [à compléter selon l'adresse du studio]</p>
						<p><strong>Téléphone :</strong> +212665-229809</p>
						<p><strong>Email :</strong> ichtahstudio@gmail.com</p>
					</div>

					<div class="contact-socials">
						<a href="#"><i class="fab fa-instagram"></i> <strong>Instagram :</strong> <span>@ichtah</span></a>
						<a href="#"><i class="fab fa-tiktok"></i> <strong>TikTok :</strong> <span>@ichtah</span></a>
						<a href="#"><i class="fab fa-facebook-f"></i> <strong>Facebook :</strong> <span>@ichtah</span></a>
						<a href="#"><i class="fab fa-youtube"></i> <strong>YouTube :</strong> <span>@ichtahdancemovement1449</span></a>
						<a href="#"><i class="fab fa-linkedin-in"></i> <strong>Linkedin :</strong> <span>ICHTAH</span></a>
					</div>
				</div>

				{# Right: Form #}
				<div class="contact-form-wrapper">
					<form class="contact-form" action="#" method="post">
						<div class="contact-form-row">
							<div class="contact-form-field">
								<input type="text" name="nom" placeholder="Votre nom" required>
							</div>
							<div class="contact-form-field">
								<input type="text" name="prenom" placeholder="Votre prénom" required>
							</div>
						</div>
						<div class="contact-form-row">
							<div class="contact-form-field">
								<input type="email" name="email" placeholder="Email" required>
							</div>
							<div class="contact-form-field">
								<input type="tel" name="telephone" placeholder="Numéro de téléphone">
							</div>
						</div>
						<div class="contact-form-field contact-form-field-full">
							<textarea name="message" placeholder="Message" rows="1" required></textarea>
						</div>
						<div class="contact-form-submit">
							<button type="submit" class="contact-btn">
								ENVOYER
								<span>↗</span>
							</button>
						</div>
					</form>
				</div>

			</div>
		</div>
	</section>

	{# ========================= CTA BSPORT ========================= #}
	<section class="contact-cta">
		<img src="{{ asset('front/images/contact/green-line.png') }}" alt="" class="contact-cta-line" aria-hidden="true">

		<div class="container">
			<div class="contact-cta-content">
				<h2 class="contact-cta-title">
					Réservez vos cours ou ateliers directement via notre plateforme<br>
					mobile Bsport et rejoignez la communauté ICHTAH.
				</h2>
				<a href="{{ path('app_school') }}" class="contact-cta-btn">
					RÉSERVER MAINTENANT
					<span>↗</span>
				</a>
			</div>
		</div>

		{# Scroll to top #}
		
	</section>

{% endblock %}

{% block javascripts %}
{% endblock %}