Cta Bar

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

.block-cta-bar {
	position: relative;
	padding: 1rem 0 rem-calc(28) 0;
	overflow: visible;
	z-index: 1;
	margin-top: 26px;

	&:not(.has-background) {
		background: var(--primary-gradient);
	}

	&.has-light-blue-background-color {
		.block-cta-bar__heading {
			color: $black;
		}

		.btn {
			color: $primary;

			&.btn--hollow {
				border-color: $primary;
			}

			&.btn--solid {
				background-color: $primary;
				border-color: $primary;
				color: $white;

				&:hover {
					background-color: lighten($primary, 10%);
				}
			}
		}
	}

	&.has-light-blue-gradient-gradient-background {

		&:before {
			display: none;
		}

		.block-cta-bar__heading {
			color: $primary;
		}
	}

	@include bp($lg) {
		padding: 2rem 0;
	}

	&:before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: inherit;
		z-index: -1;
		top: 0;
		transform-origin: left top;
		transform: skewY(-0.8deg);
	}

	&__heading-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 1rem 0;


		@include bp($lg) {
			justify-content: flex-start;
			margin: 0;
			height: 100%;
		}
	}

	.block-cta-bar__heading {
		@include responsive-font($heading-8, $heading-4);
		font-weight: 500;
		color: $white;
		margin-bottom: 0;
	}

	&:not(.has-light-blue-gradient-gradient-background) {
		.btn--hollow {
			border-color: $white;
			color: $white;
			overflow: visible;

			&:focus {
				color: $white;
			}

			&:before {
				display: none;
			}
		}
	}

	&__button-wrapper {
		display: flex;
		gap: rem-calc(24);
		margin-top: 10px;
		justify-content: center;

		@include bp($lg) {
			margin-top: 0;
			align-items: center;
			justify-content: flex-end;
		}

		.btn {
			width: 100%;
			display: inline-block;
			text-align: center;
			font-size: $body-medium;

			@include bp($md) {
				width: auto;
			}
		}
	}
}

class CtaBar {
	block;

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

	init() {
		/* Swiper Example
		this.swiperElem = this.block.querySelector('.swiper');
		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				type: 'custom',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
		}); 
		*/
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-cta-bar').forEach((block) => {
		new CtaBar(block);
	})
});

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