<script lang="ts" setup>
const route = useRoute()

const isProjectRoute = computed(() => {
  return route.fullPath.includes('/project/')
})

const showMenu = ref(false)
const { showBar, showText } = storeToRefs(useNavigaiton())
const { width } = useWindowSize()
const { y } = useWindowScroll()

watch(y, (newY, oldY) => {
  if (newY < oldY && newY < 10)
    showText.value = true
  else
    showText.value = false
})
</script>

<template>
  <div v-if="showMenu" w-full flex flex-col items-center>
    <NuxtLink to="https://beta.web3privacy.info/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
      HOME
    </NuxtLink>
    <NuxtLink bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-white class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 to="/">
      PROJECTS
    </NuxtLink>
    <NuxtLink to="https://beta.web3privacy.info/events/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
      EVENTS
    </NuxtLink>
    <NuxtLink bg-black hover:bg-white w-full justify-center to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
      ARTICLES
      <UnoIcon ml-10px i-web-open1 text-11px />
    </NuxtLink>
    <NuxtLink bg-black hover:bg-white w-full justify-center to="https://docs.web3privacy.info/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
      DOCS
      <UnoIcon ml-10px i-web-open1 text-11px />
    </NuxtLink>
  </div>
  <div w-full sticky md:relative top-0 z-100 bg-black lg:bg-app-bg-dark_grey>
    <div v-if="!isProjectRoute" relative app-container w-full h-full>
      <img
        absolute w-full h-167px sm:h-207px md:h-303px object-cover src="/web3privacy_eye.webp" z-101
        class="object-pos-custom left--11% top-0 max-w-250px sm:max-w-335px md:max-w-588px"
        :class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
      >
    </div>
    <div app-container flex items-center justify-between h-80px py-6 gap-24px>
      <div flex gap-16px w-full relative z-105>
        <UnoIcon shrink-0 i-web-hamburger text-24px lg:hidden @click="showMenu ? showMenu = false : showMenu = true" />
        <NuxtImg max-w-160px w-full src="/logo.svg" cursor-pointer @click="navigateTo('/')" />
      </div>
      <div hidden lg:flex items-center justify-center>
        <NuxtLink to="https://beta.web3privacy.info/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
          HOME
        </NuxtLink>
        <NuxtLink py-2 px-4 cursor-pointer text-white class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 to="/">
          DASHBOARD
        </NuxtLink>
        <NuxtLink to="https://beta.web3privacy.info/events/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
          EVENTS
        </NuxtLink>
        <NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
          ARTICLES
          <UnoIcon ml-10px i-web-open1 text-11px />
        </NuxtLink>
        <NuxtLink to="https://docs.web3privacy.info/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
          DOCS
          <UnoIcon ml-10px i-web-open1 text-11px />
        </NuxtLink>
      </div>
      <div w-full h-full flex justify-end items-start lg:grow-0 gap-3 lg:gap-6 pt-1 lg:pt-2.5>
        <NuxtLink to="https://twitter.com/web3privacy">
          <UnoIcon target="_blank" i-web-twitter_x text-18px sm:text-24px opacity-50 hover:opacity-100 />
        </NuxtLink>
        <NuxtLink to="https://t.me/web3privacynow">
          <UnoIcon target="_blank" i-web-telegram1 text-20px sm:text-24px opacity-50 hover:opacity-100 />
        </NuxtLink>
        <NuxtLink to="https://matrix.to/#/#web3privacy:gwei.cz">
          <UnoIcon target="_blank" i-web-matrix text-20px sm:text-24px opacity-50 hover:opacity-100 />
        </NuxtLink>
        <NuxtLink to="https://github.com/web3privacy" target="_blank">
          <UnoIcon i-web-github text-20px sm:text-24px opacity-50 hover:opacity-100 />
        </NuxtLink>
      </div>
    </div>
  </div>
  <div
    v-if="isProjectRoute" top-96px z-99 sticky md:static
    :class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
  >
    <ProjectNavigation md:mt-16px />
  </div>
  <div v-else bg-black lg:bg-app-bg-dark_grey>
    <div
      app-container flex items-center gap-32px pb-16px pt-16px sm:pb-32px
    >
      <div w-full flex flex-col items-center :class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']" duration-200ms relative z-101>
        <img src="/explorer.webp" max-w-155px sm:max-w-342px>
        <p mt-24px hidden md:block text-14px text-center font-400 leading-24px text-app-text-grey>
          {{ 'There are challenges in finding crucial technical details and comparing various privacy-focused projects.' }}<br>
          {{ 'To address this, we created a platform that standardizes and expands the current ' }}
          <NuxtLink to="https://web3privacy.info/" target="_blank" underline text-white>
            {{ 'Web3Privacy ecosystem research.' }}
          </NuxtLink><br>
          {{ 'Our goal is to make this valuable information accessible to the wider Web3 community.' }}
        </p>
        <NuxtLink
          to="https://github.com/web3privacy/privacy-projects-db"
          target="_blank"
          mt-12px flex text-14px items-center gap-8px sm:text-16px hover:underline
        >
          {{ 'Learn how to contribute' }}
          <UnoIcon i-heroicons-solid-arrow-right text-24px />
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.object-pos-custom {
  object-position: top 20% right 0%;
}

@media only screen and (min-width: 768px) {
  .object-pos-custom {
    object-position: top 40% right 0%;
  }
}
</style>
