<?php

/**
 * Title: Hero Banner 
 * Slug: eryndo/a1-hero-banner
 * Categories: banner
 * Block Types: core/template-part/banner
 * Description: A full-width cover section with a large background image and an oversized heading.
 *
 * @package WordPress
 * @subpackage Eryndo
 * @since Eryndo 1.0
 */
?>

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"},"padding":{"top":"var:preset|spacing|60","bottom":"0"}}}} -->
    <div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:0"><!-- wp:column {"verticalAlignment":"stretch","width":"60%","style":{"border":{"radius":"20px"}},"gradient":"primary","hideOnMobile":false,"hideOnTablet":false,"hideOnDesktop":false} -->
        <div class="wp-block-column is-vertically-aligned-stretch has-primary-gradient-background has-background" style="border-radius:20px;flex-basis:60%"><!-- wp:cover {"url":"<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-left-hero-content.png'); ?>","id":5099,"alt":"Happy pets at Eryndo pet care","dimRatio":0,"isUserOverlayColor":true,"minHeight":723,"minHeightUnit":"px","isDark":false,"sizeSlug":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|70","right":"var:preset|spacing|70"}},"border":{"radius":"20px"}},"layout":{"type":"constrained"}} -->
            <div class="wp-block-cover is-light" style="border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--70);min-height:723px"><img class="wp-block-cover__image-background wp-image-5099 size-full" alt="Happy pets at Eryndo pet care" src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-left-hero-content.png'); ?>" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
                <div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
                    <div class="wp-block-group"><!-- wp:image {"id":5065,"sizeSlug":"large","linkDestination":"none","alt":"Five star customer rating"} -->
                        <figure class="wp-block-image size-large"><img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-stars.svg'); ?>" alt="Five star customer rating" class="wp-image-5065" /></figure>
                        <!-- /wp:image -->

                        <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-5"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"accent-5","fontSize":"medium"} -->
                        <p class="has-accent-5-color has-text-color has-link-color has-medium-font-size" style="font-style:normal;font-weight:400"><?php echo esc_html(__('4.8 ( 500+ Reviews )', 'eryndo')); ?></p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:group -->

                    <!-- wp:heading {"className":"is-style-text-main-header","style":{"typography":{"lineHeight":"1.3","fontStyle":"normal","fontWeight":"500"},"elements":{"link":{"color":{"text":"var:preset|color|accent-5"}}}},"textColor":"accent-5"} -->
                    <h2 class="wp-block-heading is-style-text-main-header has-accent-5-color has-text-color has-link-color" style="font-style:normal;font-weight:500;line-height:1.3"><?php echo esc_html__('Start your ', 'eryndo'); ?> <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color"><?php echo esc_html__('pet’s', 'eryndo'); ?></mark> <?php echo esc_html__('journey to wellness with experienced.', 'eryndo'); ?></h2>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"className":"is-style-default","style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-4"}}}},"textColor":"accent-4"} -->
                    <p class="is-style-default has-accent-4-color has-text-color has-link-color"><?php echo esc_html(__('Discover personalised pet care from experienced professionals who truly care for your furry friends.', 'eryndo')); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:eryndo/button-widget {"buttonText":"Book a schedule","backgroundColor":"var:preset|color|contrast","textColor":"var:preset|color|base","iconBackgroundColor":"var:preset|color|base","iconColor":"var:preset|color|contrast","hoverBackgroundColor":"var:preset|color|contrast","hoverTextColor":"var:preset|color|base","hoverIconColor":"var:preset|color|contrast","hoverIconBackgroundColor":"var:preset|color|accent-1","fontWeight":"400","gap":15,"padding":{"top":"5px","right":"5px","bottom":"5px","left":"30px"},"shadowEnabled":false,"shadowBlur":3,"shadowOffsetX":10,"shadowOffsetY":-3,"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}}} -->
                    <div class="wp-block-eryndo-button-widget button-widget-container has-var-preset-color-base-color has-var-preset-color-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--40);text-align:left">
                        <div style="position:relative;display:inline-flex;align-items:center;gap:15px;background-color:var(--wp--preset--color--contrast);color:var(--wp--preset--color--base);border-radius:25px;border:none;font-size:16px;font-weight:400;padding:5px 5px 5px 30px;margin:0px 0px 0px 0px;width:fit-content;height:auto;text-align:left;text-decoration:none;cursor:pointer;box-shadow:none;justify-content:flex-start;--button-icon-color:var(--wp--preset--color--contrast);--button-hover-bg-color:var(--wp--preset--color--contrast);--button-hover-text-color:var(--wp--preset--color--base);--button-icon-hover-color:var(--wp--preset--color--contrast);--button-hover-icon-bg-color:var(--wp--preset--color--accent-1)" class="button-widget has-hover-effect has-custom-hover-colors  "><span style="color:var(--wp--preset--color--base);font-size:16px;font-weight:400;flex:1px"><?php echo esc_html__('Book a schedule', 'eryndo'); ?></span>
                            <div style="display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background-color:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);border-radius:50%;font-size:16px;font-weight:bold;box-shadow:none"><span style="display:flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:16px;line-height:1;flex-shrink:0"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
                                    </svg></span></div>
                        </div>
                    </div>
                    <!-- /wp:eryndo/button-widget -->
                </div>
            </div>
            <!-- /wp:cover -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"verticalAlignment":"top","width":"40%","style":{"border":{"radius":"20px"},"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"gradient":"primary"} -->
        <div class="wp-block-column is-vertically-aligned-top has-primary-gradient-background has-background" style="border-radius:20px;padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);flex-basis:40%"><!-- wp:cover {"url":"<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-sketch.png'); ?>","alt":"Pet care illustration background","dimRatio":0,"isUserOverlayColor":true,"minHeight":720,"minHeightUnit":"px","isDark":false,"sizeSlug":"full","style":{"border":{"radius":"20px"}},"layout":{"type":"constrained","contentSize":"","wideSize":""}} -->
            <div class="wp-block-cover is-light" style="border-radius:20px;min-height:720px"><img class="wp-block-cover__image-background size-full" alt="Pet care illustration background" src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-sketch.png'); ?>" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
                <div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"500px"} -->
                    <div style="height:500px" aria-hidden="true" class="wp-block-spacer"></div>
                    <!-- /wp:spacer -->

                    <!-- wp:image {"id":9193,"sizeSlug":"full","linkDestination":"none","align":"center","alt":"Stacked pet care service cards"} -->
                    <figure class="wp-block-image aligncenter size-full"><img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/eryndo-stacker.png'); ?>" alt="Stacked pet care service cards" class="wp-image-9193" /></figure>
                    <!-- /wp:image -->
                </div>
            </div>
            <!-- /wp:cover -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->