<footer class="bg-[#FBF8F3] pt-[80px] pb-6" data-component-type="Footer" data-component-slug="ss-tourism-template-footer">
  <div class="max-w-7xl mx-auto px-6">
    <!-- Top Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 pb-10 border-b border-[#C7D2D1]">
      <!-- Navigation -->
      <div>
        <h4 class="text-[#193A3F] font-medium mb-4" data-node="footer_nav_title" data-node-type="text" data-node-label="Navigation Title" data-node-default="Navigation">
          {{footer_nav_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">
          <!-- Nav 1 -->
          <li>
            <a href="{{footer_nav_1_link}}" data-node="footer_nav_1_link" data-node-type="page_links" data-node-label="Navigation Link 1" data-node-default="#" class="footer-link">
              <span data-node="footer_nav_1_text" data-node-type="text" data-node-label="Navigation Text 1" data-node-default="Home">
                {{footer_nav_1_text}}
              </span>
            </a>
          </li>

          <!-- Nav 2 -->
          <li>
            <a href="{{footer_nav_2_link}}" data-node="footer_nav_2_link" data-node-type="page_links" data-node-label="Navigation Link 2" data-node-default="#">
              <span data-node="footer_nav_2_text" data-node-type="text" data-node-label="Navigation Text 2" data-node-default="Top Places">
                {{footer_nav_2_text}}
              </span>
            </a>
          </li>

          <!-- Nav 3 -->
          <li>
            <a href="{{footer_nav_3_link}}" data-node="footer_nav_3_link" data-node-type="page_links" data-node-label="Navigation Link 3" data-node-default="#">
              <span data-node="footer_nav_3_text" data-node-type="text" data-node-label="Navigation Text 3" data-node-default="About Us">
                {{footer_nav_3_text}}
              </span>
            </a>
          </li>

          <!-- Nav 4 -->
          <li>
            <a href="{{footer_nav_4_link}}" data-node="footer_nav_4_link" data-node-type="page_links" data-node-label="Navigation Link 4" data-node-default="#">
              <span data-node="footer_nav_4_text" data-node-type="text" data-node-label="Navigation Text 4" data-node-default="Contact">
                {{footer_nav_4_text}}
              </span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Destinations -->
      <div>
        <h4 class="text-[#193A3F] font-medium mb-4" data-node="footer_dest_title" data-node-type="text" data-node-label="Destinations Title" data-node-default="Destinations">
          {{footer_dest_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">
          <li>
            <a href="{{footer_dest_1_link}}" data-node="footer_dest_1_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_dest_1_text" data-node-type="text" data-node-default="Tokyo">
                {{footer_dest_1_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_2_link}}" data-node="footer_dest_2_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_dest_2_text" data-node-type="text" data-node-default="Kyoto">
                {{footer_dest_2_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_3_link}}" data-node="footer_dest_3_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_dest_3_text" data-node-type="text" data-node-default="Osaka">
                {{footer_dest_3_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_4_link}}" data-node="footer_dest_4_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_dest_4_text" data-node-type="text" data-node-default="Hokkaido">
                {{footer_dest_4_text}}
              </span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Travel Info -->
      <div>
        <h4 class="text-[#193A3F] font-medium mb-4" data-node="footer_info_title" data-node-type="text" data-node-label="Travel Info Title" data-node-default="Travel Info">
          {{footer_info_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">
          <li>
            <a href="{{footer_info_1_link}}" data-node="footer_info_1_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_info_1_text" data-node-type="text" data-node-default="Travel Guides">
                {{footer_info_1_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_2_link}}" data-node="footer_info_2_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_info_2_text" data-node-type="text" data-node-default="Tours & Packages">
                {{footer_info_2_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_3_link}}" data-node="footer_info_3_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_info_3_text" data-node-type="text" data-node-default="Companion">
                {{footer_info_3_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_4_link}}" data-node="footer_info_4_link" data-node-type="page_links" data-node-default="#">
              <span data-node="footer_info_4_text" data-node-type="text" data-node-default="FAQs">
                {{footer_info_4_text}}
              </span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Follow Us + Newsletter -->
      <div>
        <h4 class="text-[#193A3F] font-medium mb-4" data-node="footer_follow_title" data-node-type="text" data-node-label="Follow Us Title" data-node-default="Follow Us">
          {{footer_follow_title}}
        </h4>

        <!-- Social Icons -->
        <div class="flex gap-4 text-[#193A3F] text-lg mb-6">
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon1}}" data-node="follow_logo_icon1" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740017/seltrix/templates/ss-tourism-template/twitter.png" alt="Company Logo" class="w-6 h-6"></a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon2}}" data-node="follow_logo_icon2" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739931/seltrix/templates/ss-tourism-template/facebook.png" alt="Company Logo" class="w-6 h-6">
          </a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon3}}" data-node="follow_logo_icon3" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739969/seltrix/templates/ss-tourism-template/print.png" alt="Company Logo" class="w-6 h-6">
          </a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon4}}" data-node="follow_logo_icon4" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739928/seltrix/templates/ss-tourism-template/discord.png" alt="Company Logo" class="w-6 h-6">
          </a>
        </div>

        <!-- Newsletter -->
        <!-- Newsletter -->
        <p class="text-sm text-[#193A3F] mb-2" data-node="newsletter_label" data-node-type="text" data-node-default="Subscribe to newsletter">
          {{newsletter_label}}
        </p>

        <div class="flex flex-col sm:flex-row w-full max-w-sm border border-[#C7D2D1]">
          <input type="email" placeholder="Enter your email" class="w-full sm:flex-1 px-4 py-2 text-sm outline-none bg-transparent">
          <button class="bg-[#193A3F] text-white px-5 py-2 text-sm hover:bg-[#0C3132] transition w-full sm:w-auto" data-node="Subscribe" data-node-type="text" data-node-label="Subscribe" data-node-default="Subscribe">
            {{Subscribe}}
          </button>
        </div>
      </div>
    </div>
    <!-- Bottom -->
    <div class="text-center text-sm text-[#193A3F] pt-6" data-node="copyright" data-node-type="text" data-node-default="2025 All Rights Reserved" data-node-label="copyright">
      {{copyright}}
    </div>
  </div>
</footer>