/* eslint-disable no-undef */
function NsIcon({ name, size = 20, stroke = 1.75 }) {
  const c = "currentColor";
  const paths = {
    arrow:     <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
    arrowUp:   <><path d="M12 19V5" /><path d="m5 12 7-7 7 7" /></>,
    arrowDown: <><path d="M12 5v14" /><path d="m19 12-7 7-7-7" /></>,
    chevron:   <path d="m6 9 6 6 6-6" />,
    chevronR:  <path d="m9 6 6 6-6 6" />,
    check:     <path d="M20 6 9 17l-5-5" strokeWidth="2.25" />,
    plus:      <><path d="M12 5v14M5 12h14" /></>,
    dot:       <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" />,
    search:    <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    menu:      <><path d="M3 6h18M3 12h18M3 18h18" /></>,
    /* domain icons */
    pen:       <><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" /></>,
    document:  <><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" /><path d="M14 3v6h6" /><path d="M8 13h8M8 17h6" /></>,
    compass:   <><circle cx="12" cy="12" r="9" /><path d="m15.5 8.5-2 5-5 2 2-5 5-2z" fill="currentColor" stroke="none" /></>,
    target:    <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" /></>,
    spark:     <><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2" /></>,
    grid:      <><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
    layers:    <><path d="m12 2 9 5-9 5-9-5 9-5z" /><path d="m3 12 9 5 9-5" /><path d="m3 17 9 5 9-5" /></>,
    network:   <><circle cx="5" cy="6" r="2.5" /><circle cx="19" cy="6" r="2.5" /><circle cx="12" cy="18" r="2.5" /><path d="M7 7.5 11 16M17 7.5 13 16M7.5 6h9" /></>,
    swap:      <><path d="M7 4 3 8l4 4" /><path d="M3 8h14" /><path d="m17 20 4-4-4-4" /><path d="M21 16H7" /></>,
    mail:      <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></>,
    play:      <path d="M6 4v16l14-8z" fill="currentColor" stroke="none" />,
    quote:     <path d="M7 11c0-3 2-5 5-5v3c-1.5 0-2.5 1-2.5 2.5H12V16H6v-5h1zm10 0c0-3 2-5 5-5v3c-1.5 0-2.5 1-2.5 2.5H22V16h-6v-5h1z" fill="currentColor" stroke="none" />,
    calendar:  <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></>,
    sparkles:  <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" /></>,
    shield:    <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
}

/* No Stone mark — N inside a rounded square, geometric */
function NsMark({ size = 32, color = "#0052ff", on = "#ffffff" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="32" height="32" rx="8" fill={color} />
      <path d="M9 23V9h2.4l9.2 10.2V9H23v14h-2.4L11.4 12.8V23H9z" fill={on} />
    </svg>
  );
}
function NsWordmark({ color = "#0a0b0d", height = 22 }) {
  const isDark = color === "#ffffff";
  const src = isDark ? "assets/no-stone-logo-white.png" : "assets/no-stone-logo.png";
  // Source logo aspect ratio is ~751:561 (full lockup mark+wordmark). At small heights
  // this is too tall for nav use, so we render at a fixed height and let width be auto.
  return (
    <img
      src={src}
      alt="No Stone"
      style={{ height, width: "auto", display: "block" }}
    />
  );
}

/* Inline horizontal wordmark for tight nav contexts — mark + "NO STONE" text */
function NsLockup({ variant = "light", markSize = 32 }) {
  const isDark = variant === "dark";
  const markSrc = isDark ? "assets/no-stone-mark-white.png" : "assets/no-stone-mark.png";
  return (
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 12,
        color: isDark ? "#ffffff" : "#1f2a40",
      }}>
        <img src={markSrc} alt="" style={{ height: markSize, width: "auto", display: "block" }} />
        <span style={{
          fontFamily: "var(--font-display)",
          fontSize: 22, fontWeight: 500,
          letterSpacing: "-0.03em",
          lineHeight: 1,
        }}>No Stone</span>
      </span>
  );
}

window.NsIcon = NsIcon;
window.NsMark = NsMark;
window.NsWordmark = NsWordmark;
window.NsLockup = NsLockup;