"use client";

import { useState } from "react";

const NAV = [
  "Collections",
  "Atelier",
  "Maison",
  "Heritage",
  "Boutiques",
];

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

  return (
    <div className="bg-white text-black antialiased">
      <header className="border-b border-black/10">
        <div className="mx-auto max-w-7xl px-8">
          <div className="flex h-20 items-center justify-between">
            <div className="hidden md:flex items-center gap-6 text-[10.5px] uppercase tracking-[0.32em] w-1/3">
              <button type="button" className="hover:opacity-60">EN</button>
              <span aria-hidden className="text-black/30">·</span>
              <button type="button" className="hover:opacity-60">FR</button>
              <span aria-hidden className="text-black/30">·</span>
              <button type="button" className="hover:opacity-60">JP</button>
            </div>

            <a
              href="#"
              className="flex-1 text-center text-[18px] font-light uppercase tracking-[0.5em] w-1/3"
              aria-label="Maison Levant home"
            >
              MAISON LEVANT
            </a>

            <div className="hidden md:flex items-center justify-end gap-6 text-[10.5px] uppercase tracking-[0.32em] w-1/3">
              <button type="button" className="hover:opacity-60" aria-label="Search">⌕</button>
              <button type="button" className="hover:opacity-60">Account</button>
              <button type="button" className="hover:opacity-60">Bag (0)</button>
            </div>

            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="lev-mobile"
              className="md:hidden text-[10.5px] uppercase tracking-[0.32em]"
            >
              {open ? "CLOSE" : "MENU"}
            </button>
          </div>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center justify-center gap-12 border-t border-black/10 py-4 text-[11px] uppercase tracking-[0.32em]"
          >
            {NAV.map((label) => (
              <a
                key={label}
                href={`#${label.toLowerCase()}`}
                className="relative text-black hover:text-black/60 transition-colors focus-visible:outline-none focus-visible:text-black/60 after:absolute after:left-0 after:right-0 after:-bottom-4 after:h-px after:scale-x-0 after:bg-black hover:after:scale-x-100 after:transition-transform after:origin-center"
              >
                {label}
              </a>
            ))}
          </nav>

          {open && (
            <nav
              id="lev-mobile"
              className="md:hidden border-t border-black/10 py-4 grid gap-3"
            >
              {NAV.map((label) => (
                <a
                  key={label}
                  href={`#${label.toLowerCase()}`}
                  className="text-[14px] uppercase tracking-[0.28em] py-1"
                >
                  {label}
                </a>
              ))}
              <div className="mt-3 flex items-center gap-6 text-[11px] uppercase tracking-[0.28em] border-t border-black/10 pt-3">
                <button type="button">EN</button>
                <button type="button">FR</button>
                <button type="button">JP</button>
                <span aria-hidden className="ml-auto">Bag (0)</span>
              </div>
            </nav>
          )}
        </div>
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-8 py-12 text-center">
        <p className="text-[10.5px] uppercase tracking-[0.4em] text-black/50">
          Cruise 2026
        </p>
        <h1 className="mt-5 text-[34px] font-light uppercase tracking-[0.16em]">
          THE QUIET LINE
        </h1>
      </div>
    </div>
  );
}
Monochrome Luxury Navbar

THE QUIET LINE
