"use client";

import React from "react";

export default function CookiesPolicyPage() {
	return (
		<div className='cookies-wrapper'>
			<style jsx>{`
				.cookies-wrapper {
					background-color: #f5f7fa;
					min-height: 100vh;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					padding: 60px 20px;
					font-family: "Inter", Arial, sans-serif;
					color: #333;
				}

				.cookies-container {
					background: #fff;
					max-width: 900px;
					width: 100%;
					padding: 50px 60px;
					border-radius: 16px;
					box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
				}

				.cookies-title {
					font-size: 2.4rem;
					font-weight: 700;
					color: #111;
					margin-bottom: 10px;
				}

				.cookies-meta {
					color: #666;
					font-size: 0.95rem;
					margin-bottom: 40px;
				}

				h2 {
					font-size: 1.4rem;
					color: #111;
					margin-top: 40px;
					margin-bottom: 12px;
				}

				h3 {
					font-size: 1.1rem;
					color: #222;
					margin-top: 25px;
					margin-bottom: 10px;
				}

				p {
					line-height: 1.7;
					margin-bottom: 16px;
				}

				ul {
					list-style: disc;
					margin-left: 25px;
					margin-bottom: 16px;
				}

				a {
					color: #0077cc;
					text-decoration: none;
				}

				a:hover {
					text-decoration: underline;
				}

				.cookies-button {
					display: inline-block;
					padding: 10px 30px;
					background: #f8f9fa;
					color: #555;
					border: 1px solid #ccc;
					border-radius: 6px;
					cursor: pointer;
					transition: all 0.2s ease;
				}

				.cookies-button:hover {
					background: #e9ecef;
					color: #000;
				}

				.table-wrapper {
					width: 100%;
					overflow-x: auto;
					margin-bottom: 25px;
				}

				table {
					width: 100%;
					border-collapse: collapse;
					font-size: 0.95rem;
				}

				th,
				td {
					padding: 12px 10px;
					text-align: left;
					border-bottom: 1px solid #e5e5e5;
				}

				th {
					background-color: #f2f2f2;
					color: #111;
					font-weight: 600;
				}

				td {
					color: #444;
				}

				.cookies-footer {
					margin-top: 40px;
					font-size: 0.9rem;
					color: #777;
					text-align: center;
				}

				@media (max-width: 768px) {
					.cookies-container {
						padding: 30px 20px;
					}

					.cookies-title {
						font-size: 2rem;
					}

					table {
						font-size: 0.85rem;
					}
				}
			`}</style>
			<div className='cookies-container'>
				<h1 className='cookies-title'>Politique en matière de cookies</h1>
				<p className='cookies-meta'>
					Date d'entrée en vigueur : <strong>21 octobre 2025</strong> <br />
					Dernière mise à jour : <strong>21 octobre 2025</strong>
				</p>

				<h2>Que sont les cookies ?</h2>
				<p>
					La présente Politique en matière de cookies explique ce que sont les cookies, comment nous
					les utilisons, les types de cookies que nous utilisons et comment vous pouvez gérer vos
					paramètres de cookies.
				</p>
				<p>
					Les cookies sont de petits fichiers texte utilisés pour stocker de petites quantités
					d'informations. Ils sont enregistrés sur votre appareil lorsqu'un site web se charge dans
					votre navigateur. Ils contribuent au bon fonctionnement du site, améliorent la sécurité et
					offrent une meilleure expérience de navigation.
				</p>

				<h2>Comment utilisons-nous les cookies ?</h2>
				<p>
					Comme la plupart des sites web, nous utilisons des cookies propres et des cookies tiers à
					diverses fins. Les cookies propres sont nécessaires au bon fonctionnement du site, tandis que
					les cookies tiers nous aident à analyser le trafic, à proposer des publicités pertinentes et
					à améliorer l'expérience des utilisateurs.
				</p>

				<h2>Types de cookies que nous utilisons</h2>

				<h3>Nécessaires</h3>
				<p>
					Les cookies nécessaires permettent les fonctionnalités de base du site, telles que la
					connexion sécurisée ou l'enregistrement des préférences. Ils ne collectent pas de données
					personnelles.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Durée</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>cookie_consent</td>
								<td>1 an</td>
								<td>Cookie utilisé pour enregistrer les préférences de consentement.</td>
							</tr>
						</tbody>
					</table>
				</div>

				<p>
					Le site utilise exclusivement le cookie cookie_consent, destiné à mémoriser les préférences
					exprimées par les visiteurs. Aucun cookie d'analyse, de marketing ou de profilage n'est
					utilisé. La durée de stockage des cookies est de 12 mois (1 an) et les préférences peuvent
					être modifiées depuis la bannière de consentement.
				</p>

				<h3>Fonctionnels</h3>
				<p>
					Les cookies fonctionnels permettent d'activer des fonctionnalités supplémentaires telles que
					le partage sur les réseaux sociaux ou la collecte de commentaires.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Durée</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Analytiques</h3>
				<p>
					Les cookies analytiques nous aident à comprendre comment les utilisateurs interagissent avec
					le site en collectant des informations anonymes sur le trafic et les performances.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Durée</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Non catégorisés</h3>
				<p>
					Les cookies non catégorisés sont ceux qui sont en cours d'analyse et n'ont pas encore été
					classés dans une catégorie spécifique.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Durée</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<ul>
					<li>
						Chrome :{" "}
						<a
							href='https://support.google.com/accounts/answer/32050'
							target='_blank'
							rel='noreferrer'>
							Assistance Google
						</a>
					</li>
					<li>
						Safari :{" "}
						<a
							href='https://support.apple.com/en-in/guide/safari/sfri11471/mac'
							target='_blank'
							rel='noreferrer'>
							Assistance Apple
						</a>
					</li>
					<li>
						Firefox :{" "}
						<a
							href='https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox'
							target='_blank'
							rel='noreferrer'>
							Assistance Mozilla
						</a>
					</li>
					<li>
						Internet Explorer :{" "}
						<a
							href='https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc'
							target='_blank'
							rel='noreferrer'>
							Assistance Microsoft
						</a>
					</li>
				</ul>
			</div>
		</div>
	);
}