<script lang="ts">
	import BrandIcon from '$lib/components/icons/BrandIcon.svelte';
	import type { Bundle, Locale } from '$lib/i18n';

	let { t, locale }: { t: Bundle; locale: Locale } = $props();

	const year = new Date().getFullYear();
	const legalHref = $derived(locale === 'en' ? '/en/legal-notice/' : '/mentions-legales/');
</script>

<footer>
	<div class="flag-bar" aria-hidden="true"></div>
	<div class="footer-content container">
		<p class="footer-name">{t.site.name}</p>
		<p class="footer-meta">© {year} {t.site.name} | {t.site.tagline}</p>
		<p class="footer-legal">
			<a href={legalHref}>{t.footer.legal_link}</a>
		</p>
		<div class="footer-socials">
			<a href="mailto:kontak@o-k-i.net" title="Email" class="social-link" aria-label="Email">
				<BrandIcon name="email" />
			</a>
			<a
				href="https://wa.me/262692229740"
				target="_blank"
				rel="noopener noreferrer"
				title="WhatsApp"
				class="social-link"
				aria-label="WhatsApp"
			>
				<BrandIcon name="whatsapp" />
			</a>
			<a
				href="https://discord.gg/DPvUCA8dD"
				target="_blank"
				rel="noopener noreferrer"
				title="Discord"
				class="social-link"
				aria-label="Discord"
			>
				<BrandIcon name="discord" />
			</a>
			<a
				href="https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/o-k-i.net"
				target="_blank"
				rel="noopener noreferrer"
				title="Code source sur Labola (Gitea)"
				class="social-link"
				aria-label="Code source sur Labola (Gitea)"
			>
				<BrandIcon name="gitea" />
			</a>
		</div>
	</div>
</footer>

<style>
	footer {
		background: var(--noir-profond);
		border-top: 1px solid var(--line);
	}

	.footer-content {
		padding: var(--space-4) var(--space-4);
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		align-items: center;
	}

	.footer-name {
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.01em;
		color: var(--or-oki);
	}

	.footer-meta {
		color: var(--muted);
		font-size: 0.9rem;
	}

	.footer-legal a {
		font-size: 0.9rem;
	}

	.footer-socials {
		display: flex;
		gap: var(--space-2);
		margin-top: var(--space-1);
	}

	.social-link {
		color: var(--muted);
		display: inline-flex;
		transition: color var(--dur-tanbou) var(--ease-ka), transform var(--dur-tanbou) var(--ease-ka);
	}

	.social-link:hover {
		color: var(--or-oki);
		transform: translateY(-2px);
	}

	.social-link :global(svg) {
		width: 1.4rem;
		height: 1.4rem;
	}
</style>
