<footer class="bg-[#FBF8F3] pt-[80px] pb-6" data-component-type="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="../assets/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="../assets/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="../assets/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="../assets/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"
          >
            
          </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>