<?php
/*
Template Name: Homepage New
*/

get_header('new');
?>


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


<!-- Banner Logos New -->
<section class="section about-our-product">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('certificates_title'); ?></h2>
        </div>
        <div class="logos-wrapper">
            <div class="owl-carousel owl-theme about-our-product-slider">
                <?php if (have_rows('certificates')): ?>
                    <?php while (have_rows('certificates')): the_row(); 
                        $image = get_sub_field('image');
                        if ($image): ?>
                            <div class="item">
                                <img src="<?php echo $image; ?>" alt="certificate" loading="lazy" width="118" height="151" class="img-fluid">
                            </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<!-- Banner Logos New -->

<section class="py-5">
  <div class="container">
    <div class="video-card position-relative overflow-hidden rounded-4 text-center">
      <video
        id="heroVideo"
        class=""
        src="https://warego.co/wp-content/uploads/2025/12/videoplayback.webm"
        muted
        playsinline
        preload="metadata"
		type="video/webm"
      ></video>

      <!-- Play overlay -->
      <button type="button" id="playBtn" class="play-btn" aria-label="Play video">
       <svg viewBox="0 0 70 70" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" class="px-icon"><path xmlns="http://www.w3.org/2000/svg" d="M30.864 43.42c-.258 0-.5-.049-.725-.145a1.919 1.919 0 0 1-.593-.396A1.821 1.821 0 0 1 29 41.565V27.854a1.86 1.86 0 0 1 1.13-1.71 1.905 1.905 0 0 1 1.188-.087c.154.04.299.097.434.175l12.302 6.856c.296.167.528.395.695.685.167.29.251.602.251.937 0 .34-.082.655-.246.941a1.781 1.781 0 0 1-.7.68l-12.292 6.857c-.136.077-.28.135-.435.173a1.905 1.905 0 0 1-.463.058Z" fill="currentColor" fill-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</section>
<!-- inventory cycle -->
<?php get_template_part('templates-parts/pages/inventory-cycle');?>
<!-- inventory cycle -->


<section class="section home-new-cta">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="blog-cta-new">
                    <div class="row">
                        <div class="col-xl-4 col-md-12 text-center text-xl-start">
                            <div class="new-cta-main-text"><?php echo get_field('cta_titles'); ?></div>
                            <a href="<?php echo get_field('cta_button_links'); ?>" class="animated-cta-btn accent-btn"><?php echo get_field('cta_button_text'); ?> </a>
                        </div>
                        <div class="col-xl-8 col-md-12">
                            <div class="img-content h-100">
                                    <img src="<?php echo get_field('ctas_images'); ?>" alt="<?php echo get_field('cta_titles'); ?>" class="img-fluid" loading="lazy">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


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


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


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



<!-- inventory -->
<?php
 $inventory_title = get_field('inventory_title');
 $inventory_content = get_field('inventory_content');
 $inventory = [
     'title'    =>$inventory_title,
     'content'  =>$inventory_content,
     'category' =>'home-new'
 ];
      get_template_part('templates-parts/pages/inventory-section-new', null, $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'    => 'home-new'
    //  ];
    // get_template_part('templates-parts/pages/industries-section-new', null, $industry);
?>
<!-- end industries -->

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


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

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


<?php get_template_part('templates-parts/pages/powerful-partnerships'); ?>


<!-- contact form -->
<?php
    get_template_part('templates-parts/pages/contact-form');
?>
<!-- contact form -->
<!-- FAQs -->
<?php
    $args = [
        'category'  => 'home',
        'heading'   => 'Frequently Asked <span>Questions</span>',
		'class'     => 'pt-5 bg-white',
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>
<!-- FAQs -->

<?php
    get_footer('new');
?>
<script>
    $('.portfolio-slider').owlCarousel({
        loop:false,
        margin:40,
        autoplay : true ,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
    $('.satisfied-customer-slider').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        navText: ["<img src='<?php echo get_template_directory_uri()?>/assets/img/left-arrow.webp'>","<img src='<?php echo get_template_directory_uri()?>/assets/img/right-arrow.webp'>"],
        dots:false,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });
    
    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
            },
        }
    });

	$('.about-our-product-slider').owlCarousel({
        loop:false,
        margin:10,
        nav:false,
        dots: false,
        responsive:{
            0:{
                items:1
            },
            600:{
                loop:true,
                items:3
            },
            1000:{
                items:5
            }
        }
    });
    
</script>

<script>
    // *********************** Home Banner Gsap Animation Start ***********************
    if ($(window).width() > 991) {
    gsap.registerPlugin(ScrollTrigger);
  
    gsap.set(".home-new-banner .home-banner-content .img-cont-scale", { opacity: 1 });
    gsap.set([".home-new-banner .home-banner-content .img-cont", ".home-new-banner .home-banner-content .text-cont"], { opacity: 1, scale: 1 }); 
  
    // Fade out and scale out .img-cont and .text-cont
    gsap.to(".home-new-banner .home-banner-content .text-cont", {
      opacity: 0,
      scale: 0.9, 
      ease: "power1.out",
      scrollTrigger: {
        trigger: ".home-banner-content",
        start: "top 100px",
        end: "center 30%",
        scrub: true,
        // markers: true,
      },
    });
  
    gsap.to(".home-new-banner .home-banner-content .img-cont", {
      opacity: 0,
      ease: "power1.out",
      scrollTrigger: {
        trigger: ".home-banner-content",
        start: "top 100px",
        end: "center 30%",
        scrub: true,
        // markers: true,
      },
    });

    gsap.to(".home-new-banner .banner-bottom-images-wrapper", {
      y : "-20%",
      ease: "power1.out",
      scrollTrigger: {
        trigger: ".home-banner-content",
        start: "top 100px",
        end: "center 30%",
        scrub: true,
        // markers: true,
      },
    });
  
    // Fade in .img-cont-scale
    gsap.to(".home-new-banner .img-cont-scale", {
      opacity: 1,
      ease: "power1.inOut",
      scrollTrigger: {
        trigger: ".home-banner-content",
        start: "top 100px",
        end: "center 30%",
        scrub: true,
        // markers: true,
      },
    });
    }

// *********************** Home Banner Gsap Animation End ***********************
</script>



<script>
    // *********************** Home CTA GSAP Animation Start *********************** 
    if ($(window).width() > 991) {
        gsap.registerPlugin(ScrollTrigger);

        gsap.fromTo(
            ".home-new-cta", 
            {
                scale: 1.3,
            }, 
            {
                scale: 1,
                scrollTrigger: {
                    trigger: ".home-new-cta",
                    start: "top 80%",
                    end: "top 40%", 
                    scrub: 1, 
                    // markers : true
                },
            }
        );
    };
    // *********************** Home CTA GSAP Animation End *********************** 
</script>


<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>
    if ($(window).width() > 991) {
        gsap.registerPlugin(ScrollTrigger);

        const reviewsWrapperFirst = document.querySelector('.customer-reviews-first');
        const reviewsWrapperSecond = document.querySelector('.customer-reviews-second');

        gsap.fromTo(
            reviewsWrapperFirst,
            {
                y: 20,
            },
            {
                y: -200, 
                // ease: "power1.inOut",
                scrollTrigger: {
                    trigger: '.we-loved-customers',
                    start: "top bottom",
                    end: "150%", 
                    scrub: 0, 
                    // end: "110%", 
                    // scrub: 1, 
                    // markers: true,
                },
            }
        );

        gsap.fromTo(
            reviewsWrapperSecond,
            {
                y: -250, 
            },
            {
                y: 150,
                ease: "power1.inOut",
                scrollTrigger: {
                    trigger: '.we-loved-customers', 
                    start: "top bottom",
                    end: "150%", 
                    scrub: 0, 
                    // end: "110%", 
                    // scrub: 1, 
                    // markers: true,
                },
            }
        );
    };




    // ___________________________________________________________________________________________________________________________________________________
    // When max width 991 this script will run and Start __________________________________________________________________
    // Customer Reviews GSAP Animation Script Start
    gsap.registerPlugin();

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

        const totalHeight = wrapper.scrollHeight / 2;
        const duration = totalHeight / scrollSpeed;

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

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

    // Apply the animations only when the viewport width is ≤ 991px
    const mediaQuery = window.matchMedia("(max-width: 991px)");

    function initializeAnimations() {
        const reviewsWrapper = document.querySelector('.customer-reviews-first');
        const reviewsWrapperSecond = document.querySelector('.customer-reviews-second');

        if (mediaQuery.matches) {
            if (reviewsWrapper) {
                startCircularScroll(reviewsWrapper, 10);
            }
            if (reviewsWrapperSecond) {
                startSeamlessTopToBottomScroll(reviewsWrapperSecond, 10);
            }
        }
    }

    // Initialize animations on page load
    initializeAnimations();

    // Recheck animations on viewport resize
    mediaQuery.addEventListener("change", initializeAnimations);
    // Customer Reviews GSAP Animation Script End
</script>


<script>
    // *********************** 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>


<script>
  const v = document.getElementById("heroVideo");
  const btn = document.getElementById("playBtn");

  // Click overlay OR video to toggle
  function togglePlay(){
    if (v.paused) {
      v.play();
      btn.classList.add("hide");
    } else {
      v.pause();
      btn.classList.remove("hide");
    }
  }

  btn.addEventListener("click", togglePlay);
  v.addEventListener("click", togglePlay);

  // If video ends (agar loop nahi), show play again
  v.addEventListener("ended", () => btn.classList.remove("hide"));
</script>