import Link from "next/link";

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] px-8 h-[6.25rem] flex items-center">
      <div className="w-full flex items-center justify-between gap-8">

        {/* Logo */}
        <Link href="/" className="flex flex-col gap-0.5 shrink-0">
          <span className="relative inline-block px-2 py-0.5">
            <span
              className="absolute inset-0 rounded-sm -skew-x-2"
              style={{ background: "#f5c518", opacity: 0.85 }}
            />
            <span className="relative font-bold text-[1.375rem] text-[#1a1a1a] leading-tight tracking-tight italic">
              einfach produktiv
            </span>
          </span>
          <span className="text-[0.5rem] uppercase tracking-[0.15em] text-[#6b6b6b] pl-2">
            Weil du auch noch ein Leben hast
          </span>
        </Link>

        {/* Nav links */}
        <nav className="flex items-center gap-10">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="text-[0.9375rem] font-medium text-[#1a1a1a] hover:text-[#f5c518] transition-colors"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* CTA buttons */}
        <div className="flex items-center gap-3 shrink-0">
          <Link
            href="/newsletter"
            className="px-5 py-2.5 rounded-lg border border-[#1a1a1a] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:bg-[#1a1a1a] hover:text-white transition-colors"
          >
            Newsletter
          </Link>
          <Link
            href="/challenge"
            className="px-5 py-2.5 rounded-lg bg-[#f5c518] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:brightness-95 transition-all"
          >
            7-Tage-Challenge
          </Link>
        </div>

      </div>
    </header>
  );
}