<?php
$class = isset($args['class']) ? $args['class'] : '';
$banner_heading = get_field('banner_heading');
$banner_description = get_field('banner_description');
$banner_cta_1 = get_field('banner_cta_1');
$banner_cta_2 = get_field('banner_cta_2');
$banner_desktop_image = get_field('banner_image');
$banner_mobile_image = get_field('banner_mobile_image');
?>

<section class="section banner client-portal-3pl-banner no-lazy <?php echo $class; ?>">
    <div class="container">
        <div class="row gx-2 justify-content-between">
            <div class="col-lg-12 col-xl-6">
                <h1 class="section-title text-center text-xl-start"><?php echo $banner_heading?></h1>
            </div>
            <div class="col-lg-12 col-xl-5">
                <div class="text-cont">
                    <?php echo $banner_description?>

                    <div class="banner-btns pb-3 mt-4">
                        <?php if($banner_cta_1):?>
                        <a href="<?php echo esc_url($banner_cta_1['url'])?>" class="primary animated-cta-btn"><?php echo $banner_cta_1['title']?></a>
                        <?php endif;?>
                        <?php if($banner_cta_2):?>
                        <a href="<?php echo esc_url($banner_cta_2['url'])?>" class="border-gradient-btn animated-btn"><?php echo $banner_cta_2['title']?>
                            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.35816 0.0996094H7.95016L13.3502 5.49961L7.95016 10.8996H5.35816L9.82216 6.43561H0.660156V4.56361H9.82216L5.35816 0.0996094Z" fill="black"/>
                            </svg>
                        </a>
                        <?php endif;?>
                    </div>
                </div>
            </div>
        </div>

        <div class="banner-bottom-images-wrapper">
            <div class="row gx-3">
                <div class="col-lg-12">
                    <div class="img-wrapper text-center">
                        <picture class="no-lazy">
                            <source media="(max-width:991px)" srcset="<?php echo $banner_mobile_image ? $banner_mobile_image : $banner_desktop_image; ?>">
                            <img src="<?php echo $banner_desktop_image; ?>" alt="<?php echo wp_strip_all_tags($banner_heading)?>" loading="eager" fetchpriority="high" class="img-fluid no-lazy" width="1296" height="382">
                        </picture>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>