"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-Richtlinie</h1>
				<p className='cookies-meta'>
					Datum des Inkrafttretens: <strong>21. Oktober 2025</strong> <br />
					Zuletzt aktualisiert: <strong>21. Oktober 2025</strong>
				</p>

				<h2>Was sind Cookies?</h2>
				<p>
					Diese Cookie-Richtlinie erläutert, was Cookies sind, wie wir sie verwenden, welche Arten von
					Cookies wir nutzen und wie Sie Ihre Cookie-Einstellungen verwalten können.
				</p>
				<p>
					Cookies sind kleine Textdateien, die dazu dienen, geringe Mengen an Informationen zu
					speichern. Sie werden auf Ihrem Gerät gespeichert, wenn eine Website in Ihrem Browser geladen
					wird. Sie tragen zum ordnungsgemäßen Funktionieren der Website bei, verbessern die Sicherheit
					und bieten ein besseres Surferlebnis.
				</p>

				<h2>Wie verwenden wir Cookies?</h2>
				<p>
					Wie die meisten Websites verwenden wir eigene Cookies und Drittanbieter-Cookies für
					verschiedene Zwecke. Eigene Cookies sind für das ordnungsgemäße Funktionieren der Website
					erforderlich, während Drittanbieter-Cookies uns helfen, den Datenverkehr zu analysieren,
					relevante Werbung zu schalten und das Nutzererlebnis zu verbessern.
				</p>

				<h2>Arten von Cookies, die wir verwenden</h2>

				<h3>Notwendig</h3>
				<p>
					Notwendige Cookies ermöglichen grundlegende Funktionen der Website, wie sichere Anmeldung
					oder das Speichern von Einstellungen. Sie erheben keine personenbezogenen Daten.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Dauer</th>
								<th>Beschreibung</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>cookie_consent</td>
								<td>1 Jahr</td>
								<td>Cookie zur Speicherung der Einwilligungspräferenzen.</td>
							</tr>
						</tbody>
					</table>
				</div>

				<p>
					Die Website verwendet ausschließlich das Cookie cookie_consent, das dazu dient, die von den
					Besuchern ausgedrückten Präferenzen zu speichern. Es werden keine Analyse-, Marketing- oder
					Profilierungs-Cookies verwendet. Die Speicherdauer der Cookies beträgt 12 Monate (1 Jahr);
					die Einstellungen können über das Einwilligungsbanner geändert werden.
				</p>

				<h3>Funktional</h3>
				<p>
					Funktionale Cookies helfen dabei, zusätzliche Funktionen zu aktivieren, wie das Teilen in
					sozialen Netzwerken oder das Erfassen von Feedback.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Dauer</th>
								<th>Beschreibung</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Analytisch</h3>
				<p>
					Analytische Cookies helfen uns zu verstehen, wie Nutzer mit der Website interagieren, indem
					sie anonyme Informationen über Datenverkehr und Leistung sammeln.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Dauer</th>
								<th>Beschreibung</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>

				<h3>Nicht kategorisiert</h3>
				<p>
					Nicht kategorisierte Cookies sind solche, die noch analysiert werden und noch nicht in eine
					bestimmte Kategorie eingeordnet wurden.
				</p>
				<div className='table-wrapper'>
					<table>
						<thead>
							<tr>
								<th>Cookie</th>
								<th>Dauer</th>
								<th>Beschreibung</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>
	);
}