<?php
/*
Template Name: 3Pl Management New
*/

get_header('new');
?>

<!-- Banner Section -->
<section class="section banner management-system-banner no-lazy">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h1 class="banner-heading"><?php echo get_field('cold_chain_hero_heading'); ?></h1>
                    <p class="banner-content">
                        <?php echo get_field('cold_chain_hero_description'); ?>
                    </p>
                    <div class="banner-btns">
                        <a href="<?php echo get_field('hero_button_link_1');?>" class="primary animated-cta-btn">
                            <?php echo get_field('hero_button_link_1_label'); ?>
                            <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.598 0.799999H8.19L13.59 6.2L8.19 11.6H5.598L10.062 7.136H0.9V5.264H10.062L5.598 0.799999Z" fill="white"/>
                            </svg>
                        </a>
                        <a href="<?php echo get_field('hero_button_link_2');?>" class="border-gradient-btn animated-btn">
                            <?php echo get_field('hero_button_link_2_label'); ?>
                            <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>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont d-block text-center">
					<?php
					$desktop_img_url = get_field('cold_chain_hero_image');
					$mobile_img_url  = get_field('cold_chain_hero_mobile_image');
				?>
					<picture>
    <source class="no-lazy" media="(max-width: 767px)" data-mobile-src="<?php echo esc_url($mobile_img_url ? $mobile_img_url : $desktop_img_url); ?>" width="350" height="260">
    <img src="<?php echo esc_url($desktop_img_url); ?>" loading="eager" fetchpriority="high" decoding="async" width="607" height="458" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('cold_chain_hero_heading')); ?>">
</picture>
<script>var s=document.querySelector('source[data-mobile-src]');if(s)s.srcset=s.dataset.mobileSrc;</script>
					
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Banner Section End -->

<!-- Banner Logos -->
<?php 
$banner_logos = [
    'class' => 'banner-logos-3pl',
];
echo get_template_part('templates-parts/pages/banner-logos','',$banner_logos);?>
<!-- Banner Logos End -->


<!-- understanding section -->
<?php echo get_template_part('templates-parts/pages/understanding-section');?>
<!-- understanding section end -->


<!-- Grow Business section -->
<?php //echo get_template_part('templates-parts/pages/grow-business');?>
<!-- Grow Business section end -->

<section class="section what-we-do">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-3"><?php echo get_field('fulfillment_title'); ?></h2>
            <p class="section-content"><?php echo get_field('fulfillment_content'); ?></p>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="img-cont">
                    <img src="<?php echo get_field('fulfillment_left_image'); ?>" alt="what we do" class="img-fluid" width="546" height="386" loading="lazy">
                </div>
            </div>
            <div class="col-md-6">
                <ul>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image'); ?>" alt="icon" class="img-fluid" width="50" height="50" loading="lazy">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading1'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image1'); ?>" alt="icon" class="img-fluid" width="50" height="50" loading="lazy">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content1'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading2'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image2'); ?>" alt="icon" class="img-fluid" width="50" height="50" loading="lazy">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content2'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading3'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image3'); ?>" alt="icon" class="img-fluid" width="50" height="50" loading="lazy">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content3'); ?></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="<?php echo get_field('fulfillment_button_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('fulfillment_button_text'); ?></a>
        </div>
    </div>
</section>
<!-- core features section -->
<?php echo get_template_part('templates-parts/pages/core-features');?>
<!-- core features section end -->



<!-- aditional features section -->
<?php echo get_template_part('templates-parts/pages/additional-features');?>
<!-- aditional features section end -->

<!-- testimonials -->
<?php
    $testimonials_title = get_field('testimonials_title');
    $testimonals = [
        'title'     => $testimonials_title,
        'category'  => '3pl-industry',
        'class'     => 'pb-0'
    ];
    get_template_part('templates-parts/pages/testimonials', '', $testimonals);
?>
<!-- end testimonials -->

<!-- book demo section -->
<?php echo get_template_part('templates-parts/pages/book-demo-cta');?>
<!-- book demo section end -->


<!-- why choose warego section -->
<?php echo get_template_part('templates-parts/pages/why-choose-warego');?>
<!-- why choose warego section end -->


<!-- 100% Optimized WMS With 50+ Integrations Starts -->
<?php get_template_part('templates-parts/pages/optimized-integrations');?>
<!-- 100% Optimized WMS With 50+ Integrations Ends -->


<!-- industries solution section -->
<?php $args = [
    'category' => '3pl-wms-software-new'
]; 
get_template_part('templates-parts/pages/industry-solutions',null,$args);
?>
<!-- industries solution section end -->


<!-- Real Feedbacks section -->
<?php echo get_template_part('templates-parts/pages/real-feedbacks');?>
<!-- Real Feedbacks section end -->


<?php
    $args = [
        'category'  => '3pl-wms-software'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>


<!-- contact form -->
<?php get_template_part('templates-parts/pages/contact-form');?>
<!-- contact form -->

<?php get_footer(); ?>



<script>
    // industry specific slider
    var more_industries_slider = $('.industry-specific-slider');

    $('.slide-next-button').click(function() {
        more_industries_slider.trigger('next.owl.carousel');
    });

    $('.slide-prev-button').click(function() {
        more_industries_slider.trigger('prev.owl.carousel');
    });
    $('.industry-specific-slider').owlCarousel({
        loop: true,
        autoplay:false,
        margin: 20,
        nav: false,
        stagePadding: 50,
        dots: false,
        responsive: {
            0: {
                items: 1,
                stagePadding: 1,
            },
            480: {
                items: 1
            },
            600: {
                items: 2

            },
            1400: {
                items : 2
            },
        }
    });

    // real feedback slider
    $('.real-feedback-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            768:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });


    // *********************** Optimized Warehouse Gsap Animation Start ***********************
    gsap.registerPlugin();

    function startCircularScroll(wrapper, scrollSpeed) {
    const originalContent = wrapper.innerHTML; 
    wrapper.innerHTML += originalContent;

    const totalHeight = wrapper.scrollHeight / 2;

    const duration = totalHeight / scrollSpeed;

    gsap.to(wrapper, {
        y: `-${totalHeight}px`,
        duration: duration, 
        ease: "linear",
        repeat: -1,
    });
    }

    const firstSlideWrapper = document.querySelector('.first-slide-wrapper');
    const thirdSlideWrapper = document.querySelector('.third-slide-wrapper');

    if (firstSlideWrapper) {
    startCircularScroll(firstSlideWrapper, 30);
    }
    if (thirdSlideWrapper) {
    startCircularScroll(thirdSlideWrapper, 30);
    }


    const secondSlideWrapper = document.querySelector('.second-slide-wrapper');

    function startSeamlessTopToBottomScroll(wrapper, scrollSpeed) {
        
    const duplicate = wrapper.innerHTML;
    wrapper.innerHTML += duplicate;

    const totalHeight = wrapper.scrollHeight / 2;

    const duration = totalHeight / scrollSpeed;

    gsap.fromTo(
        wrapper,
        { y: `-${totalHeight}px` }, 
        {
        y: 0, 
        duration: duration,
        ease: "linear", 
        repeat: -1,
        }
    );
    }

    if (secondSlideWrapper) {
    startSeamlessTopToBottomScroll(secondSlideWrapper, 30);
    }
    // *********************** Optimized Warehouse Gsap Animation End ***********************
</script>


