o-k-i.net/src/lib/components/sections/Djangokam.svelte

<script lang="ts">
	// {@html} sur contenu first-party (JSON i18n du dépôt), aucune donnée utilisateur.
	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 { tilt } from '$lib/motion/tilt';
	import { pictoFor } from './pictos';

	import portrait from '$lib/assets/images/djangokam-portrait.webp?format=avif;webp&w=480;960&as=picture';
	import sheToldMe from '$lib/assets/images/djangokam-she-told-me.webp?format=avif;webp&w=320;640&as=picture';
	import iWantYouGirl from '$lib/assets/images/djangokam-i-want-you-girl.webp?format=avif;webp&w=320;640&as=picture';
	import ishMwenKute from '$lib/assets/images/djangokam-ish-mwen-kute.jpg?format=avif;webp;jpg&w=320;640&as=picture';

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

	const POCHETTES: Record<string, typeof portrait> = {
		'/assets/images/djangokam-she-told-me.webp': sheToldMe,
		'/assets/images/djangokam-i-want-you-girl.webp': iWantYouGirl,
		'/assets/images/djangokam-ish-mwen-kute.jpg': ishMwenKute
	};
</script>

<section id="djangokam" class="section">
	<div class="container">
		<p class="djangokam-surtitre">{t.djangokam.surtitre}</p>
		<FlagChip />
		<h2 class="section-title">
			<KineticText as="span" text={t.djangokam.titre} />&#32;
			<span class="accent-text"
				><KineticText as="span" text={t.djangokam.titreAccent} /></span
			>
		</h2>
		<p class="section-subtitle">{t.djangokam.accroche}</p>

		<div class="djangokam-portrait-wrap" use:reveal={0}>
			<ResponsiveImage
				picture={portrait}
				alt="Portrait officiel de DJANGOKAM"
				sizes="220px"
				class="djangokam-portrait"
			/>
		</div>

		<!-- Masque vertical : la citation monte depuis le bas (dur-phrase) -->
		<div class="djangokam-highlight-mask" use:reveal={1}>
			<blockquote class="djangokam-highlight">
				{t.djangokam.message_cle}
			</blockquote>
		</div>

		<div class="djangokam-histoire-wrapper">
			<div class="djangokam-histoire">
				{#each t.djangokam.histoire as paragraphe (paragraphe)}
					<p>{paragraphe}</p>
				{/each}
			</div>

			<figure class="djangokam-duo" use:reveal={1} use:tilt>
				<a href={t.djangokam.duo.url} target="_blank" rel="external noopener noreferrer">
					<ResponsiveImage
						picture={POCHETTES[t.djangokam.duo.image]}
						alt={t.djangokam.duo.alt}
						sizes="(max-width: 768px) 220px, 280px"
					/>
				</a>
				<figcaption>{t.djangokam.duo.legende}</figcaption>
			</figure>
		</div>

		<div class="djangokam-facts">
			{#each t.djangokam.faits as fait, i (fait.chiffre)}
				<div class="djangokam-fact-card" use:reveal={i}>
					<div class="djangokam-fact-icon reveal-pop" use:reveal={i + 1}>
						<svg class="icon" aria-hidden="true"
							><use href="/icons.svg#{pictoFor(fait.icon)}" /></svg
						>
					</div>
					<h3>{fait.chiffre}</h3>
					<!-- Contenu éditorial du bundle i18n (liens internes balisés). -->
					<p>{@html fait.texte}</p>
				</div>
			{/each}
		</div>

		<div class="djangokam-clips">
			{#each t.djangokam.clips as clip, i (clip.titre)}
				<figure class="djangokam-clip" use:reveal={i} use:tilt>
					<a href={clip.url} target="_blank" rel="external noopener noreferrer">
						<ResponsiveImage
							picture={POCHETTES[clip.image]}
							alt={clip.alt}
							sizes="(max-width: 768px) 220px, 280px"
						/>
					</a>
					<figcaption>{clip.titre}</figcaption>
				</figure>
			{/each}
		</div>

		<!-- Contenu éditorial du bundle i18n (liens internes balisés). -->
		<p class="djangokam-instrument">{@html t.djangokam.ia_instrument}</p>

		<div class="cta-buttons djangokam-buttons">
			{#each t.djangokam.boutons as bouton (bouton.url)}
				<a
					href={bouton.url}
					target="_blank"
					rel="external noopener noreferrer"
					class="btn"
					class:btn-solid={bouton.primary}
				>
					{bouton.text} →
				</a>
			{/each}
		</div>

		<p class="djangokam-presse">
			{t.djangokam.presse.texte}
			<a href="mailto:{t.djangokam.presse.email}">{t.djangokam.presse.email}</a>
		</p>
	</div>
</section>

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

	.djangokam-surtitre {
		text-transform: uppercase;
		letter-spacing: 0.15em;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--vert-oki);
		margin-bottom: 0.5rem;
	}

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

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

	:global(.djangokam-portrait) {
		width: 220px;
		height: 220px;
		object-fit: cover;
		border-radius: var(--radius-md);
		border: 3px solid var(--or-oki);
		margin: 1rem auto 2rem;
	}

	/* Wrapper-masque de la citation : reprend les marges du blockquote
	   (le masque doit rogner la translation, pas laisser les marges visibles) */
	.djangokam-highlight-mask {
		max-width: 800px;
		margin: 2rem auto;
		overflow: hidden;
	}

	.djangokam-highlight {
		padding: 2rem;
		text-align: left;
		font-size: 1.1rem;
		line-height: 1.8;
		background: var(--card-bg);
		border-left: 4px solid var(--or-oki);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
	}

	.djangokam-histoire-wrapper {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2.5rem;
		align-items: center;
		max-width: 1000px;
		margin: 0 auto 3rem;
	}

	.djangokam-histoire {
		text-align: left;
	}

	.djangokam-histoire p {
		font-size: 1.1rem;
		line-height: 1.8;
		margin-bottom: 1.5rem;
	}

	.djangokam-duo,
	.djangokam-clip {
		text-align: center;
	}

	.djangokam-duo a,
	.djangokam-clip a {
		color: inherit;
		display: inline-block;
		position: relative;
		transition: transform var(--dur-tanbou) var(--ease-ka);
	}

	/* Reflet or discret qui pivote avec le tilt (--ry hérité de la figure) */
	.djangokam-duo a::after,
	.djangokam-clip a::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: var(--radius-md);
		background: linear-gradient(
			calc(105deg + var(--ry, 0deg) * 4),
			transparent 35%,
			color-mix(in srgb, var(--or-oki) 70%, transparent) 50%,
			transparent 65%
		);
		opacity: 0;
		transition: opacity var(--dur-tanbou) var(--ease-ka);
		pointer-events: none;
	}

	.djangokam-duo a:hover::after,
	.djangokam-clip a:hover::after {
		opacity: 0.15;
	}

	.djangokam-duo a:hover,
	.djangokam-clip a:hover {
		transform: translateY(-4px);
	}

	.djangokam-duo :global(picture),
	.djangokam-clip :global(picture) {
		display: contents;
	}

	.djangokam-duo :global(img),
	.djangokam-clip :global(img) {
		width: 100%;
		max-width: 280px;
		border-radius: var(--radius-md);
		border: 2px solid var(--or-oki);
	}

	.djangokam-duo figcaption,
	.djangokam-clip figcaption {
		margin-top: 0.75rem;
		font-size: 0.9rem;
		opacity: 0.8;
	}

	.djangokam-duo:hover figcaption,
	.djangokam-clip:hover figcaption {
		opacity: 1;
		color: var(--or-oki);
	}

	.djangokam-clips {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 2.5rem;
		margin-bottom: 3rem;
	}

	.djangokam-facts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 1.5rem;
		margin-bottom: 3rem;
	}

	.djangokam-fact-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-left: 3px solid var(--vert-oki);
		border-radius: var(--radius-md);
		padding: 2rem;
		transition: transform var(--dur-tanbou) var(--ease-ka);
	}

	.djangokam-fact-card:nth-child(2n) {
		border-left-color: var(--rouge-oki);
	}

	.djangokam-fact-card:hover {
		transform: translateY(-4px);
	}

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

	.djangokam-fact-icon .icon {
		width: 2rem;
		height: 2rem;
	}

	.djangokam-fact-card h3 {
		color: var(--or-oki);
		margin-bottom: 0.5rem;
		font-size: 1.2rem;
	}

	.djangokam-instrument {
		max-width: 800px;
		margin: 0 auto 3rem;
		font-size: 1.1rem;
		line-height: 1.8;
		opacity: 0.85;
	}

	.djangokam-instrument :global(a),
	.djangokam-fact-card :global(a) {
		font-weight: 600;
	}

	.djangokam-instrument :global(a:hover),
	.djangokam-fact-card :global(a:hover) {
		text-decoration: underline;
	}

	.djangokam-buttons {
		display: flex;
		justify-content: center;
		gap: 1rem;
		flex-wrap: wrap;
		margin-bottom: 2rem;
	}

	.djangokam-presse {
		font-size: 0.9rem;
		opacity: 0.7;
	}

	.djangokam-presse a:hover {
		text-decoration: underline;
	}

	/* ── Chorégraphie d'entrée (même gate que le reveal global : html.js
	   + motion autorisée — sinon tout est visible sans transition) ── */
	@media (prefers-reduced-motion: no-preference) {
		/* Pochettes : wipe clip-path (masque DOM) + tilt 3D piloté par use:tilt.
		   La transformation de base du reveal est neutralisée : seul le
		   clip-path révèle, la perspective reste disponible en permanence. */
		:global(html.js) .djangokam-duo,
		:global(html.js) .djangokam-clip {
			opacity: 1;
			transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
			clip-path: inset(0 100% 0 0);
			transition:
				clip-path var(--dur-mesure) var(--ease-ka) var(--d, 0ms),
				transform var(--dur-tanbou) var(--ease-ka);
		}

		:global(html.js) .djangokam-duo:global(.in),
		:global(html.js) .djangokam-clip:global(.in) {
			clip-path: inset(0 0 0 0);
		}

		/* Blockquote lore : le masque ne bouge pas, la citation monte */
		:global(html.js) .djangokam-highlight-mask {
			opacity: 1;
			transform: none;
		}

		:global(html.js) .djangokam-highlight-mask .djangokam-highlight {
			transform: translateY(100%);
			transition: transform var(--dur-phrase) var(--ease-ka) var(--d, 0ms);
		}

		:global(html.js) .djangokam-highlight-mask:global(.in) .djangokam-highlight {
			transform: translateY(0);
		}
	}

	@media (max-width: 768px) {
		:global(.djangokam-portrait) {
			width: 160px;
			height: 160px;
		}

		.djangokam-histoire-wrapper {
			grid-template-columns: 1fr;
		}

		.djangokam-duo :global(img),
		.djangokam-clip :global(img) {
			max-width: 220px;
		}

		.djangokam-facts {
			grid-template-columns: 1fr;
		}

		.djangokam-buttons {
			flex-direction: column;
		}
	}
</style>