---
import { useDict } from '@i18n/t';
import type { Locale } from '@i18n/locales';
import { pathFor, type PageId, PROJECT_PAGE_IDS } from '@i18n/slugMap';
import LangSwitch from '@components/ui/LangSwitch.astro';
import ThemeToggle from '@components/ui/ThemeToggle.astro';
import SplitCvButton from '@components/ui/SplitCvButton.astro';
import MobileNav from '@components/core/MobileNav.astro';

interface Props {
  locale: Locale;
  pageId: PageId;
}
const { locale, pageId } = Astro.props;
const d = useDict(locale);

const navItems: { id: PageId; label: string }[] = [
  { id: 'projects', label: d.nav.projects },
  { id: 'experience', label: d.nav.experience },
  { id: 'about', label: d.nav.about },
  { id: 'contact', label: d.nav.contact },
];
const isCurrent = (id: PageId) =>
  id === pageId || (id === 'projects' && (PROJECT_PAGE_IDS as readonly string[]).includes(pageId));
---

<header
  id="site-header"
  class="bg-surface-0/80 sticky top-0.5 z-40 mt-0.5 mb-0.5 border-b border-transparent backdrop-blur-md"
>
  <div
    class="mx-auto flex h-[--header-h] max-w-[--content-max] items-center justify-between px-5 transition-[height] duration-[--dur-standard] ease-[--ease-out] sm:px-6"
  >
    {/* Monogram → home */}
    <a
      href={pathFor('home', locale)}
      class="group border-line-strong bg-surface-1 text-small text-ink relative inline-flex h-8 w-8 items-center justify-center rounded-sm border font-mono font-bold"
      aria-label="Connor Babbington — home"
    >
      CB
      <span class="bg-accent absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full"></span>
    </a>

    {/* Desktop nav */}
    <nav class="hidden md:block" aria-label={d.a11y.primaryNav}>
      <ul class="flex items-center gap-7">
        {
          navItems.map((item) => (
            <li>
              <a
                href={pathFor(item.id, locale)}
                class="nav-link text-small text-ink-muted hover:text-ink transition-colors duration-[--dur-quick]"
                aria-current={isCurrent(item.id) ? 'page' : undefined}
              >
                {item.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>

    {/* Desktop right cluster */}
    <div class="hidden items-center gap-3 md:flex">
      <LangSwitch locale={locale} pageId={pageId} />
      <ThemeToggle locale={locale} />
      <SplitCvButton locale={locale} />
    </div>

    {/* Mobile cluster */}
    <div class="flex items-center gap-2 md:hidden">
      <a
        href={pathFor('cv', locale)}
        class="bg-accent text-small text-accent-ink inline-flex h-9 items-center rounded-sm px-3 font-semibold"
        aria-label={d.cv.download}
      >
        CV
      </a>
      <button
        id="mobile-nav-toggle"
        type="button"
        class="border-line text-ink inline-flex h-9 w-9 items-center justify-center rounded-sm border"
        aria-label={d.a11y.openMenu}
        aria-controls="mobile-nav"
        aria-expanded="false"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path
            d="M4 7h16M4 12h16M4 17h16"
            stroke="currentColor"
            stroke-width="1.7"
            stroke-linecap="round"></path>
        </svg>
      </button>
    </div>
  </div>
</header>

<MobileNav locale={locale} pageId={pageId} />

<style>
  #site-header[data-scrolled] {
    --header-h: var(--header-h-scrolled);
    border-bottom-color: var(--border);
  }
  .nav-link[aria-current='page'] {
    color: var(--ink);
  }
  .nav-link {
    position: relative;
  }
  .nav-link[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--accent);
    opacity: 0.6;
  }
</style>
