<section data-component-type="Content" class="max-w-[90%] mx-auto py-20 flex flex-col lg:flex-row items-center gap-14" data-component-slug="saas-template-work-smarter">
  <!-- LEFT CONTENT -->
  <div class="flex-1">
    <!-- Badge -->
    <span data-node="work_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Work Smarter" class="inline-block bg-[#E0D9FF] text-[#6A4DF5] px-5 py-2 text-sm font-semibold rounded-[10px]">
      {{work_badge}}
    </span>

    <!-- Heading -->
    <h1 data-node="work_heading" data-node-type="text" data-node-label="Heading Text" data-node-default="Transform daily operations with automation that adapts to you" class="text-4xl md:text-5xl font-bold leading-tight mt-6 text-[#111]">
      {{work_heading}}
    </h1>

    <!-- Description -->
    <p data-node="work_description" data-node-type="textarea" data-node-label="Description Text" data-node-default="Set up intelligent workflows that learn from your habits. Minimize manual steps and maximize precision in every task." class="text-[#4A6673] text-lg leading-relaxed mt-5 max-w-xl">
      {{work_description}}
    </p>

    <!-- Stats -->
    <div class="grid grid-cols-2 gap-10 mt-10">
      <div>
        <h2 data-node="stat1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="98%" class="text-4xl font-bold text-black">
          {{stat1_value}}
        </h2>
        <p data-node="stat1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Faster execution with automated workflows" class="text-[#4A6673] mt-2">
          {{stat1_label}}
        </p>
      </div>
      <div>
        <h2 data-node="stat2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="34+" class="text-4xl font-bold text-black">
          {{stat2_value}}
        </h2>
        <p data-node="stat2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Smart triggers ready to plug and play" class="text-[#4A6673] mt-2">
          {{stat2_label}}
        </p>
      </div>
    </div>
  </div>

  <!-- RIGHT IMAGE PANEL -->
  <div class="flex-1">
    <div class="rounded-3xl overflow-hidden shadow-xl border border-gray-200">
      <img data-node="work_image" data-node-type="file" data-node-label="Work Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868979/seltrix/templates/saas-template/work-smater/work.png" src="{{work_image}}" alt="Workflow Dashboard" class="w-full object-cover rounded-3xl">
    </div>
  </div>
</section>