<!-- 
  Learn How We Work Section Component
  About section with image and stats
-->
<section data-component-type="Content" class="max-w-[90%] bg-white mx-auto py-16">
  <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="../assets/learn-how-we-work/how.png"
        src="{{right_image}}"
        class="rounded-lg shadow-xl w-full object-cover"
        alt="team working"
      />
    </div>
  </div>
</section>
