<script setup lang="ts">
// 공통 헤더 — 메인('home')은 커피챗 CTA, 서브 페이지('back')는 채용 홈 복귀 링크
interface Props {
  variant?: 'home' | 'back'
}
withDefaults(defineProps<Props>(), {
  variant: 'home',
})
</script>

<template>
  <header>
    <div class="wrap nav">
      <NuxtLink to="/" class="logo" aria-label="이너탭 홈">
        <img src="/images/img-itab.png" alt="innertab" >
      </NuxtLink>

      <nav v-if="variant === 'home'" class="nav-actions">
        <NuxtLink to="/" class="nav-link">Home</NuxtLink>
        <NuxtLink to="/culture" class="nav-link">Culture</NuxtLink>
        <NuxtLink to="/coffee-chat" class="nav-cta">커피챗</NuxtLink>
      </nav>
      <NuxtLink v-else to="/" class="back">← 채용 홈으로</NuxtLink>
    </div>
  </header>
</template>

<style scoped>
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: blur(0.875rem); /* 14px */
  border-bottom: 0.0625rem solid var(--line);
}

.nav {
  height: 4.5rem; /* 72px */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 1.75rem; /* 28px */
  display: block;
}

/* 우측 내비게이션 묶음 — 링크 + CTA */
.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.875rem); /* 16~30px */
}

/* 일반 내비게이션 링크 (조직문화 등) */
.nav-link {
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.router-link-active {
  color: var(--ink);
}

.nav-cta {
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  padding: 0.625rem 1.375rem; /* 10px 22px */
  border-radius: 6.25rem; /* 100px */
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover {
  background: #2a4490; /* 로열 블루 hover */
  transform: translateY(-0.0625rem);
}

.back {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem; /* 7px */
}

.back:hover {
  color: var(--ink);
}
</style>
