<script lang="ts">
	import FlagChip from '$lib/components/motion/FlagChip.svelte';
	import KineticText from '$lib/components/motion/KineticText.svelte';
	import ResponsiveImage from '$lib/components/ResponsiveImage.svelte';
	import type { Bundle, Locale } from '$lib/i18n';
	import { reveal } from '$lib/motion/reveal';

	import joukawouve from '$lib/assets/images/joukawouve.png?format=avif;webp;png&w=320;640&as=picture';
	import akv from '$lib/assets/images/akv.png?format=avif;webp;png&w=320;640&as=picture';
	import cyberMawonaj from '$lib/assets/images/cyber_mawonaj.jpg?format=avif;webp;jpg&w=320;640&as=picture';

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

	const LOGOS: Record<string, typeof joukawouve> = {
		'/assets/images/joukawouve.png': joukawouve,
		'/assets/images/akv.png': akv,
		'/assets/images/cyber_mawonaj.jpg': cyberMawonaj
	};
</script>

<section id="partenaires" class="section">
	<div class="container">
		<FlagChip />
		<h2 class="section-title">
			<KineticText as="span" text={t.partners.section_title} />&#32;
			<span class="accent-text"
				><KineticText as="span" text={t.partners.section_title_accent} /></span
			>
		</h2>
		<p class="section-subtitle">{t.partners.section_subtitle}</p>

		<div class="partners-grid">
			{#each t.partners.items as partner, i (partner.name)}
				<div class="partner-card" use:reveal={i}>
					<div class="partner-logo-container">
						<ResponsiveImage
							picture={LOGOS[partner.logo]}
							alt="Logo {partner.name}"
							sizes="130px"
							class="partner-logo"
						/>
					</div>
					<h3>{partner.name}</h3>
					<p class="partner-description">{partner.description}</p>
					<div class="partner-links">
						{#each partner.links as link (link.url)}
							<a href={link.url} target="_blank" rel="external noopener noreferrer" class="partner-link">
								{link.text} →
							</a>
						{/each}
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>

<style>
	section {
		background: var(--noir-profond);
	}

	.section-title {
		text-align: center;
	}

	.accent-text {
		color: var(--or-oki);
	}

	.section-subtitle {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.partners-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
		margin-top: 3rem;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	.partner-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 4px solid var(--turquoise-caraibes);
		border-radius: var(--radius-md);
		padding: 2.5rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition:
			transform var(--dur-tanbou) var(--ease-ka),
			border-color var(--dur-tanbou) var(--ease-ka);
	}

	.partner-card:hover {
		transform: translateY(-4px);
		border-top-color: var(--or-oki);
	}

	.partner-logo-container {
		width: 130px;
		height: 130px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5rem;
		background: color-mix(in srgb, var(--blanc-creme) 4%, transparent);
		border-radius: var(--radius-md);
		padding: 1rem;
	}

	.partner-logo-container :global(picture) {
		display: contents;
	}

	.partner-logo-container :global(.partner-logo) {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.partner-card h3 {
		color: var(--or-oki);
		margin-bottom: 1rem;
		font-size: 1.3rem;
	}

	.partner-description {
		line-height: 1.6;
		margin-bottom: 1.5rem;
		flex-grow: 1;
	}

	.partner-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.6rem;
	}

	.partner-link {
		color: var(--or-oki);
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.95rem;
		padding: 0.4rem 0.9rem;
		border: 1px solid var(--or-oki);
		border-radius: var(--radius-sm);
		transition:
			background var(--dur-tanbou) var(--ease-ka),
			gap var(--dur-tanbou) var(--ease-ka);
	}

	.partner-link:hover {
		background: color-mix(in srgb, var(--or-oki) 12%, transparent);
		gap: 0.6rem;
	}
</style>
