"use client";

import { useState } from "react";

const NAV = [
  { label: "work", num: "001" },
  { label: "studio", num: "002" },
  { label: "thoughts", num: "003" },
  { label: "contact", num: "004" },
];

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

  return (
    <div className="bg-[#0f0f0e] text-[#e8e6e0] antialiased font-sans">
      <header className="px-6 lg:px-10">
        <div className="flex h-20 items-center">
          <a
            href="#"
            className="flex items-baseline gap-2"
            aria-label="Atelier Nine home"
          >
            <span
              className="text-[34px] leading-none lowercase"
              style={{
                fontFamily: "var(--font-instrument-serif), serif",
                fontStyle: "italic",
                letterSpacing: "-0.025em",
              }}
            >
              atelier
            </span>
            <span className="text-[16px] font-mono text-[#e8e6e0]/60">/nine</span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-baseline gap-8 ml-auto"
          >
            {NAV.map((item) => (
              <a
                key={item.label}
                href={`#${item.label}`}
                className="group inline-flex items-baseline gap-1.5 text-[14px] lowercase tracking-tight text-[#e8e6e0]/75 hover:text-[#e8e6e0] focus-visible:outline-none focus-visible:text-[#e8e6e0] transition-colors"
              >
                <span className="font-mono text-[10px] text-[#c9a872] group-hover:text-[#e0c08e]">
                  ↗ {item.num}
                </span>
                {item.label}
              </a>
            ))}
            <a
              href="#brief"
              className="ml-2 inline-flex items-center gap-2 rounded-full border border-[#e8e6e0]/20 px-4 py-1.5 text-[13px] hover:border-[#e8e6e0]"
            >
              start a brief
              <span aria-hidden className="text-[#c9a872]">→</span>
            </a>
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="atelier-mobile"
            className="md:hidden ml-auto inline-flex flex-col items-end gap-1"
            aria-label="Toggle menu"
          >
            <span aria-hidden className={`h-px w-7 bg-[#e8e6e0] transition-transform ${open ? "translate-y-1.5 rotate-45" : ""}`} />
            <span aria-hidden className={`h-px w-5 bg-[#e8e6e0] transition-transform ${open ? "-translate-y-px -rotate-45 w-7" : ""}`} />
          </button>
        </div>

        {open && (
          <nav
            id="atelier-mobile"
            className="md:hidden border-t border-[#e8e6e0]/10 py-5 grid gap-4"
          >
            {NAV.map((item) => (
              <a
                key={item.label}
                href={`#${item.label}`}
                className="flex items-baseline gap-3 text-[26px] leading-none lowercase"
                style={{
                  fontFamily: "var(--font-instrument-serif), serif",
                  fontStyle: "italic",
                }}
              >
                <span className="font-mono text-[11px] text-[#c9a872]">↗ {item.num}</span>
                {item.label}
              </a>
            ))}
            <a
              href="#brief"
              className="mt-3 inline-flex items-center justify-center gap-2 rounded-full border border-[#e8e6e0]/20 px-4 py-2.5 text-[13px]"
            >
              start a brief →
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="px-6 lg:px-10 py-10">
        <p className="text-[10.5px] font-mono uppercase tracking-[0.2em] text-[#c9a872]">
          ⏤ Berlin / Lisbon — 14 humans
        </p>
        <h1
          className="mt-3 max-w-2xl lowercase"
          style={{
            fontFamily: "var(--font-instrument-serif), serif",
            fontSize: "clamp(28px, 4vw, 44px)",
            lineHeight: 1.02,
            letterSpacing: "-0.02em",
          }}
        >
          design <em>that earns</em> the second look.
        </h1>
      </div>
    </div>
  );
}
Agency Navbar

design that earns the second look.
