Centered pill

import { Button } from "@cronus-ui/ui";
import { Hexagon, Menu } from "lucide-react";

const NAVBAR_LINKS = [
  { label: "Features", href: "#features" },
  { label: "Pricing", href: "#pricing" },
  { label: "Docs", href: "#docs" },
  { label: "Changelog", href: "#changelog" },
];

export function NavbarCenteredBlock() {
  return (
    <section className="px-6 py-8">
      <nav className="mx-auto grid max-w-4xl grid-cols-[1fr_auto_1fr] items-center gap-4 rounded-full border border-border bg-surface-overlay/70 px-5 py-2.5 shadow-lg backdrop-blur-md">
        <div className="flex items-center gap-2">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
            <Hexagon aria-hidden="true" className="size-4" />
          </span>
          <span className="font-display text-base font-semibold text-fg">Cronus</span>
        </div>

        <div className="hidden items-center gap-6 md:flex">
          {NAVBAR_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="text-sm text-fg-secondary transition-colors hover:text-fg"
            >
              {link.label}
            </a>
          ))}
        </div>

        <div className="col-start-3 flex items-center justify-end gap-2">
          <Button variant="primary" size="sm" className="hidden sm:inline-flex">
            Get started
          </Button>
          <Button variant="ghost" size="icon-sm" className="md:hidden" aria-label="Open menu">
            <Menu aria-hidden="true" />
          </Button>
        </div>
      </nav>
    </section>
  );
}