"use client";

import { useState } from "react";

const NAV = [
  { label: "NETWORK", code: "01" },
  { label: "PROTOCOL", code: "02" },
  { label: "STAKE", code: "03" },
  { label: "DOCS", code: "04" },
];

export function FuturisticNavbar() {
  const [open, setOpen] = useState(false);

  return (
    <div
      className="bg-[#020817] text-[#c2e4ff] antialiased relative overflow-hidden"
      style={{ fontFamily: "var(--font-geist-mono), ui-monospace, monospace" }}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-30"
        style={{
          backgroundImage:
            "linear-gradient(rgba(34,211,238,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.15) 1px, transparent 1px)",
          backgroundSize: "32px 32px",
        }}
      />

      <header className="relative">
        <div
          className="border-b"
          style={{
            borderImage:
              "linear-gradient(90deg, transparent, #22d3ee 50%, transparent) 1",
          }}
        >
          <div className="mx-auto flex h-14 max-w-6xl items-center gap-6 px-5">
            <a
              href="#"
              className="flex items-center gap-2.5 text-[13px] font-bold tracking-[0.18em]"
            >
              <span
                aria-hidden
                className="grid h-7 w-7 place-items-center border border-[#22d3ee] text-[#22d3ee]"
                style={{
                  clipPath: "polygon(20% 0, 100% 0, 80% 100%, 0 100%)",
                  boxShadow: "inset 0 0 8px rgba(34,211,238,0.4)",
                }}
              >
                ⏣
              </span>
              <span>
                NEXUS<span className="text-[#22d3ee]">::</span>0x4E
              </span>
            </a>

            <nav
              aria-label="Primary"
              className="hidden md:flex items-center gap-1 text-[11.5px] tracking-[0.16em] ml-2"
            >
              {NAV.map((item) => (
                <a
                  key={item.code}
                  href={`#${item.label.toLowerCase()}`}
                  className="group relative inline-flex items-center gap-2 px-3 py-2 text-[#7ca9d3] hover:text-white focus-visible:outline-none focus-visible:text-white transition-colors"
                >
                  <span className="text-[#22d3ee]/70 group-hover:text-[#22d3ee]">[{item.code}]</span>
                  {item.label}
                </a>
              ))}
            </nav>

            <div className="ml-auto hidden md:flex items-center gap-3">
              <span className="inline-flex items-center gap-2 border border-[#22d3ee]/30 px-2.5 py-1 text-[11px] tracking-wider text-[#7ca9d3]">
                <span aria-hidden className="h-1.5 w-1.5 bg-emerald-400 animate-pulse" />
                NODE_SYNC
              </span>
              <a
                href="#connect"
                className="relative inline-flex items-center gap-2 border border-[#22d3ee] px-4 py-1.5 text-[11.5px] font-bold tracking-[0.18em] text-[#22d3ee] hover:bg-[#22d3ee] hover:text-[#020817] transition-colors"
                style={{ boxShadow: "inset 0 0 12px rgba(34,211,238,0.2), 0 0 14px -4px rgba(34,211,238,0.5)" }}
              >
                CONNECT_WALLET
              </a>
            </div>

            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="nexus-mobile"
              className="md:hidden ml-auto border border-[#22d3ee]/40 px-2.5 py-1 text-[11px] tracking-[0.16em]"
            >
              {open ? "[X] CLOSE" : "[+] MENU"}
            </button>
          </div>
        </div>

        {open && (
          <nav
            id="nexus-mobile"
            className="md:hidden border-b border-[#22d3ee]/30 bg-[#020817]/95 px-5 py-3 grid gap-1 text-[12px] tracking-[0.16em]"
          >
            {NAV.map((item) => (
              <a
                key={item.code}
                href={`#${item.label.toLowerCase()}`}
                className="flex items-center justify-between border-b border-[#22d3ee]/10 py-2 text-[#7ca9d3] hover:text-white"
              >
                <span><span className="text-[#22d3ee]">[{item.code}]</span> {item.label}</span>
                <span aria-hidden>→</span>
              </a>
            ))}
            <a
              href="#connect"
              className="mt-3 inline-flex items-center justify-center border border-[#22d3ee] py-2 font-bold text-[#22d3ee]"
            >
              CONNECT_WALLET
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="relative mx-auto max-w-6xl px-5 py-8">
        <p className="text-[10px] tracking-[0.22em] text-[#22d3ee]">
          ▌ MAINNET · BLOCK 18,442,909 · TPS 1,420
        </p>
        <h1 className="mt-3 max-w-xl text-[26px] font-bold tracking-tight text-white">
          Settle anything, anywhere, in under 400ms.
        </h1>
      </div>
    </div>
  );
}
Futuristic Navbar

Settle anything, anywhere, in under 400ms.
