import Link from "next/link";
import Image from "next/image";

const navLinks = [
  { label: "Werkzeuge", href: "/werkzeuge" },
  { label: "Blog", href: "/blog" },
  { label: "Über Björn", href: "/ueber-bjoern" },
  { label: "Shop", href: "/shop" },
];

export function Navbar() {
  return (
    <header className="w-full bg-[#f5f0e8] h-[6.25rem] flex items-center px-[2rem]">
      <div className="w-full flex items-center justify-between">

        {/* Logo — exported directly from Figma */}
        <Link href="/" className="shrink-0">
          <Image
            src="/logo.png"
            alt="einfach produktiv"
            width={181}
            height={61}
            priority
          />
        </Link>

        {/* Nav links */}
        <nav className="flex items-center gap-[3rem]">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* CTA buttons */}
        <div className="flex items-center gap-[0.75rem] p-[0.5rem]">
          <Link
            href="/newsletter"
            className="px-[1.5rem] py-[1rem] rounded-[0.5rem] border border-[#868686] text-[1.125rem] font-bold text-[#222221] hover:bg-[#222221] hover:text-white transition-colors"
          >
            Newsletter
          </Link>
          <Link
            href="/challenge"
            className="px-[1.5rem] py-[1rem] rounded-[0.5rem] bg-[#f6a701] text-[1.125rem] font-bold text-[#222221] hover:brightness-95 transition-all"
          >
            7-Tage-Challenge
          </Link>
        </div>

      </div>
    </header>
  );
}