import { ButtonLink } from "@/components/ui/Button";
import { Logo } from "@/components/ui/Logo";

export function Navbar() {
  return (
    <header className="sticky top-0 z-40 border-b border-forest/10 bg-cream/80 backdrop-blur-xl dark:border-white/10 dark:bg-[#08130f]/80">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
        <Logo />
        <nav className="hidden items-center gap-7 text-sm font-semibold text-ink/70 dark:text-paper/70 md:flex">
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="/dashboard">Dashboard</a>
          <a href="/mobile">Mobile</a>
        </nav>
        <ButtonLink href="/dashboard" size="sm">Open app</ButtonLink>
      </div>
    </header>
  );
}