<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-highlights">
  <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-[1fr_0.5fr] gap-8 mb-16 items-baseline">
      <!-- Badge -->
      <div class="flex flex-col lg:flex-row gap-6">
        <div class="flex items-center gap-2 w-full lg:w-1/4">
          <span class="w-2 h-2 bg-gray-900 rounded-full"></span>
          <span data-node="highlights_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="PARK HIGHLIGHTS" class="text-sm font-medium text-gray-900 uppercase tracking-wide">{{highlights_badge}}</span>
        </div>
        <!-- Title -->
        <h2 data-node="highlights_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Fun That Brings Everyone Together" class="w-full lg:w-3/4 text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
          {{highlights_title}}
        </h2>
      </div>
      <!-- Description & Link -->
      <div class>
        <p data-node="highlights_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="From exciting rides to relaxing family zones, there's something here for every age and mood." class="text-gray-500 text-base leading-relaxed mb-4">
          {{highlights_description}}
        </p>
        <a data-node="highlights_link_url" data-node-type="url" data-node-label="Link URL" data-node-default="explore" href="{{highlights_link_url}}" class="inline-flex items-center gap-2 text-[#006EFF] font-medium hover:underline">
          <span data-node="highlights_link_text" data-node-type="text" data-node-label="Link Text" data-node-default="Explore Attractions">{{highlights_link_text}}</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Highlight Rows -->
    <div class="space-y-0">
      <!-- Row 1: Thrills -->
      <div class="grid grid-cols-1 lg:grid-cols-[1fr_0.5fr] gap-8 py-12 border-t border-gray-200">
        <div class="flex gap-8 lg:gap-16 justify-between">
          <!-- Number -->
          <span data-node="highlight_1_number" data-node-type="text" data-node-label="Highlight 1 Number" data-node-default="(001)" class="text-gray-400 text-sm font-medium">{{highlight_1_number}}</span>
          <!-- Content -->
          <div class="w-3/4">
            <h3 data-node="highlight_1_title" data-node-type="text" data-node-label="Highlight 1 Title" data-node-default="Thrills" class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
              {{highlight_1_title}}
            </h3>
            <p data-node="highlight_1_description" data-node-type="textarea" data-node-label="Highlight 1 Description" data-node-default="Heart-pounding rides for brave adventurers. Big drops, big screams, bigger smiles." class="text-gray-500 text-base leading-relaxed mb-6">
              {{highlight_1_description}}
            </p>
            <!-- Stat -->
            <div>
              <div class="flex items-baseline gap-0">
                <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="90" class="text-3xl md:text-4xl font-bold text-gray-900">0</span>
                <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" class="text-3xl md:text-4xl font-bold text-gray-900">{{counter_1_suffix}}</span>
              </div>
              <p data-node="counter_1_label" data-node-type="text" data-node-label="Counter 1 Label" data-node-default="Happy Rides" class="text-gray-500 text-sm mt-1">
                {{counter_1_label}}
              </p>
            </div>
          </div>
        </div>
        <!-- Image -->
        <div class="relative overflow-hidden">
          <img data-node="highlight_1_image" data-node-type="file" data-node-label="Highlight 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298085/seltrix/templates/ss-amusement-park-template/highlight-1.png" src="{{highlight_1_image}}" alt="Thrills" class="w-full aspect-[622/384] object-cover">
        </div>
      </div>

      <!-- Row 2: Family -->
      <div class="grid grid-cols-1 lg:grid-cols-[1fr_0.5fr] gap-8 py-12 border-t border-gray-200">
        <div class="flex gap-8 lg:gap-16 justify-between">
          <!-- Number -->
          <span data-node="highlight_2_number" data-node-type="text" data-node-label="Highlight 2 Number" data-node-default="(002)" class="text-gray-400 text-sm font-medium">{{highlight_2_number}}</span>
          <!-- Content -->
          <div class="w-3/4">
            <h3 data-node="highlight_2_title" data-node-type="text" data-node-label="Highlight 2 Title" data-node-default="Family" class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
              {{highlight_2_title}}
            </h3>
            <p data-node="highlight_2_description" data-node-type="textarea" data-node-label="Highlight 2 Description" data-node-default="Shared moments made for all ages. Safe, joyful fun parents trust." class="text-gray-500 text-base leading-relaxed mb-6">
              {{highlight_2_description}}
            </p>
            <!-- Stat -->
            <div>
              <div class="flex items-baseline gap-0">
                <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="95" class="text-3xl md:text-4xl font-bold text-gray-900">0</span>
                <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="%" class="text-3xl md:text-4xl font-bold text-gray-900">{{counter_2_suffix}}</span>
              </div>
              <p data-node="counter_2_label" data-node-type="text" data-node-label="Counter 2 Label" data-node-default="Family Approved Rides" class="text-gray-500 text-sm mt-1">
                {{counter_2_label}}
              </p>
            </div>
          </div>
        </div>
        <!-- Image -->
        <div class="relative overflow-hidden">
          <img data-node="highlight_2_image" data-node-type="file" data-node-label="Highlight 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298086/seltrix/templates/ss-amusement-park-template/highlight-2.png" src="{{highlight_2_image}}" alt="Family" class="w-full aspect-[622/384] object-cover">
        </div>
      </div>

      <!-- Row 3: Entertainment -->
      <div class="grid grid-cols-1 lg:grid-cols-[1fr_0.5fr] gap-8 py-12 border-t border-b border-gray-200">
        <div class="flex gap-8 lg:gap-16 justify-between">
          <!-- Number -->
          <span data-node="highlight_3_number" data-node-type="text" data-node-label="Highlight 3 Number" data-node-default="(003)" class="text-gray-400 text-sm font-medium">{{highlight_3_number}}</span>
          <!-- Content -->
          <div class="w-3/4">
            <h3 data-node="highlight_3_title" data-node-type="text" data-node-label="Highlight 3 Title" data-node-default="Entertainment" class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
              {{highlight_3_title}}
            </h3>
            <p data-node="highlight_3_description" data-node-type="textarea" data-node-label="Highlight 3 Description" data-node-default="Live shows and playful surprises. Laughter around every corner." class="text-gray-500 text-base leading-relaxed mb-6">
              {{highlight_3_description}}
            </p>
            <!-- Stat -->
            <div>
              <div class="flex items-baseline gap-0">
                <span data-counter="3" data-node="counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="80" class="text-3xl md:text-4xl font-bold text-gray-900">0</span>
                <span data-node="counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default="+" class="text-3xl md:text-4xl font-bold text-gray-900">{{counter_3_suffix}}</span>
              </div>
              <p data-node="counter_3_label" data-node-type="text" data-node-label="Counter 3 Label" data-node-default="Daily Shows" class="text-gray-500 text-sm mt-1">
                {{counter_3_label}}
              </p>
            </div>
          </div>
        </div>
        <!-- Image -->
        <div class="relative overflow-hidden">
          <img data-node="highlight_3_image" data-node-type="file" data-node-label="Highlight 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298089/seltrix/templates/ss-amusement-park-template/highlight-3.png" src="{{highlight_3_image}}" alt="Entertainment" class="w-full aspect-[622/384] object-cover">
        </div>
      </div>
    </div>
  </div>
</section>