<!-- 
  Our Approach Section Component
  Features list with image
-->
<section data-component-type="Content" class="py-20 max-w-[90%] mx-auto">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <!-- Left Image -->
    <div class="flex justify-center lg:justify-start">
      <img
        data-node="approach_image"
        data-node-type="file"
        data-node-label="Our Approach Image"
        data-node-default="../assets/our-aproach/image.png"
        src="{{approach_image}}"
        alt="Dashboard preview"
        class="w-full bg-[#F8FAFB] lg:pt-[30px] lg:pr-[30px] max-w-[600px] rounded-xl shadow-md"
      />
    </div>

    <!-- Right Content -->
    <div class="flex flex-col justify-center">
      <!-- Tag -->
      <span
        data-node="approach_tag"
        data-node-type="text"
        data-node-label="Approach Tag"
        data-node-default="Our Approach"
        class="inline-block bg-[#5F4BE233] text-[#5F4BE2] text-sm font-medium px-4 py-2 w-[140px] text-center rounded-[10px] mb-4"
      >
        {{approach_tag}}
      </span>

      <!-- Main Heading -->
      <h2
        data-node="approach_heading"
        data-node-type="text"
        data-node-label="Approach Main Heading"
        data-node-default="We build solutions that adapt to how teams work"
        class="text-3xl text-[#151515] md:text-4xl font-semibold mb-6 leading-tight"
      >
        {{approach_heading}}
      </h2>

      <!-- Features List -->
      <div class="space-y-6">
        <!-- Item 1 -->
        <div>
          <h3
            data-node="feature_1_title"
            data-node-type="text"
            data-node-label="Feature 1 Title"
            data-node-default="Insight-Driven Development"
            class="text-xl font-semibold text-[#000000]"
          >
            {{feature_1_title}}
          </h3>
          <p
            data-node="feature_1_desc"
            data-node-type="textarea"
            data-node-label="Feature 1 Description"
            data-node-default="Every feature is shaped by real user feedback to deliver value where it matters most."
            class="text-[#4A6673] text-[15px] mt-1"
          >
            {{feature_1_desc}}
          </p>
        </div>

        <!-- Item 2 -->
        <div>
          <h3
            data-node="feature_2_title"
            data-node-type="text"
            data-node-label="Feature 2 Title"
            data-node-default="Continuous Innovation"
            class="text-xl font-semibold text-[#000000]"
          >
            {{feature_2_title}}
          </h3>
          <p
            data-node="feature_2_desc"
            data-node-type="textarea"
            data-node-label="Feature 2 Description"
            data-node-default="Regular updates keep your workflows future-ready with smarter automations and improved efficiency."
            class="text-[#4A6673] text-[15px] mt-1"
          >
            {{feature_2_desc}}
          </p>
        </div>

        <!-- Item 3 -->
        <div>
          <h3
            data-node="feature_3_title"
            data-node-type="text"
            data-node-label="Feature 3 Title"
            data-node-default="Seamless Integration"
            class="text-xl font-semibold text-[#000000]"
          >
            {{feature_3_title}}
          </h3>
          <p
            data-node="feature_3_desc"
            data-node-type="textarea"
            data-node-label="Feature 3 Description"
            data-node-default="Connect tools you already use and streamline processes across your ecosystem."
            class="text-[#4A6673] text-[15px] mt-1"
          >
            {{feature_3_desc}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
