<?php
/*
Template Name: Warehouse Management old
*/

get_header('new');
?>

<section class="section banner no-lazy">
    <div class="container">
        <div class="row align-items-lg-center">
            <div class="col-lg-6">
                <div class="text-cont slide-right">
                    <h1 class="banner-heading">
                        <?php echo get_field('banner_title'); ?>
                    </h1>
                    <p class="banner-content">
                        <?php echo get_field('banner_description'); ?>
                    </p>
                    <div class="banner-btns">
                        <a href="<?php echo get_field('banner_left_button_link'); ?>" class="animated-cta-btn primary"><?php echo get_field('banner_left_button_text'); ?></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 class="col-lg-6">
                <div class="img-cont slide-left h-100">
                    <img src="<?php echo get_field('columns_right_image'); ?>" alt="<?php echo strip_tags( get_field('banner_title') ); ?>" class="img-fluid" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Banner Logos Slider -->
<?php get_template_part('templates-parts/pages/banner-logos');?>
<!-- Banner Logos Slider End -->


<section class="section our-services">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title"><?php echo get_field('wms_features_heading'); ?></h2>
            <p class="section-content">
                <?php echo get_field('wms_features_description'); ?>
            </p>
        </div>

        <?php
            $features = get_field('wms_features_list');
            $directions = ['right', 'up', 'left', 'right', 'up', 'left'];
        ?>

        <?php if (is_array($features) && count($features)) : ?>
            <div class="row">
                <?php for ($i=0; $i < count($features); $i++) : ?>
                    <div class="col-lg-4 col-md-6 p-0">
                        <div class="card slide-<?php echo $directions[$i]; ?>">
                            <div class="img-cont">
                                <img src="<?php echo $features[$i]['icon_url']; ?>" alt="<?php echo strip_tags( $features[$i]['heading'] ); ?>" class="img-fluid" loading="lazy">
                            </div>
                            <div class="text-cont">
                                <h3><?php echo $features[$i]['heading']; ?></h3>
                                <?php echo wpautop( $features[$i]['description'] ); ?>
                                <a href="<?php echo site_url(); ?>/signup/" aria-label="Automate Your Warehouse">
                                    <svg width="81" height="23" viewBox="0 0 81 23" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M79.6505 12.295C80.2363 11.7092 80.2363 10.7595 79.6505 10.1737L70.1045 0.627773C69.5187 0.0419865 68.569 0.0419865 67.9832 0.627773C67.3974 1.21356 67.3974 2.16331 67.9832 2.74909L76.4685 11.2344L67.9832 19.7197C67.3974 20.3054 67.3974 21.2552 67.9832 21.841C68.569 22.4268 69.5187 22.4268 70.1045 21.841L79.6505 12.295ZM0.549805 12.7344H78.5898V9.73438H0.549805V12.7344Z"
                                            fill="#BCBCBC" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Banner Request Demo Starts -->
<?php
    $args = [
        'classes' => 'pt-3'
    ];

    get_template_part('templates-parts/pages/banner-request-demo', null, $args);
?>
<!-- Banner Request Demo Ends -->

<section class="section how-wms">
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <div class="text-cont slide-right">
                    <h2 class="section-innertitle"><?php echo get_field('why_warego_wms_heading'); ?></h2>
                    <p class="section-content">
                        <?php echo get_field('why_warego_wms_description'); ?>
                    </p>
                    <a href="<?php echo get_field('why_warego_wms_cta_link'); ?>" class="primary animated-btn" rel="nofollow" target="_blank"><?php echo get_field('why_warego_wms_cta_label'); ?>
                    <svg class="ms-2" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.00391 5.44716L12.0039 8.16591C12.1602 8.29091 12.2227 8.47841 12.2539 8.72841C12.2539 8.91591 12.1602 9.13466 12.0039 9.22841L9.00391 12.0097C8.78516 12.2284 8.47266 12.2597 8.19141 12.1659C7.91016 12.0409 7.75391 11.7597 7.75391 11.4784V9.72841H5.00391C4.56641 9.72841 4.25391 9.41591 4.25391 8.97841V8.47841C4.25391 8.07216 4.56641 7.72841 5.00391 7.72841H7.72266V5.97841C7.72266 5.69716 7.94141 5.41591 8.19141 5.32216C8.44141 5.19716 8.78516 5.22841 9.00391 5.44716ZM8.25391 0.728409C12.6602 0.728409 16.2539 4.32216 16.2539 8.72841C16.2539 13.1659 12.6602 16.7284 8.25391 16.7284C3.81641 16.7284 0.253906 13.1659 0.253906 8.72841C0.253906 4.32216 3.81641 0.728409 8.25391 0.728409ZM8.25391 15.2284C11.8164 15.2284 14.7539 12.3222 14.7539 8.72841C14.7539 5.16591 11.8164 2.22841 8.25391 2.22841C4.66016 2.22841 1.75391 5.16591 1.75391 8.72841C1.75391 12.3222 4.66016 15.2284 8.25391 15.2284Z" fill="white"></path>
                    </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-7 slide-left">
                <div class="row">
                    <?php $features = get_field('why_warego_wms_features'); ?>
                    <?php foreach ($features as $feature) : ?>
                        <div class="col-md-6 card-parent slide-down">
                            <div class="card">
                                <div class="img-content">
                                    <img src="<?php echo $feature['image']; ?>" alt="<?php echo strip_tags( $feature['heading'] ); ?>" class="img-fluid" loading="lazy">
                                </div>
                                <div class="text-content">
                                    <h3><?php echo $feature['heading']; ?></h3>
                                    <?php echo wpautop( $feature['description'] ); ?>
                                    <a href="<?php echo site_url(); ?>/signup/" aria-label="<?php echo strip_tags( $feature['heading'] ); ?>">
                                        <svg width="64" height="23" viewBox="0 0 64 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M62.5997 12.5714C63.1855 11.9856 63.1855 11.0359 62.5997 10.4501L53.0538 0.90414C52.468 0.318354 51.5182 0.318354 50.9325 0.90414C50.3467 1.48993 50.3467 2.43967 50.9325 3.02546L59.4177 11.5107L50.9325 19.996C50.3467 20.5818 50.3467 21.5316 50.9325 22.1173C51.5182 22.7031 52.468 22.7031 53.0538 22.1173L62.5997 12.5714ZM0.835938 13.0107H61.5391V10.0107H0.835938V13.0107Z" fill="#BCBCBC" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- integration  -->
<?php
    get_template_part('templates-parts/pages/integrations');
?>
<!-- integration -->

<!-- Pricing Plans New -->
<?php get_template_part('templates-parts/pages/pricing-plans');?>
<!-- Pricing Plans New End -->

<!-- inventory -->
<?php
$inventory_title = get_field('inventory_title');
$inventory_content = get_field('inventory_content');
$inventory = [
    'title'     => $inventory_title,
    'content'     => $inventory_content,
    'category'  => 'warehouse'
];
get_template_part('templates-parts/pages/inventory-section', '', $inventory);
?>
<!-- end inventory -->



<!-- industries -->
        <?php
            //  $industry_heading = get_field('industries_section_heading');
			//  $industry_description = get_field('industries_section_description');
			// $industry = [
			// 	'heading'     => $industry_heading,
			// 	'description' => $industry_description,
			// 	'category'    => 'warehouse',
			// 	'show-cta'    => false
			// ];
        	// get_template_part('templates-parts/pages/industries-section', '', $industry);
        ?>
    </div>
    <!-- end industries -->

<!-- industry solutions section start -->
<?php 
    $industry = [
        'category' => 'warehouse-new'
    ];
    get_template_part('templates-parts/pages/industry-solutions',null,$industry)
?>
<!-- industry solutions section end -->

    <!-- start case studies -->
    <?php
    get_template_part('templates-parts/pages/case-studies', '', $industry);
    ?>
    <!-- end case studies -->

    <!-- testimonials -->
    <?php
    $testimonials_title = get_field('testimonials_title');
    $testimonals = [
        'title'     => $testimonials_title,
        'category'  => 'warehouse'
    ];
    get_template_part('templates-parts/pages/testimonials', '', $testimonals);
    ?>
    <!-- end testimonials -->

    <!-- network -->
    <?php
        $args = [
            'class' => 'pb-5'
        ];
        get_template_part('templates-parts/pages/powerful-partnerships', null, $args);
    ?>
    <!-- end network -->

    <?php
        $args = [
            'category' => 'warehouse-management',
            'class'    => 'pt-5'
        ];
        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>
    // *********************************** Powerful Partnerships Logos Continious motion Animation Script Start ***********************************
    function createInfiniteScroll(containerSelector, speed, direction = "left") {
        const container = document.querySelector(containerSelector);
        const items = [...container.children];
        let animationFrameId = null;

        // Clone items to ensure infinite scroll
        items.forEach(item => {
            const clone = item.cloneNode(true);
            container.appendChild(clone);
        });

        // Calculate total width of items (including clones)
        let totalWidth = 0;
        [...container.children].forEach(item => {
            const style = window.getComputedStyle(item);
            const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
            totalWidth += item.offsetWidth + margin;
        });

        container.style.width = `${totalWidth}px`;

        let offset = 0;
        const step = speed / 60;

        function scroll() {
            offset += direction === "left" ? -step : step;

            // Reset offset to loop seamlessly
            if (direction === "left" && Math.abs(offset) >= totalWidth / 2) {
                offset = 0;
            } else if (direction === "right" && offset >= 0) {
                offset = -totalWidth / 2;
            }

            container.style.transform = `translateX(${offset}px)`;
            animationFrameId = requestAnimationFrame(scroll);
        }

        scroll();

        // Pause on hover
        container.addEventListener("mouseenter", () => {
            if (animationFrameId) cancelAnimationFrame(animationFrameId);
        });

        container.addEventListener("mouseleave", () => {
            scroll();
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        createInfiniteScroll('.owl-partners', 50, "left");  // Scroll left
        createInfiniteScroll('.owl-partners-2', 50, "right"); // Scroll right
    });
    // *********************************** Powerful Partnerships Logos Continious motion Animation Script End ***********************************
</script>

<script>
    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
            },
        }
    });
</script>