"use client";

import { Button } from "@/components/ui/button";
import { Sparkles } from "lucide-react";

const leftLinks = [
  { label: "Product", href: "#" },
  { label: "Solutions", href: "#" },
  { label: "Pricing", href: "#" },
];

const rightLinks = [
  { label: "Docs", href: "#" },
  { label: "Blog", href: "#" },
  { label: "Company", href: "#" },
];

export default function NavbarLogoCenter() {
  return (
    <header className="w-full border-b border-border bg-background">
      <div className="container mx-auto grid grid-cols-3 items-center gap-6 px-6 py-4">
        <nav className="hidden md:flex items-center gap-6 justify-start">
          {leftLinks.map((l) => (
            <a
              key={l.label}
              href={l.href}
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {l.label}
            </a>
          ))}
        </nav>
        <a href="#" className="flex items-center justify-center gap-2 text-foreground font-bold">
          <Sparkles className="w-5 h-5 text-primary" />
          <span className="text-base">Acme</span>
        </a>
        <div className="flex items-center justify-end gap-6">
          <nav className="hidden md:flex items-center gap-6">
            {rightLinks.map((l) => (
              <a
                key={l.label}
                href={l.href}
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {l.label}
              </a>
            ))}
          </nav>
          <Button size="sm">Sign in</Button>
        </div>
      </div>
    </header>
  );
}