<header class="w-full bg-[#FDFDF9] border-b border-black/5" data-component-type="Navigation" data-component-slug="ss-photography-navbar">
  <!-- NAVBAR CONTAINER -->
  <nav class="max-w-[1400px] mx-auto px-5 md:px-10 h-[80px] flex items-center justify-between font-['Cormorant',_serif]">
    <!-- LEFT: LOGO -->
    <div class="flex-shrink-0">
      <a data-node="nav_logo_link" data-node-type="page_links" data-node-label="Logo Link" data-node-default="home" href="{{nav_logo_link}}" class="block">
        <img data-node="nav_logo" data-node-type="file" data-node-label="Logo Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440964/seltrix/templates/ss-photography/Logo.svg" src="{{nav_logo}}" class="h-[32px] w-auto brightness-0" alt="Logo">
      </a>
    </div>

    <!-- CENTER: DESKTOP NAV LINKS -->
    <ul class="hidden lg:flex items-center space-x-12">
      <!-- LINK 1 -->
      {{#if show_nav_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-black text-[18px] font-medium hover:opacity-70 transition-opacity">
          <span data-node="nav_text_1" data-node-type="text" data-node-label="Nav Text 1" data-node-default="Home">
            {{nav_text_1}}
          </span>
        </a>
      </li>
      {{/if}}

      <!-- LINK 2 -->
      {{#if show_nav_2}}
      <li>
        <a data-node="nav_link_2" data-node-type="page_links" data-node-label="Nav Link 2" data-node-default="our-work" href="{{nav_link_2}}" class="text-black text-[18px] font-medium hover:opacity-70 transition-opacity">
          <span data-node="nav_text_2" data-node-type="text" data-node-label="Nav Text 2" data-node-default="Our Works">
            {{nav_text_2}}
          </span>
        </a>
      </li>
      {{/if}}

      <!-- LINK 3 -->
      {{#if show_nav_3}}
      <li>
        <a data-node="nav_link_3" data-node-type="page_links" data-node-label="Nav Link 3" data-node-default="about-us" href="{{nav_link_3}}" class="text-black text-[18px] font-medium hover:opacity-70 transition-opacity">
          <span data-node="nav_text_3" data-node-type="text" data-node-label="Nav Text 3" data-node-default="About Us">
            {{nav_text_3}}
          </span>
        </a>
      </li>
      {{/if}}

      <!-- LINK 4 -->
      {{#if show_nav_4}}
      <li>
        <a data-node="nav_link_4" data-node-type="page_links" data-node-label="Nav Link 4" data-node-default="#" href="{{nav_link_4}}" class="text-black text-[18px] font-medium hover:opacity-70 transition-opacity">
          <span data-node="nav_text_4" data-node-type="text" data-node-label="Nav Text 4" data-node-default="Menu 4">
            {{nav_text_4}}
          </span>
        </a>
      </li>
      {{/if}}

      <!-- LINK 5 -->
      {{#if show_nav_5}}
      <li>
        <a data-node="nav_link_5" data-node-type="page_links" data-node-label="Nav Link 5" data-node-default="#" href="{{nav_link_5}}" class="text-black text-[18px] font-medium hover:opacity-70 transition-opacity">
          <span data-node="nav_text_5" data-node-type="text" data-node-label="Nav Text 5" data-node-default="Menu 5">
            {{nav_text_5}}
          </span>
        </a>
      </li>
      {{/if}}
    </ul>

    <!-- RIGHT: CTA BUTTON & MOBILE TOGGLE -->
    <div class="flex items-center gap-6">
      <!-- CTA BUTTON -->
      {{#if show_cta}}
      <a data-node="nav_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{nav_cta_link}}" class="hidden md:inline-flex items-center px-8 py-2.5 bg-black text-white text-[16px] font-medium rounded-full hover:bg-black/80 transition-all duration-300">
        <span data-node="nav_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Let's Work">
          {{nav_cta_text}}
        </span>
      </a>
      {{/if}}

      <!-- MOBILE MENU BUTTON -->
      <button id="menu-btn" class="lg:hidden flex flex-col justify-center items-center w-8 h-8 space-y-1.5 focus:outline-none" aria-label="Toggle Menu">
        <span class="block w-6 h-[1.5px] bg-black"></span>
        <span class="block w-6 h-[1.5px] bg-black"></span>
        <span class="block w-6 h-[1.5px] bg-black"></span>
      </button>
    </div>
  </nav>

  <!-- MOBILE MENU (SLIDE OUT) -->
  <div id="mobile-menu" class="fixed inset-y-0 left-0 w-[300px] z-[100] bg-[#FDFDF9] shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out font-['Cormorant',_serif]">
    <div class="flex flex-col h-full p-8">
      <!-- CLOSE BUTTON -->
      <div class="flex justify-end mb-12">
        <button id="close-btn" class="p-2 text-black focus:outline-none">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- MOBILE LINKS -->
      <ul class="flex flex-col gap-8">
        {{#if show_nav_1}}
        <li>
          <a data-node="mobile_nav_link_1" data-node-type="page_links" data-node-label="Mobile Link 1" data-node-default="home" href="{{mobile_nav_link_1}}" class="text-black text-[24px] font-medium">
            <span data-node="mobile_nav_text_1" data-node-type="text" data-node-label="Mobile Text 1" data-node-default="Home">
              {{mobile_nav_text_1}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_2}}
        <li>
          <a data-node="mobile_nav_link_2" data-node-type="page_links" data-node-label="Mobile Link 2" data-node-default="our-works" href="{{mobile_nav_link_2}}" class="text-black text-[24px] font-medium">
            <span data-node="mobile_nav_text_2" data-node-type="text" data-node-label="Mobile Text 2" data-node-default="Our Works">
              {{mobile_nav_text_2}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_3}}
        <li>
          <a data-node="mobile_nav_link_3" data-node-type="page_links" data-node-label="Mobile Link 3" data-node-default="about-us" href="{{mobile_nav_link_3}}" class="text-black text-[24px] font-medium">
            <span data-node="mobile_nav_text_3" data-node-type="text" data-node-label="Mobile Text 3" data-node-default="About Us">
              {{mobile_nav_text_3}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_4}}
        <li>
          <a data-node="mobile_nav_link_4" data-node-type="page_links" data-node-label="Mobile Link 4" data-node-default="about-us" href="{{mobile_nav_link_4}}" class="text-black text-[24px] font-medium">
            <span data-node="mobile_nav_text_4" data-node-type="text" data-node-label="Mobile Text 4" data-node-default="About Us">
              {{mobile_nav_text_4}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_5}}
        <li>
          <a data-node="mobile_nav_link_5" data-node-type="page_links" data-node-label="Mobile Link 5" data-node-default="about-us" href="{{mobile_nav_link_5}}" class="text-black text-[24px] font-medium">
            <span data-node="mobile_nav_text_5" data-node-type="text" data-node-label="Mobile Text 5" data-node-default="About Us">
              {{mobile_nav_text_5}}
            </span>
          </a>
        </li>
        {{/if}}
      </ul>

      <!-- MOBILE CTA -->
      <div class="mt-auto">
        {{#if show_cta}}
        <a data-node="mobile_nav_cta_link" data-node-type="page_links" data-node-label="Mobile CTA Link" data-node-default="#" href="{{mobile_nav_cta_link}}" class="inline-flex items-center justify-center w-full py-4 bg-black text-white text-[18px] font-medium rounded-full">
          <span data-node="mobile_nav_cta_text" data-node-type="text" data-node-label="Mobile CTA Text" data-node-default="Let's Work">
            {{mobile_nav_cta_text}}
          </span>
        </a>
        {{/if}}
      </div>
    </div>
  </div>

  <!-- OVERLAY -->
  <div id="overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-[90] hidden"></div>

  <!-- MOBILE MENU SCRIPT -->
  
</header>