<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="solutions" class="section">
	<div class="container">
		<h2 class="section-title">
			<KineticText as="span" text={t.publics.section_title} />{' '}
			<span class="accent-text"
				><KineticText as="span" text={t.publics.section_title_accent} /></span
			>
		</h2>
		<p class="section-subtitle">{t.publics.section_subtitle}</p>

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

					<div class="public-benefits">
						<h4>{t.publics.benefits_label}</h4>
						<ul>
							{#each item.benefits as benefit (benefit)}
								<li>{benefit}</li>
							{/each}
						</ul>
					</div>

					<a href="#contact" class="btn btn-solid public-cta">{item.cta} →</a>
				</div>
			{/each}
		</div>

		<div class="publics-footer">
			<p class="publics-footer-lead">{t.publics.footer_line1}</p>
			<p>{t.publics.footer_line2}</p>
		</div>
	</div>
</section>

<style>
	.section-title {
		text-align: center;
	}

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

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

	.publics-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
		margin-top: 3rem;
	}

	.public-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;
		transition:
			transform var(--dur-tanbou) var(--ease-ka),
			border-color var(--dur-tanbou) var(--ease-ka);
	}

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

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

	.public-icon .icon {
		width: 2.5rem;
		height: 2.5rem;
	}

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

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

	.public-benefits {
		background: var(--card-bg);
		border: var(--border-card);
		border-radius: var(--radius-sm);
		padding: 1.5rem;
		margin-bottom: 2rem;
		text-align: left;
	}

	.public-benefits h4 {
		color: var(--or-oki);
		margin-bottom: 1rem;
		font-size: 1.05rem;
	}

	.public-benefits ul {
		list-style: none;
	}

	.public-benefits li {
		margin-bottom: 0.5rem;
		padding-left: 0.5rem;
	}

	.public-benefits li::before {
		content: '✓';
		color: var(--vert-oki);
		margin-right: 0.35rem;
	}

	.public-cta {
		margin-top: auto;
	}

	.publics-footer {
		text-align: center;
		margin-top: 4rem;
		padding: 2.5rem;
		background: var(--card-bg);
		border: var(--border-card);
		border-radius: var(--radius-md);
	}

	.publics-footer-lead {
		font-size: 1.2rem;
		margin-bottom: 1rem;
		font-weight: 600;
	}

	.publics-footer p:last-child {
		opacity: 0.85;
	}

	@media (max-width: 768px) {
		.publics-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
