@aware(['page'])
<div class="">
    <div class="theme-max-w mx-auto my-8 px-5">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-14 justify-items-center">
            <!-- Years of Experience -->
            <div x-data="counter({{$yearsOfExperience}})" x-intersect:enter="start()" class="text-center">
                <div class="text-gray-950 text-4xl sm:text-6xl lg:text-7xl font-medium font-['Plus_Jakarta_Sans']">
                    <span x-text="display"></span>+
                </div>
                <div class="text-gray-500 text-sm sm:text-base lg:text-lg leading-snug">
                    Years&nbsp;of&nbsp;Experience
                </div>
            </div>

            <!-- Projects -->
            <div x-data="counter({{$projectNumber}})" x-intersect:enter="start()" class="text-center">
                <div class="text-gray-950 text-4xl sm:text-6xl lg:text-7xl font-medium font-['Plus_Jakarta_Sans']">
                    <span x-text="display"></span>+
                </div>
                <div class="text-gray-500 text-sm sm:text-base lg:text-lg leading-snug">
                    Projects
                </div>
            </div>

            <!-- Positive Reviews -->
            <div x-data="counter({{$positiveReviews}})" x-intersect:enter="start()" class="text-center">
                <div class="text-gray-950 text-4xl sm:text-6xl lg:text-7xl font-medium font-['Plus_Jakarta_Sans']">
                    <span x-text="display"></span>+
                </div>
                <div class="text-gray-500 text-sm sm:text-base lg:text-lg leading-snug">
                    Positive&nbsp;Reviews
                </div>
            </div>

            <!-- Team Members -->
            <div x-data="counter({{$teamMembers}})" x-intersect:enter="start()" class="text-center">
                <div class="text-gray-950 text-4xl sm:text-6xl lg:text-7xl font-medium font-['Plus_Jakarta_Sans']">
                    <span x-text="display"></span>+
                </div>
                <div class="text-gray-500 text-sm sm:text-base lg:text-lg leading-snug">
                    Team&nbsp;Members
                </div>
            </div>
        </div>
    </div>
    @push("inlinescript")
        <script>
            function counter(target) {
                return {
                    display: 0,
                    start() {
                        const duration = 2000; // Animation duration in milliseconds
                        const frameDuration = 1000 / 60; // Approximate frame duration at 60 FPS
                        const totalFrames = Math.round(duration / frameDuration);
                        let frame = 0;
                        const countTo = parseInt(target, 10);
                        const counter = setInterval(() => {
                            frame++;
                            const progress = frame / totalFrames;
                            this.display = Math.floor(countTo * progress);
                            if (frame === totalFrames) {
                                clearInterval(counter);
                                this.display = countTo;
                            }
                        }, frameDuration);
                    }
                }
            }
        </script>

    @endpush
</div>