<section data-component-type="Hero" class="bg-white" data-component-slug="ss-amusement-park-hero">
  <div class="max-w-[1920px] mx-auto">
    <!-- Hero Image Container with Curved Shape -->
    <div class="relative w-full overflow-hidden">
      <!-- Curved Image Container -->
      <div class="relative w-full" style="padding-bottom: 60%">
        <div class="absolute inset-0" style="clip-path: ellipse(60% 100% at 50% 0%); -webkit-clip-path: ellipse(60% 100% at 50% 0%)">
          <img data-node="hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298083/seltrix/templates/ss-amusement-park-template/hero-image.png" src="{{hero_image}}" alt="Amusement park aerial view" class="w-full h-full object-cover">

          <!-- Dark Overlay for Text Readability -->
          <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>

          <!-- Title Overlay -->
          <div class="absolute inset-0 flex items-end justify-center pb-[10%]">
            <div class="text-center px-8">
              <h1 data-node="hero_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Joy, Thrills, And Endless Laughter" class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-light italic text-white drop-shadow-lg">
                {{hero_title}}
              </h1>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Decorative Divider with Star -->
    <div class="flex items-center justify-center py-8 px-4 md:px-8 lg:px-16">
      <!-- Left arrow + line -->
      <div class="flex items-center flex-1 max-w-[200px] lg:max-w-[269px]">
        <svg class="w-full h-auto" viewBox="0 0 269 18" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
          <path d="M15 10.1602L0 17.3204V-9.82285e-05L15 7.16016V10.1602ZM268.645 8.66016V10.1602H13.5V8.66016V7.16016H268.645V8.66016Z" fill="#006EFF"/>
        </svg>
      </div>

      <!-- Star icon -->
      <div class="mx-2 sm:mx-4">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="#F97316" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
        </svg>
      </div>

      <!-- Line + right arrow -->
      <div class="flex items-center flex-1 max-w-[200px] lg:max-w-[269px]">
        <svg class="w-full h-auto" viewBox="0 0 269 18" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid meet">
          <path d="M253.645 10.1602L268.645 17.3204V-9.82285e-05L253.645 7.16016V10.1602ZM0 8.66016V10.1602H255.145V8.66016V7.16016H0V8.66016Z" fill="#006EFF"/>
        </svg>
      </div>
    </div>

    <!-- Highlights Section -->
    <div class="px-8 lg:px-16 xl:px-24 pb-12">
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 md:gap-8 max-w-6xl mx-auto">
        <!-- Highlight 1: Thrill-Packed Rides -->
        <div class="flex flex-col items-center text-center">
          <div class="w-12 h-12 mb-3">
            <img data-node="highlight_1_icon" data-node-type="file" data-node-label="Highlight 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303821/seltrix/templates/ss-amusement-park-template/icon-rides.svg" src="{{highlight_1_icon}}" alt="Rides icon" class="w-full h-full">
          </div>
          <span data-node="highlight_1_text" data-node-type="text" data-node-label="Highlight 1 Text" data-node-default="Thrill-Packed Rides" class="text-xs md:text-sm text-gray-600">{{highlight_1_text}}</span>
        </div>

        <!-- Highlight 2: Kid-Safe Adventures -->
        <div class="flex flex-col items-center text-center">
          <div class="w-12 h-12 mb-3">
            <img data-node="highlight_2_icon" data-node-type="file" data-node-label="Highlight 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303816/seltrix/templates/ss-amusement-park-template/icon-kids.svg" src="{{highlight_2_icon}}" alt="Kids icon" class="w-full h-full">
          </div>
          <span data-node="highlight_2_text" data-node-type="text" data-node-label="Highlight 2 Text" data-node-default="Kid-Safe Adventures" class="text-xs md:text-sm text-gray-600">{{highlight_2_text}}</span>
        </div>

        <!-- Highlight 3: Family Fun Zones -->
        <div class="flex flex-col items-center text-center">
          <div class="w-12 h-12 mb-3">
            <img data-node="highlight_3_icon" data-node-type="file" data-node-label="Highlight 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303812/seltrix/templates/ss-amusement-park-template/icon-family.svg" src="{{highlight_3_icon}}" alt="Family icon" class="w-full h-full">
          </div>
          <span data-node="highlight_3_text" data-node-type="text" data-node-label="Highlight 3 Text" data-node-default="Family Fun Zones" class="text-xs md:text-sm text-gray-600">{{highlight_3_text}}</span>
        </div>

        <!-- Highlight 4: Colourful Live Shows -->
        <div class="flex flex-col items-center text-center">
          <div class="w-12 h-12 mb-3">
            <img data-node="highlight_4_icon" data-node-type="file" data-node-label="Highlight 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303825/seltrix/templates/ss-amusement-park-template/icon-shows.svg" src="{{highlight_4_icon}}" alt="Shows icon" class="w-full h-full">
          </div>
          <span data-node="highlight_4_text" data-node-type="text" data-node-label="Highlight 4 Text" data-node-default="Colourful Live Shows" class="text-xs md:text-sm text-gray-600">{{highlight_4_text}}</span>
        </div>

        <!-- Highlight 5: Tasty Treat Stops -->
        <div class="flex flex-col items-center text-center col-span-2 md:col-span-1">
          <div class="w-12 h-12 mb-3">
            <img data-node="highlight_5_icon" data-node-type="file" data-node-label="Highlight 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303813/seltrix/templates/ss-amusement-park-template/icon-food.svg" src="{{highlight_5_icon}}" alt="Food icon" class="w-full h-full">
          </div>
          <span data-node="highlight_5_text" data-node-type="text" data-node-label="Highlight 5 Text" data-node-default="Tasty Treat Stops" class="text-xs md:text-sm text-gray-600">{{highlight_5_text}}</span>
        </div>
      </div>
    </div>
  </div>
</section>