<!-- 
  Features Stats Section Component
  Stats with heading
-->
<section data-component-type="Content" class="w-full py-5 bg-white">
  <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>
