---
/*
  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 Traefik. 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 Traefik. 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="text-h1 mt-4">{d.footer.colophon}</h1>
    <p class="text-body-lg text-ink-muted mt-4">{copy.lead}</p>

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