/* global React, GamacaPrimitives */
const { BrandWordmark, Btn } = GamacaPrimitives;

function Nav() {
  const links = [
    ["Approche", "#approche"],
    ["Références", "#references"],
    ["Services", "#services"],
    ["L'Expert", "#expert"],
  ];
  return (
    <nav className="bg-white/90 backdrop-blur-md fixed w-full z-50 top-0 border-b border-stone-100 transition-all duration-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          <BrandWordmark href="/" />
          <div className="hidden md:flex items-baseline space-x-8">
            {links.map(([label, href]) => (
              <a key={label} href={href} className="hover:text-stone-900 text-stone-500 px-3 py-2 text-sm font-medium transition-colors">
                {label}
              </a>
            ))}
            <a href="https://www.linkedin.com/in/lucveuillet/" target="_blank" rel="noopener" aria-label="LinkedIn — Luc Veuillet" className="text-stone-500 hover:text-stone-900 transition-colors" title="LinkedIn">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.21 0 22.23 0z"/></svg>
            </a>
            <a href="/en/" hrefLang="en" className="text-stone-500 hover:text-stone-900 transition-colors text-sm font-medium" title="English version">EN</a>
            <Btn href="#contact" variant="nav" size="sm">Contact</Btn>
          </div>
        </div>
      </div>
    </nav>
  );
}

window.GamacaNav = Nav;