<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-moments">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
      <!-- Title -->
      <h2 data-node="moments_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Moments You'll Remember Forever" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
        {{moments_title}}
      </h2>
      <!-- Description -->
      <p data-node="moments_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Every visit is packed with laughter, surprises, and joyful discoveries that bring families closer together. From thrilling adventures to calm moments, the park is designed for unforgettable experiences." class="text-gray-500 text-base leading-relaxed lg:max-w-lg lg:ml-auto">
        {{moments_description}}
      </p>
    </div>

    <!-- Content Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
      <!-- Image -->
      <div class="relative overflow-hidden hidden lg:block">
        <img data-node="moments_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298125/seltrix/templates/ss-amusement-park-template/moments.png" src="{{moments_image}}" alt="Park moments" class="w-full aspect-[915/560] object-cover tab-content" data-index="0">
        <img data-node="moments_image2" data-node-type="file" data-node-label="Section Image2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298068/seltrix/templates/ss-amusement-park-template/explore-2.png" src="{{moments_image2}}" alt="Park moments 2" class="w-full aspect-[915/560] object-cover hidden tab-content" data-index="1">
        <img data-node="moments_image3" data-node-type="file" data-node-label="Section Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298071/seltrix/templates/ss-amusement-park-template/feature-1.png" src="{{moments_image3}}" alt="Park moments 3" class="w-full aspect-[915/560] object-cover hidden tab-content" data-index="2">
      </div>

      <!-- Features List -->
      <div class="flex flex-col justify-center md:space-y-8 space-y-4">
        <!-- Feature 1: All Ages -->
        <div class="flex gap-4 md:pb-8 pl-6 border-l-4 tab-heading active" data-index="0">
          <div class="flex-shrink-0">
            <img data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303802/seltrix/templates/ss-amusement-park-template/icon-all-ages.svg" src="{{feature_1_icon}}" alt="Icon" class="w-8 h-8">
          </div>
          <div>
            <h3 data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="All Ages" class="text-xl font-bold text-gray-900 mb-2">
              {{feature_1_title}}
            </h3>
            <p data-node="feature_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Something exciting for everyone. From toddlers to teens and beyond." class="text-gray-500 text-base leading-relaxed">
              {{feature_1_description}}
            </p>
          </div>
        </div>

        <!-- Feature 2: Safe Fun -->
        <div class="flex gap-4 md:pb-8 pl-6 border-l-4 tab-heading" data-index="1">
          <div class="flex-shrink-0">
            <img data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303823/seltrix/templates/ss-amusement-park-template/icon-safe-fun.svg" src="{{feature_2_icon}}" alt="Icon" class="w-8 h-8">
          </div>
          <div>
            <h3 data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Safe Fun" class="text-xl font-bold text-gray-900 mb-2">
              {{feature_2_title}}
            </h3>
            <p data-node="feature_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Designed with comfort and care. Parents relax while kids explore." class="text-gray-500 text-base leading-relaxed">
              {{feature_2_description}}
            </p>
          </div>
        </div>

        <!-- Feature 3: Big Smiles -->
        <div class="flex gap-4 pl-6 border-l-4 tab-heading" data-index="2">
          <div class="flex-shrink-0">
            <img data-node="feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303803/seltrix/templates/ss-amusement-park-template/icon-big-smiles.svg" src="{{feature_3_icon}}" alt="Icon" class="w-8 h-8">
          </div>
          <div>
            <h3 data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Big Smiles" class="text-xl font-bold text-gray-900 mb-2">
              {{feature_3_title}}
            </h3>
            <p data-node="feature_3_description" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Joy that lasts long after the day ends. Memories kids talk about for years." class="text-gray-500 text-base leading-relaxed">
              {{feature_3_description}}
            </p>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden lg:hidden block">
        <img data-node="moments_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298125/seltrix/templates/ss-amusement-park-template/moments.png" src="{{moments_image}}" alt="Park moments" class="w-full aspect-[915/560] object-cover tab-content" data-index="0">
        <img data-node="moments_image2" data-node-type="file" data-node-label="Section Image2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298068/seltrix/templates/ss-amusement-park-template/explore-2.png" src="{{moments_image2}}" alt="Park moments 2" class="w-full aspect-[915/560] object-cover hidden tab-content" data-index="1">
        <img data-node="moments_image3" data-node-type="file" data-node-label="Section Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298071/seltrix/templates/ss-amusement-park-template/feature-1.png" src="{{moments_image3}}" alt="Park moments 3" class="w-full aspect-[915/560] object-cover hidden tab-content" data-index="2">
      </div>
    </div>
  </div>
</section>