// Nav.jsx — bold uppercase nav
function Nav({ active }) {
  const links = [
    { id: 'services', label: 'Services' },
    { id: 'why', label: 'Why Myra' },
    { id: 'compare', label: 'Compare' },
    { id: 'faq', label: 'FAQ' },
  ];
  return (
    <nav className="w-nav">
      <a href="#top" className="w-nav__logo" aria-label="Myra"><img src="../../assets/logo-wordmark-wero.svg" alt="Myra" /></a>
      <ul className="w-nav__links">
        {links.map(l => (
          <li key={l.id}><a href={`#${l.id}`} className={active === l.id ? 'is-active' : ''}>{l.label}</a></li>
        ))}
      </ul>
      <a href="#contact" className="w-btn w-btn--dark">Book a call <span className="w-btn__arrow" aria-hidden>→</span></a>
    </nav>
  );
}
Object.assign(window, { Nav });