<section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="ss-amusement-park-why-families-love">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center border px-8 lg:px-16 xl:px-24 py-16">
      <!-- Left Content -->
      <div>
        <h2 data-node="love_us_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Why Families Love Visiting Us" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-6">
          {{love_us_title}}
        </h2>

        <p data-node="love_us_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="We thoughtfully balance thrilling moments with comfort, safety, and care, creating an experience where every family member feels included, relaxed, and excited to return." class="text-gray-500 text-base leading-relaxed mb-12">
          {{love_us_description}}
        </p>

        <!-- 2x2 Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-10">
          <!-- Feature 1 -->
          <div>
            <h3 data-node="feat_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Safety" class="text-lg font-bold text-gray-900 mb-2">
              {{feat_1_title}}
            </h3>
            <p data-node="feat_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Thoughtfully designed rides and constant monitoring." class="text-gray-500 text-base leading-relaxed">
              {{feat_1_desc}}
            </p>
          </div>

          <!-- Feature 2 -->
          <div>
            <h3 data-node="feat_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Variety" class="text-lg font-bold text-gray-900 mb-2">
              {{feat_2_title}}
            </h3>
            <p data-node="feat_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Attractions for toddlers, teens, and adults." class="text-gray-500 text-base leading-relaxed">
              {{feat_2_desc}}
            </p>
          </div>

          <!-- Feature 3 -->
          <div>
            <h3 data-node="feat_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Comfort" class="text-lg font-bold text-gray-900 mb-2">
              {{feat_3_title}}
            </h3>
            <p data-node="feat_3_desc" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Clean spaces, rest areas, and friendly staff." class="text-gray-500 text-base leading-relaxed">
              {{feat_3_desc}}
            </p>
          </div>

          <!-- Feature 4 -->
          <div>
            <h3 data-node="feat_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Memories" class="text-lg font-bold text-gray-900 mb-2">
              {{feat_4_title}}
            </h3>
            <p data-node="feat_4_desc" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Moments that stay long after the day ends." class="text-gray-500 text-base leading-relaxed">
              {{feat_4_desc}}
            </p>
          </div>
        </div>
      </div>

      <!-- Right Image -->
      <div class="relative w-full h-full">
        <div class="aspect-[783/571] w-full bg-gray-100 overflow-hidden">
          <img data-node="love_us_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298164/seltrix/templates/ss-amusement-park-template/why-love-us.png" src="{{love_us_image}}" alt="Family Fun" class="w-full h-full object-cover">
        </div>
      </div>
    </div>
  </div>
</section>