"use client";

import { useState } from "react";

const PRIMARY = [
  { label: "Models", href: "#models" },
  { label: "Configurator", href: "#configurator" },
  { label: "Service", href: "#service" },
  { label: "Owners", href: "#owners" },
];

const UTILITY = [
  { label: "Test drive", href: "#test", emphasis: true },
  { label: "Locate dealer", href: "#dealer" },
];

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

  return (
    <div className="bg-[#0c0c0c] text-white antialiased font-sans">
      <header className="border-b border-white/8">
        <div className="mx-auto flex h-16 max-w-7xl items-center px-6">
          <a
            href="#"
            className="flex items-center gap-3 text-[14px] font-semibold tracking-[0.18em] uppercase"
            aria-label="Saber Motor home"
          >
            <span
              aria-hidden
              className="inline-block h-3 w-3 rounded-full bg-white"
            />
            Saber
            <span aria-hidden className="h-3 w-px bg-white/30" />
            <span className="font-light text-white/70">Motor Co.</span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden lg:flex items-center gap-7 mx-auto text-[12.5px] uppercase tracking-[0.22em]"
          >
            {PRIMARY.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-white/80 hover:text-white transition-colors focus-visible:outline-none focus-visible:text-white"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div
            className="ml-auto hidden lg:flex items-center gap-1"
            role="group"
            aria-label="Utility"
          >
            {UTILITY.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className={`inline-flex items-center gap-2 px-4 py-2 text-[12.5px] uppercase tracking-[0.18em] transition-colors ${
                  item.emphasis
                    ? "bg-white text-[#0c0c0c] hover:bg-white/85"
                    : "border-l border-white/15 text-white/80 hover:text-white"
                }`}
              >
                {item.label}
                {item.emphasis && <span aria-hidden>→</span>}
              </a>
            ))}
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="saber-mobile"
            className="lg:hidden ml-auto inline-flex items-center gap-2 px-3 py-1.5 text-[12px] uppercase tracking-[0.18em] border border-white/15"
          >
            {open ? "Close" : "Menu"}
          </button>
        </div>

        {open && (
          <div id="saber-mobile" className="lg:hidden border-t border-white/8 bg-[#0c0c0c]">
            <nav className="px-6 py-4 grid">
              {PRIMARY.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="border-b border-white/10 py-3 text-[13px] uppercase tracking-[0.18em] text-white/85"
                >
                  {item.label}
                </a>
              ))}
              <div className="mt-4 grid grid-cols-2 gap-2">
                {UTILITY.map((item) => (
                  <a
                    key={item.href}
                    href={item.href}
                    className={`inline-flex items-center justify-center px-3 py-2.5 text-[12px] uppercase tracking-[0.18em] ${
                      item.emphasis
                        ? "bg-white text-[#0c0c0c]"
                        : "border border-white/20"
                    }`}
                  >
                    {item.label}
                  </a>
                ))}
              </div>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-6 py-10">
        <p className="text-[10.5px] uppercase tracking-[0.32em] text-white/55">
          MY26 · ARRIVING THIS QUARTER
        </p>
        <h1 className="mt-3 max-w-2xl text-[34px] font-light uppercase tracking-tight">
          The new Saber GTR. Engineered for stillness.
        </h1>
      </div>
    </div>
  );
}
Split Navigation Navbar

The new Saber GTR. Engineered for stillness.
