"use client";

import { useState } from "react";

const NAV = [
  { label: "Stay", href: "#stay" },
  { label: "Dine", href: "#dine" },
  { label: "Spa", href: "#spa" },
  { label: "Experiences", href: "#experiences" },
];

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

  return (
    <div className="relative text-white antialiased font-sans">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, transparent 60%), radial-gradient(circle at 70% 30%, #c8a96a 0%, #6b4317 50%, #1a0e02 100%)",
        }}
      />
      <div
        aria-hidden
        className="absolute inset-0 opacity-25"
        style={{
          backgroundImage:
            "radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3) 0px, transparent 80px), radial-gradient(circle at 80% 60%, rgba(255,255,255,0.2) 0px, transparent 120px)",
        }}
      />

      <header className="relative">
        <div className="mx-auto flex h-20 max-w-7xl items-center gap-8 px-8">
          <a
            href="#"
            className="flex flex-col leading-tight"
            aria-label="Marais & Co home"
            style={{ fontFamily: "var(--font-instrument-serif), serif" }}
          >
            <span className="text-[20px] tracking-tight">Marais &amp; Co</span>
            <span className="text-[10px] font-mono uppercase tracking-[0.32em] text-white/65 not-italic">
              Est. 1908 · Provence
            </span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-7 ml-auto text-[12px] uppercase tracking-[0.28em]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="relative text-white/80 hover:text-white transition-colors focus-visible:outline-none focus-visible:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-px after:bg-[#c8a96a] after:scale-x-0 hover:after:scale-x-100 after:transition-transform after:origin-center"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <a
            href="#book"
            className="hidden md:inline-flex items-center gap-2 border border-white/40 px-5 py-2 text-[11.5px] uppercase tracking-[0.22em] hover:bg-white hover:text-[#1a0e02] transition-colors"
          >
            Reserve a stay
          </a>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="marais-mobile"
            className="md:hidden ml-auto text-[11.5px] uppercase tracking-[0.22em] border border-white/40 px-3 py-1.5"
          >
            {open ? "Close" : "Menu"}
          </button>
        </div>

        {open && (
          <nav
            id="marais-mobile"
            className="md:hidden relative border-t border-white/15 bg-black/30 backdrop-blur-xl px-8 py-4 grid gap-3"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="border-b border-white/10 pb-2 text-[14px] uppercase tracking-[0.22em]"
              >
                {item.label}
              </a>
            ))}
            <a
              href="#book"
              className="mt-3 inline-flex items-center justify-center border border-white/40 px-3 py-2.5 text-[12px] uppercase tracking-[0.22em]"
            >
              Reserve a stay
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="relative mx-auto max-w-7xl px-8 py-14">
        <p className="text-[11px] uppercase tracking-[0.32em] text-[#e8d4a4]">
          Suites · La Roche
        </p>
        <h1
          className="mt-4 max-w-2xl"
          style={{
            fontFamily: "var(--font-instrument-serif), serif",
            fontStyle: "italic",
            fontSize: "clamp(34px, 5.5vw, 64px)",
            lineHeight: 1,
            letterSpacing: "-0.02em",
          }}
        >
          A century of evenings, well kept.
        </h1>
      </div>
    </div>
  );
}
Transparent Hero Navbar

A century of evenings, well kept.
