<!-- 
  Why Choose Us Section Component
  Features list with image
-->
<section class="flex justify-center pt-5 relative bg-white" data-component-type="Content">
  <section class="w-[90%] px-6 lg:px-20 py-20 grid lg:grid-cols-2 gap-12 items-start">
    <!-- LEFT CONTENT -->
    <div>
      <!-- Badge -->
      <span
        data-node="why_choose_badge"
        data-node-type="text"
        data-node-label="Badge Text"
        data-node-default="Why choose Us"
        class="text-[18px] bg-[#5F4BE233] text-[#5F4BE2] px-4 py-3 rounded-[10px] mb-[10px] font-bold"
      >
        {{why_choose_badge}}
      </span>

      <!-- Main Heading -->
      <h2
        data-node="why_choose_heading"
        data-node-type="text"
        data-node-label="Main Heading"
        data-node-default="How our CMR platform helps your agency grow."
        class="text-3xl lg:text-4xl font-bold text-dark mt-6"
      >
        {{why_choose_heading}}
      </h2>

      <!-- Feature 1 -->
      <div class="py-[20px]">
        <h3
          data-node="feature1_heading"
          data-node-type="text"
          data-node-label="Feature 1 Heading"
          data-node-default="Smart Workflow Automation."
          class="text-3xl lg:text-[26px] font-bold text-dark mt-6"
        >
          {{feature1_heading}}
        </h3>
        <p
          data-node="feature1_text"
          data-node-type="textarea"
          data-node-label="Feature 1 Text"
          data-node-default="Replace repetitive tasks with automated flows that reduce errors and free your team to focus on strategy."
          class="mt-4 text-[#4A6673] text-[18px]"
        >
          {{feature1_text}}
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="py-[20px]">
        <h3
          data-node="feature2_heading"
          data-node-type="text"
          data-node-label="Feature 2 Heading"
          data-node-default="Centralized Client Management"
          class="text-3xl lg:text-[26px] font-bold text-dark mt-6"
        >
          {{feature2_heading}}
        </h3>
        <p
          data-node="feature2_text"
          data-node-type="textarea"
          data-node-label="Feature 2 Text"
          data-node-default="All conversations, files, notes, deadlines, and approvals organized in one clean dashboard."
          class="mt-4 text-[#4A6673] text-[18px]"
        >
          {{feature2_text}}
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="py-[20px]">
        <h3
          data-node="feature3_heading"
          data-node-type="text"
          data-node-label="Feature 3 Heading"
          data-node-default="Real-Time Performance Insights"
          class="text-3xl lg:text-[26px] font-bold text-dark mt-6"
        >
          {{feature3_heading}}
        </h3>
        <p
          data-node="feature3_text"
          data-node-type="textarea"
          data-node-label="Feature 3 Text"
          data-node-default="Track productivity, project progress, KPIs, and revenue to make informed decisions instantly."
          class="mt-4 text-[#4A6673] text-[18px]"
        >
          {{feature3_text}}
        </p>
      </div>
    </div>

    <!-- RIGHT IMAGE -->
    <div class="flex justify-center">
      <img
        data-node="why_choose_image"
        data-node-type="file"
        data-node-label="Why Choose Us Image"
        data-node-default="../assets/why-choosw-us/img2.png"
        src="{{why_choose_image}}"
        class="rounded-xl shadow w-full"
        alt="Why Choose Us Illustration"
      />
    </div>
  </section>
</section>
