---
// Footer — grouped, quiet, in the same visual language as Nav.astro.
//
// The old footer was a single flat row of 10 links + "Built by
// codeofaxel" vanity byline.  At this stage the byline reads as
// a personal-project tell; removed.  Links are now grouped by
// intent (Product / Docs / Company / Connect) with the donate +
// contact blocks preserved but quieted visually.
---

<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col">
        <div class="col-label">Product</div>
        <a href="/install">Install</a>
        <a href="/use-cases">Use Cases</a>
        <a href="/farms">Print Farms</a>
        <a href="/integrations">Integrations</a>
        <a href="/pricing">Pricing</a>
      </div>
      <div class="footer-col">
        <div class="col-label">Docs</div>
        <a href="/docs">Reference</a>
        <a href="/whitepaper">Whitepaper</a>
        <a href="/litepaper">Litepaper</a>
        <a href="/faq">FAQ</a>
      </div>
      <div class="footer-col">
        <div class="col-label">Company</div>
        <a href="/blog">Blog</a>
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="https://github.com/codeofaxel/Kiln/blob/main/LICENSE" target="_blank" rel="noopener">AGPL-3.0</a>
        <button type="button" id="kiln-cookie-prefs" class="cookie-prefs" hidden>Cookie preferences</button>
      </div>
      <div class="footer-col">
        <div class="col-label">Connect</div>
        <a href="https://github.com/codeofaxel/Kiln" target="_blank" rel="noopener">GitHub</a>
        <a href="mailto:adam@kiln3d.com">adam@kiln3d.com</a>
        <a href="https://x.com/kiln3d" target="_blank" rel="noopener">@kiln3d on X</a>
        <a href="https://www.instagram.com/kiln3d" target="_blank" rel="noopener">@kiln3d on Instagram</a>
      </div>
    </div>

    <script is:inline>
      // Reveal "Cookie preferences" only when a kiln_consent cookie
      // has been saved — otherwise the link points at a re-trigger
      // for nothing.  Click clears the cookie + reloads, which
      // surfaces the CookieBanner again so the user can re-decide.
      (() => {
        const btn = document.getElementById("kiln-cookie-prefs");
        if (!btn) return;
        const COOKIE = "kiln_consent";
        const has = document.cookie.split("; ").some((c) => c.startsWith(COOKIE + "="));
        if (has) btn.hidden = false;
        btn.addEventListener("click", () => {
          document.cookie = COOKIE + "=; path=/; max-age=0";
          window.location.reload();
        });
      })();
    </script>

    <div class="footer-bottom">
      <p class="donate">
        Donate &amp; support development:
        <code>kiln3d.sol</code>
        <span class="chain">(Solana)</span>
        &middot;
        <code>kiln3d.eth</code>
        <span class="chain">(Ethereum)</span>
      </p>
      <p class="parent-company">Kiln is a project of Hadron Labs Inc. &middot; built by <a href="https://x.com/adamaarreola" target="_blank" rel="noopener">Adam Arreola</a></p>
      <p class="status">
        <a href="https://status.kiln3d.com" target="_blank" rel="noopener" aria-label="Kiln system status">
          <span class="status-dot" aria-hidden="true"></span>System status
        </a>
      </p>
    </div>
  </div>
</footer>

<style>
  footer {
    border-top: 1px solid var(--border);
    background: rgba(15, 15, 15, 0.6);
    padding: 56px 0 40px;
    font-size: 13px;
    color: var(--text-muted);
  }
  footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .12s ease;
  }
  footer a:hover {
    color: var(--text);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 48px;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cookie-prefs {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: color .12s ease;
  }
  .cookie-prefs:hover {
    color: var(--text);
  }

  .col-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin-bottom: 4px;
  }

  .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  .donate {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
  }
  .donate code {
    font-family: var(--mono);
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
  }
  .donate .chain {
    color: var(--text-muted);
    opacity: 0.7;
  }

  .parent-company {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
  }

  /* System-status indicator — clicking through goes to the live
     BetterStack page.  The dot is intentionally static (no JS / no
     polling): it's a "we have a status surface" signal, not a live
     uptime light.  Truth lives at status.kiln3d.com. */
  .status {
    margin: 0;
    font-size: 12px;
  }
  .status a {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .status a:hover {
    color: var(--text);
  }
  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
  }

  @media (max-width: 720px) {
    footer {
      padding: 40px 0 32px;
    }
    .footer-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 32px 24px;
      margin-bottom: 36px;
    }
  }
</style>
