<?php
/*
Template Name: About Us
*/

get_header('new');
?>


<section class="section banner about-us-banner no-lazy">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-cont">
                    <small class="banner-tagline">ABOUT US</small>
                    <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"><?php echo get_field('banner_right_button_text'); ?></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont d-block" style="min-height:300px;">
					
<?php
	$desktop_img_url = get_field('columns_right_image');
	$mobile_img_url  = get_field('columns_right_image_mobile');
?>
    <picture>
        <source class="no-lazy" media="(max-width: 767px)" srcset="<?php echo $mobile_img_url ? $mobile_img_url : $desktop_img_url ?>">
        <img src="<?php echo $desktop_img_url;?>" loading="eager" fetchpriority="high" decoding="async" width="636" height="536" class="img-fluid no-lazy">
    </picture>
					
					
                </div>
            </div>
        </div>
    </div>
</section>

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

<section class="section about-warego">
    <div class="container">

        <div class="row align-items-lg-center">
            <div class="col-lg-6">
                <div class="img-cont slide-right">
<!--                     <img src="<?php // echo get_field('about_image'); ?>" alt="happy-client" class="img-fluid" loading="lazy"> -->
					<?php
$image_url = get_field('about_image');
$img_id  = $image_url ? attachment_url_to_postid($image_url) : 0;

if ($img_id) {
	$alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
    $alt = $alt ?: 'About Us'; // fallback alt
	
    echo wp_get_attachment_image($img_id, 'medium_large', false, [
        'class' => 'img-fluid',
        'loading' => 'lazy',
        'sizes' => '(max-width: 767px) 336px, 636px',
		'alt' => $alt,
    ]);
}
?>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text-content slide-left">
                <h2 class="section-innertitle slide-up">About <span>WareGo</span></h2>
                    <p class="section-content slide-left">
                    <?php echo get_field('about_description'); ?>
                    </p>
                    <ul>
                    <?php

// Check rows exists.
if( have_rows('about_repeater') ):

    // Loop through rows.
    while( have_rows('about_repeater') ) : the_row();

        // Load sub field value.
        $about_services_image = get_sub_field('about_services_image');
		$img_id  = $about_services_image ? attachment_url_to_postid($about_services_image) : 0;
		$alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
		$alt = $alt ?: wp_strip_all_tags($about_service_text); // fallback alt

		
//         $about_services_image = get_sub_field('about_services_image');
        $about_service_text = get_sub_field('about_service_text');
       ?>
        <li  class="slide-up">
			<span>
				<?php
				if ($img_id) {
					echo wp_get_attachment_image($img_id, 'thumbnail', false, [
						'class' => 'img-fluid',
						'loading' => 'lazy',
						'alt' => $alt,
					]);
				}
				?>
			</span>
                            <?php echo $about_service_text; ?>
                        </li>
       <?php
    endwhile;

endif; ?>
                        
                       
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section our-experience">
    <div class="container">
        <div class="row mx-lg-5">
            <?php if ($cards = get_field('about_awards_repeater')) : ?>
                <?php
                $classes  = ['slide-left', 'slide-up', 'slide-right'];
                $counters = ['years-counter', 'employees-counter', 'customers-counter'];
                ?>

                <?php foreach ($cards as $i => $card) : ?>
                    <div class="col-md-4">
                        <div class="card <?php echo $classes[$i] ?? ''; ?>">
                            <div class="img-cont">
                                <?php
                                $image_url = $card['awards_image'] ?? '';
                                $image_id  = $image_url ? attachment_url_to_postid($image_url) : 0;
                                $alt       = $image_id
                                    ? (get_post_meta($image_id, '_wp_attachment_image_alt', true) ?: wp_strip_all_tags($card['awards_text']))
                                    : ($card['awards_heading'] ?? '');

                                if ($image_id) {
                                    echo wp_get_attachment_image($image_id, 'medium', false, [
                                        'class'   => 'img-fluid',
                                        'alt'     => $alt,
                                        'loading' => 'lazy',
                                    ]);
                                } elseif ($image_url) {
                                    ?>
                                    <img
                                        src="<?php echo $image_url; ?>"
                                        alt="<?php echo $alt; ?>"
                                        class="img-fluid"
                                        loading="lazy"
                                    >
                                    <?php
                                }
                                ?>
                            </div>

                            <div class="text-cont">
                                <h3 class="<?php echo $counters[$i] ?? ''; ?>">
                                    <?php echo $card['awards_heading']; ?>
                                </h3>
                                <p><?php echo $card['awards_text']; ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>


<section class="section with-warego">
    <div class="container">
        <div class="text-cont">
            <h2 class="section-innertitle slide-right"><?php echo get_field('animation_title'); ?></h2>
        </div>
    </div>
    <div class="container-fluid">
        <ul>
        <?php

// Check rows exists.
if( have_rows('warego_animation') ):

    // Loop through rows.
    while( have_rows('warego_animation') ) : the_row();

        // Load sub field value.
        $warego_animation_title = get_sub_field('warego_animation_title');
        $warego_animation_description = get_sub_field('warego_animation_description');
        
       ?>
       <li>
                <h3 class="text-animate"><?php echo $warego_animation_title; ?></h3>
                <p class="text-animate"><?php echo $warego_animation_description; ?></p>
            </li>
       <?php
    endwhile;

endif; ?>
            
            
        </ul>
    </div>
</section>
<section class="section2"></section>

<section class="section request-demo tryWarego">
    <div class="container">
        <div class="demo-cont slide-up">
            <div class="row align-items-center">
                <div class="col-lg-7 slide-right">
                    <h2 class="section-title"><?php echo get_field('cta_title'); ?></h2>
                    <a href="<?php echo get_field('cta_button_link'); ?>" class="demo-btn animated-btn"><?php echo get_field('cta_button_text'); ?>
                    <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 class="col-lg-5 text-lg-end fade-up">
                    <div class="img-cont">
						<?php
						$cta_image = get_field('cta_image');
						$cta_image_id = $cta_image ? attachment_url_to_postid($cta_image) : 0;

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

							echo wp_get_attachment_image($cta_image_id, 'medium_large', false, [
								'class' => 'img-fluid',
                                'fetchpriority'   => 'low',
								'loading' => 'lazy',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : wp_strip_all_tags(get_field('cta_title')),
								'sizes' => '(max-width: 767px) 336px, 404px',
							]);
						}
						?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section tech-story">
 <div class="container">
     <div class="text-content">
         <h2 class="section-title slide-down"><?php echo get_field('tech_story_title'); ?></h2>
     </div>
     <div class="row align-items-lg-center">
    
         <div class="col-md-6">
             <div class="img-cont slide-right">
				 <?php
						$image = get_field('tech_story_image_1');
						$image_id = $image ? attachment_url_to_postid($image) : 0;

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

							echo wp_get_attachment_image($image_id, 'medium_large', false, [
								'class' => 'img-fluid',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : wp_strip_all_tags(get_field('tech_story_heading_1')),
								'loading' => 'lazy',
								'sizes' => '(max-width: 767px) 336px, 610px',
							]);
						}
				 ?>
             </div>
         </div>
         <div class="col-md-6">
             <div class="text-cont">
                 <h3 class="section-innertitle slide-up"><?php echo get_field('tech_story_heading_1'); ?></h3>
                 <p class="slide-up"><?php echo get_field('tech_story_description_1'); ?></p>
             </div>
         </div>
         <div class="col-md-12 relative">
             <img src="<?php echo get_template_directory_uri(); ?>/assets/img/about-us/left-arrow.webp" alt="arrow" class="img-fluid direction-arrow arrow1" loading="lazy" decoding="async" width="635" height="351">
         </div>





         <div class="col-md-6">
             <div class="text-cont">
                 <h3 class="section-innertitle slide-up"><?php echo get_field('tech_story_heading_2'); ?></h3>
                 <p class="slide-up"><?php echo get_field('tech_story_description_2'); ?></p>
             </div>
         </div>
         <div class="col-md-6">
             <div class="img-cont slide-left">
				 <?php
						$image = get_field('tech_story_image_2');
						$image_id = $image ? attachment_url_to_postid($image) : 0;

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

							echo wp_get_attachment_image($image_id, 'medium_large', false, [
								'class' => 'img-fluid',
								'loading' => 'lazy',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : wp_strip_all_tags(get_field('tech_story_heading_2')),
								'sizes' => '(max-width: 767px) 336px, 610px',
							]);
						}
				 ?>
             </div>
         </div>
         <div class="col-md-12 relative">
             <img src="<?php echo get_template_directory_uri(); ?>/assets/img/about-us/right-arrow.webp" alt="arrow" class="img-fluid direction-arrow arrow2" loading="lazy" decoding="async" width="635" height="351">
         </div>


         <div class="col-md-6">
             <div class="img-cont slide-right">
				 <?php
						$image = get_field('tech_story_image_3');
						$image_id = $image ? attachment_url_to_postid($image) : 0;

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

							echo wp_get_attachment_image($image_id, 'medium_large', false, [
								'class' => 'img-fluid',
								'loading' => 'lazy',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : wp_strip_all_tags(get_field('tech_story_heading_3')),
								'sizes' => '(max-width: 767px) 336px, 610px',
							]);
						}
				 ?>
             </div>
         </div>
         <div class="col-md-6">
             <div class="text-cont">
                 <h3 class="section-innertitle slide-up"><?php echo get_field('tech_story_heading_3'); ?></h3>
                 <p class="slide-up"><?php echo get_field('tech_story_description_4'); ?></p>
             </div>
         </div>
         <div class="col-md-12 relative">
             <img src="<?php echo get_template_directory_uri(); ?>/assets/img/about-us/left-arrow.webp" alt="arrow" class="img-fluid direction-arrow arrow3" loading="lazy" decoding="async" width="635" height="351">
         </div>


         <div class="col-md-6">
             <div class="text-cont mb-0">
                 <h3 class="section-innertitle slide-up"><?php echo get_field('tech_story_heading_4'); ?></h3>
                 <p class="slide-up"><?php echo get_field('tech_story_description_5'); ?></p>
             </div>
         </div>
         <div class="col-md-6">
             <div class="img-cont mb-0 slide-left" >
				 <?php
						$image = get_field('tech_story_image_4');
						$image_id = $image ? attachment_url_to_postid($image) : 0;

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

							echo wp_get_attachment_image($image_id, 'medium_large', false, [
								'class' => 'img-fluid',
								'loading' => 'lazy',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : wp_strip_all_tags(get_field('tech_story_heading_4')),
								'sizes' => '(max-width: 767px) 336px, 610px',
							]);
						}
				 ?>
                 
             </div>
         </div>
     </div>
 </div>
</section>

<!-- INDUSTRIES SECTION START -->

<?php
    $service_title = get_field('service_title');
    $service_heading =  get_field('service_heading');
    $services = [
        'title'      =>$service_title,
        'content'    =>$service_heading,
        'category'   =>'about-services',

    ];
    get_template_part('templates-parts/pages/services-about', '' , $services);
?>
<!-- INDUSTRIES SECTION END -->

<section class="section message-from-ceo">
    <div class="container">
        <div class="row align-items-lg-center">
            <div class="col-md-6">
                <div class="img-cont slide-right">
					<?php
						$image = get_field('ceo_image');
						$image_id = $image ? attachment_url_to_postid($image) : 0;

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

							echo wp_get_attachment_image($image_id, 'medium_large', false, [
								'class' => 'img-fluid',
								'loading' => 'lazy',
                                'alt'   => $alt ? wp_strip_all_tags($alt) : 'Message From The CEO',
								'sizes' => '(max-width: 767px) 336px, 603',
							]);
						}
				 ?>
                </div>
            </div>
            <div class="col-md-6">
                <div class="text-cont">
                    <h2 class="section-innertitle slide-left"><?php echo get_field('ceo_title'); ?></h2>
                    <p class="section-content slide-left">
                    <?php echo get_field('ceo_description'); ?>
                    </p>
                    <h3 class="slide-up"><?php echo get_field('ceo_name'); ?></h3>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- INDUSTRIES SECTION START -->

<?php
    $testimonials_title = get_field('testimonials_title');
    
    $testimonial = [
        'title'      =>$testimonials_title,
        'category'   =>'about-testimonials',

    ];
    get_template_part('templates-parts/pages/testimonials', '' , $testimonial);
?>
<!-- INDUSTRIES SECTION END -->

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

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

<?php
    get_footer();
?>
<script>
 //Update counter Code About us page 
 document.addEventListener("DOMContentLoaded", function () {
    const counters = [
        { element: ".years-counter", endValue: <?php echo rtrim($cards[0]['awards_heading'], '+'); ?> },
        { element: ".employees-counter", endValue: <?php echo rtrim($cards[1]['awards_heading'], '+'); ?> },
        { element: ".customers-counter", endValue: <?php echo rtrim($cards[2]['awards_heading'], '+'); ?> }
    ];

    const animateCounter = (element, endValue) => {
        gsap.fromTo(
            element,
            { textContent: 0 },
            {
                textContent: endValue,
                duration: 3.5,
                delay: 0.3,
                ease: "power2.out",
                onUpdate: function () {
                    this.targets()[0].innerHTML = Math.ceil(this.targets()[0].textContent) + "+";
                },
            }
        );
    };

    ScrollTrigger.create({
        trigger: ".our-experience",
        start: "top 80%",
        onEnter: () => {
            counters.forEach(counter => {
                animateCounter(document.querySelector(counter.element), counter.endValue);
            });
        },
    });
});
    </script>
    <script>
    $('.banner-logos-slider').owlCarousel({
        loop: false,
        margin: 10,
        nav: false,
        autoplay: true,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 5
            }
        }
    });
    $('.satisfied-customer-slider').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        navText: ["<img src='assets/img/left-arrow.webp' alt='Previous Slide'>","<img src='assets/img/right-arrow.webp' alt='Next Slide'>"],
        dots:false,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    })
    //Update counter Code About us page 
document.addEventListener("DOMContentLoaded", function () {
    const counters = [
        { element: ".years-counter", endValue: <?php echo rtrim($cards[0]['awards_heading'], '+'); ?> },
        { element: ".employees-counter", endValue: <?php echo rtrim($cards[1]['awards_heading'], '+'); ?> },
        { element: ".customers-counter", endValue: <?php echo rtrim($cards[2]['awards_heading'], '+'); ?> }
    ];

    const animateCounter = (element, endValue) => {
        gsap.fromTo(
            element,
            { textContent: 0 },
            {
                textContent: endValue,
                duration: 3.5,
                delay: 0.3,
                ease: "power2.out",
                onUpdate: function () {
                    this.targets()[0].innerHTML = Math.ceil(this.targets()[0].textContent) + "+";
                },
            }
        );
    };

    ScrollTrigger.create({
        trigger: ".our-experience",
        start: "top 80%",
        onEnter: () => {
            counters.forEach(counter => {
                animateCounter(document.querySelector(counter.element), counter.endValue);
            });
        },
    });
});

</script>