---
/*
  Full-screen mobile nav overlay (MOCKUPS M4). Hidden by default; nav.ts toggles
  [data-open], traps focus, locks body scroll, closes on Esc. Large tap targets.
  Language switch inside is plain links (works without JS).
*/
import { useDict } from '@i18n/t';
import type { Locale } from '@i18n/locales';
import { pathFor, type PageId } from '@i18n/slugMap';
import { getProfile } from '@lib/content';
import LangSwitch from '@components/ui/LangSwitch.astro';
import ThemeToggle from '@components/ui/ThemeToggle.astro';

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

const navItems: { id: PageId; label: string }[] = [
  { id: 'home', label: d.nav.home },
  { id: 'projects', label: d.nav.projects },
  { id: 'experience', label: d.nav.experience },
  { id: 'about', label: d.nav.about },
  { id: 'contact', label: d.nav.contact },
];
---

<div
  id="mobile-nav"
  class="fixed inset-0 z-50 hidden flex-col bg-surface-1 px-6 pb-8 pt-4 data-[open]:flex md:hidden"
  role="dialog"
  aria-modal="true"
  aria-label={d.a11y.primaryNav}
>
  <div class="flex items-center justify-between">
    <span
      class="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-line-strong bg-surface-2 font-mono text-small font-bold text-ink"
      >CB</span
    >
    <button
      id="mobile-nav-close"
      type="button"
      class="inline-flex h-9 w-9 items-center justify-center rounded-sm border border-line text-ink"
      aria-label={d.a11y.closeMenu}
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path>
      </svg>
    </button>
  </div>

  <div class="mt-6 flex items-center gap-3">
    <LangSwitch locale={locale} pageId={pageId} />
    <ThemeToggle locale={locale} />
  </div>

  <nav class="mt-8 flex flex-col" aria-label={d.a11y.primaryNav}>
    {
      navItems.map((item) => (
        <a
          href={pathFor(item.id, locale)}
          class="border-b border-line py-4 font-display text-h3 font-semibold text-ink"
          aria-current={item.id === pageId ? 'page' : undefined}
        >
          {item.label}
        </a>
      ))
    }
  </nav>

  <div class="mt-8 flex flex-col gap-3">
    <a
      href={p.cv.en.path}
      download
      class="rounded-sm bg-accent px-4 py-3 text-center text-body font-semibold text-accent-ink"
    >
      {d.cv.download} — {d.cv.english}
    </a>
    <a
      href={p.cv.no.path}
      download
      class="rounded-sm border border-line-strong px-4 py-3 text-center text-body text-ink"
    >
      {d.cv.download} — {d.cv.norsk}
    </a>
  </div>

  <div class="mt-auto flex flex-col gap-2 pt-8 font-mono text-mono-meta text-ink-muted">
    <a href={`mailto:${p.links.email}`}>{p.links.email}</a>
    <a href={p.links.linkedin} rel="me noopener">LinkedIn ↗</a>
    <a href={p.links.gitea} rel="me noopener">git.cesnimda.uk ↗</a>
  </div>
</div>
