<?php
/**
 * Title: Hero Banner
 * Slug: super-agency/hero-banner
 * Categories: banner, featured
 * Keywords: hero, banner, agency, portfolio, call-to-action
 * Description: A powerful hero section with heading, description, and call-to-action buttons
 */

$get_url = trailingslashit(get_template_directory_uri());
$hero_image = $get_url . 'assets/images/hero-placeholder.jpg';
?>

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large"},"margin":{"top":"0","bottom":"0"}}},"gradient":"light-gradient","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-light-gradient-gradient-background has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-bottom:var(--wp--preset--spacing--xxx-large)">
    <!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|xx-large","left":"var:preset|spacing|xx-large"}}}} -->
    <div class="wp-block-columns alignwide are-vertically-aligned-center">
        <!-- wp:column {"verticalAlignment":"center","width":"55%"} -->
        <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%">
            <!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"800","letterSpacing":"-1px"},"spacing":{"margin":{"bottom":"var:preset|spacing|medium"}}},"textColor":"heading","fontSize":"huge"} -->
            <h1 class="wp-block-heading has-heading-color has-text-color has-huge-font-size" style="margin-bottom:var(--wp--preset--spacing--medium);font-weight:800;letter-spacing:-1px"><?php esc_html_e('We Create ', 'super-agency'); ?><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-primary-color"><?php esc_html_e('Digital Excellence', 'super-agency'); ?></mark><?php esc_html_e(' for Forward-Thinking Agencies', 'super-agency'); ?></h1>
            <!-- /wp:heading -->

            <!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|large"}}},"textColor":"body","fontSize":"x-large"} -->
            <p class="has-body-color has-text-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--large)"><?php esc_html_e('Transform your vision into powerful digital experiences. We specialize in creating stunning websites, applications, and digital solutions that drive results for agencies and creative professionals.', 'super-agency'); ?></p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
            <div class="wp-block-buttons">
                <!-- wp:button {"backgroundColor":"primary","textColor":"background"} -->
                <div class="wp-block-button"><a class="wp-block-button__link has-background-color has-primary-background-color has-text-color has-background wp-element-button"><?php esc_html_e('View Our Work', 'super-agency'); ?></a></div>
                <!-- /wp:button -->

                <!-- wp:button {"backgroundColor":"transparent","textColor":"primary","className":"is-style-outline"} -->
                <div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-color has-transparent-background-color has-text-color has-background wp-element-button"><?php esc_html_e('Our Services', 'super-agency'); ?></a></div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"verticalAlignment":"center","width":"45%"} -->
        <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:45%">
            <!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"16px"}}} -->
            <figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url($hero_image); ?>" alt="<?php esc_attr_e('Hero Image', 'super-agency'); ?>" style="border-radius:16px"/></figure>
            <!-- /wp:image -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->