Statement

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

.block-statement {
	margin-right: -0.5rem;
	margin-left: -0.5rem;
	overflow: hidden;

	@include padding-top(rem-calc(48));
	@include padding-bottom(rem-calc(48));

	--image-height: #{rem-calc(55)};
	--row-gap: #{rem-calc(8)};
	--row-margin-bottom: #{rem-calc(8)};

	@include bp($md) {
		--image-height: #{rem-calc(110)};
		--row-gap: #{rem-calc(24)};
		--row-margin-bottom: #{rem-calc(20)};
	}

	@include bp($lg) {
		--image-height: #{rem-calc(205)};
		--row-gap: #{rem-calc(24)};
		--row-margin-bottom: #{rem-calc(20)};
	}

	.container-fluid {
		padding: 0;
	}

	.row-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: var(--row-gap);
		padding-right: var(--row-gap);
		margin-bottom: var(--row-margin-bottom);

		&:last-child {
			margin-bottom: 0;
		}

		&.odd-row {
			justify-content: flex-end;
			padding-right: 0;
			padding-left: rem-calc(24);
		}
	}

	.word {
		margin-bottom: 0;
		line-height: 0.8;
		@include fluid-type(60, 240);
		font-weight: 600;
		letter-spacing: -0.04em;
	}

	.sliding-image {
		height: var(--image-height);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: rem-calc(0 160 160 0);
		flex-shrink: 1;

		&.right-image {
			border-radius: rem-calc(160 0 0 160);
		}

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.row-index-2 {
		.sliding-image {
			border-radius: rem-calc(0 20 20 0);
		}
	}

	.spacer-image {
		height: var(--image-height);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: rem-calc(20);
		flex-shrink: 1;

		@include bp($md - 1px, true) {
			display: none;
		}

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.stat {
		width: var(--image-height);
		height: var(--image-height);
		flex-shrink: 0;

		@include bp($lg - 1px, true) {
			display: none;
		}
	}
}

class Statement {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		const rowContainers = this.block.querySelectorAll('.row-container');

		// Define initial positions for each row
		const initialPositions = [-33, 40, -30, 32];

		rowContainers.forEach((rowContainer, index) => {
			// Set initial position
			const initialXPercent = initialPositions[index] || 0;
			gsap.set(rowContainer, { xPercent: initialXPercent });

			// Create animation timeline
			const tl = gsap.timeline();

			tl.to(rowContainer, {
				xPercent: 0,
				duration: 1,
				ease: 'none',
			});

			ScrollTrigger.create({
				trigger: rowContainer,
				start: 'top bottom',
				end: 'bottom top',
				scrub: 1.5,
				animation: tl,
			});
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-statement').forEach( block => new Statement(block) );
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/statement",
    "title": "Statement",
    "description": "Statement block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-statement.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 - Example",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/statement/block-statement.css"
}