// Top nav — editorial sticky header with live ticker strip + numbered links.
// Two rows: thin live status strip (collapses on scroll) and main nav row.

const NAV_LINKS = [
  { id: 'agents',         label: 'Agents IA',     href: 'agents.html' },
  { id: 'developpement',  label: 'Développement web', href: 'developpement.html' },
  { id: 'projets',        label: 'Projets',       href: 'projets.html' },
  { id: 'a-propos',       label: 'À propos',      href: 'a-propos.html' },
];

const TICKER_MSGS = [
  ['Sofia',  'réservation confirmée en 4 s · Surf School Marseille'],
  ['Anaïs', 'rappel post-soin envoyé · Clinique Aurore'],
  ['Léo',   'lead qualifié · devis envoyé · Cabinet Vidal'],
  ['Iris',   'séquence prospect J+3 · 12 réponses'],
  ['Hugo',   'ticket résolu en 45 s · CheckEasy'],
];

const Nav = ({ activePage = null }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [tickIdx, setTickIdx] = React.useState(0);
  const [clock, setClock] = React.useState(() => new Date());

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const id = setInterval(() => setTickIdx(i => (i + 1) % TICKER_MSGS.length), 4200);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    const id = setInterval(() => setClock(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const onLogo = (e) => {
    e.preventDefault();
    if (activePage === 'home') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      window.location.href = 'index.html';
    }
    setMenuOpen(false);
  };

  const onLink = (href) => () => {
    window.location.href = href;
    setMenuOpen(false);
  };

  const onContact = () => {
    if (activePage === 'home') {
      const el = document.getElementById('conv');
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top, behavior: 'smooth' });
        setMenuOpen(false);
        return;
      }
    }
    window.location.href = 'contact.html';
  };

  const pad = (n) => String(n).padStart(2, '0');
  const timeStr = `${pad(clock.getHours())}:${pad(clock.getMinutes())}:${pad(clock.getSeconds())}`;
  const [tickName, tickMsg] = TICKER_MSGS[tickIdx];

  return (
    <>
      <header className={`bnav ${scrolled ? 'is-scrolled' : ''}`} role="banner">

        {/* MAIN ROW */}
        <div className="bnav__inner">

          <a href="index.html" className="bnav__logo" onClick={onLogo} aria-label="La Traverse, accueil">
            <Logo variant="with-label" height={28} />
          </a>

          <nav className="bnav__links" aria-label="Navigation principale">
            {NAV_LINKS.map((l) => (
              <a
                key={l.id}
                href={l.href}
                className={`bnav__link ${activePage === l.id ? 'is-active' : ''}`}
              >{l.label}</a>
            ))}
          </nav>

          <div className="bnav__actions">
            <button type="button" className="bnav__cta" onClick={onContact}>
              <span>Parlons-en</span>
              <svg className="bnav__cta-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </button>
            <button
              type="button"
              className={`bnav__burger ${menuOpen ? 'is-open' : ''}`}
              aria-label="Menu"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(v => !v)}
            >
              <span></span><span></span><span></span>
            </button>
          </div>

        </div>
      </header>

      <div className={`bnav-drawer ${menuOpen ? 'is-open' : ''}`} aria-hidden={!menuOpen}>
        <nav className="bnav-drawer__nav">
          {NAV_LINKS.map((l) => (
            <a
              key={l.id}
              href={l.href}
              className={`bnav-drawer__link ${activePage === l.id ? 'is-active' : ''}`}
              onClick={onLink(l.href)}
            >{l.label}</a>
          ))}
          <button type="button" className="bnav-drawer__cta" onClick={onContact}>
            Parlons-en →
          </button>
        </nav>
      </div>
    </>
  );
};

window.Nav = Nav;