<footer data-component-type="Footer" class="bg-[#1A1A1A]" data-component-slug="ss-amusement-park-footer">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 py-12 md:py-16">
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 lg:gap-8">
      <!-- Brand Column -->
      <div class="col-span-2 md:col-span-3 lg:col-span-1">
        <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303793/seltrix/templates/ss-amusement-park-template/footer-logo.svg" src="{{footer_logo}}" alt="Logo" class="h-8 mb-4">
        <p data-node="footer_tagline" data-node-type="textarea" data-node-label="Tagline" data-node-default="Where laughter, adventure, and family memories come alive." class="text-gray-400 text-sm leading-relaxed max-w-xs">
          {{footer_tagline}}
        </p>
      </div>

      <!-- Quick Links Column -->
      <div>
        <h4 data-node="quick_links_heading" data-node-type="text" data-node-label="Quick Links Heading" data-node-default="Quick Links" class="text-white font-semibold mb-4">
          {{quick_links_heading}}
        </h4>
        <nav class="flex flex-col gap-3">
          <a data-node="quick_link_1_url" data-node-type="page_links" data-node-label="Quick Link 1 URL" data-node-default="about" href="{{quick_link_1_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="quick_link_1_text" data-node-type="text" data-node-label="Quick Link 1 Text" data-node-default="About">{{quick_link_1_text}}</span>
          </a>
          <a data-node="quick_link_2_url" data-node-type="url" data-node-label="Quick Link 2 URL" data-node-default="#" href="{{quick_link_2_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="quick_link_2_text" data-node-type="text" data-node-label="Quick Link 2 Text" data-node-default="Gallery">{{quick_link_2_text}}</span>
          </a>
          <a data-node="quick_link_3_url" data-node-type="url" data-node-label="Quick Link 3 URL" data-node-default="#" href="{{quick_link_3_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="quick_link_3_text" data-node-type="text" data-node-label="Quick Link 3 Text" data-node-default="Events">{{quick_link_3_text}}</span>
          </a>
          <a data-node="quick_link_4_url" data-node-type="url" data-node-label="Quick Link 4 URL" data-node-default="#" href="{{quick_link_4_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="quick_link_4_text" data-node-type="text" data-node-label="Quick Link 4 Text" data-node-default="Contact">{{quick_link_4_text}}</span>
          </a>
        </nav>
      </div>

      <!-- Explore Column -->
      <div>
        <h4 data-node="explore_heading" data-node-type="text" data-node-label="Explore Section Heading" data-node-default="Explore" class="text-white font-semibold mb-4">
          {{explore_heading}}
        </h4>
        <nav class="flex flex-col gap-3">
          <a data-node="explore_link_1_url" data-node-type="url" data-node-label="Explore Link 1 URL" data-node-default="#" href="{{explore_link_1_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="explore_link_1_text" data-node-type="text" data-node-label="Explore Link 1 Text" data-node-default="Rides">{{explore_link_1_text}}</span>
          </a>
          <a data-node="explore_link_2_url" data-node-type="url" data-node-label="Explore Link 2 URL" data-node-default="#" href="{{explore_link_2_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="explore_link_2_text" data-node-type="text" data-node-label="Explore Link 2 Text" data-node-default="Shows">{{explore_link_2_text}}</span>
          </a>
          <a data-node="explore_link_3_url" data-node-type="url" data-node-label="Explore Link 3 URL" data-node-default="#" href="{{explore_link_3_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="explore_link_3_text" data-node-type="text" data-node-label="Explore Link 3 Text" data-node-default="Attractions">{{explore_link_3_text}}</span>
          </a>
          <a data-node="explore_link_4_url" data-node-type="url" data-node-label="Explore Link 4 URL" data-node-default="#" href="{{explore_link_4_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="explore_link_4_text" data-node-type="text" data-node-label="Explore Link 4 Text" data-node-default="Timings">{{explore_link_4_text}}</span>
          </a>
        </nav>
      </div>

      <!-- Plan Column -->
      <div>
        <h4 data-node="plan_heading" data-node-type="text" data-node-label="Plan Section Heading" data-node-default="Plan" class="text-white font-semibold mb-4">
          {{plan_heading}}
        </h4>
        <nav class="flex flex-col gap-3">
          <a data-node="plan_link_1_url" data-node-type="page_links" data-node-label="Plan Link 1 URL" data-node-default="tickets" href="{{plan_link_1_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="plan_link_1_text" data-node-type="text" data-node-label="Plan Link 1 Text" data-node-default="Tickets">{{plan_link_1_text}}</span>
          </a>
          <a data-node="plan_link_2_url" data-node-type="url" data-node-label="Plan Link 2 URL" data-node-default="#" href="{{plan_link_2_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="plan_link_2_text" data-node-type="text" data-node-label="Plan Link 2 Text" data-node-default="Offers">{{plan_link_2_text}}</span>
          </a>
          <a data-node="plan_link_3_url" data-node-type="url" data-node-label="Plan Link 3 URL" data-node-default="#" href="{{plan_link_3_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="plan_link_3_text" data-node-type="text" data-node-label="Plan Link 3 Text" data-node-default="Safety">{{plan_link_3_text}}</span>
          </a>
          <a data-node="plan_link_4_url" data-node-type="url" data-node-label="Plan Link 4 URL" data-node-default="#" href="{{plan_link_4_url}}" class="text-gray-400 text-sm hover:text-white transition-colors">
            <span data-node="plan_link_4_text" data-node-type="text" data-node-label="Plan Link 4 Text" data-node-default="FAQs">{{plan_link_4_text}}</span>
          </a>
        </nav>
      </div>

      <!-- Follow Us & Newsletter Column -->
      <div class="col-span-2 md:col-span-3 lg:col-span-1">
        <h4 data-node="social_heading" data-node-type="text" data-node-label="Follow Us Heading" data-node-default="Follow Us" class="text-white font-semibold mb-4">
          {{social_heading}}
        </h4>

        <!-- Social Icons -->
        <div class="flex items-center gap-4 mb-6">
          <a data-node="social_twitter_url" data-node-type="url" data-node-label="Twitter URL" data-node-default="#" href="{{social_twitter_url}}" class="text-white hover:text-[#2563EB] transition-colors">
            <img data-node="social_twitter_icon" data-node-type="file" data-node-label="Twitter Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303827/seltrix/templates/ss-amusement-park-template/icon-twitter.svg" src="{{social_twitter_icon}}" alt="Twitter" class="w-5 h-5 invert">
          </a>
          <a data-node="social_facebook_url" data-node-type="url" data-node-label="Facebook URL" data-node-default="#" href="{{social_facebook_url}}" class="text-white hover:text-[#2563EB] transition-colors">
            <img data-node="social_facebook_icon" data-node-type="file" data-node-label="Facebook Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303810/seltrix/templates/ss-amusement-park-template/icon-facebook.svg" src="{{social_facebook_icon}}" alt="Facebook" class="w-5 h-5 invert">
          </a>
          <a data-node="social_pinterest_url" data-node-type="url" data-node-label="Pinterest URL" data-node-default="#" href="{{social_pinterest_url}}" class="text-white hover:text-[#2563EB] transition-colors">
            <img data-node="social_pinterest_icon" data-node-type="file" data-node-label="Pinterest Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303820/seltrix/templates/ss-amusement-park-template/icon-pinterest.svg" src="{{social_pinterest_icon}}" alt="Pinterest" class="w-5 h-5 invert">
          </a>
          <a data-node="social_discord_url" data-node-type="url" data-node-label="Discord URL" data-node-default="#" href="{{social_discord_url}}" class="text-white hover:text-[#2563EB] transition-colors">
            <img data-node="social_discord_icon" data-node-type="file" data-node-label="Discord Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303807/seltrix/templates/ss-amusement-park-template/icon-discord.svg" src="{{social_discord_icon}}" alt="Discord" class="w-5 h-5 invert">
          </a>
        </div>

        <!-- Newsletter -->
        <p data-node="newsletter_label" data-node-type="text" data-node-label="Newsletter Label" data-node-default="Subscribe to newsletter" class="text-white text-sm mb-3">
          {{newsletter_label}}
        </p>

        <form class="newsletter-form" data-newsletter-form>
          <div class="flex flex-nowrap">
            <input type="email" name="email" data-node="newsletter_placeholder" data-node-type="text" data-node-label="Newsletter Placeholder" data-node-default="Enter your email" placeholder="{{newsletter_placeholder}}" class="min-w-0 flex-1 py-2 px-3 bg-[#2A2A2A] border border-[#3A3A3A] text-white text-sm rounded-l-lg focus:outline-none focus:border-[#2563EB] transition-colors placeholder-gray-500" required>
            <button type="submit" class="px-4 py-2 bg-white text-gray-900 text-sm font-medium rounded-r-lg hover:bg-gray-200 transition-colors whitespace-nowrap">
              <span data-node="newsletter_button_text" data-node-type="text" data-node-label="Newsletter Button Text" data-node-default="Subscribe">{{newsletter_button_text}}</span>
            </button>
          </div>
          <div id="newsletter-status" class="hidden mt-3 py-2 px-3 rounded text-center text-sm font-medium"></div>
        </form>
      </div>
    </div>

    <!-- Copyright -->
    <div class="border-t border-gray-700 mt-12 pt-8 text-center">
      <p data-node="copyright_text" data-node-type="text" data-node-label="Copyright Text" data-node-default="2026 All Rights Reserved" class="text-gray-500 text-sm">
        {{copyright_text}}
      </p>
    </div>
  </div>
</footer>