<?php
    $style = isset($args['style']) ? $args['style'] : '';
?>
<section class="section banner home-new-banner no-lazy">
    <div class="home-banner-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-cont">
                        <h1 class="banner-heading text-center">
                        <?php echo get_field('banner_title'); ?>
                        </h1>
                        <p class="banner-content text-center">
                        <?php echo get_field('banner_description'); ?>
                        </p>
                        <div class="banner-btns text-center">
                            <a href="<?php echo get_field('banner_left_button_link'); ?>" class="primary animated-btn">
                            <?php echo get_field('banner_left_button_text'); ?>
                                <svg class="ms-2" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0.875 1.21094L6.125 6.46094L0.875 11.7109" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                
                            </a>
                            <a href="<?php echo get_field('banner_right_button_link'); ?>" class="border-gradient-btn animated-btn" rel="nofollow" target="_blank"><?php echo get_field('banner_right_button_text'); ?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid px-md-0">
            <div class="banner-bottom-images-wrapper">
            <div class="row align-items-center gx-0">
				<?php if (!wp_is_mobile()) : ?>
                <div class="col-md-4 col-lg-4 col-xl-4 col-xxl-4">
                <div class="img-cont">
                    <video autoplay loop muted playsinline width="100%" height="358" preload="none" poster="<?php echo get_template_directory_uri()?>/assets/img/banner-right-poster.webp">
                        <source src="<?php echo get_field('columns_right_video'); ?>" type="video/webm" />
                        Your browser does not support the video tag.
                    </video>
                </div>
                </div>
				<?php endif?>
                <div class="col-md-4 col-lg-4 col-xl-4 col-xxl-4">
                <div class="img-cont-scale">
					<?php
					$banner_image = get_field('columns_right_image');
					$banner_image_id  = $banner_image ? attachment_url_to_postid($banner_image) : 0;

					if ($banner_image_id) {
                        $alt = get_post_meta($banner_image_id, '_wp_attachment_image_alt', true);

						echo wp_get_attachment_image($banner_image_id, 'medium_large', false, [
							'class'         => 'img-fluid no-lazy',
							'fetchpriority' => 'high',
							'loading'         => 'eager',
							'decoding'      => 'async',
                            'alt'   => $alt ? wp_strip_all_tags($alt) : 'WareGo WMS Dashboard',
							'sizes'         => '(max-width: 767px) 336px, 635px',
						]);
					}
					?>
                     
                </div>
                </div>
				<?php if (!wp_is_mobile()) : ?>
                <div class="col-md-4 col-lg-4 col-xl-4 col-xxl-4">
                <div class="img-cont">
                    <video autoplay loop muted playsinline width="100%" height="358" preload="none" poster="<?php echo get_template_directory_uri()?>/assets/img/banner-left-poster.webp">
                        <source src="<?php echo get_field('columns_left_video'); ?>" type="video/webm" />
                        Your browser does not support the video tag.
                    </video>
                </div>
                </div>
				<?php endif?>
            </div>
            </div>
        </div>
    </div>
</section>