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

{% block title %}AquaProtect - Politique de confidentialité
{% endblock %}

{% block body %}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-lg-10">
				<div class="card shadow-sm">
					<div class="card-header bg-primary text-white py-3">
						<h1 class="card-title h3 mb-0">
							<i class="fas fa-shield-alt me-2"></i>Politique de confidentialité
						</h1>
					</div>
					<div class="card-body p-4">
						<div class="mb-5">
							<h2 class="h4 text-primary mb-4">Introduction</h2>
							<p class="text-muted">
								Chez AquaProtect, nous accordons une grande importance à la protection de vos données personnelles. 
								                            Cette politique de confidentialité détaille la manière dont nous collectons, utilisons et protégeons vos informations.
							</p>
						</div>

						<div class="mb-5">
							<h2 class="h4 text-primary mb-4">Collecte des données</h2>
							<div class="card bg-light border-0 mb-3">
								<div class="card-body">
									<h3 class="h5 mb-3">Nous collectons les informations suivantes :</h3>
									<ul class="list-unstyled">
										<li class="mb-2">
											<i class="fas fa-check text-success me-2"></i>Nom et prénom
										</li>
										<li class="mb-2">
											<i class="fas fa-check text-success me-2"></i>Adresse email
										</li>
										<li class="mb-2">
											<i class="fas fa-check text-success me-2"></i>Numéro de téléphone
										</li>
										<li class="mb-2">
											<i class="fas fa-check text-success me-2"></i>Données relatives à vos exploitations
										</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="mb-5">
							<h2 class="h4 text-primary mb-4">Utilisation des données</h2>
							<p class="text-muted mb-3">
								Les données collectées sont utilisées pour :
							</p>
							<div class="row">
								<div class="col-md-6 mb-3">
									<div class="card h-100 border-0 shadow-sm">
										<div class="card-body">
											<h4 class="h6 mb-3">Gestion de votre compte</h4>
											<p class="small text-muted mb-0">
												Création et maintenance de votre compte utilisateur
											</p>
										</div>
									</div>
								</div>
								<div class="col-md-6 mb-3">
									<div class="card h-100 border-0 shadow-sm">
										<div class="card-body">
											<h4 class="h6 mb-3">Service client</h4>
											<p class="small text-muted mb-0">
												Assistance et support technique
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="mb-5">
							<h2 class="h4 text-primary mb-4">Protection des données</h2>
							<div class="alert alert-info">
								<i class="fas fa-info-circle me-2"></i>
								Nous mettons en œuvre des mesures de sécurité appropriées pour protéger vos données contre tout accès, modification, divulgation ou destruction non autorisés.
							</div>
						</div>

						<div class="mb-5">
							<h2 class="h4 text-primary mb-4">Vos droits</h2>
							<div class="row">
								<div class="col-md-4 mb-3">
									<div class="card border-0 shadow-sm h-100">
										<div class="card-body">
											<h5 class="h6 mb-3">Droit d'accès</h5>
											<p class="small text-muted mb-0">
												Vous pouvez accéder à vos données personnelles
											</p>
										</div>
									</div>
								</div>
								<div class="col-md-4 mb-3">
									<div class="card border-0 shadow-sm h-100">
										<div class="card-body">
											<h5 class="h6 mb-3">Droit de rectification</h5>
											<p class="small text-muted mb-0">
												Vous pouvez modifier vos données personnelles
											</p>
										</div>
									</div>
								</div>
								<div class="col-md-4 mb-3">
									<div class="card border-0 shadow-sm h-100">
										<div class="card-body">
											<h5 class="h6 mb-3">Droit à l'oubli</h5>
											<p class="small text-muted mb-0">
												Vous pouvez demander la suppression de vos données
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="border-top pt-4">
							<div class="d-flex align-items-center justify-content-between">
								<small class="text-muted">
									Dernière mise à jour :
									{{ "now"|date('d/m/Y') }}
								</small>
								<a href="{{ path('app_home') }}" class="btn btn-outline-primary">
									<i class="fas fa-arrow-left me-2"></i>Retour à l'accueil
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{% block stylesheets %}
	{{ parent() }}
		<style>
			.card {
				border-radius: 0.5rem;
			}
			.card-header {
				border-radius: 0.5rem 0.5rem 0 0;
			}
			.alert {
				border-radius: 0.5rem;
			}
			h2.h4 {
				position: relative;
				padding-bottom: 0.5rem;
			}
			h2.h4::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 50px;
				height: 2px;
				background-color: var(--bs-primary);
			}
		</style>
	{% endblock %}

{% endblock %}