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

	let { t }: { t: Bundle; locale?: Locale } = $props();
</script>

<section id="mission" class="section">
	<div class="container">
		<h2 class="section-title">
			<KineticText as="span" text={t.mission.section_title} />&#32;
			<span class="accent-text"
				><KineticText as="span" text={t.mission.section_title_accent} /></span
			>
		</h2>
		<p class="mission-text">{t.mission.paragraph_main}</p>
		<p class="mission-text mission-text--secondary">{t.mission.paragraph_secondary}</p>

		<div class="values-grid">
			{#each t.values as value (value.title)}
				<div class="value-card">
					<div class="value-icon">
						<svg class="icon" aria-hidden="true"
							><use href="/icons.svg#{pictoFor(value.icon)}" /></svg
						>
					</div>
					<h3>{value.title}</h3>
					<p>{value.description}</p>
				</div>
			{/each}
		</div>
	</div>
</section>

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

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

	.mission-text {
		font-size: 1.2rem;
		max-width: 800px;
		margin: 0 auto 3rem;
		line-height: 1.8;
	}

	.mission-text--secondary {
		font-size: 1.1rem;
	}

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

	.value-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 3px solid var(--or-oki);
		border-radius: var(--radius-md);
		padding: 2rem;
		transition:
			transform var(--dur-tanbou) var(--ease-ka),
			border-color var(--dur-tanbou) var(--ease-ka);
	}

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

	.value-icon {
		color: var(--or-oki);
		margin-bottom: 1rem;
	}

	.value-icon .icon {
		width: 2rem;
		height: 2rem;
	}

	.value-card h3 {
		color: var(--or-oki);
		margin-bottom: 0.5rem;
		font-size: 1.2rem;
	}
</style>
