// Nav.jsx — top navigation with EN/FR toggle
const Nav = () => {
  const { lang, setLang } = useLang();
  const t = useT();
  return (
    <header className="bp-nav">
      <a className="bp-nav__brand" href="#top" aria-label="beep.">
        <span className="bp-wm">beep<span className="bp-wm__dot"></span></span>
      </a>
      <nav className="bp-nav__links">
        <a href="#services">{t.nav.services}</a>
        <a href="#about">{t.nav.about}</a>
        <a href="#how">{t.nav.how}</a>
        <a href="#contact">{t.nav.contact}</a>
      </nav>
      <div className="bp-nav__right">
        <div className="bp-lang" role="group" aria-label="Language">
          <button
            type="button"
            className={"bp-lang__opt " + (lang === 'en' ? 'is-active' : '')}
            onClick={() => setLang('en')}
            aria-pressed={lang === 'en'}
          >EN</button>
          <span className="bp-lang__sep">/</span>
          <button
            type="button"
            className={"bp-lang__opt " + (lang === 'fr' ? 'is-active' : '')}
            onClick={() => setLang('fr')}
            aria-pressed={lang === 'fr'}
          >FR</button>
        </div>
        <a className="bp-btn bp-btn--primary bp-btn--sm" href="#contact">{t.nav.book} <span>→</span></a>
      </div>
    </header>
  );
};
window.Nav = Nav;