---
import { execSync } from 'node:child_process';
import Icon from './Icon.astro';
import EECredit from './EECredit.astro';

const year = new Date().getFullYear();
// TODO(links): add Roadmap (/roadmap) and dedicated How-it-works/Open pages when they ship.
const GITHUB_URL = 'https://github.com/PCBJam';

// Build provenance: the pcbjam commit this site was built from — it pins the
// KiCad + wxWidgets submodule revisions implicitly and is our GPLv3
// corresponding-source pointer (see /licenses), so it must not silently degrade
// to 'main'. Resolved at build time, in order: Cloudflare Pages CI
// (CF_PAGES_COMMIT_SHA), GitHub Actions (GITHUB_SHA), then git. A direct-upload
// `wrangler pages deploy` sets neither variable, but deploy-site.yml runs in
// Actions on a real checkout, so the git fallback is correct there too.
function resolveBuildSha(): string {
  const ciSha = process.env.CF_PAGES_COMMIT_SHA || process.env.GITHUB_SHA;
  if (ciSha) return ciSha.slice(0, 7);
  try {
    return execSync('git rev-parse --short=7 HEAD', { encoding: 'utf8' }).trim();
  } catch {
    // No git either (e.g. tarball build) — link to the branch head.
    return 'main';
  }
}
const BUILD_SHA = resolveBuildSha();
const BUILD_COMMIT_URL = `https://github.com/PCBJam/pcbjam/commit/${BUILD_SHA}`;
---

<footer class="site-footer">
  <div class="container cols">
    <div class="col col-brand">
      <a class="brand" href="/">
        <img src="/favicon.svg" alt="" width="18" height="25" />
        <span>PCBJam</span>
      </a>
      <p class="tagline muted">Real KiCad, in your browser. No install.</p>
      <nav class="links" aria-label="PCBJam">
        <a href={GITHUB_URL} rel="noopener" target="_blank">
          <Icon name="icons/github.svg" size="0.9rem" alt="" /> GitHub
        </a>
        <a href="/blog">Blog</a>
      </nav>
    </div>

    <div class="col">
      <h2 class="col-title">Product</h2>
      <nav class="links stack" aria-label="Product">
        <a href="/#how-it-works">How it works</a>
        <a href="/#open">Open &amp; yours</a>
        <a href="/pricing">Pricing</a>
        <a href="https://demo.pcbjam.com" target="_blank" rel="noopener">Live demo</a>
        <a href="/#waitlist">Join the waitlist</a>
      </nav>
    </div>

    <div class="col">
      <h2 class="col-title">Built by</h2>
      <EECredit variant="footer" />
    </div>

    <div class="col">
      <h2 class="col-title">Legal</h2>
      <nav class="links stack" aria-label="Legal">
        <a href="/privacy">Privacy Policy</a>
        <a href="/terms">Terms of Service</a>
        <a href="/cookies">Cookie Policy</a>
        <a href="/licenses">Open-Source Licenses</a>
      </nav>
    </div>
  </div>

  <div class="container bottom">
    <span
      >&copy; {year} Emergence Engineering &middot; <a
        class="build"
        href={BUILD_COMMIT_URL}
        rel="noopener"
        target="_blank">build {BUILD_SHA}</a
      ></span
    >
    <span class="attrib muted">
      Built on the open-source <a href="https://www.kicad.org" rel="noopener" target="_blank"
        >KiCad</a
      > EDA suite. Not affiliated with or endorsed by the KiCad project.
    </span>
  </div>
</footer>

<style>
  .site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--fg-muted);
    font-size: 0.9rem;
  }
  .cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
    gap: 2rem;
    padding-block: 2.5rem 1.5rem;
  }
  .col-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg);
    margin: 0 0 0.75rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--fg);
  }
  .brand img {
    height: 1.6rem;
    width: auto;
  }
  .tagline {
    margin: 0.6rem 0 0.9rem;
  }
  .links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
  .links.stack {
    flex-direction: column;
    gap: 0.5rem;
  }
  .links a {
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .links a:hover {
    color: var(--fg);
    text-decoration: none;
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.25rem;
    border-top: 1px solid var(--border);
  }
  .attrib {
    font-size: 0.82rem;
    max-width: 42rem;
  }
  .build {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--fg-muted);
  }
  .build:hover {
    color: var(--fg);
    text-decoration: none;
  }

  @media (max-width: 820px) {
    .cols {
      grid-template-columns: 1fr 1fr;
      gap: 1.75rem;
    }
  }
  @media (max-width: 520px) {
    .cols {
      grid-template-columns: 1fr;
    }
  }
</style>
