Navbar

import { Badge, Button } from "@cooud-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 NavbarBlock() {
  return (
    <section className="px-6 py-8">
      <nav className="mx-auto flex max-w-5xl items-center justify-between gap-4 rounded-full border border-border bg-surface-raised/80 px-4 py-2 shadow-sm backdrop-blur">
        <div className="flex items-center gap-2.5">
          <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">Cooud</span>
          <Badge variant="secondary" className="ml-0.5">
            Beta
          </Badge>
        </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="flex items-center gap-2">
          <Button variant="ghost" size="sm" className="hidden sm:inline-flex">
            Sign in
          </Button>
          <Button variant="gradient" size="sm">
            Get started
          </Button>
          <Button variant="ghost" size="icon-sm" className="md:hidden" aria-label="Open menu">
            <Menu aria-hidden="true" />
          </Button>
        </div>
      </nav>
    </section>
  );
}