margin/website/src/components/Nav.astro

---
import { site } from "../data/site";
import Logo from "./Logo.astro";
---

<header class="nav">
  <div class="container nav__inner">
    <a class="brand" href="/" aria-label={`${site.name} home`}>
      <Logo size={28} />
      <span>{site.name}</span>
    </a>

    <nav class="nav__links" aria-label="Primary">
      <a href="/#features">Features</a>
      <a href="/#publish">Publishing</a>
      <a href="/#compare">Compare</a>
      <a href="/#pricing">Pricing</a>
      <a href="/#faq">Questions</a>
    </nav>

    <div class="nav__actions">
      <a class="btn nav__cta" href="/#download">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        Download
      </a>
      <button class="iconlink" id="theme-toggle" aria-label="Toggle theme" type="button">
        <svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
          <circle cx="12" cy="12" r="4"></circle>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
        </svg>
        <svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"></path>
        </svg>
      </button>
    </div>
  </div>
</header>

<script is:inline>
  (function () {
    var btn = document.getElementById("theme-toggle");
    if (!btn) return;
    btn.addEventListener("click", function () {
      var cur = document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
      var next = cur === "dark" ? "light" : "dark";
      document.documentElement.setAttribute("data-theme", next);
      try {
        localStorage.setItem("margin-theme", next);
      } catch (e) {}
    });
  })();
</script>

<style>
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--glass);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 680;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    margin-right: auto;
  }
  .brand img {
    border-radius: 7px;
  }
  .nav__links {
    display: flex;
    gap: 26px;
    font-size: 0.95rem;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .nav__links a:hover {
    color: var(--ink);
  }
  .nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav__cta {
    padding: 0.5em 1.05em;
    font-size: 0.9rem;
  }
  .nav__cta svg {
    width: 1em;
    height: 1em;
  }
  .iconlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--ink-soft);
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
  }
  .iconlink:hover {
    background: var(--accent-wash);
    color: var(--ink);
  }
  .iconlink svg {
    width: 18px;
    height: 18px;
  }
  .i-moon {
    display: none;
  }
  :root[data-theme="dark"] .i-sun {
    display: none;
  }
  :root[data-theme="dark"] .i-moon {
    display: block;
  }
  @media (max-width: 860px) {
    .nav__links {
      display: none;
    }
  }
  @media (max-width: 560px) {
    .nav__cta {
      display: none;
    }
  }
</style>