<header class="w-full" data-component-type="Navigation" data-component-slug="mobile-launch-template-header">
  <div class="w-full px-[16px] lg:px-[96px] py-6 md:py-8 flex items-center justify-between bg-black">
    
    

    <img src="{{logo}}" class="w-[220px] h-auto" data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161322/seltrix/templates/mobile-launch-template/mobile%20launch%20logo.svg">

    <nav class="hidden lg:flex items-center gap-5 lg:gap-12">
      {{#if show_nav_item_1}}
      <a href="{{nav_item_1}}" class="font-['DM Sans'] text-[20px] font-normal leading-[100%] text-white hover:text-white transition-colors duration-300" data-node="nav_item_1" data-node-type="page_links" data-node-label="Nav Link 1" data-node-default="home">
        <span data-node="nav_item_1_text" data-node-type="text" data-node-label="Nav Link 1 Text" data-node-default="Home">{{nav_item_1_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_2}}
      <a href="{{nav_item_2}}" class="font-['DM Sans'] text-[20px] font-normal leading-[100%] text-white hover:text-white transition-colors duration-300" data-node="nav_item_2" data-node-type="page_links" data-node-label="Nav Link 2" data-node-default="products">
        <span data-node="nav_item_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="Products">{{nav_item_2_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_3}}
      <a href="{{nav_item_3}}" class="font-['DM Sans'] text-[20px] font-normal leading-[100%] text-white hover:text-white transition-colors duration-300" data-node="nav_item_3" data-node-type="page_links" data-node-label="Nav Link 3" data-node-default="features">
        <span data-node="nav_item_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="Features">{{nav_item_3_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_4}}
      <a href="{{nav_item_4}}" class="font-['DM Sans'] text-[20px] font-normal leading-[100%] text-white hover:text-white transition-colors duration-300" data-node="nav_item_4" data-node-type="page_links" data-node-label="Nav Link 4" data-node-default="about-us">
        <span data-node="nav_item_4_text" data-node-type="text" data-node-label="Nav Link 4 Text" data-node-default="About Us">{{nav_item_4_text}}</span>
      </a>
      {{/if}}
    </nav>

    {{#if show_cta_button}}
    <a class="hidden lg:flex items-center justify-center bg-[#008CFF] w-[180px] h-[56px] px-[24px] py-[16px] rounded-[12px] font-['DM Sans'] text-[20px] font-bold text-white hover:opacity-85 transition-opacity duration-300" href="{{cta_button}}" data-node="cta_button" data-node-type="page_links" data-node-label="CTA Button" data-node-default="#">
      <span data-node="cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Buy Phones">{{cta_button_text}}</span>
    </a>
    {{/if}}

    <button id="menuToggle" class="lg:hidden text-white text-3xl">☰</button>
  </div>

  <div id="mobileMenu" class="fixed inset-0 w-full h-screen bg-black/[0.88] backdrop-blur-[8px] hidden z-[9999] flex-col justify-center items-center">
    <button id="closeMenu" class="absolute top-10 right-10 text-[38px] text-white bg-transparent border-none">
      ✕
    </button>

    <div class="flex flex-col items-center gap-7">
      {{#if show_mobile_nav_item_1}}
      <a href="{{mobile_nav_item_1}}" class="font-['DM Sans'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_1" data-node-type="page_links" data-node-label="Mobile Nav Link 1" data-node-default="home">
        <span data-node="mobile_nav_item_1_text" data-node-type="text" data-node-label="Mobile Nav Link 1 Text" data-node-default="Home">{{mobile_nav_item_1_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_2}}
      <a href="{{mobile_nav_item_2}}" class="font-['DM Sans'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_2" data-node-type="page_links" data-node-label="Mobile Nav Link 2" data-node-default="products">
        <span data-node="mobile_nav_item_2_text" data-node-type="text" data-node-label="Mobile Nav Link 2 Text" data-node-default="Products">{{mobile_nav_item_2_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_3}}
      <a href="{{mobile_nav_item_3}}" class="font-['DM Sans'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_3" data-node-type="page_links" data-node-label="Mobile Nav Link 3" data-node-default="features">
        <span data-node="mobile_nav_item_3_text" data-node-type="text" data-node-label="Mobile Nav Link 3 Text" data-node-default="Features">{{mobile_nav_item_3_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_4}}
      <a href="{{mobile_nav_item_4}}" class="font-['DM Sans'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_4" data-node-type="page_links" data-node-label="Mobile Nav Link 4" data-node-default="about-us">
        <span data-node="mobile_nav_item_4_text" data-node-type="text" data-node-label="Mobile Nav Link 4 Text" data-node-default="About Us">{{mobile_nav_item_4_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_button}}
      <a href="{{mobile_button}}" class="mt-5 py-4 px-10 border border-white text-white font-['DM Sans'] text-[20px] rounded-[10px]" data-node="mobile_button" data-node-type="page_links" data-node-label="Mobile CTA Button" data-node-default="#">
        <span data-node="mobile_button_text" data-node-type="text" data-node-label="Mobile CTA Text" data-node-default="Buy Phones">{{mobile_button_text}}</span>
      </a>
      {{/if}}
    </div>
  </div>

  
</header>