<?php
/**
 * Title: Pricing
 * Slug: blokio/pricing
 * Categories: blokio-content
 * Description: Three-tier pricing/package cards with a highlighted middle option — useful for a "tour packages" or membership landing page.
 * Keywords: pricing, packages, plans, tiers
 * Block Types: core/columns
 */
?>
<!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--xl)">

    <!-- wp:heading {"textAlign":"center","level":2} -->
    <h2 class="wp-block-heading has-text-align-center"><?php echo esc_html__( 'Choose Your Package', 'blokio' ); ?></h2>
    <!-- /wp:heading -->

    <!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|md"}}}} -->
    <div class="wp-block-columns">

        <!-- wp:column {"className":"blokio-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|md","right":"var:preset|spacing|md","bottom":"var:preset|spacing|md","left":"var:preset|spacing|md"}},"border":{"width":"1px","color":"var:preset|color|border"}}} -->
        <div class="wp-block-column blokio-card" style="border-color:var(--wp--preset--color--border);border-width:1px;padding-top:var(--wp--preset--spacing--md);padding-right:var(--wp--preset--spacing--md);padding-bottom:var(--wp--preset--spacing--md);padding-left:var(--wp--preset--spacing--md)">
            <!-- wp:heading {"level":3} -->
            <h3 class="wp-block-heading"><?php echo esc_html__( 'Explorer', 'blokio' ); ?></h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large)","fontWeight":"700"}}} -->
            <p style="font-weight:700"><?php echo esc_html__( '$0', 'blokio' ); ?></p>
            <!-- /wp:paragraph -->
            <!-- wp:paragraph {"textColor":"text-secondary"} -->
            <p class="has-text-secondary-color has-text-color"><?php echo esc_html__( 'Free access to all published guides and community discussion.', 'blokio' ); ?></p>
            <!-- /wp:paragraph -->
            <!-- wp:buttons -->
            <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","width":100} --><div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html__( 'Get Started', 'blokio' ); ?></a></div><!-- /wp:button --></div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"className":"blokio-card","backgroundColor":"ink","textColor":"paper","style":{"spacing":{"padding":{"top":"var:preset|spacing|md","right":"var:preset|spacing|md","bottom":"var:preset|spacing|md","left":"var:preset|spacing|md"}}}} -->
        <div class="wp-block-column blokio-card has-paper-color has-text-color has-ink-background-color has-background" style="padding-top:var(--wp--preset--spacing--md);padding-right:var(--wp--preset--spacing--md);padding-bottom:var(--wp--preset--spacing--md);padding-left:var(--wp--preset--spacing--md)">
            <!-- wp:paragraph {"textColor":"accent","style":{"typography":{"fontWeight":"700","fontSize":"0.8rem","textTransform":"uppercase","letterSpacing":"0.08em"}}} -->
            <p class="has-accent-color has-text-color" style="font-weight:700;text-transform:uppercase;letter-spacing:0.08em"><?php echo esc_html__( 'Most Popular', 'blokio' ); ?></p>
            <!-- /wp:paragraph -->
            <!-- wp:heading {"level":3,"textColor":"paper"} -->
            <h3 class="wp-block-heading has-paper-color has-text-color"><?php echo esc_html__( 'Voyager', 'blokio' ); ?></h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large)","fontWeight":"700"}}} -->
            <p style="font-weight:700"><?php echo esc_html__( '$9', 'blokio' ); ?><span style="font-size:1rem;font-weight:400"><?php echo esc_html__( '/mo', 'blokio' ); ?></span></p>
            <!-- /wp:paragraph -->
            <!-- wp:paragraph {"style":{"color":{"text":"#CBD5E1"}}} -->
            <p style="color:#CBD5E1"><?php echo esc_html__( 'Downloadable itineraries, budget spreadsheets, and early access to new guides.', 'blokio' ); ?></p>
            <!-- /wp:paragraph -->
            <!-- wp:buttons -->
            <div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"accent","width":100} --><div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-accent-background-color has-background wp-element-button"><?php echo esc_html__( 'Start Free Trial', 'blokio' ); ?></a></div><!-- /wp:button --></div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"className":"blokio-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|md","right":"var:preset|spacing|md","bottom":"var:preset|spacing|md","left":"var:preset|spacing|md"}},"border":{"width":"1px","color":"var:preset|color|border"}}} -->
        <div class="wp-block-column blokio-card" style="border-color:var(--wp--preset--color--border);border-width:1px;padding-top:var(--wp--preset--spacing--md);padding-right:var(--wp--preset--spacing--md);padding-bottom:var(--wp--preset--spacing--md);padding-left:var(--wp--preset--spacing--md)">
            <!-- wp:heading {"level":3} -->
            <h3 class="wp-block-heading"><?php echo esc_html__( 'Concierge', 'blokio' ); ?></h3>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large)","fontWeight":"700"}}} -->
            <p style="font-weight:700"><?php echo esc_html__( '$49', 'blokio' ); ?><span style="font-size:1rem;font-weight:400"><?php echo esc_html__( '/mo', 'blokio' ); ?></span></p>
            <!-- /wp:paragraph -->
            <!-- wp:paragraph {"textColor":"text-secondary"} -->
            <p class="has-text-secondary-color has-text-color"><?php echo esc_html__( 'Everything in Voyager, plus a custom itinerary built by our editors.', 'blokio' ); ?></p>
            <!-- /wp:paragraph -->
            <!-- wp:buttons -->
            <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","width":100} --><div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html__( 'Contact Sales', 'blokio' ); ?></a></div><!-- /wp:button --></div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

    </div>
    <!-- /wp:columns -->

</div>
<!-- /wp:group -->
