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-1 shrink-0">
          <span className="relative inline-block">
            {/* Brush stroke SVG background */}
            <svg
              className="absolute inset-0 w-full h-full"
              viewBox="0 0 180 36"
              preserveAspectRatio="none"
              aria-hidden="true"
            >
              <path
                d="M4,8 C20,2 60,0 100,3 C130,5 165,4 176,9 C180,14 178,22 172,27 C155,34 110,36 70,35 C35,34 5,32 2,26 C-1,20 2,12 4,8 Z"
                fill="#f5c518"
              />
            </svg>
            <span
              className="relative text-[1.5rem] font-bold text-[#1a1a1a] leading-none px-3 py-1.5 block"
              style={{ fontFamily: "var(--font-caveat)" }}
            >
              einfach produktiv
            </span>
          </span>
          <span className="text-[0.5rem] uppercase tracking-[0.12em] text-[#6b6b6b] pl-1">
            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>
  );
}
