<section
  class="w-full bg-black px-4 md:px-12 lg:px-24 pt-0 md:pt-28 pb-20 md:pb-28 lg:pb-36"
  data-component-type="Content"
>
  <!-- GRID MAIN -->
  <div class="grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-16 lg:gap-16 items-center">
    <!-- LEFT — METRIC BOXES -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-7">
      <div
        class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
      >
        <div
          class="font-['Cabin'] text-[56px] font-medium text-white leading-[100%] mb-3"
          data-node="metric1_number"
          data-node-type="text"
          data-node-label="Metric 1 Number"
          data-node-default="150+"
        >
          {{metric1_number}}
        </div>

        <div
          class="font-['Cabin'] text-[32px] font-normal text-white leading-[100%] text-center"
          data-node="metric1_text"
          data-node-type="text"
          data-node-label="Metric 1 Text"
          data-node-default="Happy Customers"
        >
          {{metric1_text}}
        </div>
      </div>

      <div
        class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
      >
        <div
          class="font-['Cabin'] text-[56px] font-medium text-white leading-[100%] mb-3"
          data-node="metric2_number"
          data-node-type="text"
          data-node-label="Metric 2 Number"
          data-node-default="25+"
        >
          {{metric2_number}}
        </div>

        <div
          class="font-['Cabin'] text-[32px] font-normal text-white leading-[100%] text-center"
          data-node="metric2_text"
          data-node-type="text"
          data-node-label="Metric 2 Text"
          data-node-default="Successful Projects"
        >
          {{metric2_text}}
        </div>
      </div>

      <div
        class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
      >
        <div
          class="font-['Cabin'] text-[56px] font-medium text-white leading-[100%] mb-3"
          data-node="metric3_number"
          data-node-type="text"
          data-node-label="Metric 3 Number"
          data-node-default="12"
        >
          {{metric3_number}}
        </div>

        <div
          class="font-['Cabin'] text-[32px] font-normal text-white leading-[100%] text-center"
          data-node="metric3_text"
          data-node-type="text"
          data-node-label="Metric 3 Text"
          data-node-default="Years of Experience"
        >
          {{metric3_text}}
        </div>
      </div>

      <div
        class="relative w-full h-[214px] rounded-[20px] bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] flex flex-col items-center justify-center shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
      >
        <div
          class="font-['Cabin'] text-[56px] font-medium text-white leading-[100%] mb-3"
          data-node="metric4_number"
          data-node-type="text"
          data-node-label="Metric 4 Number"
          data-node-default="4.5/5"
        >
          {{metric4_number}}
        </div>

        <div
          class="font-['Cabin'] text-[32px] font-normal text-white leading-[100%] text-center"
          data-node="metric4_text"
          data-node-type="text"
          data-node-label="Metric 4 Text"
          data-node-default="Rated In Niche"
        >
          {{metric4_text}}
        </div>
      </div>
    </div>

    <!-- RIGHT SIDE -->
    <div>
      <!-- LABEL -->
      <div
        class="inline-block py-3 px-7 font-['Cabin'] text-[32px] font-normal text-white rounded-xl bg-white/[0.07] backdrop-blur-[14px] border border-white/[0.15] shadow-[0_0_18px_rgba(0,0,0,0.55),inset_0_0_14px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.09)]"
        data-node="impact_label"
        data-node-type="text"
        data-node-label="Impact Label"
        data-node-default="Our impact"
      >
        {{impact_label}}
      </div>

      <!-- HEADING -->
      <h2
        class="font-['Cabin'] font-medium text-[42px] md:text-[56px] leading-[100%] text-white mt-6 mb-6"
        data-node="impact_heading"
        data-node-type="text"
        data-node-label="Impact Heading"
        data-node-default="The results backed by our strategy."
      >
        {{impact_heading}}
      </h2>

      <!-- DESCRIPTION -->
      <p
        class="font-['Cabin'] text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[530px] mb-10"
        data-node="impact_description"
        data-node-type="textarea"
        data-node-label="Impact Description"
        data-node-default="We focus on results that influence revenue, customer acquisition, and long-term brand equity."
      >
        {{impact_description}}
      </p>

      <!-- CTA BUTTON -->
      <a
        class="inline-block bg-[#D3FF5B] py-4 px-6 rounded-xl font-['Cabin'] text-[24px] font-normal text-black"
        data-node="impact_cta"
        data-node-type="text"
        data-node-label="Impact CTA Button"
        data-node-default="Book a Call"
      >
        {{impact_cta}}
      </a>
    </div>
  </div>
</section>
