<section class="bg-white py-24" data-component-type="Content" data-component-slug="ss-technology-template-performance">
  <div class="max-w-[90%] mx-auto px-6 sm:px-12">
    
    <!-- Header -->
    <div class="text-center max-w-4xl mx-auto mb-20">
      <!-- Badge -->
      <div class="inline-flex items-center gap-2 bg-[#E2FC80] px-4 py-2 rounded-lg mb-6">
          <img src="{{badge_icon}}" data-node="badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-5 h-5 object-contain" alt="icon">
          <span class="text-[#0A2519] font-medium" data-node="perf_badge_text" data-node-type="text" data-node-label="Badge Text" data-node-default="Performance You Can Measure">
            {{perf_badge_text}}
          </span>
      </div>

      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[#003D33] leading-tight mb-6" data-node="perf_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Speed, stability & scale proven by results.">
        {{perf_heading}}
      </h2>
      
      <p class="text-lg text-[#4A736D] leading-relaxed mb-10 max-w-2xl mx-auto" data-node="perf_description" data-node-type="textarea" data-node-label="Description" data-node-default="Our platform is engineered for high-volume usage without breakdowns, delays, or data risk.">
        {{perf_description}}
      </p>

       <!-- CTA Button -->
        <a href="{{perf_cta_link}}" data-node="perf_cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#">
          <span class="bg-[#064E3B] text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-[#022c22] transition-colors shadow-lg inline-block" data-node="perf_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Start Your Free Account">
            {{perf_cta_text}}
          </span>
        </a>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-0 max-w-5xl mx-auto">
      
      <!-- Stat 1 -->
      <div class="text-center md:px-8">
         <div class="text-5xl lg:text-6xl  text-[#003D33] mb-2">
            <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="99.9" class="font-bold">0</span>
             <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="%" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>

            <span class=" align-top text-5xl lg:text-6xl  text-[#003D33]">↑</span>
         </div>
         <p class="text-[#4A736D] text-lg" data-node="stat_1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="uptime across all services">
            {{stat_1_label}}
         </p>
      </div>

      <!-- Stat 2 -->
      <div class="text-center md:px-8 md:border-l-2 md:border-[#E5E7EB]">
         <div class="text-5xl lg:text-6xl  text-[#003D33] mb-2">
          
            <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="5" class="font-bold">0</span>
              <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="M+" data-suffix="2" class="font-bold">{{counter_2_suffix}}</span>
             <span class=" align-top text-5xl lg:text-6xl  text-[#003D33]">↑</span>
         </div>
         <p class="text-[#4A736D] text-lg" data-node="stat_2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="transactions processed monthly">
            {{stat_2_label}}
         </p>
      </div>

      <!-- Stat 3 -->
      <div class="text-center md:px-8 md:border-l-2 md:border-[#E5E7EB]">
         <div class="text-5xl lg:text-6xl  text-[#003D33] mb-2">
            <span data-counter="3" data-node="counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="2.5" class="font-bold">0</span>

             <span data-node="counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default="M" data-suffix="3" class="font-bold">{{counter_3_suffix}}</span>
            <span class=" align-top text-5xl lg:text-6xl  text-[#003D33]">↑</span>
         </div>
         <p class="text-[#4A736D] text-lg" data-node="stat_3_label" data-node-type="text" data-node-label="Stat 3 Label" data-node-default="verified financial interactions completed">
            {{stat_3_label}}
         </p>
      </div>

    </div>

  </div>
</section>