doormile-next/src/components/sections/StatsBar.tsx

"use client";

import React from "react";
import Link from "next/link";
import { CountUp, StaggerChildren } from "@/animations/Reveal";

export default function StatsBar() {
  return (
    <StaggerChildren stagger={0.15} duration={0.7} yOffset={30} className="elementor-element elementor-element-9b26234 e-con-full e-grid cut-corner-no sticky-container-off e-con e-parent">
      
      {/* Stat Card 1 */}
      <div className="elementor-element elementor-element-ca6bc63 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="ca6bc63" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
        <div className="e-con-inner">
          <div className="elementor-element elementor-element-cc55905 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="cc55905" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
            <div className="elementor-widget-container">
              <div className="elementor-divider">
                <span className="elementor-divider-separator"></span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-3fb5639 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="3fb5639" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <div className="logico-title">
                <CountUp end={99.2} decimals={1} suffix="%" duration={2.2} /> <br /> 
                <span style={{ fontSize: "20px" }}>On-Time Delivery</span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-94c3ff1 elementor-widget elementor-widget-logico_button" data-id="94c3ff1" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
            <div className="elementor-widget-container">
              <div className="button-widget">
                <div className="button-container">
                  <Link href="/solutions" className="logico-small-button">
                    Connected Miles
                    <svg viewBox="0 0 13 20">
                      <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stat Card 2 */}
      <div className="elementor-element elementor-element-4c0903b e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="4c0903b" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
        <div className="e-con-inner">
          <div className="elementor-element elementor-element-c8adeeb elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="c8adeeb" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
            <div className="elementor-widget-container">
              <div className="elementor-divider">
                <span className="elementor-divider-separator"></span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-5e64d7b elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="5e64d7b" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <div className="logico-title">
                <CountUp end={3} suffix="x Faster" duration={1.8} /> <br /> 
                <span style={{ fontSize: "20px" }}>Faster Response</span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-20db156 elementor-widget elementor-widget-logico_button" data-id="20db156" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
            <div className="elementor-widget-container">
              <div className="button-widget">
                <div className="button-container">
                  <Link href="/miletruth" className="logico-small-button">
                    MileTruth™ AI
                    <svg viewBox="0 0 13 20">
                      <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stat Card 3 */}
      <div className="elementor-element elementor-element-f003242 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="f003242" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
        <div className="e-con-inner">
          <div className="elementor-element elementor-element-d58ef3c elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="d58ef3c" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
            <div className="elementor-widget-container">
              <div className="elementor-divider">
                <span className="elementor-divider-separator"></span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-d00253e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="d00253e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <div className="logico-title">
                <CountUp end={40} suffix="%" duration={2} /> <br /> 
                <span style={{ fontSize: "20px" }}>Cost Reduction</span>
              </div>
            </div>
          </div>
          <div className="elementor-element elementor-element-3481e66 elementor-widget elementor-widget-logico_button" data-id="3481e66" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
            <div className="elementor-widget-container">
              <div className="button-widget">
                <div className="button-container">
                  <Link href="/solutions" className="logico-small-button">
                    SLA Protection
                    <svg viewBox="0 0 13 20">
                      <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </StaggerChildren>
  );
}