<section data-component-type="Content" class="w-full py-5 bg-white" data-component-slug="saas-template-feature-busines-help-grow">
  <div class="max-w-[90%] mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 items-center px-5">
    <!-- LEFT SIDE CONTENT -->
    <div>
      <h2 data-node="features_heading" data-node-type="text" data-node-label="Features Section Heading" data-node-default="The Features That Help Your Business Grow" class="text-3xl md:text-5xl font-bold text-[#0A0A0A] leading-tight">
        {{features_heading}}
      </h2>
      <p data-node="features_subtitle" data-node-type="textarea" data-node-label="Features Section Subtitle" data-node-default="We power agencies to deliver faster, collaborate better, and scale confidently." class="text-[#4A6673] mt-4 text-lg leading-relaxed max-w-[500px]">
        {{features_subtitle}}
      </p>
    </div>

    <!-- RIGHT SIDE 3 STAT CARDS -->
    <div class="grid md:grid-cols-3 grid-cols-1 justify-between items-start">
      <!-- CARD 1 -->
      <div class="p-8 text-center md:text-start">
        <h3 data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="10k+" class="text-[20px] lg:text-[45px] font-bold text-black">
          {{stat_1_value}}
        </h3>
        <p data-node="stat_1_desc" data-node-type="text" data-node-label="Stat 1 Description" data-node-default="Automated Workflows" class="text-[#4A6673] text-[8px] lg:text-[20px] mt-2">
          {{stat_1_desc}}
        </p>
      </div>

      <!-- CARD 2 -->
      <div class="p-8 text-center">
        <h3 data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="5.2m" class="text-[20px] lg:text-[45px] font-bold text-black">
          {{stat_2_value}}
        </h3>
        <p data-node="stat_2_desc" data-node-type="text" data-node-label="Stat 2 Description" data-node-default="Achievements" class="text-[#4A6673] text-[8px] lg:text-[20px] text-sm mt-2">
          {{stat_2_desc}}
        </p>
      </div>

      <!-- CARD 3 -->
      <div class="p-8 text-center">
        <h3 data-node="stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="98%" class="text-[20px] font-bold text-black lg:text-[45px]">
          {{stat_3_value}}
        </h3>
        <p data-node="stat_3_desc" data-node-type="text" data-node-label="Stat 3 Description" data-node-default="Happy Clients" class="text-[#4A6673] text-[8px] lg:text-[20px] text-sm mt-2">
          {{stat_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>