{#
	Block: scroll gallery
	------------------------------------------------------------------
	1) Image scale 0.2→1 + edge labels + stack-reveal (Haven)
	2) Chapters overlay (title left / body right) line-by-line
	3) Progress bar fills; texts exit up; next image + texts enter
	Galaxy particles behind (Wolverine-style).
#}

{% set stack_images = [
	'https://genesisnew/wp-content/uploads/2026/08/Rectangle-37.jpg',
	'https://genesisnew/wp-content/uploads/2026/08/RUN.jpg',
	'https://genesisnew/wp-content/uploads/2026/08/Rectangle-37.jpg',
	'https://genesisnew/wp-content/uploads/2026/08/RUN.jpg'
] %}

{% set chapters = [
	{
		title: 'Analyse',
		body: 'Pour une prise en charge globale pensée autour de chaque individu, les expertises physique, mentale et kinésithérapique se complètent afin d’agir sur chaque dimension de la performance. Chaque accompagnement s’appuie sur les données du bilan initial et évolue en fonction des besoins avec une approche coordonnée pour atteindre le plein potentiel de l’individu.',
		src: 'https://genesisnew/wp-content/uploads/2026/08/RUN.jpg',
		accordion: [
			{
				title: 'Capacités athlétiques',
				content: 'Une approche 360° de l’individu pour comprendre chaque dimension de sa performance. Nous croisons les données physiques, mentales et fonctionnelles pour établir un profil précis et personnalisé.'
			},
			{
				title: 'Bilan mental',
				content: 'Une lecture globale qui permet d’identifier les forces, les déficits et les leviers de progression.'
			},
			{
				title: 'Analyse kinésithérapique',
				content: 'L’objectif étant de transformer chaque donnée en action concrète au service de la performance.'
			}
		]
	},
	{
		title: 'Mise en application',
		body: 'Une approche 360° de l’individu pour comprendre chaque dimension de sa performance. Nous croisons les données physiques, mentales et fonctionnelles pour établir un profil précis et personnalisé. Une lecture globale qui permet d’identifier les forces, les déficits et les leviers de progression. L’objectif étant de transformer chaque donnée en action concrète au service de la performance.',
		src: 'https://genesisnew/wp-content/uploads/2026/08/Rectangle-37.jpg',
		accordion: [
			{
				title: 'Préparation physique',
				content: 'Pour une prise en charge globale pensée autour de chaque individu, les expertises physique, mentale et kinésithérapique se complètent afin d’agir sur chaque dimension de la performance.'
			},
			{
				title: 'Préparation mentale',
				content: 'Chaque accompagnement s’appuie sur les données du bilan initial et évolue en fonction des besoins avec une approche coordonnée pour atteindre le plein potentiel de l’individu.'
			},
			{
				title: 'Suivi kinésithérapique',
				content: 'Une approche coordonnée pour atteindre le plein potentiel de l’individu, en lien avec le bilan initial et l’évolution des besoins.'
			}
		]
	}
] %}

{% set galaxy_srcs = [
	'https://genesisnew/wp-content/uploads/2026/08/Rectangle-37.jpg',
	'https://genesisnew/wp-content/uploads/2026/08/RUN.jpg'
] %}

<section
	class="block-scroll-gallery no-space"
	data-theme-section="light"
	data-scroll-gallery-init
	data-text-top="NOS SERVICES"
	data-text-bottom="GENESIS"
>
	<div class="block-scroll-gallery__track" data-scroll-gallery-track>
		<div class="block-scroll-gallery__inner">
			{# Infinite image field behind the expanding hero + labels #}
			<div class="block-scroll-gallery__galaxy" aria-hidden="true" data-scroll-gallery-galaxy>
				<div class="block-scroll-gallery__galaxy-field" data-scroll-gallery-galaxy-field>
					{% for i in 0..11 %}
						<div class="block-scroll-gallery__galaxy-particle" data-scroll-gallery-particle>
							<img
								src="{{ galaxy_srcs[i % galaxy_srcs|length] }}"
								alt=""
								loading="lazy"
								decoding="async"
							>
						</div>
					{% endfor %}
				</div>
				<div class="block-scroll-gallery__galaxy-fade block-scroll-gallery__galaxy-fade--top"></div>
				<div class="block-scroll-gallery__galaxy-fade block-scroll-gallery__galaxy-fade--bottom"></div>
			</div>

			<div class="block-scroll-gallery__texts" aria-hidden="true">
				<div class="block-scroll-gallery__text block-scroll-gallery__text--top font-mono text-xxs" data-scroll-gallery-slot="top">
					<span>NOS SERVICES</span>
				</div>
				<div class="block-scroll-gallery__text block-scroll-gallery__text--bottom font-mono text-xxs" data-scroll-gallery-slot="bottom">
					<span>GENESIS</span>
				</div>
			</div>

			<div class="block-scroll-gallery__images" data-scroll-gallery-images>
				{# Haven stack — chained during scale #}
				{% for src in stack_images %}
					<div
						class="block-scroll-gallery__item"
						data-scroll-gallery-item
						data-scroll-gallery-stack
					>
						<img
							src="{{ src }}"
							alt=""
							loading="{{ loop.first ? 'eager' : 'lazy' }}"
							class="block-scroll-gallery__img"
						>
					</div>
				{% endfor %}

				{# Chapter visuals — stack on top during chapter phase #}
				{% for chapter in chapters %}
					<div
						class="block-scroll-gallery__item"
						data-scroll-gallery-item
						data-scroll-gallery-chapter-visual
					>
						<img
							src="{{ chapter.src }}"
							alt=""
							loading="lazy"
							class="block-scroll-gallery__img"
						>
					</div>
				{% endfor %}
			</div>

			<div class="block-scroll-gallery__shade" data-scroll-gallery-shade aria-hidden="true"></div>

			{# Chapter copy + progress — visible once image is near full-bleed #}
			<div class="block-scroll-gallery__chapters" data-scroll-gallery-chapters aria-hidden="true">
				{# Left titles sit above the progress rule #}
				<div class="block-scroll-gallery__chapters-above">
					{% for chapter in chapters %}
						<div
							class="block-scroll-gallery__chapter-above"
							data-scroll-gallery-chapter-above
							{% if not loop.first %}inert{% endif %}
						>
							<h3
								class="block-scroll-gallery__chapter-title font-mono text-xxs"
								data-scroll-gallery-chapter-title
							>
								{{ '%02d'|format(loop.index) }}
							</h3>
						</div>
					{% endfor %}
				</div>

				<div class="block-scroll-gallery__progress" aria-hidden="true">
					<div class="block-scroll-gallery__progress-track"></div>
					<div class="block-scroll-gallery__progress-fill" data-scroll-gallery-progress></div>
				</div>

				<div class="block-scroll-gallery__chapters-below">
					{% for chapter in chapters %}
						<article
							class="block-scroll-gallery__chapter"
							data-scroll-gallery-chapter
							{% if not loop.first %}inert{% endif %}
						>
							<p
								class="block-scroll-gallery__chapter-kicker font-title text-lg"
								data-scroll-gallery-chapter-kicker
							>
								{{ chapter.title|upper }}
							</p>

							<div class="block-scroll-gallery__chapter-right">
								<p
									class="block-scroll-gallery__chapter-body font-text text-sm"
									data-scroll-gallery-chapter-body
								>
									{{ chapter.body }}
								</p>

								{% if chapter.accordion|default([])|length %}
									<div
										data-accordion-close-siblings="true"
										data-accordion-css-init
										class="block-scroll-gallery__accordion accordion-css"
									>
										<ul class="accordion-css__list">
											{% for item in chapter.accordion %}
												<li data-accordion-status="not-active" class="accordion-css__item">
													<div data-hover data-accordion-toggle class="accordion-css__item-top">
														<h4 class="accordion-css__item-h3 font-mono text-xs">
															{{ item.title }}
														</h4>
														<div class="accordion-css__item-icon" aria-hidden="true">
															<svg class="accordion-css__item-icon-svg" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
																<path d="M3.9998 4.17217L0.549805 0.722168H7.4498L3.9998 4.17217Z" fill="currentColor"/>
															</svg>
														</div>
													</div>
													<div class="accordion-css__item-bottom">
														<div class="accordion-css__item-bottom-wrap">
															<div class="accordion-css__item-bottom-content">
																<p class="accordion-css__item-p font-mono text-xs">{{ item.content }}</p>
															</div>
														</div>
													</div>
												</li>
											{% endfor %}
										</ul>
									</div>
								{% endif %}
							</div>
						</article>
					{% endfor %}
				</div>
			</div>
		</div>

		<div class="block-scroll-gallery__spacer" aria-hidden="true" data-scroll-gallery-spacer></div>
	</div>
</section>
