<template>
  <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm h-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">

      <button @click="scrollTo('quem-somos')" class="flex-shrink-0 focus:outline-none">
        <img
          class="hidden lg:block h-9"
          src="~/assets/images/logo_desktop.svg"
          alt="Ser Prati"
        />
        <img
          class="block lg:hidden h-8"
          src="~/assets/images/logo_mobile.svg"
          alt="Ser Prati"
        />
      </button>

      <nav class="hidden lg:flex items-center gap-8">
        <button @click="scrollTo('quem-somos')" class="nav-link">Quem Somos</button>
        <button @click="scrollTo('beneficios')" class="nav-link">Benefícios</button>
        <span class="nav-link opacity-50 cursor-default select-none">Parceiros</span>
        <button @click="scrollTo('associe-se')" class="nav-link">Associe-se</button>
      </nav>

      <div class="flex items-center gap-3 lg:gap-4">
        <nav class="flex lg:hidden items-center gap-3">
          <button @click="scrollTo('beneficios')" class="nav-link-mobile">Benefícios</button>
          <button @click="scrollTo('associe-se')" class="nav-link-mobile">Associe-se</button>
        </nav>

        <button
          @click="handleEntrar"
          class="border border-violet-normal text-violet-normal text-xs lg:text-sm font-medium px-3 py-1.5 lg:px-5 lg:py-2 rounded-md hover:bg-violet-light transition-colors duration-200 cursor-pointer"
        >
          ENTRAR
        </button>
      </div>

    </div>
  </header>
</template>

<script setup lang="ts">
const scrollTo = (id: string) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}

const handleEntrar = () => {
  console.log('redirecionando para pagina de entrar')
}
</script>

<style scoped>
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #505050;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link:hover {
  color: #661d75;
}
.nav-link-mobile {
  font-size: 0.75rem;
  font-weight: 500;
  color: #505050;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link-mobile:hover {
  color: #661d75;
}
</style>
