// jsx/SiteHeader.jsx
function SiteHeader() {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  return (
    <header className="site-header">
      <div
        className="container header-inner"
        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}
      >
        <a className="brand" href="#hero" style={{ fontWeight: 700, textDecoration: "none" }}>
          neuromedic
        </a>

        <nav className="main-nav" aria-label="Главная навигация" style={{ display: "flex", gap: 12 }}>
          <a href="#about">О нас</a>
          <a href="#directions">Наши направления</a>
          <a href="#disclaimer">Отказ от ответственности</a>
          <a href="#contact">Контакты</a>
        </nav>

        <button
          className="menu-toggle"
          aria-expanded={mobileOpen}
          aria-controls="mobile-nav"
          onClick={() => setMobileOpen((v) => !v)}
        >
          Меню
        </button>
      </div>

      <div id="mobile-nav" className="mobile-nav" hidden={!mobileOpen} style={{ padding: 12 }}>
        <a href="#about" onClick={() => setMobileOpen(false)}>О нас</a>
        <a href="#directions" onClick={() => setMobileOpen(false)}>Наши направления</a>
        <a href="#disclaimer" onClick={() => setMobileOpen(false)}>Отказ от ответственности</a>
        <a href="#contact" onClick={() => setMobileOpen(false)}>Контакты</a>
      </div>
    </header>
  );
}