<header data-component-type="Navigation" class="sticky top-0 z-[9999]" data-component-slug="ss-agriculture-template-navbar">
  <nav class="bg-[#e8e0d4] shadow-sm">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex h-20 items-center justify-between">
        <!-- LEFT: Logo -->
        <!-- Mobile Menu Button -->
        <button id="agri-menu-btn" class="lg:hidden focus:outline-none mr-4">
          <svg class="w-7 h-7 text-[#2a2622]" 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/v1767346777/seltrix/templates/ss-agriculture-template/logo.svg" src="{{logo}}" alt="Logo" class="h-6 w-auto">
        </a>

        <!-- CENTER: 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-medium text-[#2a2622] hover:text-[#2f5a3a] 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="services" href="{{nav_link_2}}" class="text-[15px] font-medium text-[#2a2622] hover:text-[#2f5a3a] transition-colors">
                <span data-node="nav_link_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="Our Services">{{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="about" href="{{nav_link_3}}" class="text-[15px] font-medium text-[#2a2622] hover:text-[#2f5a3a] transition-colors">
                <span data-node="nav_link_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="About Us">{{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-[#2a2622] hover:text-[#2f5a3a] 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 (hidden on mobile/tablet) -->
        <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="contact" href="{{cta_link}}" class="bg-[#2f5a3a] text-white px-7 py-3 rounded-full text-[14px] font-medium hover:bg-[#254a2f] transition-colors shadow-md hover:shadow-lg">
            <span data-node="cta_text" data-node-label="CTA Button Text" data-node-default="Get Started">{{cta_text}}</span>
          </a>
          {{/if}}
        </div>
      </div>
    </div>
  </nav>

  <!-- MOBILE MENU DROPDOWN -->
  <div id="agri-mobile-menu" class="lg:hidden fixed top-0 left-0 w-72 h-[100vh] bg-[#e8e0d4] -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-[#b8aa96]">
      <span class="text-xl font-bold text-[#2a2622]">Menu</span>
      <button id="agri-close-btn" class="text-[#2a2622] 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-[#2a2622] text-lg font-medium block py-2 hover:text-[#2f5a3a]">
          <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="services" href="{{m_nav_2}}" class="text-[#2a2622] text-lg font-medium block py-2 hover:text-[#2f5a3a]">
          <span data-node="m_nav_2_text" data-node-type="text" data-node-label="Mobile Nav 2 Text" data-node-default="Our Services">{{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="about" href="{{m_nav_3}}" class="text-[#2a2622] text-lg font-medium block py-2 hover:text-[#2f5a3a]">
          <span data-node="m_nav_3_text" data-node-type="text" data-node-label="Mobile Nav 3 Text" data-node-default="About Us">{{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-[#2a2622] text-lg font-medium block py-2 hover:text-[#2f5a3a]">
          <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_m_cta_button}}
      <li class="pt-4">
        <a data-node="m_cta_link" data-node-type="page_links" data-node-label="Mobile CTA Link" data-node-default="contact" href="{{m_cta_link}}" class="bg-[#2f5a3a] text-white px-6 py-3 rounded-full text-[15px] font-medium block text-center hover:bg-[#254a2f] transition-colors">
          <span data-node="m_cta_text" data-node-type="text" data-node-label="Mobile CTA Text" data-node-default="Get Started">{{m_cta_text}}</span>
        </a>
      </li>
      {{/if}}
    </ul>
  </div>

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