{% set bgColor = bgColor|default %}

{# Image Transform #}
{% set featureImageCrop = {
	mode: 'crop',
	width: 420,
	height: 560,
	quality: 100
} %}

{# Icons #}
{% set rightArrowIcon = craft.assets()
    .volume('icons')
    .title('Arrow Right Long Solid')
    .one()
%}

{# Case Studies Query #}
{% set caseStudies = craft.entries()
	.section('caseStudies')
	.all()
%}

<section class="inner-container-l bg-raisen-black pt-28 text-white" style="{{ bgColor ? "background-color: #{bgColor};" }}">
	<h1 class="font-poppins text-base mb-7 uppercase">Case Studies</h1>
	<a class="inline-block" href="{{ url('case-studies#case-studies-listing') }}">
		<h2 class="font-poppins group hover:text-spicy-mix text-4xl leading-14 mb-8 transition-all w-80">
			View our Case Studies
			{{ svg(rightArrowIcon)|attr({ class: "#{bgColor ? 'fill-white' : 'fill-phillipine-grey'} group-hover:fill-spicy-mix group-hover:translate-x-6 h-10 inline-block pl-7 transition-all" }) }}
		</h2>
	</a>
	<div class="case-studies-swiper overflow-x-hidden relative pb-20 xl:pb-40">
		<div class="swiper-wrapper">
			{% for case in caseStudies %}
				{% set image = case.previewImage.one() %}
				<div class="swiper-slide max-w-[420px] overflow-hidden">
					<a class="group" href="{{ url(case.url) }}">
						<img class="group-hover:scale-105 transition-all" src="{{ image.getUrl(featureImageCrop) }}" alt="{{ image.altText }}">
						<div class="absolute bg-transparent h-full group-hover:bg-semi-transparent-1 top-0 transition-all w-full"></div>
					</a>
				</div>
			{% endfor %}
		</div>

		{# Buttons #}
		{% set chevronRight = craft.assets()
			.volume('icons')
			.title('Chevron Right')
			.one()
		%}

		{% set chevronLeft = craft.assets()
			.volume('icons')
			.title('Chevron Left')
			.one()
		%}

		<div class="flex items-center space-x-4 absolute bottom-0 left-0 xl:bottom-20">
			<button class="case-study-swiper-prev swiper-button border-2 rounded-full transition-all {{ bgColor ? " bg-raisen-black border-raisen-black hover:bg-raisen-black-tint hover:border-raisen-black-tint" : " bg-phillipine-grey border-phillipine-grey hover:bg-[#a3a69e] hover:border-[#a3a69e]" }}">
				{{ svg(chevronLeft)|attr({ class: "fill-white" }) }}
			</button>
			<button class="case-study-swiper-next swiper-button border-2 rounded-full transition-all {{ bgColor ? " bg-raisen-black border-raisen-black hover:bg-raisen-black-tint hover:border-raisen-black-tint" : " bg-phillipine-grey border-phillipine-grey hover:bg-[#a3a69e] hover:border-[#a3a69e]" }}">
				{{ svg(chevronRight)|attr({ class: "fill-white" }) }}
			</button>
		</div>
	</div>
</section>