<!-- 
  Work Smarter Section Component
  Stats and automation showcase
-->
<section data-component-type="Content" class="max-w-[90%] mx-auto py-20 flex flex-col lg:flex-row items-center gap-14">
  <!-- 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="../assets/work-smater/work.png"
        src="{{work_image}}"
        alt="Workflow Dashboard"
        class="w-full object-cover rounded-3xl"
      />
    </div>
  </div>
</section>
