<section data-component-type="Content" class="max-w-[90%] bg-white mx-auto py-16 mt-[85px]" data-component-slug="saas-template-learn-how-we-work">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
    <!-- Left Content -->
    <div>
      <!-- Heading -->
      <h1 data-node="heading" data-node-type="text" data-node-label="Section Heading" data-node-default="Building Better Workflows for Modern Teams" class="text-4xl md:text-5xl font-bold leading-tight text-[#151515]">
        {{heading}}
      </h1>

      <!-- Subheading / Description -->
      <p data-node="description" data-node-type="textarea" data-node-label="Section Description" data-node-default="We create tools that streamline complexity, boost efficiency, and empower teams to achieve more with less effort. Every feature is designed with clarity, speed, and scalability in mind." class="mt-6 text-[#4A6673] text-lg leading-relaxed max-w-lg">
        {{description}}
      </p>

      <!-- CTA Button -->
      <a data-node="cta_button_link" data-node-type="page_links" data-node-label="CTA Button Link" data-node-default="#" href="{{cta_button_link}}" class="inline-block mt-6 bg-[#5F4BE2] hover:bg-[#5F4BE2] text-white font-semibold px-6 py-3 rounded-lg shadow transition">
        <span data-node="cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Learn How We Work">{{cta_button_text}}</span>
      </a>

      <!-- Stats -->
      <div class="mt-10 flex gap-16 flex-wrap">
        <!-- Stat 1 -->
        <div>
          <h2 data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="98%" class="text-4xl font-bold text-[#151515]">
            {{stat_1_value}}
          </h2>
          <p data-node="stat_1_desc" data-node-type="textarea" data-node-label="Stat 1 Description" data-node-default="User satisfaction across global teams." class="mt-1 text-[#4A6673]">
            {{stat_1_desc}}
          </p>
        </div>

        <!-- Stat 2 -->
        <div>
          <h2 data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="34+" class="text-4xl font-bold text-[#151515]">
            {{stat_2_value}}
          </h2>
          <p data-node="stat_2_desc" data-node-type="textarea" data-node-label="Stat 2 Description" data-node-default="Industries actively using our platform." class="mt-1 text-[#4A6673]">
            {{stat_2_desc}}
          </p>
        </div>
      </div>
    </div>

    <!-- Right Image -->
    <div>
      <img data-node="right_image" data-node-type="file" data-node-label="Section Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868963/seltrix/templates/saas-template/learn-how-we-work/how.png" src="{{right_image}}" class="rounded-lg shadow-xl w-full object-cover" alt="team working">
    </div>
  </div>
</section>