---
/*
  First-visit language hint (ROUTING_SPEC §3, MOCKUPS M5e). Rendered only on EN pages,
  hidden by default; nav.ts reveals it when the browser prefers Norwegian and it hasn't
  been dismissed. Never auto-redirects. Text is Norwegian (invites a NO-preferring reader).
*/
import { useDict } from '@i18n/t';
import type { Locale } from '@i18n/locales';
import { pathFor, type PageId } from '@i18n/slugMap';

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

<div id="lang-hint" hidden class="border-b border-line bg-surface-2">
  <div
    class="mx-auto flex max-w-[--content-max] items-center gap-4 px-6 py-2.5 text-small text-ink"
  >
    <span>{d.hint.text}</span>
    <a
      href={pathFor(pageId, 'no')}
      class="rounded-sm bg-accent px-3 py-1 text-mono-label font-semibold text-accent-ink"
    >
      {d.hint.action}
    </a>
    <button
      type="button"
      data-hint-dismiss
      class="ml-auto text-ink-muted hover:text-ink"
      aria-label={d.hint.dismiss}
    >
      ✕
    </button>
  </div>
</div>
