// Nav.jsx — Barre de navigation, données depuis SITE_CONTENT + menu burger mobile

function Nav({ page, setPage, dark, dense }) {
  const nav = (window.SITE_CONTENT && window.SITE_CONTENT.nav) || {};
  const links = nav.links || [
    { key: 'home',       label: 'Accueil' },
    { key: 'services',   label: 'Services' },
    { key: 'biens',      label: 'Nos biens' },
    { key: 'estimation', label: 'Estimer' },
    { key: 'agence',     label: "L'agence" },
    { key: 'contact',    label: 'Contact' },
  ];
  const brand    = nav.brand    || 'NOSTERRA';
  const cta      = nav.cta      || 'Rencontrons-nous';

  const [open, setOpen] = React.useState(false);

  // Fermer le menu au changement de page ou au redimensionnement desktop
  React.useEffect(() => { setOpen(false); }, [page]);
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 1024) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  // Bloquer le scroll body quand menu ouvert
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go  = (k) => { setOpen(false); setPage(k); };
  const pad = dense ? '12px 32px' : '18px 48px';

  return (
    <nav className={'ntr-nav' + (open ? ' is-open' : '')} style={{ padding: pad }}>
      <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} className="ntr-brand">
        <span className="ntr-brand-mark">
          <img src={window.ntrAsset && window.ntrAsset('logoCircle')} alt={brand} />
        </span>
        <span className="ntr-brand-word">{brand}</span>
      </a>

      <div className="ntr-nav-links">
        {links.map(({ key, label }) => (
          <a key={key} href="#"
             onClick={(e) => { e.preventDefault(); go(key); }}
             className={'ntr-nav-link' + (page === key ? ' is-active' : '')}>
            {label}
          </a>
        ))}
      </div>

      <button className="ntr-nav-cta" onClick={() => go('contact')}>
        {cta}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      </button>

      {/* Burger mobile */}
      <button
        className="ntr-nav-burger"
        aria-label={open ? 'Fermer le menu' : 'Ouvrir le menu'}
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}>
        <span/><span/><span/>
      </button>

      {/* Panel mobile */}
      <div className="ntr-nav-mobile-panel" role="menu" aria-hidden={!open}>
        {links.map(({ key, label }) => (
          <a key={key} href="#"
             onClick={(e) => { e.preventDefault(); go(key); }}
             className={'ntr-nav-mobile-link' + (page === key ? ' is-active' : '')}>
            {label}
          </a>
        ))}
        <button className="ntr-nav-mobile-cta" onClick={() => go('contact')}>
          {cta}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M5 12h14M13 6l6 6-6 6"/>
          </svg>
        </button>
      </div>
    </nav>
  );
}

window.Nav = Nav;