// Header — sticky, тонкий, на blur-фоне.
function Header({ onNav, onOpenMenu }) {
  const links = [
  ["projects", "Проекты"],
  ["manifest", "Манифест"],
  ["media", "Для медиа"],
  ["contact", "Контакт"]];

  return (
    <header className="header" role="banner">
      <a href="#top" className="header__logo"
      onClick={(e) => {e.preventDefault();onNav("top");}}
      aria-label="РАЙТ — на главную">
        <img src="assets/logo-rayt-white.webp" alt="РАЙТ" width="160" height="116" decoding="async" fetchpriority="high" />
      </a>

      <nav className="header__nav" aria-label="Основная навигация">
        {links.map(([id, label], i) =>
        <React.Fragment key={id}>
            {i > 0 && <span className="header__dot" aria-hidden="true">·</span>}
            <a href={"#" + id}
          onClick={(e) => {e.preventDefault();onNav(id);}}>{label}</a>
          </React.Fragment>
        )}
      </nav>

      <div className="header__social">
        <a className="header__icon"
        href="https://t.me/romarayt"
        target="_blank" rel="noopener noreferrer"
        aria-label="Telegram">
          <Icon name="telegram" size={26} strokeWidth="2.25" />
        </a>
        <a className="header__icon"
        href="https://youtube.com/@romarayt"
        target="_blank" rel="noopener noreferrer"
        aria-label="YouTube">
          <Icon name="youtube" size={28} strokeWidth="2.25" />
        </a>
      </div>

      <button className="header__burger"
      aria-label="Открыть меню"
      onClick={onOpenMenu}>
        <Icon name="menu" size={24} />
      </button>
    </header>);

}

window.Header = Header;