---
/*
  Colophon — "how this site works" (CONTENT_STRATEGY §4). A deliberate P2 hook: it
  states the production decisions behind the site honestly. Copy authored per locale.
*/
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import Base from '@layouts/Base.astro';
import { getMeta } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const d = useDict(locale);
const m = getMeta('colophon', locale);

const copy = {
  en: {
    lead: 'This site is a small work sample in its own right. A few of the decisions behind it:',
    points: [
      ['Static by default', 'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.'],
      ['Bilingual from the ground up', 'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.'],
      ['Motion that confirms, never performs', 'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.'],
      ['Self-hosted', 'Built and deployed from my own Gitea instance to Docker behind nginx. The contact form is a small stateless .NET service — even that is part of my own stack.'],
      ['No tracking', 'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.'],
    ],
  },
  no: {
    lead: 'Denne siden er også et lite arbeidsprøve i seg selv. Noen av valgene bak den:',
    points: [
      ['Statisk som standard', 'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.'],
      ['Tospråklig fra bunnen', 'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.'],
      ['Bevegelse som bekrefter, aldri opptrer', 'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.'],
      ['Egendriftet', 'Bygget og rullet ut fra min egen Gitea-instans til Docker bak nginx. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.'],
      ['Ingen sporing', 'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.'],
    ],
  },
}[locale];
---

<Base locale={locale} pageId="colophon" title={m.title} description={m.description}>
  <div class="mx-auto max-w-3xl px-6 py-16">
    <SectionLabel text={d.footer.colophon} />
    <h1 class="mt-4 text-h1">{d.footer.colophon}</h1>
    <p class="mt-4 text-body-lg text-ink-muted">{copy.lead}</p>

    <dl class="mt-8 flex flex-col gap-6">
      {
        copy.points.map(([term, desc]) => (
          <div class="rounded-md border border-line bg-surface-1 p-5">
            <dt class="text-h4 font-semibold text-ink">{term}</dt>
            <dd class="mt-2 text-body text-ink-muted">{desc}</dd>
          </div>
        ))
      }
    </dl>
  </div>
</Base>
