"use client";

import { useState } from "react";

const NAV = [
  { label: "CLI", href: "#cli" },
  { label: "SDK", href: "#sdk" },
  { label: "Self-host", href: "#selfhost" },
  { label: "Releases", href: "#releases" },
];

export function DevToolNavbar() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);

  async function copy() {
    try {
      await navigator.clipboard.writeText("brew install vector");
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    } catch {}
  }

  return (
    <div
      className="bg-[#0b0f17] text-[#d6deeb] antialiased"
      style={{ fontFamily: "var(--font-geist-mono), ui-monospace, monospace" }}
    >
      <header className="border-b border-[#1a2336]">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-5">
          <a
            href="#"
            className="flex items-center gap-2 text-[14px] font-bold tracking-tight"
            aria-label="Vector CLI home"
          >
            <span aria-hidden className="text-[#7dd3fc]">$</span>
            <span>vector<span className="text-[#7dd3fc]">_</span></span>
          </a>

          <button
            type="button"
            onClick={copy}
            className="hidden md:inline-flex items-center gap-2 rounded border border-[#1a2336] bg-[#0f1524] px-3 py-1 text-[12px] text-[#9aa6c0] hover:border-[#293657] hover:text-white transition-colors focus-visible:outline-none focus-visible:border-[#7dd3fc]"
          >
            <span aria-hidden className="text-[#7dd3fc]">›</span>
            brew install vector
            <span aria-hidden className="ml-2 text-[#5f6c87]">
              {copied ? "✓" : "⧉"}
            </span>
          </button>

          <nav
            aria-label="Primary"
            className="ml-auto hidden md:flex items-center gap-1 text-[12.5px]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded px-2.5 py-1 text-[#9aa6c0] hover:text-white hover:bg-[#1a2336]"
              >
                {item.label}
              </a>
            ))}
            <span aria-hidden className="mx-1 text-[#293657]">|</span>
            <a
              href="#docs"
              className="rounded px-2.5 py-1 text-[#9aa6c0] hover:text-white hover:bg-[#1a2336]"
            >
              docs
            </a>
            <a
              href="https://github.com"
              className="ml-1 inline-flex items-center gap-1.5 rounded border border-[#1a2336] px-2 py-1 text-[12px] text-[#9aa6c0] hover:border-[#293657] hover:text-white"
            >
              ★ <span>14.2k</span>
            </a>
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="vec-mobile"
            className="md:hidden ml-auto rounded border border-[#1a2336] px-2.5 py-1 text-[12px]"
          >
            {open ? "[x] close" : "[+] menu"}
          </button>
        </div>

        {open && (
          <nav
            id="vec-mobile"
            className="md:hidden border-t border-[#1a2336] px-5 py-3 grid gap-1 text-[13px]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded px-2 py-2 text-[#9aa6c0] hover:bg-[#1a2336] hover:text-white"
              >
                <span aria-hidden className="text-[#7dd3fc] mr-2">›</span>
                {item.label}
              </a>
            ))}
            <button
              type="button"
              onClick={copy}
              className="mt-2 inline-flex items-center justify-between rounded border border-[#1a2336] bg-[#0f1524] px-3 py-2 text-left text-[12px] text-[#d6deeb]"
            >
              <span><span className="text-[#7dd3fc]">›</span> brew install vector</span>
              <span>{copied ? "✓" : "copy"}</span>
            </button>
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-8">
        <p className="text-[11px] text-[#5f6c87] uppercase tracking-wider">
          # v3.4.1 — 2026.05.18
        </p>
        <h1 className="mt-2 text-[24px] font-bold leading-tight text-white">
          The terminal-first observability runtime.
        </h1>
        <p className="mt-2 text-[13px] text-[#9aa6c0]">
          <span className="text-[#7dd3fc]">›</span> vector logs tail --follow
        </p>
      </div>
    </div>
  );
}
Developer Tool Navbar

The terminal-first observability runtime.
