<?php
/*
Template Name: Warehouse Optimization Page.
*/
get_header('new');
?>
<style>
.owl-nav.disabled {
    display: none;
}</style>
<!-- first section -->
<section class="section banner supply-chain-banner pb-5 no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-6">
                <div class="text-cont mt-0">
                    <h1 class="banner-heading"><?php echo get_field('banner_heading'); ?></h1>
                    <p class="banner-content">
                        <?php echo get_field('banner_description'); ?>
                    </p>
					<?php $highlights = get_field('banner_highlights'); ?>
                    <ul>
                        <?php if ($highlights && is_array($highlights)) : ?>
                            <?php foreach ($highlights as $highlight) : ?>
                                <li>
                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/apparel-inventory-management/tick.webp" alt="tick" class="img-fluid">
                                    <?php echo $highlight['item']; ?>
                                </li>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </ul>
                    <div class="banner-btns">
						<?php $cta_1 = get_field('banner_cta_1'); ?>
						 <?php if (!is_null($cta_1)) : ?>
                        <a href="<?php echo esc_url($cta_1['url']); ?>" class="primary animated-cta-btn <?php echo is_modal_link($cta_1['url']); ?>"><?php echo $cta_1['title']; ?>
                            <!-- <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>
						<?php endif; ?>
						<?php $cta_2 = get_field('banner_cta_2'); ?>
						<?php if (!is_null($cta_2)) : ?>
                        <a href="<?php echo esc_url($cta_2['url']); ?>" class="border-gradient-btn animated-btn <?php echo is_modal_link($cta_2['url']); ?>"><?php echo $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 class="col-lg-6">
                <div class="img-cont d-block text-center">
					<?php
	$desktop_img_url = get_field('banner_image');
	$mobile_img_url  = get_field('banner_mobile_image');
?>
    <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="567" height="676" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('banner_heading')); ?>">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end first section -->

<!-- 2nd section -->
<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" width="120" height="150" class="img-fluid">
                            </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<!-- end 2nd section -->
<!-- Icons Cards Start start -->
 <?php
 $counters = ['class' => 'pt-5 '];
 get_template_part('templates-parts/pages/counter-new',null,$counters)?>
<!-- Icons Cards Start end -->

<!-- counter with text section -->
<section class="section kitting-software-what-it-does bg-white pt-lg-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h2 class="section-innertitle mb-4"><?php echo get_field('features_understanding_section_heading'); ?></h2>
                    <p class="section-content">
                       <?php echo get_field('features_understanding_section_text'); ?>
                    </p>
                   <div class="text-center text-lg-start mt-4">
                        <a href="<?php echo get_field('features_understanding_section_button_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('features_understanding_section_button_text'); ?></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont">
                    <img src="<?php echo get_field('features_understanding_section_image'); ?>" alt="industry-management" class="img-fluid" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Construction Inventory Management Process Section Start -->
<section class="section construction-inventory-management-process warehouse-optimization-process">
    <div class="container">
        <?php
        // Top content fields
        $proc_title      = get_field( 'process_title' );
        $proc_title_high = get_field( 'process_title_highlight' );
        $proc_intro      = get_field( 'process_intro' );
        $proc_image      = get_field( 'process_main_image' );
        $proc_cta_text   = get_field( 'process_cta_text' );
        $proc_cta_link   = get_field( 'process_cta_link' );
        ?>
        <div class="row gy-4">
            <div class="col-lg-6 col-xxl-5">
                <div class="left-wrapper">
                    <?php if ( $proc_title ) : ?>
                        <h2 class="section-title text-center text-lg-start">
                            <?php echo esc_html( $proc_title ); ?>
                            <?php if ( $proc_title_high ) : ?>
                                <span><?php echo esc_html( $proc_title_high ); ?></span>
                            <?php endif; ?>
                        </h2>
                    <?php endif; ?>

                    <?php if ( $proc_intro ) : ?>
                        <p class="section-content text-center text-lg-start">
                            <?php echo esc_html( $proc_intro ); ?>
                        </p>
                    <?php endif; ?>

                    <div class="img-cont">
                        <?php if ( $proc_image ) : ?>
                            <img id="process-img"
                                 src="<?php echo esc_url( $proc_image['url'] ); ?>"
                                 class="img-fluid" loading="lazy"
                                 alt="<?php echo esc_attr( $proc_image['alt'] ?: 'process-step' ); ?>">
                        <?php else : ?>
                            <!-- fallback optional -->
                            <img id="process-img"
                                 src=""
                                 class="img-fluid" loading="lazy"
                                 alt="">
                        <?php endif; ?>
                    </div>

                    <?php if ( $proc_cta_text ) : ?>
                        <div class="text-center text-lg-start mt-4">
                            <?php
                            $cta_href = $proc_cta_link ? esc_url( $proc_cta_link ) : 'javascript:;';
                            ?>
                            <a href="<?php echo $cta_href; ?>" class="primary animated-cta-btn">
                                <?php echo esc_html( $proc_cta_text ); ?>
                            </a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="col-lg-6 col-xxl-7">
                <div class="inventory-process-steps-wrapper-main">
                    <div class="inventory-process-steps-wrapper">
                        <?php if ( have_rows( 'process_steps' ) ) : ?>
                            <?php while ( have_rows( 'process_steps' ) ) : the_row(); ?>
                                <?php
                                $row_index   = get_row_index(); // 1,2,3,4...
                                $step_id     = get_sub_field( 'step_id' );      // e.g. account-signin
                                $step_image  = get_sub_field( 'step_image' );   // for data-image
                                $step_number = get_sub_field( 'step_number' );  // 01, 02, 03, 04
                                $step_title  = get_sub_field( 'step_title' );   // Agile operations...
                                $data_image  = $step_image && isset( $step_image['url'] ) ? $step_image['url'] : '';
                                $html_id     = $step_id ? $step_id : 'step-' . $row_index;
                                ?>
                                <div class="inventory-steps-card-wrapper"
                                     id="<?php echo esc_attr( $html_id ); ?>"
                                     data-image="<?php echo esc_url( $data_image ); ?>">
                                    <div class="svg-wrapper">
                                        <?php
                                        if ( $row_index === 1 ) : ?>
                                            <svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="37" cy="37" r="37" fill="white"/>
                                                <path d="M47.9841 55.4996H36.9998V52.0309H47.9841C49.578 52.0309 50.8747 50.7342 50.8747 49.1403V24.8593C50.8747 23.2654 49.578 21.9687 47.9841 21.9687H36.9998V18.5H47.9841C51.4904 18.5 54.3434 21.353 54.3434 24.8593V49.1403C54.3434 52.6466 51.4904 55.4996 47.9841 55.4996ZM43.4291 35.7736L34.1792 26.5237L31.7268 28.9761L38.0156 35.2655H19.6562V38.7342H38.0156L31.7268 45.0235L34.1792 47.4759L43.4291 38.226C44.1067 37.549 44.1067 36.4506 43.4291 35.7736Z" fill="#5558A6"/>
                                            </svg>
                                        <?php elseif ( $row_index === 2 ) : ?>
                                            <svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="33" cy="33" r="32.5" fill="white" stroke="#F9F9F9"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M44.0031 24.174C45.6605 24.174 47.0035 25.517 47.0035 27.174V43C47.0035 44.657 45.6605 46 44.0031 46H22.0004C21.2048 46 20.4413 45.684 19.879 45.121C19.3166 44.559 19 43.796 19 43V23C19 22.204 19.3166 21.441 19.879 20.879C20.4413 20.316 21.2048 20 22.0004 20H27.2765C27.9783 20 28.6595 20.247 29.199 20.697L33.0863 23.942C33.2658 24.092 33.4921 24.174 33.7264 24.174H44.0031ZM38.1338 33L37.1703 34.445C36.864 34.905 36.9885 35.526 37.448 35.832C37.9064 36.138 38.5282 36.014 38.8345 35.555L40.8347 32.555C40.9433 32.391 41.0028 32.199 41.0028 32C41.0028 31.801 40.9433 31.609 40.8347 31.445L38.8345 28.445C38.5282 27.986 37.9064 27.862 37.448 28.168C36.9885 28.474 36.864 29.095 37.1703 29.555L38.1338 31H32.0016C31.4496 31 31.0015 31.448 31.0015 32C31.0015 32.552 31.4496 33 32.0016 33H38.1338ZM26.1689 38.555L28.1691 41.555C28.4755 42.014 29.0973 42.138 29.5556 41.832C30.0151 41.526 30.1397 40.905 29.8334 40.445L28.8698 39H35.002C35.5541 39 36.0021 38.552 36.0021 38C36.0021 37.448 35.5541 37 35.002 37H28.8698L29.8334 35.555C30.1397 35.095 30.0151 34.474 29.5556 34.168C29.0973 33.862 28.4755 33.986 28.1691 34.445L26.1689 37.445C26.0603 37.609 26.0009 37.801 26.0009 38C26.0009 38.199 26.0603 38.391 26.1689 38.555Z" fill="#5558A6"/>
                                            </svg>
                                        <?php elseif ( $row_index === 3 ) : ?>
                                            <svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="33" cy="33" r="32.5" fill="white" stroke="#F9F9F9"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8075 47.7249C25.1927 47.7249 19 41.5142 19 33.8993C19 26.2845 25.1927 20.0918 32.8075 20.0918C33.2036 20.0918 33.5276 20.4158 33.5276 20.8119C33.5276 21.2079 33.2036 21.532 32.8075 21.532C25.9848 21.532 20.4402 27.0766 20.4402 33.8993C20.4402 40.7221 25.9848 46.2847 32.8075 46.2847C39.6303 46.2847 45.1929 40.7221 45.1929 33.8993C45.1929 30.515 43.8428 27.3466 41.3945 24.9883C41.1065 24.7183 41.1065 24.2503 41.3765 23.9622C41.6465 23.6742 42.1146 23.6742 42.3846 23.9442C45.1209 26.5725 46.6331 30.1189 46.6331 33.8993C46.6331 41.5142 40.4224 47.7249 32.8075 47.7249Z" fill="#5558A6"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.808 24.6271C32.7 24.6271 32.5919 24.5911 32.4839 24.5371C32.2499 24.4111 32.0879 24.1771 32.0879 23.907V17.7143C32.0879 17.4443 32.2499 17.2103 32.4839 17.0843C32.718 16.9583 33.006 16.9763 33.222 17.1203L37.7045 20.1806C37.9025 20.3066 38.0105 20.5227 38.0105 20.7567C38.0105 21.0087 37.9025 21.2247 37.7045 21.3507L33.222 24.5011C33.096 24.5731 32.952 24.6271 32.808 24.6271Z" fill="#5558A6"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M34.1594 42.3061H31.4771C31.081 42.3061 30.775 42.018 30.757 41.622L30.667 39.7498C30.0009 39.4977 29.3708 39.1377 28.8308 38.6877L27.1566 39.5517C26.8146 39.7318 26.4005 39.6058 26.2025 39.2637L24.8523 36.9415C24.6723 36.6174 24.7803 36.1854 25.1044 35.9874L26.6886 34.9612C26.6165 34.6192 26.5985 34.2592 26.5985 33.8991C26.5985 33.5391 26.6165 33.197 26.6886 32.837L25.1044 31.8289C24.7803 31.6129 24.6723 31.1988 24.8523 30.8568L26.2025 28.5345C26.4005 28.2105 26.8146 28.0845 27.1566 28.2645L28.8308 29.1286C29.3708 28.6605 30.0009 28.3005 30.667 28.0665L30.757 26.1763C30.775 25.7982 31.081 25.4922 31.4771 25.4922H34.1594C34.5374 25.4922 34.8615 25.7982 34.8795 26.1763L34.9515 28.0665C35.6355 28.3005 36.2476 28.6605 36.8057 29.1286L38.4799 28.2645C38.8219 28.0845 39.2359 28.2105 39.434 28.5345L40.7661 30.8568C40.9641 31.1988 40.8561 31.6129 40.5321 31.8289L38.9479 32.837C39.0019 33.197 39.0379 33.5391 39.0379 33.8991C39.0379 34.2592 39.0019 34.6192 38.9479 34.9612L40.5321 35.9874C40.8561 36.1854 40.9641 36.6174 40.7661 36.9415L39.434 39.2637C39.2359 39.6058 38.8219 39.7318 38.4799 39.5517L36.8057 38.6877C36.2476 39.1377 35.6355 39.4977 34.9515 39.7498L34.8795 41.622C34.8615 42.018 34.5374 42.3061 34.1594 42.3061ZM32.8092 37.2295C30.973 37.2295 29.4969 35.7353 29.4969 33.8991C29.4969 32.0629 30.973 30.5868 32.8092 30.5868C34.6454 30.5868 36.1396 32.0629 36.1396 33.8991C36.1396 35.7353 34.6454 37.2295 32.8092 37.2295Z" fill="#5558A6"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8105 45.097C26.6358 45.097 21.6133 40.0745 21.6133 33.8998C21.6133 33.5037 21.9373 33.1797 22.3334 33.1797C22.7294 33.1797 23.0534 33.5037 23.0534 33.8998C23.0534 39.2824 27.4279 43.6568 32.8105 43.6568C38.1931 43.6568 42.5856 39.2824 42.5856 33.8998C42.5856 33.5037 42.8916 33.1797 43.3057 33.1797C43.7017 33.1797 44.0258 33.5037 44.0258 33.8998C44.0078 40.0745 38.9852 45.097 32.8105 45.097Z" fill="#5558A6"/>
                                            </svg>
                                        <?php else : ?>
                                            <svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="33" cy="33" r="32.5" fill="white" stroke="#E8E8E8"/>
                                                <path d="M51.7119 32.3435C51.6244 32.2442 49.5294 29.8805 46.1368 27.4965C42.8456 25.1837 39.4619 23.662 36.1797 23C40.3061 24.5059 43.2598 28.4695 43.2598 33.1106C43.2598 37.7514 40.3061 41.7151 36.1797 43.2209C39.4619 42.5589 42.8456 41.0375 46.1368 38.7247C49.5294 36.3405 51.6244 33.9768 51.7119 33.8774C52.0978 33.4391 52.0978 32.7821 51.7119 32.3435Z" fill="#5558A6"/>
                                                <path d="M21.7415 33.1106C21.7415 28.4698 24.6953 24.5059 28.8216 23C25.5394 23.662 22.156 25.1837 18.8649 27.4965C15.4722 29.8805 13.3769 32.2442 13.2894 32.3435C12.9035 32.7821 12.9035 33.4391 13.2894 33.8774C13.3769 33.9768 15.4722 36.3405 18.8649 38.7247C22.156 41.0375 25.5394 42.5589 28.8216 43.2209C24.6953 41.7154 21.7415 37.7514 21.7415 33.1106Z" fill="#5558A6"/>
                                                <path d="M40.9363 33.1088C40.9363 28.4567 37.1516 24.6719 32.4994 24.6719C27.8473 24.6719 24.0625 28.4567 24.0625 33.1088C24.0625 37.7609 27.8473 41.5457 32.4994 41.5457C37.1516 41.5457 40.9363 37.7609 40.9363 33.1088ZM27.8175 31.9734C28.271 31.5199 29.0059 31.5199 29.4591 31.9734L31.4223 33.9363L35.5397 29.8188C35.9929 29.3657 36.7278 29.3657 37.1813 29.8188C37.6345 30.2723 37.6345 31.0072 37.1813 31.4604L32.2429 36.3988C32.0162 36.6252 31.7193 36.7386 31.4223 36.7386C31.1254 36.7386 30.8281 36.6255 30.6017 36.3988L27.8178 33.6149C27.3644 33.1615 27.3644 32.4265 27.8175 31.9734Z" fill="#5558A6"/>
                                            </svg>
                                        <?php endif; ?>
                                    </div>
                                    <div class="inventory-process-steps">
                                        <div class="text-cont">
                                            <div class="text-cont">
                                                <?php if ( $step_number ) : ?>
                                                    <span class="step-pill"><?php echo esc_html( $step_number ); ?></span>
                                                <?php endif; ?>
                                                <?php if ( $step_title ) : ?>
                                                    <h3><?php echo esc_html( $step_title ); ?></h3>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>

                    <!-- Control Scroll Height -->
                    <div class="scroll-height-control">
                        <div class="track-div"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Construction Inventory Management Process Section End -->

<!-- integration tabs start -->
<?php get_template_part('templates-parts/pages/integration-post-tabs')?>
<!-- integration tabs end -->

<section class="section return-management-features">
    <div class="container">
        <div class="text-center text-cont">
            <?php if ( $heading = get_field('system_heading') ) : ?>
                <h2 class="section-title"><?php echo esc_html( $heading ); ?></h2>
            <?php endif; ?>

            <?php if ( $desc = get_field('system_description') ) : ?>
                <p class="section-content"><?php echo esc_html( $desc ); ?></p>
            <?php endif; ?>
        </div>

        <div class="row gy-4">
            <?php
            $highlights = get_field('system_highlights'); // repeater / group array
            if ( $highlights && is_array( $highlights ) ) :
                foreach ( $highlights as $highlight ) :
                    $icon        = isset($highlight['icon']) ? $highlight['icon'] : '';
                    $item_title  = isset($highlight['heading']) ? $highlight['heading'] : '';
                    $item_text   = isset($highlight['description']) ? $highlight['description'] : '';
            ?>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="svg-content">
                            <?php
                            
                            echo $icon;
                            ?>
                        </div>
                        <div class="text-content">
                            <?php if ( $item_title ) : ?>
                                <h3><?php echo esc_html( $item_title ); ?></h3>
                            <?php endif; ?>
                            <?php if ( $item_text ) : ?>
                                <p><?php echo esc_html( $item_text ); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php
                endforeach;
            endif;
            ?>
        </div>

        <?php
        $cta = get_field('system_cta'); // Link ya group
        if ( is_array($cta) && !empty($cta['url']) && !empty($cta['title']) ) :
        ?>
            <div class="text-center mt-5">
                <a href="<?php echo esc_url( $cta['url'] ); ?>"
                   class="primary animated-cta-btn">
                    <?php echo esc_html( $cta['title'] ); ?>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Warehouse Slotting Optimization Benefits Section Start -->
<section class="section warehouse-slotting-optimization">
    <div class="container">

        <?php
        $slot_title      = get_field( 'slot_title' );
        $slot_title_high = get_field( 'slot_title_highlight' );
        $slot_intro      = get_field( 'slot_intro' );
        $slot_cta_text   = get_field( 'slot_cta_text' );
        $slot_cta_link   = get_field( 'slot_cta_link' );
        $slot_benefits   = get_field( 'slot_benefits' ); // repeater ka pura array
        ?>

        <div class="row justify-content-between">
            <div class="col-lg-6">
                <?php if ( $slot_title ) : ?>
                    <h2 class="section-title text-center text-lg-start">
                        <?php echo esc_html( $slot_title ); ?>
                        <?php if ( $slot_title_high ) : ?>
                            <span><?php echo esc_html( $slot_title_high ); ?></span>
                        <?php endif; ?>
                    </h2>
                <?php endif; ?>
            </div>
            <div class="col-lg-5">
                <?php if ( $slot_intro ) : ?>
                    <p class="section-content text-center text-lg-start">
                        <?php echo esc_html( $slot_intro ); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <!-- Slider + progress bar -->
        <div class="warehouse-slotting-cards">
            <div class="banner-main-slider owl-theme owl-carousell">
                <?php if ( ! empty( $slot_benefits ) && is_array( $slot_benefits ) ) : ?>

                    <?php foreach ( $slot_benefits as $row ) : ?>
                        <?php
                        $number  = isset( $row['number'] )  ? $row['number']  : '';
                        $title   = isset( $row['title'] )   ? $row['title']   : '';
                        $content = isset( $row['content'] ) ? $row['content'] : '';
                        ?>

                        <div class="card slottting-card">
                            <?php if ( $number ) : ?>
                                <h2 class="numbering"><?php echo esc_html( $number ); ?></h2>
                            <?php endif; ?>

                            <?php if ( $title ) : ?>
                                <h2 class="slottting-card-title">
                                    <?php echo esc_html( $title ); ?>
                                </h2>
                            <?php endif; ?>

                            <?php if ( $content ) : ?>
                                <p class="slottting-card-content">
                                    <?php echo esc_html( $content ); ?>
                                </p>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>

                <?php else : ?>
                    <!-- Debug fallback:
                    <p>No slot_benefits rows found.</p>
                    -->
                <?php endif; ?>
            </div>
        </div>

        <div class="owl-nav-main-wrapper">
            <div class="slide-owl-nav">
                <div class="owl-nav-links"></div>
            </div>

            <?php if ( $slot_cta_text ) : ?>
                <div class="demo-btn-wrapper text-center">
                    <a href="<?php echo esc_url( $slot_cta_link ?: 'javascript:;' ); ?>"
                       class="primary animated-cta-btn">
                        <?php echo esc_html( $slot_cta_text ); ?>
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>


<!-- Warehouse Slotting Optimization Benefits Section End -->





<!-- pricing section start -->
<?php 
$pricing = [
    'class' => 'supply-chain-pricing-cards pt-5',
    'category' => 'home',
    'headingcon' => 'h2',
];
get_template_part('templates-parts/pages/pricing',null,$pricing)?>
<!-- pricing section end -->


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



<!-- testimonials start -->
<section class="section say-about-warego client-say-about-warego">
    <div class="container">
        <div class="text-center text-cont">
            <h2 class="section-title mb-5"><?php echo get_field('reviews_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('reviews_description'); ?></p>
        </div>

        <?php if( have_rows('reviews') ): ?>
        <div class="row gy-4">
        <?php while( have_rows('reviews') ): the_row();?>
            <div class="col-lg-6 right-sight">
                <div class="card">
                    <p><?php echo get_sub_field('quote');?></p>
                    <ul>
                        <li>
                            <img src="<?php echo get_sub_field('image');?>" alt="Sarah Johnson" class="img-fluid">
                        </li>
                        <li>
                            <h3><?php echo get_sub_field('name');?></h3>
                            <p><?php echo get_sub_field('position');?></p>
                        </li>
                    </ul>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<!-- testimonials end -->

<!-- why leading section start -->
<section class="section why-leading">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('why_warego_wms_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('why_warego_wms_description'); ?></p>
        </div>
        <?php if( have_rows('why_warego_wms_features') ): ?>
        <ul>
            <?php while( have_rows('why_warego_wms_features') ): the_row(); ?>
                <li>
                    <div class="left">
                        <?php $image = get_sub_field('image'); ?>
                        <?php if ($image) : ?>
                            <img src="<?php echo esc_url($image); ?>" alt="<?php echo get_sub_field('heading'); ?>" class="img-fluid">
                        <?php endif; ?>
                    </div>
                    <div class="right">
                        <h3><?php echo get_sub_field('heading'); ?></h3>
                        <p><?php echo get_sub_field('description'); ?></p>
                    </div>
                </li>
            <?php endwhile; ?>
        </ul>
        <?php else: ?>
        <p>No features available.</p>
        <?php endif; ?>

        <div class="text-center mt-5">
            <a href="<?php echo esc_url(get_field('why_warego_wms_cta_link')); ?>" class="primary animated-cta-btn" <?php echo is_modal_link(get_field('why_warego_wms_cta_link')); ?>><?php echo get_field('why_warego_wms_cta_label'); ?></a>
        </div>
    </div>
</section>
<!-- why leading section end -->

<!-- case studies start -->
<?php 
$portfolio = ['class' => 'bg-white pt-lg-0'];
get_template_part('templates-parts/pages/case-studies',null,$portfolio);?>
<!-- case studies end -->

<?php
// Agar ACF inactive ho to fatal error na aaye
if ( function_exists( 'get_field' ) ) {

    $affiliate_cta_image   = get_field( 'affiliate_cta_image' );
    $affiliate_cta_heading = get_field( 'affiliate_cta_heading' );
    $affiliate_cta_text    = get_field( 'affiliate_cta_text' );
    $aff_cta               = get_field( 'affiliate_cta_button' );
    $cta_button_links      = get_field( 'cta_button_links' );

} else {
    $affiliate_cta_image   = '';
    $affiliate_cta_heading = '';
    $affiliate_cta_text    = '';
    $aff_cta               = array();
    $cta_button_links      = '';
}

// is_modal_link() agar define nahin hai to bhi critical error na aaye
$modal_attr = '';
if ( function_exists( 'is_modal_link' ) ) {
    $modal_attr = is_modal_link( $cta_button_links );
}
?>

<section class="section bg-white pt-0">
    <div class="container">
        <div class="complete-comparison-cta right-fit-business-cta">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <?php if ( ! empty( $affiliate_cta_image ) ) : ?>
                        <img 
                            src="<?php echo esc_url( $affiliate_cta_image ); ?>" 
                            alt="<?php echo esc_attr( $affiliate_cta_heading ); ?>" 
                            class="img-fluid"
                        >
                    <?php endif; ?>
                </div>
                <div class="col-md-6">
                    <?php if ( ! empty( $affiliate_cta_heading ) ) : ?>
                        <h3 class="mb-3">
                            <?php echo esc_html( $affiliate_cta_heading ); ?>
                        </h3>
                    <?php endif; ?>

                    <?php if ( ! empty( $affiliate_cta_text ) ) : ?>
                        <p><?php echo wp_kses_post( $affiliate_cta_text ); ?></p>
                    <?php endif; ?>
                </div>
                <div class="col-md-3">
                    <?php if ( ! empty( $aff_cta ) && ! empty( $aff_cta['url'] ) ) : ?>
                        <a 
                            href="<?php echo esc_url( $aff_cta['url'] ); ?>" 
                            class="border-gradient-btn animated-btn"
                            <?php echo $modal_attr; ?>
                        >
                            <?php echo esc_html( $aff_cta['title'] ); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>


<?php
/* ============================
 *  FAQS
 * ============================ */
?>
<section class="section faqs pt-0 bg-white">
    <div class="container">
        <div class="text-cont slide-down">
            <?php
            $faq_title      = get_field('faq_section_title');
            $faq_highlight  = get_field('faq_section_title_highlight');
            ?>
            <?php if ( $faq_title ) : ?>
                <h2 class="section-title">
                    <?php echo esc_html( $faq_title ); ?>
                    <?php if ( $faq_highlight ) : ?>
                        <span><?php echo esc_html( $faq_highlight ); ?></span>
                    <?php endif; ?>
                </h2>
            <?php endif; ?>
        </div>

        <?php if ( have_rows('faq_items') ) : ?>
            <div class="accordion" id="faqs-accordion">
                <?php
                $i = 1;
                while ( have_rows('faq_items') ) :
                    the_row();
                    $question   = get_sub_field('faq_question');
                    $answer     = get_sub_field('faq_answer');

                    // Unique IDs for accordion items
                    $heading_id  = 'headingFaq' . $i;
                    $collapse_id = 'collapseFaq' . $i;

                    // First item open by default
                    $is_first    = ( $i === 1 );
                    $show_class  = $is_first ? 'show' : '';
                    $expanded    = $is_first ? 'true' : 'false';
                    $btn_class   = $is_first ? '' : 'collapsed';
                ?>
                    <div class="accordion-item slide-down">
                        <h2 class="accordion-header" id="<?php echo esc_attr( $heading_id ); ?>">
                            <button
                                class="accordion-button <?php echo esc_attr( $btn_class ); ?>"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#<?php echo esc_attr( $collapse_id ); ?>"
                                aria-expanded="<?php echo esc_attr( $expanded ); ?>"
                                aria-controls="<?php echo esc_attr( $collapse_id ); ?>">
                                <?php echo esc_html( $i . '. ' . $question ); ?>
                            </button>
                        </h2>
                        <div
                            id="<?php echo esc_attr( $collapse_id ); ?>"
                            class="accordion-collapse collapse <?php echo esc_attr( $show_class ); ?>"
                            aria-labelledby="<?php echo esc_attr( $heading_id ); ?>"
                            data-bs-parent="#faqs-accordion">
                            <div class="accordion-body">
                                <?php
                              
                                echo $answer;
                                ?>
                            </div>
                        </div>
                    </div>
                <?php
                    $i++;
                endwhile;
                ?>
            </div>
        <?php endif; ?>
    </div>
</section>


<?php get_footer(); ?>



<script>
    $('.banner-logos-slider').owlCarousel({
        loop: false,
        margin: 10,
        nav: false,
        autoplay: true,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 4
            }
        }
    });
    $('.portfolio-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
    $('.more-industries-slider').owlCarousel({
    loop: false, 
    margin: 20,
    nav: true,
    navText: ["<img src='assets/img/left-arrow.webp'>", "<img src='assets/img/right-arrow.webp'>"],
    dots: false,
    // stagePadding: 90, 
    responsive: {
        0: {
            items: 1, 
            stagePadding: 1, 
        },
        480: {
            items: 1, 
            stagePadding: 5, 
        },
        600: {
            items: 2, 
            stagePadding: 0, 

        },
        1200: {
            items : 3 ,
            // stagePadding: 35,
        },
    }
});
$('.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
            }
        }
    });


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

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


<script>
document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector(".construction-inventory-management-process");
  if (!section) return;

  const processImg = section.querySelector("#process-img");
  const stepCards  = section.querySelectorAll(".inventory-steps-card-wrapper");

  if (processImg && stepCards.length) {
    const firstCard = stepCards[0];
    firstCard.classList.add("active");
    const firstImg = firstCard.getAttribute("data-image");
    if (firstImg) processImg.src = firstImg;

    stepCards.forEach(card => {
      card.addEventListener("click", () => {
        stepCards.forEach(c => c.classList.remove("active"));
        card.classList.add("active");

        const imgPath = card.getAttribute("data-image");
        if (imgPath) {
          processImg.src = imgPath;
        }
      });
    });
  }

  const scrollList  = section.querySelector(".inventory-process-steps-wrapper");  
  const scrollTrack = section.querySelector(".scroll-height-control");            
  const trackDiv    = scrollTrack ? scrollTrack.querySelector(".track-div") : null;

  function updateScrollIndicator() {
    if (!scrollList || !scrollTrack || !trackDiv) return;

    const contentHeight = scrollList.scrollHeight;
    const visibleHeight = scrollList.clientHeight;
    const scrollTop     = scrollList.scrollTop;
    const trackHeight   = scrollTrack.offsetHeight;

    if (contentHeight <= visibleHeight) {
      trackDiv.style.display = "none";
      return;
    } else {
      trackDiv.style.display = "block";
    }

    const thumbHeight = Math.max((visibleHeight / contentHeight) * trackHeight, 30);
    trackDiv.style.height = thumbHeight + "px";

    const maxThumbTop = trackHeight - thumbHeight;
    const thumbTop = (scrollTop / (contentHeight - visibleHeight)) * maxThumbTop;

    trackDiv.style.top = thumbTop + "px";
  }

  updateScrollIndicator();

  if (scrollList) {
    scrollList.addEventListener("scroll", updateScrollIndicator);
  }

  window.addEventListener("resize", updateScrollIndicator);
});
</script>




<script>
    $(document).ready(function () {
        $('.warehouse-slotting-optimization').each(function () {
            
            var $section = $(this);
            var $slider = $section.find('.banner-main-slider');
            var $navBox = $section.find('.owl-nav-links');

            if (!$slider.length) return;

            var slideCount = $slider.find('.slottting-card').length;

            $navBox.empty();
            for (var i = 0; i < slideCount; i++) {
                $navBox.append(
                    '<a href="#" aria-label="Go to slide ' + (i + 1) + '"></a>'
                );
            }

            var $navLinks = $navBox.find('a');

            $navLinks.eq(0).addClass('active');

            $slider.owlCarousel({
                items: 3,
                loop: true,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                margin: 23,
                nav: false,
                dots: false,
                smartSpeed: 600,
                mouseDrag: true,
                touchDrag: true,
                pullDrag: true,
                slideBy: 1, 
                responsive: {
                    0: { items: 1 },
                    768: { items: 2 },
                    1200: { items: 3 }
                }
            });

            $navLinks.on('click', function (e) {
                e.preventDefault();

                var index = $(this).index();

                $slider.trigger('to.owl.carousel', [index, 500, true]);

                $navLinks.removeClass('active');
                $(this).addClass('active');
            });

            $slider.on('changed.owl.carousel', function (event) {
                var carousel = event.relatedTarget;

                var relIndex = carousel.relative(carousel.current());

                $navLinks.removeClass('active')
                    .eq(relIndex).addClass('active');
            });

        });

    });
</script>