{% set products = mb.products ? mb.products.all() : [] %}

<section
	class="relative bg-light overflow-x-hidden" data-section="services">
	<!-- decorative blur layer -->
	<div class="absolute left-0 right-0 inset-y-0 z-10 pointer-events-none max-lg:hidden">
		<div class="progressive-blur-container">
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="blur-filter"></div>
			<div class="bg-gradient-to-l from-transparent to-light absolute inset-0"></div>
		</div>
	</div>

	<div class="container relative z-20 pt-48 pb-[330px] max-lg:pb-12 max-lg:pt-16 pointer-events-none">
		<div class="relative max-w-3xl">
			<div class="relative pointer-events-auto">
				<h4 class="text-stone-500">{{ mb.subtitle }}</h4>
				<div class="mt-2 max-w-xl max-lg:text-3xl">
					<img src="/assets/images/la_biosthetique_logo-black.svg" class="h-[92px]"/>
				</div>
				<div class="mt-8 pl-12 max-lg:pl-0">
					<div class="max-w-prose text-stone-700">{{ mb.body|raw }}</div>
					<div class="mt-12">
						<a href="{{ mb.buttonUrl }}" class="btn btn-secondary | mt-16 inline-block">
							{{ mb.buttonText }}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	{% if products|length %}
		<!-- carousel container raised above decorative layer on desktop, full-bleed on mobile -->
		<div
			class="container absolute left-1/2 inset-y-0 right-0 py-24 max-lg:static max-lg:w-screen max-lg:-mx-[calc(50vw-50%)] max-lg:py-8">
			<!-- Embla viewport: must clip & allow vertical page scroll -->
			<div
				data-embla-viewport class="h-full overflow-visible touch-pan-y select-none">
				<!-- Embla track with gap-based spacing (more robust than slide margins) -->
				<div data-embla-track class="flex h-full pl-0 pr-12 gap-12 max-lg:px-6 max-lg:gap-6">
					{% for prod in products %}
						{% set img = prod.image.one() %}
						{% if img %}
							<div data-embla-slide class="shrink-0 basis-[calc((100%-(2*3rem))/3)] max-lg:basis-[80%]">
								<a href="{{ prod.buttonUrl }}" class="aspect-[3/4] w-full">
									<img class="block h-full w-full rounded-lg object-cover pointer-events-none select-none" src="{{ img.getUrl({ width: 1200, height: 1600, mode: 'crop', quality: 82 }) }}" alt="{{ prod.title ?? ('Gallery image ' ~ loop.index) }}" loading="lazy" decoding="async" draggable="false">
								</a>
							</div>
						{% endif %}
					{% endfor %}

					<!-- Optional ghosts for visual alignment only (not slides) -->
					<div data-embla-slide aria-hidden="true" class="pointer-events-none shrink-0 basis-[calc((100%-(2*3rem))/3)]"></div>
					<div data-embla-slide aria-hidden="true" class="pointer-events-none shrink-0 basis-[calc((100%-(2*3rem))/3)]"></div>
				</div>
			</div>
		</div>
	{% endif %}
</section>

<style>
	/* tiny safety for legacy/edge cases */
	[data-embla-viewport] {
		-ms-touch-action: pan-y;
		touch-action    : pan-y;
	}
</style>
