Reviews Carousel

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-reviews-carousel {
	background-color: $navy;
	color: $white;
	overflow: hidden;

	.container {
		position: relative;
	}

	.e-carousel__navigation {
		position: absolute;
		top: rem-calc(20);
		right: rem-calc(20);
		z-index: 99;

		@include bp($lg) {
			top: rem-calc(24);
			right: rem-calc(40);
		}
	}

	&__percentage {
		@include fluid-type(100, 140);
		font-family: $font-family-heading;
		margin-top: 0;
		letter-spacing: -5px;

		@include bp($lg) {
			margin-top: rem-calc(40);
		}

		span {
			@include fluid-type(60, 70);
		}
	}

	&__copy {
		margin: rem-calc(0 20);

		p {
			@include fluid-type(20, 24);
			font-family: $font-family-heading;
		}
	}

	&__intro {
		color: $white;
		background-color: $navy;
		position: relative;
		z-index: 9;
		height: 100%;
		padding: rem-calc(40 20);

		@include bp($lg) {
			padding: rem-calc(80 50 80 0);
		}

		&:before {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 100%;
			background-color: $navy;
			width: rem-calc(1000);
			z-index: 9;
		}

		.heading {
			color: $white;
			margin-top: 0;

			@include bp($lg) {
				margin-top: rem-calc(75);
			}
		}
	}

	&__review {
		padding: rem-calc(40 20);

		@include bp($lg) {
			padding: rem-calc(80 50);
		}
	}

	&__review-title {
		@include fluid-type(24, 32);
		font-family: $font-family-heading;
		position: relative;

		&:before {
			content: '';
			width: rem-calc(60);
			height: rem-calc(60);
			background-image: url('#{$asset-path}/icons/icon-speechmark.svg');
			display: block;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			margin-bottom: rem-calc(16);
		}
	}

	&__review-stars {
		margin-top: rem-calc(24);
		display: flex;

		span {
			width: rem-calc(24);
			height: rem-calc(24);
			margin-right: rem-calc(10);
			background-image: url('#{$asset-path}/icons/icon-star.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	&__review-copy {
		margin-top: rem-calc(20);
	}

	&__review-name {
		text-transform: uppercase;
		font-size: rem-calc(12);
		font-weight: 700;
		letter-spacing: 1.5px;
		margin-top: rem-calc(30);
		position: relative;
		display: flex;
		align-items: center;

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(1);
			background-color: $white;
			margin-right: rem-calc(20);
		}
	}

	.swiper {
		overflow: visible;
	}

	.swiper-slide {
		height: auto;

		.block-reviews-carousel__review {
			height: 100%;
		}

		&:nth-of-type(3n - 2) {
			.block-reviews-carousel__review {
				background-color: $darkBlueGrey;
			}
		}

		&:nth-of-type(3n - 1) {
			.block-reviews-carousel__review {
				background-color: $blue;
			}
		}

		&:nth-of-type(3n) {
			.block-reviews-carousel__review {
				background-color: $blueGrey;
			}
		}
	}
}

class ReviewsCarousel {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-reviews-carousel');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const blockCarousel = block.querySelector(".swiper");
			const navNext = block.querySelector(".e-carousel__next");
			const navPrev = block.querySelector(".e-carousel__prev");

			const swiper = new Swiper(blockCarousel, {
				// loop: true,
				slidesPerView: 1,
				navigation: {
					nextEl: navNext,
					prevEl: navPrev,
				},
				// speed: 3000,
				breakpoints: {
					992: {
						slidesPerView: 1,
					},
					// 992: {
					// 	slidesPerView: 5,
					// }
				}
			});
		});
	}
}

new ReviewsCarousel();