<header data-component-type="Navigation" class="sticky top-0 z-10" data-component-slug="ss-interior-flooring-template-header">
  <nav class="w-full bg-white border-b border-gray-200 py-4 lg:py-6 px-6 md:px-12 lg:px-20 font-manrope">
    <div class="flex items-center justify-between">
      <!-- Mobile Menu Button -->
      <button id="flooring-menu-btn" class="lg:hidden focus:outline-none mr-4">
        <svg class="w-7 h-7 text-gray-800" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>

      <!-- Logo -->
      <a href="/" class="flex items-center gap-3">
        <img data-node="logo" data-node-type="file" data-node-label="Logo Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768041246/seltrix/templates/ss-interior-flooring-template/logo.svg" src="{{logo}}" alt="Logo" class="h-8 w-auto object-contain">
      </a>

      <!-- CENTER: Desktop Navigation Links -->
      <div class="hidden lg:flex items-center justify-center flex-1">
        <ul class="flex items-center gap-10">
          {{#if show_nav_link_1}}
          <li>
            <a data-node="nav_link_1" data-node-type="page_links" data-node-label="Nav Link 1" data-node-default="home" href="{{nav_link_1}}" class="text-[15px] font-semibold text-gray-900 hover:text-[#965C00] transition-colors">
              <span data-node="nav_link_1_text" data-node-type="text" data-node-label="Nav Link 1 Text" data-node-default="Home">{{nav_link_1_text}}</span>
            </a>
          </li>
          {{/if}} {{#if show_nav_link_2}}
          <li>
            <a data-node="nav_link_2" data-node-type="page_links" data-node-label="Nav Link 2" data-node-default="products" href="{{nav_link_2}}" class="text-[15px] font-medium text-gray-500 hover:text-[#965C00] transition-colors">
              <span data-node="nav_link_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="Products">{{nav_link_2_text}}</span>
            </a>
          </li>
          {{/if}} {{#if show_nav_link_3}}
          <li>
            <a data-node="nav_link_3" data-node-type="page_links" data-node-label="Nav Link 3" data-node-default="spaces" href="{{nav_link_3}}" class="text-[15px] font-medium text-gray-500 hover:text-[#965C00] transition-colors">
              <span data-node="nav_link_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="Spaces">{{nav_link_3_text}}</span>
            </a>
          </li>
          {{/if}} {{#if show_nav_link_4}}
          <li>
            <a data-node="nav_link_4" data-node-type="page_links" data-node-label="Nav Link 4" data-node-default="contact" href="{{nav_link_4}}" class="text-[15px] font-medium text-gray-500 hover:text-[#965C00] transition-colors">
              <span data-node="nav_link_4_text" data-node-type="text" data-node-label="Nav Link 4 Text" data-node-default="Contact Us">{{nav_link_4_text}}</span>
            </a>
          </li>
          {{/if}}
        </ul>
      </div>

      <!-- RIGHT: CTA Button (desktop only) -->
      <div class="hidden lg:flex items-center flex-shrink-0">
        {{#if show_cta_button}}
        <a data-node="cta_link" data-node-type="page_links" data-node-label="CTA Button Link" data-node-default="products" href="{{cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-lg text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
          <span data-node="cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Explore Floors">{{cta_text}}</span>
        </a>
        {{/if}}
      </div>
    </div>
  </nav>

  <!-- MOBILE MENU DROPDOWN -->
  <div id="flooring-mobile-menu" class="lg:hidden fixed top-0 left-0 w-72 h-[100vh] bg-white -translate-x-full transition-transform duration-300 z-[900] shadow-xl">
    <div class="flex justify-between items-center px-6 py-5 border-b border-gray-200">
      <span class="text-xl font-bold text-gray-800">Menu</span>
      <button id="flooring-close-btn" class="text-gray-800 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>

    <ul class="flex flex-col space-y-4 mt-6 px-6">
      {{#if show_m_nav_1}}
      <li>
        <a data-node="m_nav_1" data-node-type="page_links" data-node-label="Mobile Nav 1" data-node-default="home" href="{{m_nav_1}}" class="text-gray-800 text-lg font-medium block py-2 hover:text-[#965C00]">
          <span data-node="m_nav_1_text" data-node-type="text" data-node-label="Mobile Nav 1 Text" data-node-default="Home">{{m_nav_1_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_2}}
      <li>
        <a data-node="m_nav_2" data-node-type="page_links" data-node-label="Mobile Nav 2" data-node-default="products" href="{{m_nav_2}}" class="text-gray-800 text-lg font-medium block py-2 hover:text-[#965C00]">
          <span data-node="m_nav_2_text" data-node-type="text" data-node-label="Mobile Nav 2 Text" data-node-default="Products">{{m_nav_2_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_3}}
      <li>
        <a data-node="m_nav_3" data-node-type="page_links" data-node-label="Mobile Nav 3" data-node-default="spaces" href="{{m_nav_3}}" class="text-gray-800 text-lg font-medium block py-2 hover:text-[#965C00]">
          <span data-node="m_nav_3_text" data-node-type="text" data-node-label="Mobile Nav 3 Text" data-node-default="Spaces">{{m_nav_3_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_4}}
      <li>
        <a data-node="m_nav_4" data-node-type="page_links" data-node-label="Mobile Nav 4" data-node-default="contact" href="{{m_nav_4}}" class="text-gray-800 text-lg font-medium block py-2 hover:text-[#965C00]">
          <span data-node="m_nav_4_text" data-node-type="text" data-node-label="Mobile Nav 4 Text" data-node-default="Contact Us">{{m_nav_4_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_cta_button}}
      <li class="pt-4">
        <a data-node="cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="products" href="{{cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-lg text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
          <span data-node="cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Explore Floors">{{cta_text}}</span>
        </a>
      </li>
      {{/if}}
    </ul>
  </div>

  <!-- Mobile Overlay -->
  <div id="flooring-overlay" class="lg:hidden fixed inset-0 bg-black/40 hidden z-[800]"></div>
</header>