<section class="flex justify-center pt-5 relative bg-white" data-component-type="Content" data-component-slug="saas-template-why-choose-us">
  <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-[50px] 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 pt-[40px]">
        {{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="https://res.cloudinary.com/duukclzsd/image/upload/v1765868978/seltrix/templates/saas-template/why-choosw-us/img2.png" src="{{why_choose_image}}" class="rounded-xl shadow w-full" alt="Why Choose Us Illustration">
    </div>
  </section>
</section>