// Top navigation bar with Aurek wordmark + request access CTA.
function AurekMark({ size = 18 }) {
  // Original mark: a constellation of 7 dots arranged like a stylized "A"
  const s = size;
  const dots = [
    [0.5, 0.08], [0.28, 0.38], [0.72, 0.38],
    [0.16, 0.74], [0.84, 0.74],
    [0.38, 0.74], [0.62, 0.74],
  ];
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width={s} height={s} viewBox="0 0 1 1" style={{ display: "block" }}>
        {dots.map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={0.07} fill="var(--text)" />
        ))}
      </svg>
      <span style={{ fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.22em", fontSize: 12, fontWeight: 600, color: "var(--text)" }}>
        AUREK
      </span>
    </div>
  );
}

function Nav() {
  const links = ["Platform", "Protocol"];
  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        backdropFilter: "blur(10px)",
        background: "rgba(0,0,0,0.55)",
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div
        style={{
          maxWidth: 1200,
          margin: "0 auto",
          padding: "14px 28px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <AurekMark />
        <nav style={{ display: "flex", gap: 28 }}>
          {links.map((l) => (
            <a
              key={l}
              href={"#" + l.toLowerCase()}
              style={{
                fontSize: 13,
                color: "var(--text-dim)",
                transition: "color .2s",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-dim)")}
            >
              {l}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a
            href="mailto:manasgarg02@gmail.com?subject=Aurek%20Early%20Access"
            style={{
              fontSize: 13,
              fontWeight: 500,
              padding: "8px 14px",
              border: "1px solid var(--line-strong)",
              borderRadius: 999,
              color: "var(--text)",
              transition: "all .2s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--text)";
              e.currentTarget.style.color = "#000";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "var(--text)";
            }}
          >
            Request access
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, AurekMark });