With announcement

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

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

export function NavbarAnnouncementBlock() {
  return (
    <section className="px-6 py-8">
      <div className="mx-auto max-w-5xl overflow-hidden rounded-2xl border border-border bg-surface-raised shadow-xs">
        <div className="flex items-center justify-center gap-3 border-b border-border bg-surface-inset px-4 py-2">
          <Badge variant="primary" className="hidden gap-1.5 sm:inline-flex">
            <Sparkles aria-hidden="true" className="size-3.5" />
            New
          </Badge>
          <p className="truncate text-sm text-fg-secondary">
            Cronus 2.0 is live — 40 new blocks and a refreshed theme engine.
          </p>
          <a
            href="#changelog"
            className="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-primary-strong transition-colors hover:text-fg"
          >
            Read more
            <ArrowRight aria-hidden="true" className="size-3.5" />
          </a>
        </div>

        <nav className="flex items-center justify-between gap-4 px-4 py-2.5">
          <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">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="flex items-center gap-2">
            <Button variant="ghost" size="sm" className="hidden sm:inline-flex">
              Sign in
            </Button>
            <Button variant="primary" 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>
      </div>
    </section>
  );
}