<?php
/*
Template Name: Barcode Inventory Software
*/

get_header('new');
?>
<section class="section banner barcode-software-banner pb-5 no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0 align-items-center">
            <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>
                    <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']; ?>
                        </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" style="min-height:300px;">
					
					<?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)" data-mobile-src="<?php echo esc_url($mobile_img_url ? $mobile_img_url : $desktop_img_url); ?>">
    <img src="<?php echo esc_url($desktop_img_url); ?>" loading="eager" fetchpriority="high" decoding="async" width="546" height="397" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('banner_heading')); ?>">
</picture>
<script>var s=document.querySelector('source[data-mobile-src]');if(s)s.srcset=s.dataset.mobileSrc;</script>
					
					
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Certifications section start -->
<?php get_template_part('templates-parts/pages/certificates');?>
<!-- Certifications section end -->


<!-- Icons Cards Start start -->
 <?php
 $counters = ['class' => 'pt-5 '];
 get_template_part('templates-parts/pages/counter-new',null,$counters)?>
<!-- Icons Cards Start end -->

<section class="section barcode-software-key-benefits">
    <div class="container">
        <div class="row gy-3 gx-xl-5">
            
            <!-- Left Image -->
            <div class="col-lg-6">
                <div class="img-cont">
                    <?php 
                    $img = get_field('bs_kb_image');
                    $alt = get_field('bs_kb_image_alt');
                    if($img): ?>
                        <img 
                            src="<?php echo esc_url($img['url']); ?>" 
                            class="img-fluid" 
                            alt="<?php echo esc_attr($alt ? $alt : $img['alt']); ?>">
                    <?php endif; ?>
                </div>
            </div>

            <!-- Right Content -->
            <div class="col-lg-6">
                <div class="text-cont">
                    <?php if(get_field('bs_kb_title')): ?>
                        <h2 class="section-title"><?php echo get_field('bs_kb_title'); ?></h2>
                    <?php endif; ?>

                    <?php if(get_field('bs_kb_description')): ?>
                        <p class="section-content mb-3 mb-lg-4">
                            <?php echo get_field('bs_kb_description'); ?>
                        </p>
                    <?php endif; ?>

                    <!-- Benefits Repeater -->
                    <?php if(have_rows('bs_kb_benefits')): ?>
                        <?php while(have_rows('bs_kb_benefits')): the_row(); ?>
                            <div class="stock-updated">
                                <div class="svg-wrapper">
                                    <?php 
                                    $svg = get_sub_field('bs_kb_benefit_icon_svg');
                                    if($svg) echo $svg; // SVG output (trusted content only)
                                    ?>
                                </div>

                                <div class="stock-content">
                                    <?php if(get_sub_field('bs_kb_benefit_title')): ?>
                                        <h3 class="stock-title"><?php echo get_sub_field('bs_kb_benefit_title'); ?></h3>
                                    <?php endif; ?>

                                    <?php if(get_sub_field('bs_kb_benefit_text')): ?>
                                        <p class="stock-text"><?php echo get_sub_field('bs_kb_benefit_text'); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>

                    <!-- Button -->
                    <div class="demo-btn-wrapper mt-4">
                        <?php 
                        $btn_text = get_field('bs_kb_btn_text');
                        $btn_link = get_field('bs_kb_btn_link'); // ACF Link field
                        if($btn_text && $btn_link): ?>
                            <a href="<?php echo esc_url($btn_link['url']); ?>" 
                               target="<?php echo esc_attr($btn_link['target'] ?: '_self'); ?>"
                               class="primary animated-cta-btn">
                                <?php echo $btn_text; ?>
                            </a>
                        <?php elseif($btn_text): ?>
                            <a href="javascript:;" class="primary animated-cta-btn">
                                <?php echo $btn_text; ?>
                            </a>
                        <?php endif; ?>
                    </div>

                </div>
            </div>

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


<section class="section barcode-scanner-cards">
    <div class="container">
        
        <div class="text-cont">
            <?php if(get_field('bs_sc_cards_title')): ?>
                <h2 class="section-title text-center">
                    <?php echo get_field('bs_sc_cards_title'); ?>
                </h2>
            <?php endif; ?>

            <?php if(get_field('bs_sc_cards_description')): ?>
                <p class="section-content text-center">
                    <?php echo get_field('bs_sc_cards_description'); ?>
                </p>
            <?php endif; ?>
        </div>

        <div class="row gx-4 gy-5">
            <?php if(have_rows('bs_sc_cards_list')): ?>
                <?php while(have_rows('bs_sc_cards_list')): the_row(); ?>
                    <div class="col-xl-3 col-md-6">
                        <div class="scanner-card">

                            <div class="svg-main">
                                <div class="svg-child">
                                    <?php 
                                    $svg = get_sub_field('bs_sc_card_svg');
                                    if($svg) echo $svg; // SVG output (trusted admin)
                                    ?>
                                </div>
                            </div>

                            <?php if(get_sub_field('bs_sc_card_number')): ?>
                                <div class="scanner-card-number">
                                    <?php echo get_sub_field('bs_sc_card_number'); ?>
                                </div>
                            <?php endif; ?>

                            <?php if(get_sub_field('bs_sc_card_title')): ?>
                                <h3 class="scanner-card-title">
                                    <?php echo get_sub_field('bs_sc_card_title'); ?>
                                </h3>
                            <?php endif; ?>

                            <?php if(get_sub_field('bs_sc_card_content')): ?>
                                <p class="scanner-card-content">
                                    <?php echo get_sub_field('bs_sc_card_content'); ?>
                                </p>
                            <?php endif; ?>

                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>

        <div class="demo-btn-wrapper text-center mt-4 mt-xl-5">
            <?php 
            $btn_text = get_field('bs_sc_cards_btn_text');
            $btn_link = get_field('bs_sc_cards_btn_link'); // ACF Link field
            if($btn_text && $btn_link): ?>
                <a href="<?php echo esc_url($btn_link['url']); ?>"
                   target="<?php echo esc_attr($btn_link['target'] ?: '_self'); ?>"
                   class="primary animated-cta-btn">
                    <?php echo $btn_text; ?>
                </a>
            <?php elseif($btn_text): ?>
                <a href="javascript:;" class="primary animated-cta-btn">
                    <?php echo $btn_text; ?>
                </a>
            <?php endif; ?>
        </div>

    </div>
</section>

<section class="section smart-right-choice bg-white">
    <div class="container">
        
        <div class="text-cont">
            <?php if(get_field('sr_choice_title')): ?>
                <h2 class="section-title text-center">
                    <?php echo get_field('sr_choice_title'); ?>
                </h2>
            <?php endif; ?>

            <?php if(get_field('sr_choice_description')): ?>
                <p class="section-content text-center">
                    <?php echo wp_kses_post(get_field('sr_choice_description')); ?>
                </p>
            <?php endif; ?>
        </div>

        <div class="row gy-3 gy-lg-4 gy-xl-5">
            
            <!-- Image -->
            <div class="col-lg-8">
                <div class="img-cont">
                    <?php 
                    $img = get_field('sr_choice_image');
                    $alt = get_field('sr_choice_image_alt');
                    if($img): ?>
                        <img 
                            src="<?php echo esc_url($img['url']); ?>" 
                            class="img-fluid" 
                            alt="<?php echo esc_attr($alt ? $alt : $img['alt']); ?>">
                    <?php endif; ?>
                </div>
            </div>

            <!-- Cards -->
            <?php if(have_rows('sr_choice_cards')): ?>
                <?php while(have_rows('sr_choice_cards')): the_row(); ?>
                    <div class="col-lg-4">
                        <div class="smart-automation-card">

                            <?php if(get_sub_field('sr_choice_card_title')): ?>
                                <h3 class="smart-automation-card-title">
                                    <?php echo wp_kses_post(get_sub_field('sr_choice_card_title')); ?>
                                </h3>
                            <?php endif; ?>

                            <?php if(get_sub_field('sr_choice_card_content')): ?>
                                <p class="smart-automation-card-content">
                                    <?php echo get_sub_field('sr_choice_card_content'); ?>
                                </p>
                            <?php endif; ?>

                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>

        </div>

        <!-- Button -->
        <div class="demo-btn-wrapper text-center mt-4 mt-xl-5">
            <?php
            $btn_text = get_field('sr_choice_btn_text');
            $btn_link = get_field('sr_choice_btn_link'); // ACF Link
            if($btn_text && $btn_link): ?>
                <a href="<?php echo esc_url($btn_link['url']); ?>"
                   target="<?php echo esc_attr($btn_link['target'] ?: '_self'); ?>"
                   class="primary animated-cta-btn">
                    <?php echo $btn_text; ?>
                </a>
            <?php elseif($btn_text): ?>
                <a href="javascript:;" class="primary animated-cta-btn">
                    <?php echo $btn_text; ?>
                </a>
            <?php endif; ?>
        </div>

    </div>
</section>


<section class="section barcode-industries-serve bg-gray">
    <div class="container">
        <div class="row justify-content-between">
            
            <div class="col-lg-6 col-xl-5">
                <?php if(get_field('bis_title')): ?>
                    <h2 class="section-title">
                        <?php echo get_field('bis_title'); ?>
                    </h2>
                <?php endif; ?>
            </div>

            <div class="col-lg-6 col-xl-5">
                <?php if(get_field('bis_description')): ?>
                    <p class="section-content">
                        <?php echo get_field('bis_description'); ?>
                    </p>
                <?php endif; ?>
            </div>

        </div>
    </div>

    <div class="container-fluid industries-fluid">
        <div class="barcode-industries-carousel owl-carousel owl-theme">

            <?php if(have_rows('bis_industries')): ?>
                <?php while(have_rows('bis_industries')): the_row(); ?>

                    <div class="item">
                        <div class="industry-image-card">
                            
                            <?php 
                            $img = get_sub_field('bis_industry_image');
                            $alt = get_sub_field('bis_industry_image_alt');
                            if($img): ?>
                                <img class="industry-bg img-fluid"
                                     src="<?php echo esc_url($img['url']); ?>"
                                     alt="<?php echo esc_attr($alt ? $alt : $img['alt']); ?>" />
                            <?php endif; ?>

                            <div class="industry-content">
                                <?php if(get_sub_field('bis_industry_title')): ?>
                                    <h3 class="industry-title">
                                        <?php echo get_sub_field('bis_industry_title'); ?>
                                    </h3>
                                <?php endif; ?>

                                <?php if(get_sub_field('bis_industry_desc')): ?>
                                    <p class="industry-desc">
                                        <?php echo get_sub_field('bis_industry_desc'); ?>
                                    </p>
                                <?php endif; ?>
                            </div>

                            <?php if(get_sub_field('bis_industry_footer_title')): ?>
                                <div class="industry-footer-title">
                                    <?php echo get_sub_field('bis_industry_footer_title'); ?>
                                </div>
                            <?php endif; ?>

                        </div>
                    </div>

                <?php endwhile; ?>
            <?php endif; ?>

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

<section class="section features-barcode-inventory bg-white">
  <div class="container">

    <div class="text-cont">
      <?php if(get_field('fbi_title')): ?>
        <h2 class="section-title text-center"><?php echo get_field('fbi_title'); ?></h2>
      <?php endif; ?>

      <?php if(get_field('fbi_description')): ?>
        <p class="section-content text-center"><?php echo get_field('fbi_description'); ?></p>
      <?php endif; ?>
    </div>

    <div class="features-barcode-cards-wrapper">
      <div class="row g-0">

        <?php if(have_rows('fbi_cards')): ?>
          <?php while(have_rows('fbi_cards')): the_row(); 
            $is_active = get_sub_field('fbi_card_is_active');
          ?>
            <div class="col-lg-4 col-md-6 features-col">
              <div class="features-barcode-card <?php echo $is_active ? 'is-active' : ''; ?>">

                <div class="features-icon">
                  <?php 
                    $svg = get_sub_field('fbi_card_svg');
                    if($svg) echo $svg; 
                  ?>
                </div>

                <?php if(get_sub_field('fbi_card_title')): ?>
                  <h3 class="features-barcode-card-title">
                    <?php echo get_sub_field('fbi_card_title'); ?>
                  </h3>
                <?php endif; ?>

                <?php if(get_sub_field('fbi_card_content')): ?>
                  <p class="features-barcode-card-content">
                    <?php echo get_sub_field('fbi_card_content'); ?>
                  </p>
                <?php endif; ?>

              </div>
            </div>
          <?php endwhile; ?>
        <?php endif; ?>

      </div>
    </div>

    <div class="demo-btn-wrapper text-center mt-4 mt-xl-5">
      <?php
        $btn_text = get_field('fbi_btn_text');
        $btn_link = get_field('fbi_btn_link'); 
        if($btn_text && $btn_link):
      ?>
        <a href="<?php echo esc_url($btn_link['url']); ?>"
           target="<?php echo esc_attr($btn_link['target'] ?: '_self'); ?>"
           class="primary animated-cta-btn">
          <?php echo $btn_text; ?>
        </a>
      <?php elseif($btn_text): ?>
        <a href="javascript:;" class="primary animated-cta-btn"><?php echo $btn_text; ?></a>
      <?php endif; ?>
    </div>

  </div>
</section>

<!--new section end-->

<?php
$heading = get_field('abw_heading');
$content = get_field('abw_content');
?>

<!-- Automate Brewery Work SEction Start -->
<section class="section automate-brewery-work powerful-integrations-work bg-white">
    <div class="container">
        <div class="text-cont">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title text-center"><?php echo wp_kses_post($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content text-center"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

        <div class="brewery-integrations-logos-wrapper">
            <?php if (have_rows('abw_logos')) : ?>
                <?php while (have_rows('abw_logos')) : the_row();
                    $img = get_sub_field('abw_logo_image'); // array
                    $alt_override = get_sub_field('abw_logo_alt');

                    $img_url = !empty($img['url']) ? $img['url'] : '';
                    $img_alt = !empty($alt_override) ? $alt_override : (!empty($img['alt']) ? $img['alt'] : 'automate-brewery-work');
                ?>
                    <?php if (!empty($img_url)) : ?>
                        <div class="img-wrapper">
                            <img src="<?php echo esc_url($img_url); ?>"
                                 alt="<?php echo esc_attr($img_alt); ?>"
                                 class="img-fluid">
                        </div>
                    <?php endif; ?>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
            <?php 
            $cta_link = get_field('abw_logos__button');
            ?>
            <?php if (!empty($cta_link)) : ?>
                <div class="text-center mt-4">
                    <a href="<?php echo esc_url($cta_link['url']); ?>" class="primary animated-cta-btn"><?php echo $cta_link['title']; ?></a>
                </div>
            <?php endif; ?>
    </div>
</section>
<!-- Automate Brewery Work 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 -->

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

<!-- Faqs start -->
<?php
    $args = [   
        'category'  => 'barcode-inventory-software',
		'class'  => 'bg-white'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>

<!-- CTA start -->
<?php $ctas = ['class' => 'wms-client-portal-cta']; get_template_part('templates-parts/pages/3pl-client-portal-cta',null,$ctas);?>
<!-- CTA end -->


<script src="<?php echo get_template_directory_uri(); ?>/assets/js/owl.carousel.min.js"></script>
<?php
    get_footer();
?>
<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>
    // $('.tracking-serves-industries-slider').owlCarousel({
    //     loop: true,
    //     margin: 10,
    //     nav: true,
    //     center: true,
    //     dots: false,
    //     responsive: {
    //         0: {
    //             items: 1
    //         },
    //         600: {
    //             items: 2
    //         },
    //         1000: {
    //             items: 3
    //         }
    //     }
    // });
    $('.warego-real-result-slider').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        center: true,
        // autoWidth:true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    })
</script>

<script>
    // case study slider with merge option
    $(function () {
    var $owl = $('.tracking-serves-industries-slider');

    function applyMergeAttrs() {

        if (window.innerWidth < 1200) {
            $owl.find('.owl-item .item').removeAttr('data-merge');
            return;
        }

        var $allItems = $owl.find('.owl-item .item');
        $allItems.attr('data-merge', '1');

        var $centerItem = $owl.find('.owl-item.center .item');
        if ($centerItem.length) {
            $centerItem.attr('data-merge', '3');
        }
    }

    $owl.on('initialized.owl.carousel translated.owl.carousel', applyMergeAttrs);

    $owl.owlCarousel({
        loop: true,
        center: true,
        margin: 20,
        nav: true,
        dots: false,
        items: 3,
        navText: ['<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0938 6.09375C14.0938 6.65625 13.6562 7.09375 13.125 7.09375H3.53125L6.8125 10.4062C7.21875 10.7812 7.21875 11.4375 6.8125 11.8125C6.625 12 6.375 12.0938 6.125 12.0938C5.84375 12.0938 5.59375 12 5.40625 11.8125L0.40625 6.8125C0 6.4375 0 5.78125 0.40625 5.40625L5.40625 0.40625C5.78125 0 6.4375 0 6.8125 0.40625C7.21875 0.78125 7.21875 1.4375 6.8125 1.8125L3.53125 5.09375H13.125C13.6562 5.09375 14.0938 5.5625 14.0938 6.09375Z" fill="white"/></svg>', '<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m13.688 6.813-5 5a.97.97 0 0 1-.688.28 1 1 0 0 1-.719-.28.964.964 0 0 1 0-1.407l3.282-3.312H1c-.562 0-1-.438-1-1 0-.532.438-1 1-1h9.563L7.28 1.812a.964.964 0 0 1 0-1.406.964.964 0 0 1 1.407 0l5 5a.964.964 0 0 1 0 1.407" fill="#fff"/></svg>'],

        responsive: {
            0: {
                items: 1,
                merge: false,
            },
            600: {
                items: 1,
                merge: false
            },
            1200: {
                items: 3,
                merge: true,  
                mergeFit: false
            }
        }
    });
});
</script>

<script>
    // case study slider with merge option
    $(function () {
    var $owl = $('.case-slilder');

    function applyMergeAttrs() {

        if (window.innerWidth < 1200) {
            $owl.find('.owl-item .item').removeAttr('data-merge');
            return;
        }

        var $allItems = $owl.find('.owl-item .item');
        $allItems.attr('data-merge', '1');

        var $centerItem = $owl.find('.owl-item.center .item');
        if ($centerItem.length) {
            $centerItem.attr('data-merge', '3');
        }
    }

    $owl.on('initialized.owl.carousel translated.owl.carousel', applyMergeAttrs);

    $owl.owlCarousel({
        loop: true,
        center: true,
        margin: 20,
        nav: true,
        dots: false,
        items: 3,
        navText: ['<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0938 6.09375C14.0938 6.65625 13.6562 7.09375 13.125 7.09375H3.53125L6.8125 10.4062C7.21875 10.7812 7.21875 11.4375 6.8125 11.8125C6.625 12 6.375 12.0938 6.125 12.0938C5.84375 12.0938 5.59375 12 5.40625 11.8125L0.40625 6.8125C0 6.4375 0 5.78125 0.40625 5.40625L5.40625 0.40625C5.78125 0 6.4375 0 6.8125 0.40625C7.21875 0.78125 7.21875 1.4375 6.8125 1.8125L3.53125 5.09375H13.125C13.6562 5.09375 14.0938 5.5625 14.0938 6.09375Z" fill="white"/></svg>', '<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m13.688 6.813-5 5a.97.97 0 0 1-.688.28 1 1 0 0 1-.719-.28.964.964 0 0 1 0-1.407l3.282-3.312H1c-.562 0-1-.438-1-1 0-.532.438-1 1-1h9.563L7.28 1.812a.964.964 0 0 1 0-1.406.964.964 0 0 1 1.407 0l5 5a.964.964 0 0 1 0 1.407" fill="#fff"/></svg>'],

        responsive: {
            0: {
                items: 1,
                merge: false
            },
            600: {
                items: 1,
                merge: false
            },
            1200: {
                items: 3,
                merge: true,  
                mergeFit: false
            }
        }
    });
});
</script>

<script>
$(document).ready(function () {
  var $video = $('.risk-free-software .risk-free-video-wrapper__video');
  var $btn   = $('.risk-free-software .risk-free-video-wrapper__play');

  $video.get(0).pause();

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

    if ($video.get(0).paused) {
      $video.get(0).play();
      $(this).hide();
    } else {
      $video.get(0).pause();
      $(this).show();
    }
  });

  $video.on('click', function () {
    this.pause();
    $btn.show();
  });
});
</script>

<script>
  $('.barcode-industries-carousel').owlCarousel({
    loop: true,
    margin: 18,
    nav: true,
    navText: [
      `<svg width="16" height="14" viewBox="0 0 16 14" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M1 7L7 1M1 7L7 13M1 7L15 7"
          stroke="white" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`,

      `<svg width="16" height="14" viewBox="0 0 16 14" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M15 7L9 13M15 7L9 1M15 7L1 7"
          stroke="white" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`
    ],
    dots: false,
    autoplay: true,
    autoplayTimeout: 3500,
    responsive: {
      0: { items: 1 },
      768: { items: 2 }
    }
  });
</script>