/* eslint-disable no-undef */
/**
 * NsNav — top navigation for No Stone homepage directions.
 *
 * variant: "light" (white frost over white) | "dark" (dark frost over dark hero)
 * floating: when true, position absolute over hero. When false, sits in flow.
 */
function NsNav({ variant = "light", floating = true }) {
  const isDark = variant === "dark";
  const links = [
  { label: "Content", href: "content.html" },
  { label: "Guidance", href: "guidance.html" },
  { label: "Contact", href: "contact.html" }];


  const wrap = {
    position: floating ? "absolute" : "relative",
    top: 0, left: 0, right: 0,
    height: 72,
    display: "flex",
    alignItems: "center",
    padding: "0 64px",
    gap: 32,
    zIndex: 20,
    color: isDark ? "var(--color-on-dark)" : "var(--color-ink)"
  };

  const linkStyle = {
    fontFamily: "var(--font-body)",
    fontSize: 14,
    fontWeight: 500,
    color: "inherit",
    textDecoration: "none",
    padding: "8px 0",
    cursor: "pointer",
    opacity: 0.92
  };

  return (
    <nav className={isDark ? "ns-nav-frost-dark" : "ns-nav-frost-light"} style={wrap}>
      <a href="index.html" style={{ textDecoration: "none", color: "inherit" }}>
        <NsLockup variant={isDark ? "dark" : "light"} markSize={36} />
      </a>
      <div style={{ display: "flex", gap: 28, flex: 1, marginLeft: 32 }}>
        {links.map((l) => <a key={l.label} href={l.href} style={linkStyle}>{l.label}</a>)}
      </div>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: isDark ? "rgba(255,255,255,0.65)" : "var(--color-muted)", letterSpacing: "0.02em" }}>
          WST · Perth
        </span>
        <a
          href="contact.html"
          className="btn btn--primary"
          style={{ height: 40, padding: "10px 18px", fontSize: 14, textDecoration: "none" }}>
          
          Contact us
        </a>
      </div>
    </nav>);

}

window.NsNav = NsNav;