<div class="wpgmza-atlas-major wpgmza-demo-showcase-grid wpgmza-pad-10">
    <div class="am-showcase-title"><?php _e("Unlock More Features", "wp-google-maps"); ?></div>
    <div class="am-showcase-grid">

        <!-- Advanced Markers — top revenue driver -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/atlas-novus/custom-markers.webp"; ?>' alt="<?php esc_attr_e("Advanced Markers", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php _e("Advanced Markers", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Custom icons, titles, images, descriptions, and categories.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="<?php echo esc_attr(\WPGMZA\Plugin::getProLink("https://www.wpgmaps.com/purchase-professional-version/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-advanced-markers-atlas-major-v10" . wpgmzaGetUpsellLinkParams())); ?>" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a class='am-showcase-demo-link' href="https://www.wpgmaps.com/demo/demo-default-classic-info-window/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-advanced-markers-atlas-major-v10" target="_BLANK">
                    <?php _e("See demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <!-- Directions -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/atlas-novus/directions.webp"; ?>' alt="<?php esc_attr_e("Directions", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php _e("Get Directions", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Step-by-step directions with waypoints and transit modes.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="https://www.wpgmaps.com/features/directions/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-directions-atlas-major-v10" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a class='am-showcase-demo-link' href="https://www.wpgmaps.com/demo/directions/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-directions-atlas-major-v10" target="_BLANK">
                    <?php _e("See demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <!-- Store Locator Pro -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/store-locator.png"; ?>' alt="<?php esc_attr_e("Store Locator", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php _e("Pro Store Locator", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Geolocation, category filters, and advanced search.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="https://www.wpgmaps.com/features/store-locator/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-store-locator-atlas-major-v10" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a class='am-showcase-demo-link' href="https://www.wpgmaps.com/demo/store-locator/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-store-locator-pro-atlas-major-v10" target="_BLANK">
                    <?php _e("See demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <!-- Marker Listings -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/atlas-novus/marker-listing.webp"; ?>' alt="<?php esc_attr_e("Marker Listings", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php _e("Marker Listings", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Six styles — tables, grids, carousels, and more.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="https://www.wpgmaps.com/features/marker-listings/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-marker-listing-atlas-major-v10" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a class='am-showcase-demo-link' href="https://www.wpgmaps.com/demo/map-with-marker-listing-modern/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-marker-listing-atlas-major-v10" target="_BLANK">
                    <?php _e("See demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <!-- Unlimited Maps -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/unlimited-markers.png"; ?>' alt="<?php esc_attr_e("Unlimited Maps", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php _e("Unlimited Maps", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Create as many maps as you need. No limits.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="<?php echo esc_attr(\WPGMZA\Plugin::getProLink("https://www.wpgmaps.com/purchase-professional-version/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-unlimited-maps-atlas-major-v10" . wpgmzaGetUpsellLinkParams())); ?>" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
            </div>
        </div>

        <!-- Heatmaps -->
        <div class="am-showcase-card" data-demo-showcase>
            <div class="am-showcase-card-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . "images/atlas-novus/heatmaps.jpg"; ?>' alt="<?php esc_attr_e("Heatmaps", "wp-google-maps"); ?>" />
            </div>
            <div class="am-showcase-card-body">
                <div class="am-showcase-card-name"><?php esc_html_e("Heatmaps & Overlays", "wp-google-maps"); ?></div>
                <div class="am-showcase-card-desc"><?php _e("Dynamic heatmaps, image overlays, and shape tools.", "wp-google-maps"); ?></div>
            </div>
            <div class="am-showcase-card-actions">
                <a class='am-btn-pro' href="https://www.wpgmaps.com/features/heatmaps/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-heatmaps-atlas-major-v10" target="_BLANK">
                    <?php _e("Unlock", "wp-google-maps"); ?>
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a class='am-showcase-demo-link' href="https://www.wpgmaps.com/demo/heatmaps-demo/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-heatmaps-atlas-major-v10" target="_BLANK">
                    <?php _e("See demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

    </div>
</div>
