<!-- 
  Centralized Client Management Section Component
  Two-column feature blocks
-->
<section data-component-type="Content" class="w-full py-14">
  <div class="max-w-[90%] mx-auto px-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-14">
      <!-- LEFT FEATURE BLOCK -->
      <div class="bg-[#F5F8FF] lg:pl-[50px] lg:pt-[50px] p-[20px] lg:pr-[0px] rounded-[30px]">
        <h2
          data-node="feature_left_title"
          data-node-type="text"
          data-node-label="Left Block Title"
          data-node-default="Centralized Client Management"
          class="text-[32px] md:text-[42px] font-bold text-[#0A0A0A] leading-tight"
        >
          {{feature_left_title}}
        </h2>

        <p
          data-node="feature_left_description"
          data-node-type="textarea"
          data-node-label="Left Block Description"
          data-node-default="Manage all client data, communications, files, tasks, and history in one organized dashboard to streamline operations and improve clarity."
          class="mt-3 text-[#4A6673] text-lg leading-relaxed max-w-[460px]"
        >
          {{feature_left_description}}
        </p>

        <div class="mt-10 bg-white shadow-md rounded-3xl overflow-hidden border border-[#E8ECF5]">
          <img
            data-node="feature_left_image"
            data-node-type="file"
            data-node-label="Left Feature Image"
            data-node-default="../assets/CentralizedClientManagementimages/left.png"
            src="{{feature_left_image}}"
            class="w-full object-cover"
          />
        </div>
      </div>

      <!-- RIGHT FEATURE BLOCK -->
      <div class="bg-[#F5F8FF] lg:pl-[50px] lg:pt-[50px] p-[20px] lg:pr-[0px] rounded-[30px]">
        <h2
          data-node="feature_right_title"
          data-node-type="text"
          data-node-label="Right Block Title"
          data-node-default="Workflow Automation"
          class="text-[32px] md:text-[42px] font-bold text-[#0A0A0A] leading-tight"
        >
          {{feature_right_title}}
        </h2>

        <p
          data-node="feature_right_description"
          data-node-type="textarea"
          data-node-label="Right Block Description"
          data-node-default="Automate repetitive tasks, reminders, follow-ups, and reporting to save time, reduce errors, and accelerate your team's productivity."
          class="mt-3 text-[#4A6673] text-lg leading-relaxed max-w-[460px]"
        >
          {{feature_right_description}}
        </p>

        <div class="mt-10 bg-white shadow-md rounded-3xl overflow-hidden border border-[#E8ECF5]">
          <img
            data-node="feature_right_image"
            data-node-type="file"
            data-node-label="Right Feature Image"
            data-node-default="../assets/CentralizedClientManagementimages/right.png"
            src="{{feature_right_image}}"
            class="w-full object-cover"
          />
        </div>
      </div>
    </div>
  </div>
</section>
