---
import "../styles/global.css";
import versionInfo from "../generated/version.json";

const version = versionInfo.version;
const releaseUrl = versionInfo.url;
const { title = "Computing:Box" } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>{title}</title>
    
    <script is:inline>
      var _paq = window._paq = window._paq || [];
      _paq.push(["setCookieDomain", "*.www.computingbox.co.uk"]);
      _paq.push(["setDomains", ["*.www.computingbox.co.uk","*.csbox.mrdaviscsit.uk","*.csbox.mrlyall.co.uk","*.csbox.mrlyall.uk"]]);
      _paq.push(["enableCrossDomainLinking"]);
      _paq.push(["disableCookies"]);
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//analytics.adcmnetworks.co.uk/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '2']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet">
  </head>
  <body>
    <header class="siteNav">
      <div class="navInner">
        <a class="brand" href="/">
          <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo" />
          <span class="brandName">Computing:Box</span>
        </a>

        <nav class="navLinks" aria-label="Site navigation">
          <a href="/about">About</a>
          <a href="/binary">Binary</a>
          <a href="/hexadecimal">Hexadecimal</a>
          <a href="/hex-colours">Hex Colours</a>
          <a href="/logic-gates">Logic Gates</a>
          <a href="/pc-builder">PC Components</a>
        </nav>
      </div>
    </header>

    <main class="pageWrap">
      <slot />
    </main>

    <footer class="siteFooter">
        <div class="footerInner">
          <div style="margin-top: 5px; display: flex; justify-content: center;">
              <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a>
              <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a>
          </div>
        <div>Computer Science Concept Simulators</div>
        <div>    Version:
    <a href={releaseUrl} target="_blank" rel="noopener noreferrer">
      {version}
    </a> • © {new Date().getFullYear()} Computing:Box • Created with ♥ by Mr A Lyall</div>
      </div>
    </footer>
  </body>
</html>