@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-hero-insights {
	position: relative;
	background: $grey-primary;
	min-height: rem-calc(440);
    text-align: left;
    margin-bottom: rem-calc(42);

    @include bp($md){
        display: flex;
        align-items: center;
        text-align: left;
        min-height: rem-calc(600);
        margin-bottom: 0;
    }

	&__wrapper {
		padding: rem-calc(170 0 40 0);
		position: relative;
		z-index: 5;
        letter-spacing: 0.05em;

        @include bp($md){
            padding: 4rem 0;
        }

        .overline{
            margin-bottom: rem-calc(16);
        }
		.heading {
            align-items: center;
            font-size: rem-calc(32);
            line-height: rem-calc(40);
			margin-bottom: 0;
            align-items: center;
            @include bp($md){
                font-size: rem-calc(64);
                line-height: rem-calc(72);
            }
		}
	}

	&__image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}

	&.has-img {
        &:after {
			content: "";
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: rem-calc(375);
			background: rgb(0,0,0);
			background: linear-gradient(180deg, rgba(0,0,0,1) 0.09%, rgba(0,0,0,0) 99.75%);
		}
		&:before {
			content: "";
			z-index: 2;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgb(0,0,0);
			background: linear-gradient(90.1deg, #000000 0.09%, rgba(0, 0, 0, 0) 99.75%);
		}

		h1,
		h2,
		h3,
		h4,
		p,
        ol,
        ul {
			color: #fff;
		}
	}

	.nav-container {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 5;
		padding: 0;
		overflow: hidden;

		.container {
			@include bp($md, true) {
				padding: 0;
			}

			.nav-row {
				width: 100%;
				max-width: rem-calc(1100);
				background-color: #fff;
				position: relative;
				@include padding( rem-calc(12 12 0 0) );
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				gap: rem-calc(24);

				@include bp($md) {
					width: 90%;
					border-radius: rem-calc(0 30 0 0);
					gap: rfs-fluid-value( rem-calc(48) );
					@include padding( rem-calc(24 24 0 0) );
				}

				&:before {
					width: 50vw;
					height: 100%;
					background-color: #fff;
					position: absolute;
					top: 0;
					left: 0;
					transform: translate3d(-100%,0,0);
					pointer-events: none;

					@include bp($md) {
						content: '';
					}
				}

				&:after {
					width: 2.5rem;
					height: 2.5rem;
					position: absolute;
					right: -40px;
					bottom: 0;
					background-color: transparent;
					background-image: url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAmCAYAAAC29NkdAAABC0lEQVRYhe3Y2w2CQBCF4dEK6EA7kA60AynBEuzAVujAEijFEizhN5OMCSrITdjz4En2AZ4+ZmbJgikH2K6lhWbZHzgx8i3O1YE7AUN7gLuqzXE5gHKLcwFDe4DKK6iKy4iotrgQMLTn2V7JFvsBgVoESK8BSlnge/UUgaUssKl6asCP6skAgVMTTgIYrb0pA69tuORA4PINlxQIFF24ZMCYu7sksGtTJAUOxS0KjG+MQbjFgLEhes3c4sA+r5IkwJi3qodheSBwHtvSWYHA4RdV+zkw2tl4XEoKnKNi71mNQGVmdjKzo5kdJj1hj3QCA+T/SfYBmh1Vz8rnJ244xJdf+9oELN1PHDN7ALL0MQwBMR/xAAAAAElFTkSuQmCC');
					background-repeat: no-repeat;
					background-position: right bottom;
					transform: rotate(90deg);
					pointer-events: none;

					@include bp($md) {
						content: '';
					}
				}

				.nav-wrap {
					width: 80%;
					position: relative;
					padding: rem-calc(0 0 0 16);

					@include bp($md) {
						width: 85%;
						padding-left: 0;
					}

					@include bp($lg) {
						width: 100%;
					}

					&:after {
						width: rem-calc(24);
						height: 100%;
						content: '';
						background-image: linear-gradient(to left, #ffffff, rgba(#ffffff, 0));
						position: absolute;
						top: 0;
						right: 0;
						z-index: 5;
						pointer-events: none;

						@media (pointer: fine) {
							height: calc(100% - 12px);
						}
					}
				}

				ul {
					@include list-unstyled;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: rem-calc(20);
					overflow-x: auto;
					margin: 0;
					padding: 0;

					@include bp($lg) {
						gap: rfs-fluid-value(rem-calc(20));
					}

					@media (pointer: coarse) {
						::-webkit-scrollbar{
							display: none;
						}
					}

					@media (pointer: fine) {
						padding-bottom: rem-calc(8);
						padding-right: rem-calc(24);

						&::-webkit-scrollbar-track {
							width: 2px;
							-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
							border-radius: 8px;
							background-color: transparent;
						}

						&::-webkit-scrollbar {
							height: 4px;
							background-color: rgba($primary, 0.2);
						}

						&::-webkit-scrollbar-thumb {
							border-radius: 10px;
							-webkit-box-shadow: none;
							background-color: $primary;
						}
					}

					li {
						display: flex;
						flex-shrink: 0;

						a {
							border: 1px solid $primary;
							border-radius: rem-calc(32);
							padding: rem-calc(12 18);
							color: $primary;
							letter-spacing: 0.2px;
							text-decoration: none;
							flex-shrink: 0;

							@include bp($lg) {
								padding: rem-calc(14 20);
							}

							&:hover {
								border: 1px solid $secondary;
							}

							&.active {
								border: 1px solid $secondary;
								font-weight: 600;
							}
						}
					}
				}

				.search-trigger {
					width: rem-calc(48);
					height: rem-calc(48);
					background-color: $primary;
					border-radius: 100%;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 21 21'%3E%3Cpath fill='%23fff' d='m.797 19.127 4.92-4.92a.433.433 0 0 1 .305-.114h.42c-1.336-1.449-2.136-3.318-2.136-5.415 0-4.347 3.584-7.932 7.932-7.932 4.385 0 7.932 3.585 7.932 7.932a7.926 7.926 0 0 1-7.932 7.932 7.96 7.96 0 0 1-5.377-2.097v.381c0 .153-.039.267-.115.343l-4.92 4.92a.439.439 0 0 1-.648 0l-.381-.381a.439.439 0 0 1 0-.649Zm11.44-3.737a6.673 6.673 0 0 0 6.713-6.712c0-3.7-2.975-6.712-6.712-6.712-3.7 0-6.712 3.013-6.712 6.712a6.697 6.697 0 0 0 6.712 6.712Z'/%3E%3C/svg%3E");
					background-position: center;
					background-size: rem-calc(20);
					background-repeat: no-repeat;
					border: none;
					outline: none;
					transition: 0.3s ease-in-out;
					transition-property: background-color, background-image;
					flex-shrink: 0;

					&:hover {
						background-color: $secondary;
					}

					&.active {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%23fff' d='M0 16.079 16.08 0l.756.757L.758 16.837z'/%3E%3Cpath fill='%23fff' d='M17 16.079.921-.001.164.758l16.079 16.079z'/%3E%3C/svg%3E");
					}
				}
			}
		}
	}

	.search-bar {
		width: 100%;
		background-color: $white;
		position: absolute;
		top: 100%;
		z-index: 5;
		@include padding-top( rem-calc(32) );
		@include padding-bottom( rem-calc(32) );
		opacity: 0;
		pointer-events: none;
		transition: 0.3s ease-in-out;
		transition-property: opacity, transform;
		transform: translate3d(0,50%,0);

		&.active {
			opacity: 1;
			pointer-events: all;
			transform: none;
		}

		.search-wrap {
			max-width: rem-calc(1075);
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 1px solid $primary;
			border-radius: rem-calc(30);
			position: relative;

			.search-btn {
				width: rem-calc(20);
				height: rem-calc(20);
				content: '';
				position: absolute;
				top: 50%;
				left: rfs-fluid-value( rem-calc(28) );
				transform: translate3d(0,-50%,0);
				border: none;
				outline: none;
				background-color: transparent;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 21 21'%3E%3Cpath fill='%23000' d='m.797 19.127 4.92-4.92a.433.433 0 0 1 .305-.114h.42c-1.336-1.449-2.136-3.318-2.136-5.415 0-4.347 3.584-7.932 7.932-7.932 4.385 0 7.932 3.585 7.932 7.932a7.926 7.926 0 0 1-7.932 7.932 7.96 7.96 0 0 1-5.377-2.097v.381c0 .153-.039.267-.115.343l-4.92 4.92a.439.439 0 0 1-.648 0l-.381-.381a.439.439 0 0 1 0-.649Zm11.44-3.737a6.673 6.673 0 0 0 6.713-6.712c0-3.7-2.975-6.712-6.712-6.712-3.7 0-6.712 3.013-6.712 6.712a6.697 6.697 0 0 0 6.712 6.712Z'/%3E%3C/svg%3E");
				background-position: center;
				background-size: rem-calc(20);
				background-repeat: no-repeat;
			}

			.search-input {
				border: none;
				background-color: transparent;
				outline: none;
				margin: 0;
				padding-left: rem-calc(60);
				@include fluid-type(16, 20);

				@include bp($md) {
					padding-left: rfs-fluid-value( rem-calc(60) );
				}

				&:not(:placeholder-shown) + .search-reset {
					opacity: 1;
					pointer-events: all;
				}
			}

			.search-reset {
				width: rem-calc(12);
				height: rem-calc(12);
				border: none;
				outline: none;
				background-color: transparent;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%23000' d='M0 16.079 16.08 0l.756.757L.758 16.837z'/%3E%3Cpath fill='%23000' d='M17 16.079.921-.001.164.758l16.079 16.079z'/%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				border-radius: 0;
				opacity: 0;
				pointer-events: none;
				transition: 0.2 ease-in-out;
				transition-property: opacity;
				@include fluid-type(14, 18);
				line-height: 1.5;
				z-index: 5;

				position: absolute;
				top: 50%;
				right: rfs-fluid-value( rem-calc(28) );
				transform: translate3d(0,-50%,0);

				@include bp($md) {
					width: rem-calc(22);
					height: rem-calc(22);
				}

				span {
					display: block;
					text-indent: -9999px;
				}
			}
		}
	}
}

class HeroInsights {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;

		this.searchBar = this.block.querySelector( '.js-search-bar' );
		this.searchTrigger = this.block.querySelector( '.js-search-trigger' );
		this.searchBtn = this.block.querySelector( '.js-search-btn' );
		this.searchInput = this.block.querySelector( '.js-search-input' );
		this.searchReset = this.block.querySelector( '.js-search-reset' );

		this.initSearchBarToggle();
		this.initSearch();
		this.initReset();

		this.navWrap = this.block.querySelector( '.nav-wrap ul' );
		this.links = this.block.querySelectorAll( 'ul li a' );
		this.links.forEach( link => {
			if ( link.classList.contains( 'active' ) ) {
				this.navWrap.scrollLeft = link.offsetLeft;
			}
		});
	}

	/**
	 * Toggle search bar
	 */
	initSearchBarToggle() {
		if ( this.searchTrigger ) {
			this.searchTrigger.addEventListener( 'click', e => {
				if ( this.searchTrigger.classList.contains( 'active' ) ) {
					this.searchTrigger.classList.remove( 'active' );
					this.searchBar.classList.remove( 'active' );
				} else {
					this.searchTrigger.classList.add( 'active' );
					this.searchBar.classList.add( 'active' );
				}
			});
		}
	}

	/**
	 * Search logic
	 */
	initSearch() {
		if ( this.searchBtn ) {
			this.searchBtn.addEventListener( 'click', this.doSearch.bind( this ) );
		}
		
		if ( this.searchInput ) {
			this.searchInput.addEventListener( 'keyup', e => {
				if ( e.keyCode === 13 ) {
					this.doSearch( e );
				}
			});
		}
	}

	/**
	 * Perform search
	 */
	doSearch(event) {
		event.preventDefault();
		// take input, go to /?s={query}
		if ( this.searchInput.value ) {
			window.location.href = '/?s=' + this.searchInput.value;
		}
	}


	/**
	 * Reset search value
	 */
	initReset() {
		if ( this.searchReset ) {
			this.searchReset.addEventListener( 'click', e => {
				this.searchInput.value = '';
			});
		}
	}
}

document.querySelectorAll('.block-hero-insights').forEach((block) => {
	new HeroInsights( block );
});