// Nav — sticky top nav. Tabs: Lectures Cosmiques | À propos | FAQ | CTA Réserver
function Nav({ active, onTab, onReserve }) {
  const tabs = [
    { label: 'Lectures Cosmiques', id: 'lecture' },
    { label: 'À propos', id: 'about' },
    { label: 'FAQ', id: 'faq' },
  ];
  const goTo = (tab) => {
    if (onTab) onTab(tab.label);
    const el = document.getElementById(tab.id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };
  return (
    <header className="mi-nav">
      <a href="#" className="mi-nav__brand">
        <img src="assets/logo-mz.png" alt="" />
        <div>
          <div>Mélanie Inzirillo</div>
          <small>Melsunshine</small>
        </div>
      </a>
      <nav className="mi-nav__tabs">
        {tabs.map(t => (
          <button
            key={t.id}
            className={`mi-nav__tab ${active === t.label ? 'is-active' : ''}`}
            onClick={() => goTo(t)}
          >{t.label}</button>
        ))}
      </nav>
      <button className="mi-nav__cta" onClick={onReserve}>Réserver ma lecture</button>
    </header>
  );
}

Object.assign(window, { Nav });