Navbar — centered logo

"use client";
import { useState } from "react";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";

const links = [
  { label: "Bookings", href: "/bookings" },
  { label: "Payments", href: "/payments" },
  { label: "Pricing", href: "/pricing" },
];

export function NavbarCentered() {
  const [open, setOpen] = useState(false);
  return (
    <header className="border-b border-border bg-bg font-sans">
      <div className="mx-auto grid h-[60px] max-w-6xl grid-cols-[1fr_auto_1fr] items-center gap-4 px-3 sm:h-[68px] sm:px-7">
        <div>
          <nav aria-label="Main" className="hidden sm:block">
            <ul className="flex gap-0.5">
              {links.map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="inline-flex h-9 items-center rounded px-3 text-sm text-fg-muted transition hover:bg-surface hover:text-fg">{l.label}</a>
                </li>
              ))}
            </ul>
          </nav>
          <button
            type="button"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
            className="inline-grid size-9 place-items-center rounded text-fg hover:bg-surface-2 sm:hidden"
          >
            {open ? <X className="size-4" /> : <Menu className="size-4" />}
          </button>
        </div>

        <a href="/" className="flex items-center gap-2 text-base font-semibold tracking-tight text-fg">
          <span aria-hidden className="size-6 rounded-sm bg-primary" />
          Slotwise
        </a>

        <div className="flex items-center justify-end gap-2">
          <a href="/login" className="hidden h-9 items-center rounded px-3 text-sm font-medium text-fg hover:bg-surface-2 sm:inline-flex">Sign in</a>
          <a href="/demo" className="inline-flex h-9 items-center rounded border border-border-strong bg-bg px-3.5 text-sm font-medium text-fg transition hover:bg-surface">Book a demo</a>
        </div>
      </div>
      <nav aria-label="Mobile" className={cn("border-t border-border px-3 py-2 sm:hidden", !open && "hidden")}>
        {links.map((l) => (
          <a key={l.href} href={l.href} className="block rounded px-2 py-2.5 text-[15px] text-fg hover:bg-surface">{l.label}</a>
        ))}
      </nav>
    </header>
  );
}