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

{% block title %}Formations & Cours d'informatique - Bourges
{% endblock %}

{% block body %}
	<section class="hero position-relative overflow-hidden">
		<div class="container pb-5 position-relative z-1">
			<div class="row">
				<div class="mt-1 col-lg-8 mx-auto d-flex flex-column justify-content-center text-center">
					<span class="badge bg-info bg-opacity-25 text-white border border-info border-opacity-25 rounded-pill align-self-center mb-3 px-3 py-2">
						<i class="bi bi-mortarboard-fill me-2"></i>Formation & Apprentissage
					</span>
					<h1 class="text-white display-4 fw-bold mb-3">Formations & Cours d'informatique<br>
						<span class="text-info">sur Bourges et alentours</span>
					</h1>
					<p class="text-white lead mb-4 px-lg-5">
						Progressez à votre rythme avec des cours adaptés à votre niveau. Initiation, bureautique, sécurité, programmation et intelligence artificielle.
					</p>
					<div class="d-flex justify-content-center gap-3" data-controller="anti-spam">
						<p class="btn btn-lg btn-custom rounded-pill px-4 py-3 d-none d-sm-inline-flex align-items-center shadow-lg">
							<i class="bi bi-telephone-fill me-2"></i>
							<span data-anti-spam-target="phoneText"></span>
						</p>
						<a class="btn btn-custom rounded-pill px-4 py-2 d-inline-flex d-sm-none align-items-center shadow-lg" data-anti-spam-target="phoneLink">
							<i class="bi bi-telephone-fill me-2"></i>
							Appeler
						</a>
					</div>
				</div>
				{% for message in app.flashes('success') %}
					<div class="alert alert-success shadow-sm border-0 rounded-3" role="alert">
						<i class="bi bi-check-circle-fill me-2"></i>
						{{ message }}
					</div>
				{% endfor %}

				{% for message in app.flashes('error') %}
					<div class="alert alert-danger shadow-sm border-0 rounded-3" role="alert">
						<i class="bi bi-exclamation-triangle-fill me-2"></i>
						{{ message }}
					</div>
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="assistance py-5">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold display-6">Nos parcours de
					<span class="text-primary">formation</span>
				</h2>
				<div class="hr-blue mx-auto my-4" style="width: 100px;"></div>
				<p class="text-muted lead">Une approche pédagogique centrée sur la pratique et l'autonomie.</p>
			</div>

			<div class="row g-4 align-items-center">
				<div class="col-lg-6 order-lg-2">
					<div class="row g-3">
						<div class="col-sm-6">
							<div class="card h-100 border-0 shadow-sm hover-lift card-hover-effect transition-all">
								<div class="card-body p-4 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center">
									<div class="icon-box me-3 mb-0 me-sm-0 mb-sm-3 text-primary d-inline-flex icon-transition">
										<i class="bi bi-mortarboard fs-3"></i>
									</div>
									<div>
										<h5 class="card-title fw-bold text-blue title-transition">Tous niveaux</h5>
										<p class="card-text small text-muted mb-0 text-transition">De l'initiation au perfectionnement, progressez étape par étape.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="card h-100 border-0 shadow-sm hover-lift card-hover-effect transition-all">
								<div class="card-body p-4 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center">
									<div class="icon-box me-3 mb-0 me-sm-0 mb-sm-3 text-success d-inline-flex icon-transition">
										<i class="bi bi-camera-video fs-3"></i>
									</div>
									<div>
										<h5 class="card-title fw-bold text-blue title-transition">Flexible</h5>
										<p class="card-text small text-muted mb-0 text-transition">En visioconférence ou à domicile sur Bourges.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="card h-100 border-0 shadow-sm hover-lift card-hover-effect transition-all">
								<div class="card-body p-4 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center">
									<div class="icon-box me-3 mb-0 me-sm-0 mb-sm-3 text-warning d-inline-flex icon-transition">
										<i class="bi bi-person-check fs-3"></i>
									</div>
									<div>
										<h5 class="card-title fw-bold text-blue title-transition">Personnalisé</h5>
										<p class="card-text small text-muted mb-0 text-transition">Un accompagnement sur-mesure pour vos besoins.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="card h-100 border-0 shadow-sm hover-lift card-hover-effect transition-all">
								<div class="card-body p-4 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center">
									<div class="icon-box me-3 mb-0 me-sm-0 mb-sm-3 text-danger d-inline-flex icon-transition">
										<i class="bi bi-briefcase fs-3"></i>
									</div>
									<div>
										<h5 class="card-title fw-bold text-blue title-transition">Pro & Perso</h5>
										<p class="card-text small text-muted mb-0 text-transition">Des parcours adaptés aux particuliers et professionnels.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mt-4 text-center text-lg-start">
						<div class="d-inline-block bg-white shadow-sm rounded-pill px-4 py-2 border">
							<span class="fw-bold text-blue">Tarif :</span>
							à partir de
							<span class="badge bg-primary rounded-pill fs-6">30€ / heure</span>
						</div>
					</div>
				</div>
				<div class="col-lg-6 order-lg-1">
					<div class="position-relative">
						<img src="{{ asset('images/cours-ia.jpg') }}" class="img-fluid rounded-4 shadow-lg w-100" alt="Formation informatique" style="object-fit: cover; min-height: 400px;">
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="bg-light py-5">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold">Formations adaptées à vos besoins</h2>
				<p class="text-muted">Découvrez nos modules thématiques pour monter en compétence.</p>
			</div>

			<div
				class="row g-4">
				<!-- Bureautique -->
				<div class="col-md-6 col-lg-3">
					<div class="card h-100 border-0 shadow-sm hover-card card-hover-effect transition-all">
						<div class="card-body p-4">
							<div class="mb-3 text-primary icon-transition">
								<i class="bi bi-laptop fs-1"></i>
							</div>
							<h4 class="h5 fw-bold text-blue mb-3 title-transition">Bureautique & Outils</h4>
							<p class="card-text text-muted small text-transition">Maîtrisez Word, Excel, PowerPoint et les outils Google. Gagnez en productivité dans votre gestion quotidienne.</p>
						</div>
					</div>
				</div>

				<!-- Sécurité -->
				<div class="col-md-6 col-lg-3">
					<div class="card h-100 border-0 shadow-sm hover-card card-hover-effect transition-all">
						<div class="card-body p-4">
							<div class="mb-3 text-danger icon-transition">
								<i class="bi bi-shield-check fs-1"></i>
							</div>
							<h4 class="h5 fw-bold text-blue mb-3 title-transition">Sécurité Numérique</h4>
							<p class="card-text text-muted small text-transition">Protégez vos données. Apprenez à détecter le phishing, sécuriser vos mots de passe et naviguer sereinement.</p>
						</div>
					</div>
				</div>

				<!-- Programmation -->
				<div class="col-md-6 col-lg-3">
					<div class="card h-100 border-0 shadow-sm hover-card card-hover-effect transition-all">
						<div class="card-body p-4">
							<div class="mb-3 text-warning icon-transition">
								<i class="bi bi-code-slash fs-1"></i>
							</div>
							<h4 class="h5 fw-bold text-blue mb-3 title-transition">Initiation Code</h4>
							<p class="card-text text-muted small text-transition">Comprendre le web (HTML/CSS). Logique de programmation pour débutants. Créez vos premiers projets.</p>
						</div>
					</div>
				</div>

				<!-- IA -->
				<div class="col-md-6 col-lg-3">
					<div class="card h-100 border-0 shadow-sm hover-card card-hover-effect transition-all">
						<div class="card-body p-4">
							<div class="mb-3 text-info icon-transition">
								<i class="bi bi-robot fs-1"></i>
							</div>
							<h4 class="h5 fw-bold text-blue mb-3 title-transition">Intelligence Artificielle</h4>
							<p class="card-text text-muted small text-transition">Maîtrisez ChatGPT et Mistral AI. Apprenez l'art du prompt pour booster votre efficacité au quotidien.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section id="contact" class="contact-form py-5 my-5">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-10">
					<div class="card border-0 shadow-lg overflow-hidden rounded-4">
						<div class="row g-0">
							<div class="col-lg-5 d-none d-lg-block position-relative">
								<img src="{{ asset('images/contact-formation.jpg') }}" class="h-100 w-100 object-fit-cover" alt="Contact formation">
								<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25"></div>
								<div class="position-absolute bottom-0 start-0 p-4 text-white">
									<h3 class="fw-bold">Contactez-nous</h3>
									<p class="small mb-0">Une réponse sous 24h garantie.</p>
								</div>
							</div>
							<div class="col-lg-7 p-4 p-md-5">
								<div class="text-center text-lg-start mb-4">
									<h2 class="text-blue fw-bold">Parlons de votre projet</h2>
									<p class="text-muted">Remplissez le formulaire ci-dessous pour être recontacté.</p>
								</div>

								{{ form_start(form) }}
								<div class="row g-3">
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': 'Votre nom'}}) }}
											{{ form_label(form.name) }}
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'name@example.com'}}) }}
											{{ form_label(form.email) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-floating">
											{{ form_widget(form.phone, {'attr': {'class': 'form-control', 'placeholder': 'Téléphone'}}) }}
											{{ form_label(form.phone) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-floating">
											{{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': 'Votre message', 'style': 'height: 150px'}}) }}
											{{ form_label(form.message) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-check">
											{{ form_widget(form.dataConsent, {'attr': {'class': 'form-check-input'}}) }}
											<label class="form-check-label small text-muted" for="{{ form.dataConsent.vars.id }}">
												J'accepte que mes données soient utilisées pour traiter ma demande.
											</label>
										</div>
									</div>
									<div class="col-12 text-center text-lg-end mt-4">
										<button type="submit" class="btn btn-custom rounded-pill px-4 py-2 px-lg-5 py-lg-3 fw-bold shadow-sm">
											Envoyer ma demande
											<i class="bi bi-send-fill ms-2"></i>
										</button>
									</div>
								</div>
								{{ form_end(form) }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
{% endblock %}