<?php
/*
Template Name: Pricing
*/
get_header('new');
?>

<!-- Pricing -->
<?php 
$pricing =[
//     'class' => 'black-friday-pricing-cards',
    'class' => 'new-pricing-cards',
	
];
get_template_part('templates-parts/pages/pricing-tabs','',$pricing);?>
<!-- pricing -->


<!-- Choose Plan -->
<?php $choose_plan = [
    'class' => 'black-friday-choose-plan',
];
//get_template_part('templates-parts/pages/choose-plan','',$choose_plan); ?>
<!-- Choose Plan -->


<!-- Plan Features -->
<?php $plan_features = [
    'class' => 'pricing-promotions',
];
//get_template_part('templates-parts/pages/plan-features', null, $plan_features); ?>
<!-- Plan Features -->


<section class="section request-demo custom-pricing bg-white pb-5">
    <div class="container">
        <div class="demo-cont slide-down">
            <div class="row">
                <div class="col-lg-7">
                    <?php echo get_field('request_demo_heading'); ?>
                    <a href="<?php echo get_field('request_demo_cta_link'); ?>" class="primary"><?php echo get_field('request_demo_cta_label'); ?>
                    <svg class="ms-2" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00391 5.44716L12.0039 8.16591C12.1602 8.29091 12.2227 8.47841 12.2539 8.72841C12.2539 8.91591 12.1602 9.13466 12.0039 9.22841L9.00391 12.0097C8.78516 12.2284 8.47266 12.2597 8.19141 12.1659C7.91016 12.0409 7.75391 11.7597 7.75391 11.4784V9.72841H5.00391C4.56641 9.72841 4.25391 9.41591 4.25391 8.97841V8.47841C4.25391 8.07216 4.56641 7.72841 5.00391 7.72841H7.72266V5.97841C7.72266 5.69716 7.94141 5.41591 8.19141 5.32216C8.44141 5.19716 8.78516 5.22841 9.00391 5.44716ZM8.25391 0.728409C12.6602 0.728409 16.2539 4.32216 16.2539 8.72841C16.2539 13.1659 12.6602 16.7284 8.25391 16.7284C3.81641 16.7284 0.253906 13.1659 0.253906 8.72841C0.253906 4.32216 3.81641 0.728409 8.25391 0.728409ZM8.25391 15.2284C11.8164 15.2284 14.7539 12.3222 14.7539 8.72841C14.7539 5.16591 11.8164 2.22841 8.25391 2.22841C4.66016 2.22841 1.75391 5.16591 1.75391 8.72841C1.75391 12.3222 4.66016 15.2284 8.25391 15.2284Z" fill="white"></path></svg>
                    </a>
                </div>
                <div class="col-lg-5 text-lg-end">
                    <div class="img-cont h-100">
                        <img src="<?php echo get_field('request_demo_image'); ?>" alt="Request Demo" class="img-fluid" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sepration bg-white pb-lg-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 p-0">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/pricing/sepration.webp" alt="sepration" class="img-fluid slide-up" loading="lazy">
            </div>
        </div>
    </div>
</section>


<?php 
// $partner_logos = [
//     'class' => 'success-drive',
// ];
// get_template_part('templates-parts/pages/trusted-partners-logos','',$partner_logos);
?>


<!-- faqs section -->

<?php
    $args = [
        'category'  => 'pricing',
		'class'  => 'bg-white pt-5'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>

<!-- faqs section end -->

<?php
    get_footer();
?>
<script>
// -----------------Pricing Page Animation Pricing Table Start-----------------
document.addEventListener("DOMContentLoaded", function () {
        gsap.registerPlugin(ScrollTrigger);
    
        const section = document.querySelector(".choose-plan");
        const section2 = document.querySelector(".choose-plan2");
        const promotions = document.querySelector(".pricing-promotions");
    
        if (!promotions) {
            return;
        }
    
        // Create ScrollTrigger for the .choose-plan section
        ScrollTrigger.create({
            trigger: section,
            start: "top top", 
            endTrigger: promotions, 
            end: () => `+=${promotions.offsetHeight * 0.95}`, 
            onEnter: () => {
                section.style.position = "sticky"; 
                section.style.top = "0"; 

                section2.style.position = "sticky"; 
                section2.style.top = "0"; 
            },
            onLeave: () => {
                section.style.position = "relative"; 
                section2.style.position = "relative"; 
            },
            onEnterBack: () => {
                section.style.position = "sticky"; 
                section.style.top = "0";

                section2.style.position = "sticky"; 
                section2.style.top = "0";
            },
            onLeaveBack: () => {
                section.style.position = "relative"; 
                section2.style.position = "relative"; 
            },
            // markers: true, // Optional: Enable markers for debugging
            toggleActions: "play none none reverse",
        });

         // Ensure correct layout on initial load and resize
        const refreshScrollTrigger = () => {
            ScrollTrigger.refresh();
        };

        window.addEventListener("load", refreshScrollTrigger);
        window.addEventListener("resize", refreshScrollTrigger);

    });

    
    // -----------------Pricing Page Animation Pricing Table End-----------------
    </script>