/* Top navigation */

// function Nav({ route, setRoute }) {
//   const activeRoute = route === 'service-detail' ? 'services' : route === 'case-detail' ? 'cases' : route === 'article-detail' ? 'articles' : route;
//   const items = [
//     { id: 'about', label: 'О специалисте' },
//     { id: 'services', label: 'Услуги' },
//     { id: 'cases', label: 'Кейсы' },
//     { id: 'articles', label: 'Статьи' },
//     { id: 'prices', label: 'Цены' },
//     { id: 'platforms', label: 'Где заказать' },
//     { id: 'contact', label: 'Контакты' },
//   ];

//   const go = (id) => (e) => {
//     e.preventDefault();
//     setRoute(id);
//     window.scrollTo({ top: 0, behavior: 'instant' });
//   };

//   return (
//     <header className="nav">
//       <div className="container nav-inner">
//         <a href="#" onClick={go('home')} className="brand">
//           <span className="brand-mark">W</span>
//           <span>
//             <span className="brand-name">Winet Lab</span>
//             <span className="brand-domain"> · app.winetlab.site</span>
//           </span>
//         </a>

//         <nav>
//           <ul className="nav-links">
//             {items.map(it => (
//               <li key={it.id}>
//                 <a
//                   href="#"
//                   className={activeRoute === it.id ? 'active' : ''}
//                   onClick={go(it.id)}
//                 >
//                   {it.label}
//                 </a>
//               </li>
//             ))}
//           </ul>
//         </nav>

//         <div className="status-dot">принимаю задачи</div>

//         <a href="#" className="nav-cta" onClick={go('contact')}>
//           Оставить заявку →
//         </a>
//       </div>
//     </header>
//   );
// }

function Nav({ route, setRoute }) {
  const [open, setOpen] = React.useState(false);

  const activeRoute =
    route === 'service-detail' ? 'services' :
    route === 'case-detail' ? 'cases' :
    route === 'article-detail' ? 'articles' :
    route;

  const items = [
    { id: 'about', label: 'О специалисте' },
    { id: 'services', label: 'Услуги' },
    { id: 'cases', label: 'Кейсы' },
    { id: 'articles', label: 'Статьи' },
    { id: 'prices', label: 'Цены' },
    { id: 'platforms', label: 'Где заказать' },
    { id: 'contact', label: 'Контакты' },
  ];

  const go = (id) => (e) => {
    e.preventDefault();
    setRoute(id);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  return (
    <header className={`nav ${open ? 'is-open' : ''}`}>
      <div className="container nav-inner">
        <BrandLink href={routeHref('home')} onClick={go('home')} />

        <nav className="nav-menu">
          <ul className="nav-links">
            {items.map(it => (
              <li key={it.id}>
                <a
                  href={routeHref(it.id)}
                  className={activeRoute === it.id ? 'active' : ''}
                  onClick={go(it.id)}
                >
                  {it.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        <div className="status-dot">принимаю задачи</div>

        <a href={routeHref('contact')} className="nav-cta" onClick={go('contact')}>
          Оставить заявку →
        </a>

        <button
          type="button"
          className="theme-toggle"
          data-theme-toggle
          aria-label="Переключить тему"
          aria-pressed="false"
        >
          <span className="theme-toggle-track" aria-hidden="true">
            <span className="theme-toggle-dot" />
          </span>
        </button>

        <button
          type="button"
          className="nav-burger"
          onClick={() => setOpen(v => !v)}
          aria-label={open ? 'Закрыть меню' : 'Открыть меню'}
          aria-expanded={open}
        >
          <span />
          <span />
          <span />
        </button>
      </div>
    </header>
  );
}

window.Nav = Nav;