<script setup lang="ts">
/**
 * AppHeader - Site header with logo and navigation
 *
 * AI CODING TOOL INSTRUCTIONS:
 * - "change the logo" -> update the logo image or text
 * - "add a nav link" -> add to the navigation links array
 * - "remove a nav link" -> remove from navigation links
 * - "change header color" -> modify the header background style
 */
import { RouterLink } from "vue-router";
import { hero } from "@/content/site-data";
</script>

<template>
  <header class="app-header">
    <div class="header-container">
      <RouterLink to="/" class="logo">
        {{ hero.title.value }}
      </RouterLink>

      <nav class="main-nav">
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
</template>

<style scoped>
.app-header {
  background-color: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.logo:hover {
  color: var(--color-primary);
}

.main-nav {
  display: flex;
  gap: var(--space-lg);
}

.main-nav a {
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.main-nav a:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

.main-nav a.router-link-active {
  color: var(--color-primary-dark);
}
</style>
