---
import Wordmark from "./Wordmark.astro";

type NavVariant = "home" | "pds";
type PdsPage = "home" | "about" | "migrate";

interface Props {
  variant?: NavVariant;
  /** Which PDS subsite page is active, for link highlighting. Ignored outside variant="pds". */
  pdsPage?: PdsPage;
}

const { variant = "home", pdsPage = "home" } = Astro.props;
---

<nav
  class="sticky top-0 z-10 border-b border-rule backdrop-blur-md"
  style="background: color-mix(in oklab, var(--color-night) 88%, transparent);"
>
  <div
    class="max-w-[980px] mx-auto px-7 py-[14px] flex items-center justify-between gap-4 sm:gap-8 mono text-[13px]"
  >
    <a
      href={variant === "pds" ? "/pds" : "/"}
      class:list={[
        "border-none!",
        variant === "pds"
          ? "inline-flex flex-col sm:flex-row sm:items-baseline items-start gap-[2px] sm:gap-[6px]"
          : "inline-flex items-baseline",
      ]}
      aria-label={variant === "pds" ? "dummy.cafe / hosting provider" : "dummy.cafe"}
    >
      <Wordmark size="nav" mode="ink" />
      {variant === "pds" && (
        <span class="text-ink-soft leading-none">hosting provider</span>
      )}
    </a>

    <div class="flex gap-[10px] sm:gap-[22px] items-center text-ink-soft">
      {variant === "home" && (
        <span class="mono text-[12px] text-ink-dim">© 2026</span>
      )}
      {variant === "pds" && (
        <>
          <a
            href="/pds/about"
            class:list={["border-none! py-1 hover:text-ink", pdsPage === "about" && "text-ink"]}
          >about</a>
          <a
            href="/pds/migrate"
            class:list={["border-none! py-1 hover:text-ink", pdsPage === "migrate" && "text-ink"]}
          >migrate</a>
          <span class="hidden sm:inline-block w-px h-[14px] bg-rule" aria-hidden></span>
          <a
            href="/"
            class="hidden sm:inline border-none! py-1 text-ink-dim hover:text-ink"
          >dummy.cafe ↗</a>
        </>
      )}
    </div>
  </div>
</nav>