---
import { renderBrand } from '../lib/brand.mjs';
import { legal } from '../data/legal.mjs';
import { footerColumns } from '../data/footer.mjs';
import platform from '../data/platform.json';

/**
 * The footer is on every page, so it is the one place that must never quote a fact from
 * memory. The version chip reads `platform.json` (§12); the contact address and the links
 * read `brand.json` (§7, D13).
 *
 * `/privacy` and `/terms` are linked from every page (§9). Phase 6 built them and put them
 * in the legal bar at the foot rather than in the columns: a legal link is not a thing a
 * reader browses to alongside Features, it is a thing they go looking for, and the line
 * that already carries the licence and the copyright is where people look.
 */
// `/beta` renders per request, so the footer it gets must read the mount rather than the
// value baked at build time. See `renderBrand` in src/lib/brand.mjs (phase 11).
const brand = renderBrand(Astro);

const year = new Date().getFullYear();

// The columns live in src/data/footer.mjs so a test can read them — see the note there,
// and test/footer.test.mjs. The two Project links come from the mounted brand (§7).
const columns = footerColumns(brand);

const isExternal = (href: string) => href.startsWith('http');
---

<footer class="site-footer">
  <div class="page">
    <div class="site-footer__cols">
      {
        columns.map((column) => (
          <section>
            <h2>{column.heading}</h2>
            <ul>
              {column.links.map((link) => (
                <li>
                  <a
                    href={link.href}
                    rel={isExternal(link.href) ? 'noopener noreferrer' : undefined}
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </section>
        ))
      }
    </div>

    <div class="site-footer__legal">
      <p>
        {brand.siteName} is free software under the{' '}
        <a href={legal.licence.url} rel="noopener noreferrer">{legal.licence.id}</a>. &copy;
        {' '}{year}.
        <span class="site-footer__links">
          <a href="/privacy/">Privacy</a>
          <a href="/terms/">Terms</a>
        </span>
      </p>
      <p class="site-footer__meta">
        <span class="chip chip--version">Protocol {platform.protocol}</span>
        <span class="chip chip--version">Bundle {platform.bundle.tag}</span>
      </p>
    </div>
  </div>
</footer>

<style>
  /* Sits on the licence line rather than in a column of its own — see the header. The
     separator is a border so it never appears at the start of a wrapped line. */
  .site-footer__links {
    display: inline-flex;
    gap: 0.9rem;
    margin-left: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--line-soft);
  }

  .site-footer__meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
</style>