<script setup>
const { menuOpen, toggleMenu } = useMenuState()

const { data: siteSettings } = await useFetch('/api/site-settings', {
  default: () => ({
    title: 'sori.studio'
  })
})
</script>

<template>
  <header class="site-header sticky top-0 z-20 backdrop-blur">
    <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between px-4 lg:px-0">
      <NuxtLink class="site-header__brand flex items-center gap-2 text-[18px] font-semibold tracking-normal" to="/">
        <button
          class="site-header__menu-toggle group flex h-7 w-7 items-center justify-center rounded-full transition-transform"
          type="button"
          data-menu-toggle
          aria-label="Menu toggle"
          aria-haspopup="true"
          aria-controls="menu"
          :aria-expanded="menuOpen.toString()"
          @click.prevent="toggleMenu"
        >
          <span v-if="menuOpen" class="site-header__menu-icon pointer-events-none">
            <svg class="block h-6 w-6 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M6 21a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6Zm12-16h-8v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z" />
            </svg>
            <svg class="hidden h-6 w-6 group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12Zm0 2h-9v14h9a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Zm-2.3 4.3a1 1 0 0 1 0 1.4L14.4 12l1.3 1.3a1 1 0 0 1-1.4 1.4l-2-2a1 1 0 0 1 0-1.4l2-2a1 1 0 0 1 1.4 0Z" />
            </svg>
          </span>
          <span v-else class="site-header__menu-icon pointer-events-none">
            <svg class="block h-6 w-6 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z" />
              <path d="M9 4v16" />
            </svg>
            <svg class="hidden h-6 w-6 group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z" />
              <path d="M9 4v16" />
              <path d="m14 10 2 2-2 2" />
            </svg>
          </span>
        </button>
        {{ siteSettings.title }}
      </NuxtLink>
      <div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
        <span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
        <span class="site-header__search-text site-soft">Search</span>
        <span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
      </div>
      <nav class="site-header__nav flex items-center gap-3 text-sm">
        <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
          Subscribe
        </NuxtLink>
        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
          Account
        </NuxtLink>
      </nav>
    </div>
  </header>
</template>
