---
// Privacy notice that can be dismissed and remembers the user's choice
---

<div id="privacy-notice" class="privacy-notice" role="region" aria-label="Privacy notice">
	<p>
		We use <a href="https://umami.is" target="_blank" rel="noopener noreferrer">Umami</a> and <a href="https://statcounter.com" target="_blank" rel="noopener noreferrer">Statcounter</a> for site analytics. More information can be found in our <a href="/privacy">Privacy Policy</a>.
	</p>
	<button id="privacy-close" class="privacy-close" aria-label="Close privacy notice"><i class="fa-regular fa-x"></i></button>
</div>

<script is:inline>
	const privacyNotice = document.getElementById('privacy-notice');
	const privacyClose = document.getElementById('privacy-close');

	if (privacyNotice && privacyClose) {
		const privacyDismissedKey = 'privacy_notice_dismissed';

		if (localStorage.getItem(privacyDismissedKey)) {
			privacyNotice.classList.add('hidden');
		}

		privacyClose.addEventListener('click', () => {
			privacyNotice.classList.add('hidden');
			localStorage.setItem(privacyDismissedKey, 'true');
		});
	}
</script>

<style>
	.privacy-notice {
		background-color: var(--bg-raised);
		border-bottom: 1px solid var(--border);
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		font-size: 0.9rem;
		transition: all 0.3s ease;
	}

	.privacy-notice.hidden {
		display: none;
	}

	.privacy-notice p {
		margin: 0;
		flex: 1;
	}

	.privacy-notice a {
		color: var(--accent);
		text-decoration: none;
	}

	.privacy-notice a:hover {
		text-decoration: underline;
	}

	.privacy-close {
		background: none;
		border: none;
		color: var(--text);
		font-size: 1.2rem;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
		transition: color 0.2s;
	}

	.privacy-close:hover {
		color: var(--accent);
	}

	@media (max-width: 600px) {
		.privacy-notice {
			flex-direction: column;
			align-items: flex-start;
		}

		.privacy-close {
			align-self: flex-end;
			margin-top: -1rem;
		}
	}
</style>