{% import "macros/images" as imageMacros %}
{% import 'macros' as macros %}

<section class="container py-16 lg:py-20 xl:py-24">
    <h1 class="heading-0 text-blue aos-init aos-animate" data-aos="fade-up"> {{entry.homeProcessHeading| nl2br}}</h1>
    <div class="flex flex-col items-start gap-4 mt-6 lg:flex-row lg:items-start lg:justify-between lg:gap-24 xl:mt-12 aos-init aos-animate" data-aos="fade-up">
        <div class="w-full max-w-3xl copy-lg"> {{ entry.homeProcessDescription }}</div>
    </div>
	<div class="grid grid-cols-4 mb-12 mt-12 lg:mb-16">
		{% for slide in entry.homeOurProcess.all() %}
				<button class="accordion-btn heading-4 border-b-2 py-12 px-3 text-center text-imperial {{ loop.index == 1 ? "active" : "" }}" data-index="{{ loop.index }}">
					{{ loop.index < 10 ? "0" ~ loop.index : loop.index }}&nbsp;
					<span class="hidden md:inline-block">
						{{ slide.heading }}
					</span>
				</button>
		{% endfor %}
	</div>
	<!-- Desktop Layout -->
	<div class="hidden lg:block">
		{% for slide in entry.homeOurProcess.all() %}
			<article class="accordion-body hidden gap-12 lg:grid-cols-2 lg:gap-16 xl:gap-24 {{ loop.index == 1 ? "active" : "" }}" data-index="{{ loop.index }}">
				<div class="richtext">
					{{ slide.body }}
				</div>
				{{ imageMacros.imagerSrcset(
					slide.image[0],
					'card',
					{ classes: "aspect-video w-full object-cover object-center lg:aspect-[5/6] childFull", isBackground: false })
				}}
			</article>
		{% endfor %}
	</div>
	<!-- Mobile Layout -->
	<div class="lg:hidden">
		{% for slide in entry.homeOurProcess.all() %}
			<article class="accordion-body hidden gap-12 lg:grid-cols-2 lg:gap-16 xl:gap-24 {{ loop.index == 1 ? "active" : "" }}" data-index="{{ loop.index }}">
				<h2 class="heading-3 text-imperial">{{ slide.heading }}</h2>
				{{ imageMacros.imagerSrcset(
					slide.image[0],
					'card',
					{ classes: "aspect-video w-full object-cover object-center lg:aspect-[5/6] childFull", isBackground: false })
				}}
				<div class="richtext">
					{{ slide.body }}
				</div>
			</article>
		{% endfor %}
	</div>
</section>

<script>
	const accordions = document.querySelectorAll(".accordion-body");
	const accordionBtns = document.querySelectorAll(".accordion-btn");

	function showAccordion(index) {
		accordions.forEach((accordion) => {
			if (accordion.dataset.index === index) {
				accordion.classList.add("active");
			} else {
				accordion.classList.remove("active");
			}
		});

		accordionBtns.forEach((button) => {
			console.log("Start");
			if (button.dataset.index === index) {
				button.classList.add("active");
			} else {
				button.classList.remove("active");
			}
		});
	}

	accordionBtns.forEach((button) => {
		const index = button.dataset.index;

		button.addEventListener("click", () => {
			showAccordion(index);
		})
	})
</script>