{#
	Block: app tabs (scroll)
	------------------------------------------------------------------
	Osmo Tab System adapted: pin + scrub (no click / no autoplay).
	`data-tabs*` attributes must not be renamed.
#}
{% import 'macros.twig' as macros %}

{% set steps = [
	{
		title: 'Suis tes séances et ta progression au même endroit.',
		text_a: 'Tes séances, tes statistiques et les retours de ton coach sont réunis au même endroit pour t’aider à révéler ton plein potentiel. Retrouve ton parcours et garde une vision claire de ton évolution au fil des séances.',
		text_b: 'Un espace pensé pour suivre tes progrès, mieux comprendre ta progression et adapter ton travail en fonction de tes besoins. Tout ton parcours Genesis, au même endroit.',
		src: 'https://genesisnew/wp-content/uploads/2026/08/iPhone-7.png'
	},
	{
		title: 'Échange avec ton coach et ajuste ton plan en temps réel.',
		text_a: 'Les feedbacks, les objectifs et les priorités de ta semaine sont centralisés pour garder le fil. Tu sais quoi travailler, pourquoi, et comment mesurer l’impact.',
		text_b: 'Un dialogue clair entre toi et ton staff, pour transformer chaque séance en avancée mesurable. Moins de doute, plus d’exécution.',
		src: 'https://genesisnew/wp-content/uploads/2026/08/iPhone-7.png'
	},
	{
		title: 'Visualise ton évolution séance après séance.',
		text_a: 'Charge, sensations, régularité et points techniques : tout est lisible d’un coup d’œil. Tu construis une mémoire de progression utile, pas juste une pile de stats.',
		text_b: 'L’app te sert de boussole : tu restes aligné avec ton plan, ton coach, et ton niveau réel — match après match.',
		src: 'https://genesisnew/wp-content/uploads/2026/08/iPhone-7.png'
	}
] %}

<section class="block-app-tabs no-space" data-theme-section="light">
	<div class="block-app-tabs__intro">
		<h2 class="block-app-tabs__heading font-title text-xl" js-reveal="line">
			{{ __('Un nouvel espace pour suivre et développer ton potentiel', 'genesis') }}
		</h2>
		<div class="block-app-tabs__stores">
			{{ macros.button_043(__('iOS', 'genesis'), options.app_card_ios_url|default('#'), {
				classes: 'block-app-tabs__store font-mono text-xxs',
				icon: 'apple',
				aria_label: __('Télécharger sur iOS', 'genesis'),
				target: options.app_card_ios_url ? '_blank' : false
			}) }}
			{{ macros.button_043(__('Android', 'genesis'), options.app_card_android_url|default('#'), {
				classes: 'block-app-tabs__store font-mono text-xxs',
				icon: 'android',
				aria_label: __('Télécharger sur Android', 'genesis'),
				target: options.app_card_android_url ? '_blank' : false
			}) }}
		</div>
	</div>

	<div class="block-app-tabs__mask" data-tabs-pin>
		<div data-tabs="wrapper" class="block-app-tabs__layout">
			{# Left — titles #}
			<div class="block-app-tabs__left" role="tablist">
				{% for step in steps %}
					<div
						role="tab"
						data-tabs="content-item"
						class="block-app-tabs__title-item text-md{% if loop.first %} active{% endif %}"
						aria-selected="{{ loop.first ? 'true' : 'false' }}"
					>
						<div class="block-app-tabs__rail" aria-hidden="true">
							<span class="block-app-tabs__rail-track"></span>
							<span data-tabs="item-progress" class="block-app-tabs__rail-fill"></span>
						</div>
						<div class="block-app-tabs__title-main">
							<p class="block-app-tabs__title font-mono">{{ step.title }}</p>
						</div>
						<div data-tabs="item-details" class="block-app-tabs__item-details">
							<div class="block-app-tabs__item-details-inner"></div>
						</div>
					</div>
				{% endfor %}
			</div>

			{# Center — phone visuals #}
			<div class="block-app-tabs__visual" aria-live="polite" role="region">
				{% for step in steps %}
					<div
						id="app-tab-{{ loop.index }}"
						data-tabs="visual-item"
						role="tabpanel"
						class="block-app-tabs__phone{% if loop.first %} active{% endif %}"
					>
						<div class="block-app-tabs__phone-inner">
							<img
								src="{{ step.src }}"
								alt=""
								loading="{{ loop.first ? 'eager' : 'lazy' }}"
								class="block-app-tabs__phone-img"
							>
						</div>
					</div>
				{% endfor %}
			</div>

			{# Right — copy per step #}
			<div class="block-app-tabs__right">
				{% for step in steps %}
					<div
						data-tabs="right-item"
						class="block-app-tabs__copy{% if loop.first %} is-active{% endif %}"
					>
						<p class="block-app-tabs__copy-p font-mono text-xxs">{{ step.text_a }}</p>
						<p class="block-app-tabs__copy-p font-mono text-xxs">{{ step.text_b }}</p>
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
</section>
