{% extends 'layouts/base' %}

{% block content %}
	{% import 'macros' as macros %}

	{% if entry.homeFeaturesPanels.all() %}
		<section data-aos="fade-up" class="container flex flex-cols gap-12 py-16 md:flex-rows md:justify-between md:gap-16 lg:gap-48 lg:py-20 xl:gap-52 xl:py-24 aos-init aos-animate" id="statistic">
			{% for item in entry.homeFeaturesPanels.all() %}
				<div>
					<div class="grid w-48 mx-auto rounded-full aspect-[1/1] place-items-center bg-imperial">
						{% if item.icon %}
							{{ svg(item.icon.path)|attr({ class: 'w-1/2 childFull' }) }}
						{% endif %}
					</div>
					<p class="mt-6 text-center heading-1 statistic">{{item.numeric}}</p>
					<p class="mt-4 text-center uppercase copy">{{item.featureHeading}}
					</p>
				</div>
			{% endfor %}
		</section>
	{% endif %}


	{% include "blocks/homepage/feature" %}

	{% include "blocks/homepage/services" %}

	{% include "blocks/homepage/process" %}

	{% include "blocks/homepage/cta" %}

	{% include "blocks/global/enquireNow" %}
	<script>

		var statsSection = $("#statistic");
var options = {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: "."
};

// Find all Statistics on page, put them inside a variable
var statistics = $(".statistic");

// For each Statistic we find, animate it
statistics.each(function (index) { // Find the value we want to animate (what lives inside the p tags)
var value = $(statistics[index]).html();
// Start animating
var statisticAnimation = new CountUp(statistics[index], 0, value, 0, 4, options);

$(window).scroll(() => {
if ($(window).scrollTop() >= statistics.offset().top * 0.25) {
statisticAnimation.start();
}
})
});
	</script>
{% endblock %}