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

.block-team-hero {
	padding-top: 80px;
	padding-bottom: 2rem;
	background-color: var(--primary);
	border-radius: 0 0 50px 50px;
	position: relative;

	.global__breadcrumbs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		padding: 1rem 0.5rem;
		background-color: transparent;
		--text-color: var(--white);

		.ico--home {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='15' fill='none'%3E%3Cpath fill='%23fff' d='M17.88 6.807c.095.093.188.218.188.375 0 .125-.062.25-.125.312l-.312.406a.62.62 0 0 1-.406.188c-.125 0-.22-.063-.313-.125l-.844-.719v5.844c-.03.531-.468.969-1 .969h-4c-.562 0-1-.438-1-1v-3.25h-2v3.25c-.03.562-.468 1-1 1h-4c-.562 0-1-.438-1-1V7.244l-.875.719a.528.528 0 0 1-.312.094c-.156 0-.313-.063-.375-.157l-.344-.406C.1 7.432.068 7.307.068 7.182c0-.157.063-.282.157-.375L7.943.463c.282-.25.688-.375 1.125-.375.407 0 .813.125 1.094.375l4.406 3.625V2.307c0-.125.094-.22.25-.25h1c.125 0 .25.125.25.25v3l1.813 1.5Zm-3.343 5.75.031-6.532-5.5-4.53-5.5 4.53v6.532h3v-3.25c0-.532.438-.97 1-1h3c.532.03.97.468 1 1v3.25h2.97ZM25.9'/%3E%3C/svg%3E");
		}
	}
	
	.container {
		position: relative;
		z-index: 1;
	}

	.heading,
	.content {
		max-width: rem-calc(740);
		margin: 0 auto;
		text-align: center;
	}

	.heading {
		color: var(--white);
		margin-bottom: 2rem;
		span {
			color: var(--white);
		}
	}

	.content {
		color: var(--white);
		font-size: clamp(16px, 2vw, 22px);
	}

	.image-wrapper {
		/* ellpise gradient overlay with primary */
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: radial-gradient(ellipse at 75% 40%, transparent 0%, transparent 15%, var(--primary) 55%);

			@include bp($xl, true) {
				background: radial-gradient(ellipse at 90% 40%, transparent 0%, transparent 5%, var(--primary) 35%);
			}
		}

		&:after {
			/* black to transparent liner gradient starting at top */
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 90%, var(--primary) 100%);
		}

		img {
			opacity: 0.5;
		}
	}

    &__wrapper{
		overflow: visible;
		margin-top: 1.5rem;
	}


	&__navigation-container{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		gap: 8px;
		justify-content: center;
		margin-bottom: 2rem;
	}

	&__navigation-btn{
		width: 44px;
		height: 44px;
		border-radius: 100px;
		border: solid 1px var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: .3s ease-in-out;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px;
		margin-top: 2rem;

		&-prev{
			background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
		}

		&-next{
			background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
		}

		&:hover{
			background-color: var(--text-color);

			&.block-team-hero__navigation-btn-prev{
				background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
			}

			&.block-team-hero__navigation-btn-next{
				background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
			}
		}

	}

	.card-team {
		border: 1px solid rgba(255, 255, 255, 0.3);
	}
}

class TeamHero {
	block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		const teamCarousel = this.block.querySelector('.swiper');
		const nextBtn = this.block.querySelector('.block-team-hero__navigation-btn-next');
		const prevBtn = this.block.querySelector('.block-team-hero__navigation-btn-prev');
		const slides = this.block.querySelectorAll('.swiper-slide');
		if(teamCarousel){
			const swiper = new Swiper(teamCarousel, {
				slidesPerView: 1.5,
				spaceBetween: 24,
				centeredSlides: true,
				initialSlide: Math.floor(slides.length / 2),
				centeredSlidesBounds: true,
				breakpoints: {
					566: {
						slidesPerView: 2
					},
					767: {
						slidesPerView: 3
					},
					1024: {
						slidesPerView: 4
					}
				},
				navigation: {
					nextEl: nextBtn,
					prevEl: prevBtn,
				},
			});
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-team-hero').forEach((block) => {
		new TeamHero(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/team-hero",
    "title": "Team Hero",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-team-hero.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Team Hero",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/team-hero/block-team-hero.css", "swiper"],
    "viewScript": ["a11y-dialog","swiper", "team-hero"]
}