<section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="ss-amusement-park-growing-with-smile">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Top Row: Text and Stats -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-start mb-16">
      <!-- Left: Title and Description -->
      <div class="max-w-xl">
        <h2 data-node="grow_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Growing With Every Smile" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-6">
          {{grow_title}}
        </h2>
        <p data-node="grow_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Our journey continues with every laugh and cheer. Families return because joy feels familiar here." class="text-gray-500 text-base leading-relaxed">
          {{grow_description}}
        </p>
      </div>

      <!-- Right: Stats -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <!-- Stat 1 -->
        <div class="border border-gray-100 p-8 rounded-lg bg-white shadow-sm">
          <div class="flex items-baseline gap-0 mb-2">
            <h3 data-counter="1" data-node="stat_1_number" data-node-type="number" data-node-label="Stat 1 Number" data-node-default="30" class="text-4xl font-bold text-gray-900">
              0
            </h3>
            <h3 data-node="stat_1_suffix" data-node-type="text" data-node-label="Stat 1 Suffix" data-node-default="+" class="text-4xl font-bold text-gray-900">
              {{stat_1_suffix}}
            </h3>
          </div>
          <p data-node="stat_1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Years" class="text-lg font-semibold text-gray-900 mb-3">
            {{stat_1_label}}
          </p>
          <p data-node="stat_1_desc" data-node-type="textarea" data-node-label="Stat 1 Description" data-node-default="Decades of creating unforgettable fun. Built on trust, safety, and happy families." class="text-gray-500 text-sm leading-relaxed">
            {{stat_1_desc}}
          </p>
        </div>

        <!-- Stat 2 -->
        <div class="border border-gray-100 p-8 rounded-lg bg-white shadow-sm">
          <div class="flex items-baseline gap-0 mb-2">
            <h3 data-counter="2" data-node="stat_2_number" data-node-type="number" data-node-label="Stat 2 Number" data-node-default="160" class="text-4xl font-bold text-gray-900">
              0
            </h3>
            <h3 data-node="stat_2_suffix" data-node-type="text" data-node-label="Stat 2 Suffix" data-node-default="+" class="text-4xl font-bold text-gray-900">
              {{stat_2_suffix}}
            </h3>
          </div>
          <p data-node="stat_2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Attractions" class="text-lg font-semibold text-gray-900 mb-3">
            {{stat_2_label}}
          </p>
          <p data-node="stat_2_desc" data-node-type="textarea" data-node-label="Stat 2 Description" data-node-default="Rides, games, and experiences for all ages. More ways to play, explore, and smile." class="text-gray-500 text-sm leading-relaxed">
            {{stat_2_desc}}
          </p>
        </div>
      </div>
    </div>

    <!-- Bottom Row: Image -->
    <div class="w-full aspect-[1723/728] bg-gray-100 overflow-hidden rounded-sm">
      <img data-node="grow_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298082/seltrix/templates/ss-amusement-park-template/growing-smile.png" src="{{grow_image}}" alt="Team" class="w-full h-full object-cover">
    </div>
  </div>
</section>