<template>
  <!-- Header Top Section -->
  <div class="header-top-section style1 fix">
    <div class="container">
      <div class="header-top-wrapper">
        <div class="top-left">
          <ul class="contact-list">
            <li>
              <a href="mailto:info@example.com">
                <img src="/images/icon/call-top.svg" alt="phone" />
                <p>+880 130-295-3918</p>
              </a>
            </li>
            <li>
              <a href="mailto:support@orbizen.com">
                <img src="/images/icon/envelop-top.svg" alt="Email" />
                <p>support@orbizen.com</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="top-right">
          <ul class="contact-list">
            <li><a href="https://facebook.com/yourpage" target="_blank" rel="noopener noreferrer"><img src="/images/icon/facebook-top.svg" alt="Facebook" /></a></li>
            <li><a href="https://twitter.com/yourprofile" target="_blank" rel="noopener noreferrer"><img src="/images/icon/twitter-top.svg" alt="Twitter" /></a></li>
            <li><a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer"><img src="/images/icon/linkeding-top.svg" alt="LinkedIn" /></a></li>
            <li><a href="https://instagram.com/yourprofile" target="_blank" rel="noopener noreferrer"><img src="/images/icon/instagram-top.svg" alt="Instagram" /></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Header -->
  <header>
    <div class="header-1 header-top-fix" id="header-sticky" :class="{ 'is-sticky': sticky }">
      <div class="container">
        <div class="header-wrap">
          <div class="logo">
            <router-link class="primary-logo" to="/"><img src="/images/logo/Logo-dark.png" alt="logo" /></router-link>
            <router-link class="sticky-logo" to="/"><img src="/images/logo/Logo-dark.png" alt="logo" /></router-link>
          </div>

          <div class="main-menu-wrap">
            <div class="main-menu">
              <nav id="mobile-menu">
                <ul>
                  <li>
                    <router-link to="/">Home</router-link>
                  </li>

                  <li>
                    <router-link to="/about">About</router-link>
                  </li>

                  <li>
                    <router-link to="/hero">Our Heroes</router-link>
                  </li>

                  <li>
                    <router-link to="/services">Services & Products</router-link>
                  </li>

                  <li>
                    <router-link to="/blog">Press</router-link>
                  </li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="header-right">
            <button class="search search-trigger searchBoxToggler d-none d-xxl-block" @click="$emit('toggle-search')">
              <img src="/images/animation/bubble.gif" alt="Search" width="44" height="44" style="border-radius: 50%;" />
            </button>

            <button class="offcanvas-bar text-white sidebar__toggle d-block d-xl-none" @click="$emit('toggle-offcanvas')">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                <path d="M21.875 6.25H3.125C2.78 6.25 2.5 5.97 2.5 5.625C2.5 5.28 2.78 5 3.125 5H21.875C22.22 5 22.5 5.28 22.5 5.625C22.5 5.97 22.22 6.25 21.875 6.25Z" fill="black"/>
                <path d="M16.875 15H3.125C2.78 15 2.5 14.72 2.5 14.375C2.5 14.03 2.78 13.75 3.125 13.75H16.875C17.22 13.75 17.5 14.03 17.5 14.375C17.5 14.72 17.22 15 16.875 15Z" fill="black"/>
                <path d="M21.875 23.75H3.125C2.78 23.75 2.5 23.47 2.5 23.125C2.5 22.78 2.78 22.5 3.125 22.5H21.875C22.22 22.5 22.5 22.78 22.5 23.125C22.5 23.47 22.22 23.75 21.875 23.75Z" fill="black"/>
              </svg>
            </button>

            <div class="btn-wrapper return-left d-none d-xl-block">
              <router-link class="theme-btn style1" to="/appointment">
                Get Appointment<i class="fa-solid fa-arrow-right"></i>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>

</script>