Pricing

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

.block-pricing {
    padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);
	background-color: var(--grey-primary);
    --text-color: var(--primary);

    .heading {
        padding-top: 2rem;
        padding-bottom: 2rem;
        text-align: center;
        font-family: 'Montserrat' sans-serif;
        font-size: clamp(24px, 3vw, 44px);
        font-weight: 600;
        color: var(--primary);
    }

    &__grid {
        /* two column autoflow */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;

        .pricing-table {
            width: 100%;

            @include bp($md) {
                width: calc(50% - 0.75rem);
            }

            @include bp($lg) {
                width: calc(33.3333% - 1.5rem);
            }
        }
    }

    &__cta {
        padding-top: 4rem;
        font-family: Montserrat;
        font-size: clamp(18px, 2vw, 22px);
        font-weight: 600;
        text-align: center;

        p, ul, ol, li, a {
            font-size: clamp(18px, 2vw, 22px);
        }

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

    .button-wrapper {
        text-align: center;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

class Pricing {
	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-pricing').forEach((block) => {
		new Pricing(block);
	})
});

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