"use client";

import { useState } from "react";

const NAV = [
  { label: "WORK", href: "#work", num: "01" },
  { label: "STUDIO", href: "#studio", num: "02" },
  { label: "PRESS", href: "#press", num: "03" },
  { label: "INDEX", href: "#index", num: "04" },
];

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

  return (
    <div
      className="bg-[#f5ef27] text-black antialiased"
      style={{ fontFamily: "var(--font-geist-mono), ui-monospace, monospace" }}
    >
      <header className="border-b-[3px] border-black">
        <div className="flex items-stretch">
          <a
            href="#"
            className="flex items-center gap-2 border-r-[3px] border-black px-5 py-4 text-[15px] font-black uppercase tracking-tight hover:bg-black hover:text-[#f5ef27] focus-visible:outline-none focus-visible:bg-black focus-visible:text-[#f5ef27]"
          >
            <span aria-hidden className="text-[20px]">▣</span>
            STAPLE/77
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-stretch"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="group flex items-center gap-3 border-r-[3px] border-black px-5 text-[12px] font-bold uppercase tracking-wider hover:bg-black hover:text-[#f5ef27]"
              >
                <span className="text-[10px] opacity-60 group-hover:opacity-100">
                  /{item.num}
                </span>
                {item.label}
              </a>
            ))}
          </nav>

          <a
            href="#contact"
            className="ml-auto hidden md:flex items-center gap-2 border-l-[3px] border-black bg-black px-6 text-[12px] font-bold uppercase tracking-wider text-[#f5ef27] hover:bg-[#ff3b00] hover:text-black"
          >
            CONTACT
            <span aria-hidden>↗</span>
          </a>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="staple-mobile"
            className="ml-auto md:hidden flex items-center gap-2 border-l-[3px] border-black bg-black px-5 text-[12px] font-bold uppercase tracking-wider text-[#f5ef27]"
          >
            {open ? "✕ CLOSE" : "■ MENU"}
          </button>
        </div>

        {open && (
          <div
            id="staple-mobile"
            className="md:hidden border-t-[3px] border-black bg-black text-[#f5ef27]"
          >
            <nav className="grid">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="flex items-center justify-between border-b-[1px] border-[#f5ef27]/30 px-5 py-4 text-[15px] font-bold uppercase tracking-wider hover:bg-[#f5ef27] hover:text-black"
                >
                  <span>
                    <span className="opacity-60 mr-3">/{item.num}</span>
                    {item.label}
                  </span>
                  <span aria-hidden>→</span>
                </a>
              ))}
              <a
                href="#contact"
                className="px-5 py-5 text-[13px] font-bold uppercase tracking-wider bg-[#ff3b00] text-black"
              >
                CONTACT ↗
              </a>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="px-5 py-10">
        <p className="text-[10px] font-bold uppercase tracking-[0.2em]">
          ISSUE — 0077 // 2026-W22
        </p>
        <h1 className="mt-4 max-w-2xl text-[32px] font-black uppercase leading-[0.95]">
          DESIGN STUDIO FOR PRINT, MOTION &amp; PUBLIC FURNITURE.
        </h1>
      </div>
    </div>
  );
}
Brutalist Navbar

DESIGN STUDIO FOR PRINT, MOTION & PUBLIC FURNITURE.
