<section class="bg-[#F6FBFF] py-14 sm:py-20" data-component-type="Content" data-component-slug="real-estate-template-homes_designed">
  <div class="max-w-[90%] mx-auto">

    <!-- TOP CONTENT -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">

      <!-- LEFT HEADING -->
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold leading-[38px] sm:leading-[48px] lg:leading-[60px] text-black max-w-xl" data-node="overview_heading" data-node-type="textarea" data-node-label="Overview Heading" data-node-default="Homes Designed for Comfort, Value, and Long-Term Living">
        {{overview_heading}}
      </h2>

      <!-- RIGHT CONTENT -->
      <div class="space-y-6">

        <!-- DESCRIPTION -->
        <p class="text-sm sm:text-base text-[#575757] max-w-xl" data-node="overview_description" data-node-type="textarea" data-node-label="Overview Description" data-node-default="Discover thoughtfully planned residences that combine modern design, prime locations, and lasting quality.">
          {{overview_description}}
        </p>

        <!-- ICON FEATURES -->
        <div class="flex flex-wrap gap-6">

          <!-- FEATURE 1 -->
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 bg-white rounded-lg border flex items-center justify-center">
              <img src="{{overview_feature_icon_1}}" data-node="overview_feature_icon_1" data-node-type="file" data-node-label="Feature Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359403/seltrix/templates/real-estate-template/verify.png" class="w-[20px]">
            </div>
            <span class="text-sm font-medium text-[#575757]" data-node="overview_feature_text_1" data-node-type="text" data-node-label="Feature Text 1" data-node-default="Prime Locations">
              {{overview_feature_text_1}}
            </span>
          </div>

          <!-- FEATURE 2 -->
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 bg-white rounded-lg border flex items-center justify-center">
              <img src="{{overview_feature_icon_2}}" data-node="overview_feature_icon_2" data-node-type="file" data-node-label="Feature Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359403/seltrix/templates/real-estate-template/verify.png" class="w-[20px]">
            </div>
            <span class="text-sm font-medium text-[#575757]" data-node="overview_feature_text_2" data-node-type="text" data-node-label="Feature Text 2" data-node-default="Trusted Quality">
              {{overview_feature_text_2}}
            </span>
          </div>

        </div>
      </div>
    </div>

    <!-- STATS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mt-16">

      <!-- STAT 1 -->
      <div>
        <h3 class="text-3xl sm:text-4xl font-semibold text-black" data-node="stat_value_1" data-node-type="text" data-node-label="Stat Value 1" data-node-default="900+">
          {{stat_value_1}}
        </h3>
        <p class="mt-3 text-sm text-[#575757] max-w-xs" data-node="stat_desc_1" data-node-type="textarea" data-node-label="Stat Description 1" data-node-default="Homes successfully delivered across premium residential developments.">
          {{stat_desc_1}}
        </p>
      </div>

      <!-- STAT 2 -->
      <div>
        <h3 class="text-3xl sm:text-4xl font-semibold text-black" data-node="stat_value_2" data-node-type="text" data-node-label="Stat Value 2" data-node-default="95%">
          {{stat_value_2}}
        </h3>
        <p class="mt-3 text-sm text-[#575757] max-w-xs" data-node="stat_desc_2" data-node-type="textarea" data-node-label="Stat Description 2" data-node-default="Customer satisfaction rate driven by transparency and service.">
          {{stat_desc_2}}
        </p>
      </div>

      <!-- STAT 3 -->
      <div>
        <h3 class="text-3xl sm:text-4xl font-semibold text-black" data-node="stat_value_3" data-node-type="text" data-node-label="Stat Value 3" data-node-default="231">
          {{stat_value_3}}
        </h3>
        <p class="mt-3 text-sm text-[#575757] max-w-xs" data-node="stat_desc_3" data-node-type="textarea" data-node-label="Stat Description 3" data-node-default="Ongoing and completed projects in high-demand neighborhoods.">
          {{stat_desc_3}}
        </p>
      </div>

      <!-- STAT 4 -->
      <div>
        <h3 class="text-3xl sm:text-4xl font-semibold text-black" data-node="stat_value_4" data-node-type="text" data-node-label="Stat Value 4" data-node-default="12+">
          {{stat_value_4}}
        </h3>
        <p class="mt-3 text-sm text-[#575757] max-w-xs" data-node="stat_desc_4" data-node-type="textarea" data-node-label="Stat Description 4" data-node-default="Years of experience in residential real estate development.">
          {{stat_desc_4}}
        </p>
      </div>

    </div>
  </div>
</section>