window.NavBar = function NavBar(props) {
  const { links, scrolled, currentPath } = props;
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    if (scrolled && menuOpen) {
      setMenuOpen(false);
    }
  }, [menuOpen, scrolled]);

  const toggleMenu = function toggleMenu() {
    setMenuOpen(function nextMenuState(previous) {
      return !previous;
    });
  };

  return (
    <header className={`site-header${scrolled ? " is-scrolled" : ""}`}>
      <div className="container">
        <div className="header-row">
          <a className="brand-mark" href="/" aria-label="Hernández & Asociados">
            <img src="/assets/images/logo.png" alt="Hernández & Asociados" />
          </a>

          <div className="header-right">
            <nav className="desktop-nav" aria-label="Principal">
              <ul>
                {links.map(function renderLink(link) {
                  return (
                    <li key={link.href}>
                      <a
                        className={currentPath === link.href ? "is-active" : ""}
                        href={link.href}
                      >
                        {link.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </nav>

            <a
              className="button-primary"
              href="https://wa.me/+573022943899"
              target="_blank"
              rel="noreferrer"
            >
              Contáctanos
            </a>

            <div className="social-links" aria-label="Redes sociales">
              <a className="social-icon is-facebook" href="#" aria-label="Facebook">
                <svg viewBox="0 0 448 512" fill="currentColor" aria-hidden="true">
                  <path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80A48 48 0 0 0 400 32Z" />
                </svg>
              </a>
              <a className="social-icon is-instagram" href="#" aria-label="Instagram">
                <svg viewBox="0 0 448 512" fill="currentColor" aria-hidden="true">
                  <path d="M224 202.66A53.34 53.34 0 1 0 277.36 256 53.38 53.38 0 0 0 224 202.66Zm124.71-41a54 54 0 0 0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31 6.43a54 54 0 0 0-30.41 30.41c-8.28 21-6.43 71.05-6.43 94.33S91 329.26 99.32 350.33a54 54 0 0 0 30.41 30.41c21 8.29 71 6.43 94.31 6.43s73.24 1.93 94.3-6.43a54 54 0 0 0 30.41-30.41c8.35-21 6.43-71.05 6.43-94.33S357.1 182.74 348.75 161.67ZM224 338a82 82 0 1 1 82-82A81.9 81.9 0 0 1 224 338Zm85.38-148.3a19.14 19.14 0 1 1 19.13-19.14 19.1 19.1 0 0 1-19.13 19.14ZM400 32H48A48 48 0 0 0 0 80V432a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V80A48 48 0 0 0 400 32Zm-17.12 290c-1.29 25.63-7.14 48.34-25.85 67s-41.4 24.63-67 25.85c-26.41 1.49-105.59 1.49-132 0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61 0-132 1.29-25.63 7.07-48.34 25.85-67s41.47-24.56 67-25.78c26.41-1.49 105.59-1.49 132 0 25.63 1.29 48.33 7.15 67 25.85s24.63 41.42 25.85 67.05c1.49 26.32 1.49 105.44 0 131.88Z" />
                </svg>
              </a>
            </div>

            <button
              className="mobile-toggle"
              type="button"
              aria-expanded={menuOpen}
              aria-label="Abrir menú"
              onClick={toggleMenu}
            >
              {menuOpen ? (
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.29-6.3Z" />
                </svg>
              ) : (
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" />
                </svg>
              )}
            </button>
          </div>
        </div>

        {menuOpen ? (
          <nav className="mobile-menu" aria-label="Móvil">
            <ul>
              {links.map(function renderMobileLink(link) {
                return (
                  <li key={link.href}>
                    <a
                      className={currentPath === link.href ? "is-active" : ""}
                      href={link.href}
                      onClick={toggleMenu}
                    >
                      {link.label}
                    </a>
                  </li>
                );
              })}
              <li>
                <a
                  className="button-primary"
                  href="https://wa.me/+573022943899"
                  target="_blank"
                  rel="noreferrer"
                >
                  Contáctanos
                </a>
              </li>
            </ul>
          </nav>
        ) : null}
      </div>
    </header>
  );
};