---
import LanguageSwitcher from './LanguageSwitcher.astro';
import { localePath, useI18n } from '../i18n';
import { pageLocale } from '../i18n/paths';

const year = new Date().getFullYear();
const GITHUB = 'https://github.com/Azzamo-net/cashumints.space';

const { locale } = pageLocale(Astro);
const t = useI18n(locale);

/**
 * Two rows: the pages people navigate to, then the ones they go looking for. The
 * disclaimer sits in the second row here and again at the bottom of every mint page,
 * which is where the decision it is about actually gets made.
 */
const nav = [
  { path: '/mints', label: t('footer.allMints') },
  { path: '/fedimints', label: t('footer.allFedimints') },
  { path: '/reviews', label: t('footer.allReviews') },
  { path: '/wallets', label: t('footer.wallets') },
  { path: '/about', label: t('footer.about') },
];

const legal = [
  { path: '/disclaimer', label: t('footer.disclaimer') },
  { path: '/terms', label: t('footer.terms') },
  { path: '/privacy', label: t('footer.privacy') },
];

/*
 * One sentence with a link in the middle of it, so the whole thing is one string a
 * translator can reorder. The only interpolated value is markup this file wrote, and
 * the label inside it is a name, so there is nothing here that could come from a mint,
 * a relay or a reader.
 */
const madeBy = t('footer.madeBy', {
  azzamo: '<a href="https://azzamo.net" rel="noopener">Azzamo</a>',
});
---

<footer>
  <div class="foot-inner">
    <span>{t('footer.copyright', { year: String(year) })}</span>
    <div class="links">
      <a href={GITHUB} rel="noopener">GitHub</a>
      {nav.map((link) => <a href={localePath(link.path, locale)}>{link.label}</a>)}
    </div>
    <span class="foot-right" set:html={madeBy} />
  </div>
  <div class="foot-inner foot-legal">
    <div class="links">
      {legal.map((link) => <a href={localePath(link.path, locale)}>{link.label}</a>)}
    </div>
    <LanguageSwitcher variant="inline" />
    <span class="foot-right foot-warn">{t('footer.warning')}</span>
  </div>
</footer>

<style>
  /* The second row is quieter than the first and has no top border of its own: it
     reads as a continuation of the footer, not a second footer. */
  .foot-legal { padding-top: 0; border-top: none; font-size: 12.5px; }
  .foot-warn { color: var(--faint); }

  @media (max-width: 640px) {
    .foot-legal { padding-top: 4px; }
  }
</style>