<?php
/*
Template Name: Enhanced Page
*/

get_header('new');
?>
<section class="section banner warego-enhanced-banner no-lazy" style="background: radial-gradient(ellipse at 20% 40%, rgba(220, 218, 255, 0.7) 0%, transparent 60%), radial-gradient(ellipse at 75% 35%, rgba(210, 240, 225, 0.6) 0%, transparent 55%), #f8f9fc;">
    <div class="home-banner-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-cont ">
                        <h1 class="banner-heading text-center">
                            <?php echo get_field('banner_title'); ?>
                        </h1>
                        <p class="banner-content text-center">
                             <?php echo get_field('banner_content'); ?>
                        </p>
                        <div class="banner-btns text-center pb-3 justify-content-center">
                            <a href="<?php echo get_field('banner_button_link'); ?>" class="primary animated-btn">
                                <?php echo get_field('banner_button_text'); ?>
                                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.598 0.799999H8.19L13.59 6.2L8.19 11.6H5.598L10.062 7.136H0.9V5.264H10.062L5.598 0.799999Z" fill="white"/>
                                </svg>

                            </a>
                            <a href="<?php echo get_field('banner_button_link_2'); ?>" class="border-gradient-btn animated-btn"><?php echo get_field('banner_button_text_2'); ?>
                                <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.35816 0.0999756H7.95016L13.3502 5.49998L7.95016 10.9H5.35816L9.82216 6.43598H0.660156V4.56398H9.82216L5.35816 0.0999756Z" fill="black"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid px-md-0">
            <div class="banner-bottom-images-wrapper">
            <div class="row align-items-center gx-0">
                <div class="col-md-12">
                <div class="img-cont-scale">
					<?php
	$desktop_img_url = get_field('banner_image_bg');
	$mobile_img_url  = get_field('banner_mobile_bg_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;?>" alt="banner" loading="eager" fetchpriority="high" decoding="async" width="1905" height="541" class="img-fluid no-lazy">
    </picture>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</section>

<?php if (have_rows('tabs')): ?>
<section class="section why-small-businesses">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5">
                <?php echo get_field('section_title'); ?>
            </h2>
            <p class="section-content"><?php echo get_field('section_subtitle'); ?></p>
        </div>

        <div class="responsive-tabs">
            <div class="row">
                <div class="col-lg-4">
                    <ul class="nav nav-tabs" role="tablist">
                        <?php $i = 0; while (have_rows('tabs')): the_row(); 
                            $icon = get_sub_field('icon_image');
                            $title = get_sub_field('tab_title');
                        ?>
                        <li class="nav-item">
                            <a id="tab-<?php echo $i; ?>" href="#pos-<?php echo $i; ?>" class="nav-link <?php echo ($i == 0) ? 'active' : ''; ?>" data-bs-toggle="tab" role="tab">
                                <img src="<?php echo esc_url($icon['url']); ?>" alt="icon" class="img-fluid" loading="lazy" desoding="async" width="35" height="35">
                                <?php echo esc_html($title); ?>
                            </a>
                        </li>
                        <?php $i++; endwhile; ?>
                    </ul>
                </div>

                <div class="col-lg-8">
                    <div id="content" class="tab-content" role="tablist">
                        <?php $j = 0; while (have_rows('tabs')): the_row(); 
                            $image = get_sub_field('content_image');
                            $percent = get_sub_field('highlight_percent');
                            $highlight = get_sub_field('highlight_text');
                            $heading = get_sub_field('heading');
                            $desc = get_sub_field('description');
                            $btn = get_sub_field('button_link');
                            $btn_text = get_sub_field('button_text');
                        ?>
                        <div id="pos-<?php echo $j; ?>" class="card tab-pane fade <?php echo ($j == 0) ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $j; ?>">
                            <div class="card-header" role="tab" id="heading-<?php echo $j; ?>">
                                <h5 class="mb-0">
                                    <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $j; ?>" aria-expanded="<?php echo ($j == 0) ? 'true' : 'false'; ?>" aria-controls="collapse-<?php echo $j; ?>">
                                        <?php echo esc_html($heading); ?>
                                    </a>
                                </h5>
                            </div>
                            <div id="pos-collapse-<?php echo $j; ?>" class="collapse <?php echo ($j == 0) ? 'show' : ''; ?>" data-bs-parent="#content" role="tabpanel" aria-labelledby="heading-<?php echo $j; ?>">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-xl-5 col-lg-12">
                                            <div class="img-content">
                                                <img src="<?php echo esc_url($image['url']); ?>" alt="Tab Image" class="img-fluid" loading="lazy"  width="322" height="433">
                                                <ul>
                                                    <li><span><?php echo esc_html($percent); ?>%</span></li>
                                                    <li><?php echo esc_html($highlight); ?></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-xl-7 col-lg-12">
                                            <div class="text-content">
                                                <h3><?php echo esc_html($heading); ?></h3>
                                                <?php echo $desc; ?>
                                                <?php if ($btn): ?>
                                                    <a href="<?php echo esc_url($btn['url']); ?>" class="primary animated-btn" target="<?php echo esc_attr($btn['target']); ?>">
                                                        <?php echo esc_html($btn_text); ?>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php $j++; endwhile; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="section inventory-cycle warego-enhanced-inventory-cycle">
    <div class="container">

        <h2 class="section-title text-center">
            <?php echo get_field('section_heading'); ?>
        </h2>
        <p class="section-content text-center">
            <?php echo get_field('section_subheading'); ?>
        </p>

        <div class="row mt-3 mt-lg-5 gy-4">
            <?php if (have_rows('features_list')) : ?>
                <?php 
                $dualBuffer = []; // For dual layout
                while (have_rows('features_list')) : the_row(); 
                    $title = get_sub_field('title');
                    $description = get_sub_field('description');
                    $image = get_sub_field('image');
                    $alignment = get_sub_field('alignment'); // 'left', 'right', 'center', 'dual'
                    $button_text = get_sub_field('button_text');
                    $button_link = get_sub_field('button_link');

                    // Handle dual layout separately
                    if ($alignment === 'dual') {
                        $dualBuffer[] = compact('title', 'description', 'image', 'button_text', 'button_link');
                        if (count($dualBuffer) === 2) {
                            echo '<div class="row gy-4">';
                            foreach ($dualBuffer as $feature) : ?>
                                <div class="col-md-6">
                                    <div class="card automated-order-card text-center h-100">
                                        <div class="card-body">
                                            <h2 class="card-title"><?php echo esc_html($feature['title']); ?></h2>
                                            <p class="card-description"><?php echo esc_html($feature['description']); ?></p>
                                            <?php if ($feature['button_link'] && $feature['button_text']) : ?>
                                                <a href="<?php echo esc_url($feature['button_link']); ?>" class="border-gradient-btn animated-btn my-3">
                                                    <?php echo esc_html($feature['button_text']); ?>
                                                </a>
                                            <?php endif; ?>
                                            <?php if ($feature['image']) : ?>
                                                <div class="feature-image mt-3">
                                                    <img src="<?php echo esc_url($feature['image']['url']); ?>" alt="<?php echo esc_attr($feature['image']['alt']); ?>" class="img-fluid" loading="lazy">
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach;
                            echo '</div>';
                            $dualBuffer = [];
                        }
                        continue; // Skip regular render for dual
                    }
                ?>

                <div class="col-lg-12">
                    <div class="card <?php echo ($alignment === 'center') ? 'automated-order-card text-center' : 'realtime-card'; ?>">
                        <div class="card-body">

                            <?php if ($alignment === 'center') : ?>
                                <div class="card-header mt-3 mt-lg-0">
                                    <h2 class="card-title"><?php echo esc_html($title); ?></h2>
                                    <p class="card-description"><?php echo esc_html($description); ?></p>
                                    <?php if ($button_link && $button_text) : ?>
                                        <a href="<?php echo esc_url($button_link); ?>" class="border-gradient-btn animated-btn my-3">
                                            <?php echo esc_html($button_text); ?>
                                        </a>
                                    <?php endif; ?>
                                </div>
                                <?php if ($image) : ?>
                                    <div class="text-center">
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid mt-3" loading="lazy">
                                    </div>
                                <?php endif; ?>

                            <?php else : ?>
                                <div class="row align-items-lg-center align-items-md-start <?php echo ($alignment === 'right') ? 'flex-row-reverse' : ''; ?>">
                                    
                                    <div class="col-md-6 d-flex justify-content-center align-items-center">
                                        <?php if ($image) : ?>
                                            <div class="img-cont">
                                                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid" loading="lazy">
                                            </div>
                                        <?php endif; ?>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="card-header mt-3 mt-lg-0">
                                            <h2 class="card-title"><?php echo esc_html($title); ?></h2>
                                            <p class="card-description"><?php echo esc_html($description); ?></p>
                                            <?php if ($button_link && $button_text) : ?>
                                                <a href="<?php echo esc_url($button_link); ?>" class="border-gradient-btn animated-btn">
                                                    <?php echo esc_html($button_text); ?>
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>

                                </div>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>

                <?php endwhile; ?>

                <?php
                    // Handle leftover if odd number of dual blocks
                    if (!empty($dualBuffer)) :
                        echo '<div class="row gy-4">';
                        foreach ($dualBuffer as $feature) : ?>
                            <div class="col-md-6">
                                <div class="card automated-order-card text-center h-100">
                                    <div class="card-body">
                                        <h2 class="card-title"><?php echo esc_html($feature['title']); ?></h2>
                                        <p class="card-description"><?php echo esc_html($feature['description']); ?></p>
                                        <?php if ($feature['button_link'] && $feature['button_text']) : ?>
                                            <a href="<?php echo esc_url($feature['button_link']); ?>" class="border-gradient-btn animated-btn my-3">
                                                <?php echo esc_html($feature['button_text']); ?>
                                            </a>
                                        <?php endif; ?>
                                        <?php if ($feature['image']) : ?>
                                            <div class="feature-image mt-3">
                                                <img src="<?php echo esc_url($feature['image']['url']); ?>" alt="<?php echo esc_attr($feature['image']['alt']); ?>" class="img-fluid" loading="lazy">
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach;
                        echo '</div>';
                    endif;
                ?>
            <?php endif; ?>
        </div>

        <div class="text-center">
            <p class="section-content mb-5">
                <?php echo get_field('section_footer_text'); ?>
            </p>
            <a href="<?php echo get_field('section_button_link'); ?>" class="border-gradient-btn animated-btn"><?php echo get_field('section_button_text'); ?></a>
        </div>

    </div>
</section>


<section class="section how-warego-transform pt-0 pb-0">
    <div class="container">
        <div class="row">
            <div class="col-xl-4 col-lg-12">
                <div class="text-cont">
                    <h2 class="section-title mb-5">
                        <?php echo get_field('transform_title'); ?>
                    </h2>
                    <p class="section-content pb-4">
                        <?php echo get_field('transform_content'); ?>
                    </p>
                    <?php 
					$cta_button = get_field('button_link');
					if($cta_button): ?>
                        <a href="<?php echo esc_url($cta_button['url']); ?>" class="border-gradient-btn animated-btn">
                            <?php echo $cta_button['title']; ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
            <div class="col-xl-7 col-lg-9 col-md-11">
                <?php if( have_rows('transform_cards') ): ?>
                    <ul>
                        <?php while( have_rows('transform_cards') ): the_row(); ?>
                            <li>
                                <div class="card">
                                    <div class="content">
                                        <div class="front">
                                            <span>
                                                <?php echo get_sub_field('icon_svg'); ?>
                                            </span>
                                            <?php echo get_sub_field('front_title'); ?>
                                        </div>
                                        <div class="back">
                                            <h3><?php echo get_sub_field('back_title'); ?></h3>
                                            <p><?php echo get_sub_field('back_description'); ?></p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        <?php endwhile; ?>
                    </ul>
                <?php endif; ?>
            </div>
            <div class="col-xl-1 col-lg-3 col-md-1 img-cont">
                <?php 
                    $side_image = get_field('side_image'); 
                    if($side_image): ?>
                        <img src="<?php echo esc_url($side_image); ?>" alt="..." class="">
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>


<section class="section warego-proven-benefit pt-0">
   <div class="text-cont text-center">
       <div class="container">
           <h2 class="section-title mb-5"><?php echo get_field('proven_title'); ?></h2>
           <p class="section-content"><?php echo get_field('proven_content'); ?></p>
       </div>
   </div>
   <div class="bottom-wrapper">
       <div class="container">
           <ul>
                <?php $first = true; ?>
               <?php if (have_rows('proven_benefits')) : while (have_rows('proven_benefits')) : the_row(); ?>
                   <li <?php echo $first ? 'class="active"' : ''; ?>>
                        <?php $first = false; ?>
                       <div class="svg-cont">
                           <?php echo get_sub_field('svg_icon'); ?>
                       </div>
                       <div class="icon">
                           <svg width="33" height="117" viewBox="0 0 33 117" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line x1="17" y1="4.37114e-08" x2="17" y2="94" stroke="#8981F7" stroke-width="2"></line>
                            <rect y="84" width="33" height="33" rx="16.5" fill="#8981F7"></rect>
                            <rect x="6" y="90" width="21" height="21" rx="10.5" fill="white"></rect>
                        </svg>
                       </div>
                       <div class="text-box">
                           <h3><?php echo get_sub_field('value'); ?></h3>
                           <p><?php echo get_sub_field('description'); ?></p>
                       </div>
                   </li>
               <?php endwhile; endif; ?>
           </ul>
       </div>
   </div>
</section>


<?php
$competitors_data = [];
$feature_titles = [];

if (have_rows('competitors')) {
    while (have_rows('competitors')) {
        the_row();
        $company_name = get_sub_field('company_name');
        $features = get_sub_field('company_features');

        $competitor = [
            'name' => $company_name,
            'features' => []
        ];

        if ($features) {
            foreach ($features as $index => $feature) {
                if (!isset($feature_titles[$index])) {
                    $feature_titles[$index] = $feature['feature_title'];
                }
                $competitor['features'][$index] = $feature['feature_value'];
            }
        }

        $competitors_data[] = $competitor;
    }
}

// Split into Warego vs Competitors
$warego = array_shift($competitors_data); // First is your product
?>
<section class="section complete-comparison light-grey pb-4">
    <div class="container">
        <div class="text-content text-center slide-down">
            <h2 class="section-title mb-5"><?php echo get_field('comparison_title'); ?></h2>
            <p class="section-content"><?php echo get_field('comparison_description'); ?></p>
        </div>

        <?php if (!empty($warego) && !empty($feature_titles)) : ?>
            <div class="table-responsive">
                <table class="table align-middle ms-integ-provider-table">
                    <thead>
                        <tr>
                            <th>Feature</th>
                            <th><?php echo esc_html($warego['name']); ?></th>
                            <?php foreach ($competitors_data as $competitor): ?>
                                <th><?php echo esc_html($competitor['name']); ?></th>
                            <?php endforeach; ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($feature_titles as $index => $feature_title): ?>
                            <tr>
                                <td><?php echo esc_html($feature_title); ?></td>
                                <td><?php echo $warego['features'][$index] ?? ''; ?></td>
                                <?php foreach ($competitors_data as $competitor): ?>
                                    <td><?php echo $competitor['features'][$index] ?? ''; ?></td>
                                <?php endforeach; ?>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>

        <div class="complete-comparison-cta">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <?php if ($img = get_field('comparison_cta_image')): ?>
                        <img src="<?php echo esc_url($img['url']); ?>" alt="<?php echo esc_attr($img['alt']); ?>" class="img-fluid">
                    <?php endif; ?>
                </div>
                <div class="col-md-6">
                    <p><?php echo get_field('comparison_cta_text'); ?></p>
                </div>
                <div class="col-md-3">
                    <?php $link = get_field('comparison_cta_button'); ?>
                    <?php if ($link): ?>
                        <a href="<?php echo esc_url($link['url']); ?>" class="border-gradient-btn animated-btn" target="<?php echo esc_attr($link['target']); ?>">
                            <?php echo esc_html($link['title']); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>




<section class="section business-success-stories">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('business_success_title'); ?></h2>
            <p class="section-content"><?php echo get_field('business_success_content'); ?></p>
        </div>

        <div class="row gy-4 justify-content-md-center">
            <?php if (have_rows('business_success_cards')): ?>
                <?php while (have_rows('business_success_cards')): the_row(); ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3><?php echo get_sub_field('title'); ?></h3>
                            </div>
                            <div class="card-body">
                                <ul>
                                    <?php if (have_rows('points')): ?>
                                        <?php while (have_rows('points')): the_row(); ?>
                                            <li>
                                                <span>
                                                    <?php echo get_sub_field('icon_svg'); ?>
                                                </span>
                                                <?php echo get_sub_field('point_text'); ?>
                                            </li>
                                        <?php endwhile; ?>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>

        <div class="text-center mt-5">
            <a href="<?php echo get_field('business_success_button_link'); ?>" class="purple-outline-btn animated-btn"><?php echo get_field('business_success_button_text'); ?></a>
        </div>
    </div>
</section>


<section class="section calculate-your-roi">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5">
                <?php echo get_field('roi_heading'); ?>
            </h2>
            <p class="section-content"><?php echo get_field('roi_description'); ?></p>
        </div>

        <?php $roi_items = get_field('roi_items'); ?>
        <?php if ($roi_items): ?>
        <div class="investment-analysis">
            <ul class="first-column">
                <?php foreach ($roi_items as $item): ?>
                    <li>
                        <?php echo esc_html($item['title']); ?>
                        <span></span>
                    </li>
                <?php endforeach; ?>
            </ul>

            <ul class="second-column">
                <?php foreach ($roi_items as $item): ?>
                    <li>
                        <span></span>
                        <?php echo esc_html($item['savings']); ?>
                        <label><?php echo esc_html($item['savings_label']); ?></label>
                    </li>
                <?php endforeach; ?>
            </ul>

            <ul class="third-column">
                <?php foreach ($roi_items as $item): ?>
                    <li><?php echo esc_html($item['context']); ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <div class="typical-warego">
            <div class="wrapper">
                <span>
                    <?php echo get_field('roi_summary_svg'); ?>
                </span>
                <p><?php echo get_field('roi_summary_text'); ?></p>
            </div>
        </div>
    </div>
</section>



<section class="section warego-implementation">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('implementation_title'); ?></h2>
            <p class="section-content"><?php echo get_field('implementation_description'); ?></p>
        </div>

        <?php if (have_rows('implementation_steps')): ?>
        <div class="responsive-tabs">
            <!-- Tab Headers -->
            <ul class="nav nav-tabs owl-carousel owl-theme implementation-tabs-slider" role="tablist">
                <?php $i = 8; while (have_rows('implementation_steps')): the_row(); ?>
                    <li class="item nav-item">
                        <a id="tab-<?php echo $i; ?>" 
                           href="#pos-<?php echo $i; ?>" 
                           class="nav-link <?php echo ($i == 8) ? 'current' : ''; ?>" 
                           data-bs-toggle="tab" 
                           role="tab">
                            <span>PHASE</span> <?php echo esc_html(get_sub_field('phase_number')); ?>
                        </a>
                    </li>
                <?php $i++; endwhile; ?>
            </ul>

            <!-- Reset repeater to reuse -->
            <?php reset_rows(); ?>

            <!-- Tab Contents -->
            <div id="Step-by-Step-content" class="tab-content" role="tablist">
                <?php $j = 8; while (have_rows('implementation_steps')): the_row(); ?>
                    <div id="pos-<?php echo $j; ?>" 
                         class="card tab-pane fade <?php echo ($j == 8) ? 'show active' : ''; ?>" 
                         role="tabpanel" 
                         aria-labelledby="tab-<?php echo $j; ?>">
                        <div class="card-header" role="tab" id="heading-<?php echo $j; ?>">
                            <h5 class="mb-0">
                                <a>
                                    <span>PHASE</span> <?php echo esc_html(get_sub_field('phase_number')); ?>
                                </a>
                            </h5>
                        </div>
                        <div class="card-body">
                            <h3><?php echo get_sub_field('phase_title'); ?></h3>
                            <p><?php echo get_sub_field('phase_description'); ?></p>
                        </div>
                    </div>
                <?php $j++; endwhile; ?>
            </div>
        </div>
        <?php endif; ?>

        <div class="text-center mt-5">
            <a href="<?php echo get_field('implementation_link'); ?>" class="purple-outline-btn animated-btn"><?php echo get_field('implementation_button_text'); ?></a>
        </div>
    </div>
</section>


<section class="section our-review-speak pb-0">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5">
                <?php echo get_field('review_cards_title'); ?>
            </h2>
            <p class="section-content">
              <?php echo get_field('review_cards_content'); ?>
            </p>
        </div>

        <?php if (have_rows('review_cards')): ?>
        <div class="row gy-3">
            <?php while (have_rows('review_cards')): the_row(); ?>
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="svg-content">
                            <?php echo get_sub_field('icon_svg'); ?>
                        </div>
                        <div class="text-content">
                            <h3><?php echo get_sub_field('heading'); ?></h3>
                            <p><?php echo get_sub_field('description'); ?></p>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- faqs section -->
<?php
    $args = [
        'category'  => 'small-business',
		'heading'   => get_field('faqs_heading'),
		'class'     => 'pt-5 bg-white'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>
<!-- faqs section end -->


<section class="section ready-to-transform pt-0">
    <div class="container">
        <div class="cta">
            <h2><?php echo get_field('cta_heading'); ?></h2>
            <div class="cta-btns">
                <?php 
                    $cta_button_1_text = get_field('cta_button_1_text');
                    $cta_button_2_text = get_field('cta_button_2_text');
                    $cta_button_3_text = get_field('cta_button_3_text');
                    $cta_button_1_link = get_field('cta_button_1_link');
                    $cta_button_2_link = get_field('cta_button_2_link');
                    $cta_button_3_link = get_field('cta_button_3_link');

                    if($cta_button_1_text){
                        echo '<a href="' . esc_url($cta_button_1_link) . '" class="animated-cta-btn accent-btn">' . esc_html($cta_button_1_text) . '</a>';
                    }
                    if($cta_button_2_text){
                        echo '<a href="' . esc_url($cta_button_2_link) . '" class="animated-cta-btn accent-btn">' . esc_html($cta_button_2_text) . '</a>';
                    }
                    if($cta_button_3_text){
                        echo '<a href="' . esc_url($cta_button_3_link) . '" class="animated-cta-btn accent-btn">' . esc_html($cta_button_3_text) . '</a>';
                    }
                ?>
            </div>
        </div>
    </div>
</section>




<?php
    get_footer('new');
?>
<script>
    var $owl = $('.implementation-tabs-slider');

    $owl.owlCarousel({
        loop: false,
        margin: 10,
        nav: true,
        center: true,
        smartSpeed: 600,
        dots: false,
            navText: ["<svg width=\"13\" height=\"20\" viewBox=\"0 0 13 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
            "<path d=\"M0.171875 10.0004L9.58521 19.415L12.4145 16.5857L5.82787 10.0004L12.4145 3.41504L9.58521 0.585706L0.171875 10.0004Z\" fill=\"white\"/>\n" +
            "</svg>\n","<svg width=\"13\" height=\"20\" viewBox=\"0 0 13 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
            "<path d=\"M12.8281 10.0004L3.41479 19.415L0.585457 16.5857L7.17213 10.0004L0.585458 3.41504L3.41479 0.585706L12.8281 10.0004Z\" fill=\"white\"/>\n" +
            "</svg>\n"],
        responsive: {
            0: { items: 1 },
            600: { items: 3 },
            1000: { items: 5 }
        }
    });

    function sidesNumb() {
        // 1️⃣ Tab Click Handling
        $('.implementation-tabs-slider .nav-link').on('click', function (e) {
            e.preventDefault();

            const $clickedLi = $(this).closest('li.item');
            const $allOwlItems = $('.implementation-tabs-slider .owl-item');

            // Remove current from all tabs
            $('.implementation-tabs-slider .nav-link').removeClass('current');
            $(this).addClass('current');

            // Show relevant tab content
            let target = $(this).attr('href');
            $('.tab-pane').removeClass('active show');
            $(target).addClass('active show');

            // Move clicked item to center
            let index = -1;
            $allOwlItems.each(function (i) {
                if ($(this).find($clickedLi).length) {
                    index = i;
                    return false;
                }
            });

            if (index > -1) {
                $owl.trigger('to.owl.carousel', [index, 500]);
            }
        });

        // 2️⃣ On Carousel Change (Arrow or Swipe)
        $owl.on('changed.owl.carousel', function (event) {
            const index = event.item.index;

            // Find the active tab inside this visible slide
            const $activeItem = $('.implementation-tabs-slider .owl-item').eq(index);
            const $link = $activeItem.find('.nav-link');

            if ($link.length) {
                // Make it current
                $('.implementation-tabs-slider .nav-link').removeClass('current');
                $link.addClass('current');

                // Activate corresponding tab content
                let target = $link.attr('href');
                $('.tab-pane').removeClass('active show');
                $(target).addClass('active show');
            }
        });
    }

    sidesNumb();

</script>