function Header() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  const closeMenu = () => setIsMenuOpen(false);

  return (
    <header className={`topbar ${isMenuOpen ? "menu-open" : ""}`}>
      <a className="brand" href="#home" aria-label="Agile Developer Studios home" onClick={closeMenu}>
        <img
          src="assets/minimal-logo-text-rounded (black).png"
          alt="Agile Developer Studios"
          className="brand-logo brand-logo-desktop"
        />
        <img
          src="assets/logo_tight_circle.png"
          alt="Agile Developer Studios"
          className="brand-logo brand-logo-mobile"
        />
      </a>

      <button
        className="menu-toggle"
        type="button"
        aria-expanded={isMenuOpen}
        aria-controls="site-nav"
        aria-label="Toggle navigation menu"
        onClick={() => setIsMenuOpen((open) => !open)}
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav id="site-nav" className={`nav ${isMenuOpen ? "nav-open" : ""}`}>
        <a href="#autoslide" onClick={closeMenu}>AutoSlide</a>
        <a href="#capabilities" onClick={closeMenu}>Capabilities</a>
        <a href="#contact" onClick={closeMenu}>Contact</a>
      </nav>
    </header>
  );
}