"use client";

import { useState } from "react";

const LEFT = [
  { label: "Shop", href: "#shop" },
  { label: "Lookbook", href: "#lookbook" },
  { label: "Stories", href: "#stories" },
];

const RIGHT = [
  { label: "Stockists", href: "#stockists" },
  { label: "Account", href: "#account" },
  { label: "Bag (2)", href: "#bag" },
];

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

  return (
    <div className="bg-[#fbf9f4] text-[#1a1a1a] antialiased">
      <header className="border-b border-[#1a1a1a]/10">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid grid-cols-3 items-center h-20">
            <nav
              aria-label="Primary left"
              className="hidden md:flex items-center gap-6 text-[12px] uppercase tracking-[0.22em]"
            >
              {LEFT.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="text-[#1a1a1a]/75 hover:text-[#1a1a1a] focus-visible:outline-none focus-visible:text-[#1a1a1a]"
                >
                  {item.label}
                </a>
              ))}
            </nav>

            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="ctl-mobile"
              className="md:hidden text-[11px] uppercase tracking-[0.22em] justify-self-start"
            >
              {open ? "Close" : "Menu"}
            </button>

            <a
              href="#"
              className="justify-self-center text-center"
              aria-label="House of Lina home"
              style={{
                fontFamily: "var(--font-instrument-serif), serif",
                fontStyle: "italic",
                fontSize: "clamp(28px, 4.5vw, 42px)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
              }}
            >
              House of Lina
            </a>

            <nav
              aria-label="Primary right"
              className="hidden md:flex items-center gap-6 justify-end text-[12px] uppercase tracking-[0.22em]"
            >
              {RIGHT.map((item, i) => (
                <a
                  key={item.href}
                  href={item.href}
                  className={`hover:text-[#1a1a1a] focus-visible:outline-none ${
                    i === RIGHT.length - 1
                      ? "text-[#1a1a1a] font-medium"
                      : "text-[#1a1a1a]/75"
                  }`}
                >
                  {item.label}
                </a>
              ))}
            </nav>

            <button
              type="button"
              aria-label="Bag"
              className="md:hidden justify-self-end text-[11px] uppercase tracking-[0.22em]"
            >
              Bag (2)
            </button>
          </div>

          {open && (
            <nav
              id="ctl-mobile"
              className="md:hidden border-t border-[#1a1a1a]/10 py-4 grid gap-3"
            >
              {[...LEFT, ...RIGHT].map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="text-[14px] uppercase tracking-[0.18em] py-1"
                >
                  {item.label}
                </a>
              ))}
            </nav>
          )}
        </div>
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-6 py-10 text-center">
        <p className="text-[10.5px] uppercase tracking-[0.32em] text-[#1a1a1a]/55">
          Resort 2026
        </p>
        <h1
          className="mt-4"
          style={{
            fontFamily: "var(--font-instrument-serif), serif",
            fontSize: "clamp(28px, 4.5vw, 48px)",
            lineHeight: 1.02,
            letterSpacing: "-0.02em",
          }}
        >
          Linen, sand, and a long table.
        </h1>
      </div>
    </div>
  );
}
Centered Logo Navbar

Linen, sand, and a long table.
