"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'>Cookie Policy</h1>
				<p className='cookies-meta'>
					Effective date: <strong>21 October 2025</strong> <br />
					Last updated: <strong>21 October 2025</strong>
				</p>

				<h2>What are cookies?</h2>
				<p>
					This Cookie Policy explains what cookies are, how we use them, the types of cookies we use,
					and how you can manage your cookie settings.
				</p>
				<p>
					Cookies are small text files used to store small amounts of information. They are saved on
					your device when a website loads in your browser. They help the website function correctly,
					improve security, and provide a better browsing experience.
				</p>

				<h2>How do we use cookies?</h2>
				<p>
					Like most websites, we use first-party and third-party cookies for various purposes.
					First-party cookies are necessary for the website to function correctly, while third-party
					cookies help us analyse traffic, provide relevant advertisements, and improve the user
					experience.
				</p>

				<h2>Types of cookies we use</h2>

				<h3>Necessary</h3>
				<p>
					Necessary cookies enable the basic functionality of the website, such as secure login or
					saving preferences. They do not collect personal data.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Duration</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>cookie_consent</td>
								<td>1 year</td>
								<td>Cookie used to save consent preferences.</td>
							</tr>
						</tbody>
					</table>
				</div>

				<p>
					The website uses exclusively the cookie_consent cookie, used to remember the preferences
					expressed by visitors. No analytics, marketing, or profiling cookies are used. The cookie
					storage duration is 12 months (1 year), and preferences can be changed from the consent
					banner.
				</p>

				<h3>Functional</h3>
				<p>
					Functional cookies help enable additional features such as sharing on social networks or
					collecting feedback.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Duration</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Analytics</h3>
				<p>
					Analytics cookies help us understand how users interact with the website, collecting
					anonymous information about traffic and performance.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Duration</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Uncategorised</h3>
				<p>
					Uncategorised cookies are those that are being analysed and have not yet been classified into
					a specific category.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Duration</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'>
							Google support
						</a>
					</li>
					<li>
						Safari:{" "}
						<a
							href='https://support.apple.com/en-in/guide/safari/sfri11471/mac'
							target='_blank'
							rel='noreferrer'>
							Apple support
						</a>
					</li>
					<li>
						Firefox:{" "}
						<a
							href='https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox'
							target='_blank'
							rel='noreferrer'>
							Mozilla support
						</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'>
							Microsoft support
						</a>
					</li>
				</ul>
			</div>
		</div>
	);
}