<section
  class="w-full bg-black px-4 md:px-12 lg:px-24 pt-12 md:pt-24 lg:pt-12 pb-20 md:pb-24 lg:pb-32"
  data-component-type="Content"
>
  <!-- 4-COLUMN METRICS SECTION -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10 lg:gap-16">
    <!-- ITEM 1 -->
    <div class="metrics-item" data-node-label="Metric 1">
      <div
        class="font-['Cabin'] font-normal text-[24px] sm:text-[32px] leading-[100%] text-white mb-3"
        data-node="metric1_title"
        data-node-type="text"
        data-node-label="Metric 1 Title"
        data-node-default="Marketing Analytics"
      >
        {{metric1_title}}
      </div>

      <div
        class="font-['Cabin'] font-normal text-[18px] sm:text-[20px] leading-[130%] text-[#7E7E7E]"
        data-node="metric1_desc"
        data-node-type="text"
        data-node-label="Metric 1 Description"
        data-node-default="Measure performance across channels with actionable insights."
      >
        {{metric1_desc}}
      </div>
    </div>

    <!-- ITEM 2 -->
    <div class="metrics-item" data-node-label="Metric 2">
      <div
        class="font-['Cabin'] font-normal text-[24px] sm:text-[32px] leading-[100%] text-white mb-3"
        data-node="metric2_title"
        data-node-type="text"
        data-node-label="Metric 2 Title"
        data-node-default="SEO & Research"
      >
        {{metric2_title}}
      </div>

      <div
        class="font-['Cabin'] font-normal text-[18px] sm:text-[20px] leading-[130%] text-[#7E7E7E]"
        data-node="metric2_desc"
        data-node-type="text"
        data-node-label="Metric 2 Description"
        data-node-default="Understand demand, competition, and search intent precisely."
      >
        {{metric2_desc}}
      </div>
    </div>

    <!-- ITEM 3 -->
    <div class="metrics-item" data-node-label="Metric 3">
      <div
        class="font-['Cabin'] font-normal text-[24px] sm:text-[32px] leading-[100%] text-white mb-3"
        data-node="metric3_title"
        data-node-type="text"
        data-node-label="Metric 3 Title"
        data-node-default="Automation"
      >
        {{metric3_title}}
      </div>

      <div
        class="font-['Cabin'] font-normal text-[18px] sm:text-[20px] leading-[130%] text-[#7E7E7E]"
        data-node="metric3_desc"
        data-node-type="text"
        data-node-label="Metric 3 Description"
        data-node-default="Streamlines campaigns, lead nurturing, and reporting."
      >
        {{metric3_desc}}
      </div>
    </div>

    <!-- ITEM 4 -->
    <div class="metrics-item" data-node-label="Metric 4">
      <div
        class="font-['Cabin'] font-normal text-[24px] sm:text-[32px] leading-[100%] text-white mb-3"
        data-node="metric4_title"
        data-node-type="text"
        data-node-label="Metric 4 Title"
        data-node-default="Design Collaboration"
      >
        {{metric4_title}}
      </div>

      <div
        class="font-['Cabin'] font-normal text-[18px] sm:text-[20px] leading-[130%] text-[#7E7E7E]"
        data-node="metric4_desc"
        data-node-type="text"
        data-node-label="Metric 4 Description"
        data-node-default="Fast execution without creative compromise."
      >
        {{metric4_desc}}
      </div>
    </div>
  </div>
</section>
