<footer data-component-type="Footer" class="w-full bg-[#965C00] text-white font-manrope" data-component-slug="ss-interior-flooring-template-footer">
  <!-- Main Footer Content -->
  <div class="px-6 md:px-12 lg:px-20 py-10 lg:py-12">
    <div class="flex flex-col lg:flex-row lg:justify-between gap-10 lg:gap-20">
      <!-- Column 1: Logo & Tagline -->
      <div class="lg:max-w-xs">
        <!-- Logo -->
        <div class="flex items-center gap-2 mb-6">
          <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041244/seltrix/templates/ss-interior-flooring-template/logo-white.svg" src="{{footer_logo}}" alt="Logo" class="h-8 w-auto object-contain">
        </div>

        <!-- Tagline -->
        <p class="text-sm leading-relaxed text-white/80" data-node="footer_tagline" data-node-type="textarea" data-node-label="Footer Tagline" data-node-default="Made with modern homes in mind, our flooring solutions bring lasting beauty to the spaces you live, work, and create in.">
          {{footer_tagline}}
        </p>
      </div>

      <!-- Middle Columns: Company & Explore -->
      <div class="flex gap-16 lg:gap-24">
        <!-- Column 2: Company Links -->
        <div>
          <h4 class="text-white font-semibold mb-4" data-node="company_heading" data-node-type="text" data-node-label="Company Heading" data-node-default="Company">
            {{company_heading}}
          </h4>
          <ul class="space-y-2">
            <li>
              <a data-node="company_link_1" data-node-type="page_links" data-node-label="Company Link 1" data-node-default="about" href="{{company_link_1}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="company_link_1_text" data-node-type="text" data-node-label="Company Link 1 Text" data-node-default="About">{{company_link_1_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="company_link_2" data-node-type="page_links" data-node-label="Company Link 2" data-node-default="design" href="{{company_link_2}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="company_link_2_text" data-node-type="text" data-node-label="Company Link 2 Text" data-node-default="Design">{{company_link_2_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="company_link_3" data-node-type="page_links" data-node-label="Company Link 3" data-node-default="install" href="{{company_link_3}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="company_link_3_text" data-node-type="text" data-node-label="Company Link 3 Text" data-node-default="Install">{{company_link_3_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="company_link_4" data-node-type="page_links" data-node-label="Company Link 4" data-node-default="contact" href="{{company_link_4}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="company_link_4_text" data-node-type="text" data-node-label="Company Link 4 Text" data-node-default="Contact">{{company_link_4_text}}</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- Column 3: Explore Links -->
        <div>
          <h4 class="text-white font-semibold mb-4" data-node="explore_heading" data-node-type="text" data-node-label="Explore Heading" data-node-default="Explore">
            {{explore_heading}}
          </h4>
          <ul class="space-y-2">
            <li>
              <a data-node="explore_link_1" data-node-type="url" data-node-label="Explore Link 1" data-node-default="products" href="{{explore_link_1}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="explore_link_1_text" data-node-type="text" data-node-label="Explore Link 1 Text" data-node-default="Hardwood">{{explore_link_1_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="explore_link_2" data-node-type="url" data-node-label="Explore Link 2" data-node-default="products" href="{{explore_link_2}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="explore_link_2_text" data-node-type="text" data-node-label="Explore Link 2 Text" data-node-default="Vinyl">{{explore_link_2_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="explore_link_3" data-node-type="url" data-node-label="Explore Link 3" data-node-default="products" href="{{explore_link_3}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="explore_link_3_text" data-node-type="text" data-node-label="Explore Link 3 Text" data-node-default="Bamboo">{{explore_link_3_text}}</span>
              </a>
            </li>
            <li>
              <a data-node="explore_link_4" data-node-type="url" data-node-label="Explore Link 4" data-node-default="products" href="{{explore_link_4}}" class="text-white/80 hover:text-white text-sm transition-colors">
                <span data-node="explore_link_4_text" data-node-type="text" data-node-label="Explore Link 4 Text" data-node-default="StoneCore">{{explore_link_4_text}}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Column 4: Follow Us & Newsletter -->
      <div>
        <!-- Follow Us -->
        <h4 class="text-white font-semibold mb-3" data-node="social_heading" data-node-type="text" data-node-label="Social Heading" data-node-default="Follow Us">
          {{social_heading}}
        </h4>
        <div class="flex items-center gap-3 mb-5">
          <!-- Twitter -->
          <a data-node="social_link_1" data-node-type="url" data-node-label="Social Link 1" data-node-default="#" href="{{social_link_1}}" class="text-white hover:text-white/70 transition-colors" aria-label="Twitter">
            <img src="{{social_image_1}}" alt="SI1" data-node="social_image_1" data-node-type="file" data-node-label="Social Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041277/seltrix/templates/ss-interior-flooring-template/social-twitter.svg" class="w-6 h-6">
          </a>
          <!-- Facebook -->
          <a data-node="social_link_2" data-node-type="url" data-node-label="Social Link 2" data-node-default="#" href="{{social_link_2}}" class="text-white hover:text-white/70 transition-colors" aria-label="Facebook">
            <img src="{{social_image_2}}" alt="SI2" data-node="social_image_2" data-node-type="file" data-node-label="Social Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041273/seltrix/templates/ss-interior-flooring-template/social-facebook.svg" class="w-6 h-6">
          </a>
          <!-- Pinterest -->
          <a data-node="social_link_3" data-node-type="url" data-node-label="Social Link 3" data-node-default="#" href="{{social_link_3}}" class="text-white hover:text-white/70 transition-colors" aria-label="Pinterest">
            <img src="{{social_image_3}}" alt="SI3" data-node="social_image_3" data-node-type="file" data-node-label="Social Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041275/seltrix/templates/ss-interior-flooring-template/social-pinterest.svg" class="w-6 h-6">
          </a>
          <!-- Discord -->
          <a data-node="social_link_4" data-node-type="url" data-node-label="Social Link 4" data-node-default="#" href="{{social_link_4}}" class="text-white hover:text-white/70 transition-colors" aria-label="Discord">
            <img src="{{social_image_4}}" alt="SI4" data-node="social_image_4" data-node-type="file" data-node-label="Social Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041270/seltrix/templates/ss-interior-flooring-template/social-discord.svg" class="w-6 h-6">
          </a>
        </div>

        <!-- Newsletter -->
        <h4 class="text-white font-semibold mb-3 text-sm" data-node="newsletter_heading" data-node-type="text" data-node-label="Newsletter Heading" data-node-default="Subscribe to newsletter">
          {{newsletter_heading}}
        </h4>
        <form class="flex">
          <input type="email" name="email" required data-node="newsletter_placeholder" data-node-type="text" data-node-label="Newsletter Placeholder" data-node-default="Enter your email" placeholder="{{newsletter_placeholder}}" class="flex-1 px-3 py-2 text-sm bg-transparent border border-white/40 rounded-l-md text-white placeholder-white/60 focus:outline-none focus:border-white/80 min-w-0">
          <button type="submit" class="px-4 py-2 text-sm font-semibold bg-white text-[#965C00] rounded-r-md hover:bg-white/90 transition-colors whitespace-nowrap" data-node="newsletter_button" data-node-type="text" data-node-label="Newsletter Button Text" data-node-default="Subscribe">
            {{newsletter_button}}
          </button>
        </form>
        <!-- Newsletter Status Message -->
        <div id="newsletter-status" class="hidden mt-2 py-2 px-3 rounded text-xs text-center"></div>
      </div>
    </div>
  </div>

  <!-- Bottom Bar -->
  <div class="border-t border-white/20 px-6 md:px-12 lg:px-20 py-4">
    <p class="text-center text-white/80 text-sm" data-node="footer_copyright" data-node-type="text" data-node-label="Copyright Text" data-node-default="2025 All Rights Reserved">
      {{footer_copyright}}
    </p>
  </div>
</footer>