// Milfers · Header · editorial sticky + menú móvil + selector de idioma (i18n)
const MF_LANGS = [
  { code: 'es', label: 'ES', full: 'Español' },
  { code: 'va', label: 'VAL', full: 'Valencià' },
  { code: 'en', label: 'EN', full: 'English' }
];

function mfNav() {
  return [
    { href: '#inicio', label: window.t('nav.inicio'), active: true },
    { href: '#marca', label: window.t('nav.marca') },
    { href: '#maduracion', label: window.t('nav.maduracion') },
    { href: '#resenas', label: window.t('nav.resenas') },
    { href: '#reserva', label: window.t('nav.reserva') }
  ];
}

// Jersey M54 (display) no tiene glifos acentuados — limpia tildes/ñ solo donde se usa esa fuente (menu móvil)
function noTilde(s) { return (s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, ''); }

function LangSwitch({ variant }) {
  const current = window.MF_LANG;
  return (
    <div className={'mf-lang' + (variant ? ' mf-lang--' + variant : '')} role="group" aria-label={window.t('header.lang')}>
      {MF_LANGS.map((l, i) => (
        <React.Fragment key={l.code}>
          {i > 0 && <span className="mf-lang-sep" aria-hidden="true">·</span>}
          <button
            type="button"
            className={'mf-lang-opt' + (current === l.code ? ' is-active' : '')}
            aria-pressed={current === l.code}
            title={l.full}
            onClick={() => { if (current !== l.code) window.MF_setLang(l.code); }}
          >
            {variant === 'stack' ? l.full : l.label}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const NAV = mfNav();

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

  React.useEffect(() => {
    document.body.classList.toggle('mf-no-scroll', menuOpen);
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  return (
    <>
    <header className="mf-header" data-scrolled={scrolled}>
      <div className="mf-header-top">
        <span className="mf-top-l">
          <span className="mf-top-pulse" aria-hidden="true"></span>
          {window.t('topbar.tables')}
        </span>
        <span className="mf-top-c">{window.t('topbar.dry')}</span>
      </div>
      <div className="mf-header-main">
        <a href="#" className="mf-logo" aria-label="Milfers Burgers">
          <span className="mf-logo-tagline" aria-hidden="true">burgers</span>
          <img src="assets/wordmark-milfers.svg" alt="Milfers" />
        </a>
        <nav className="mf-nav" aria-label="principal">
          {NAV.map((n) => (
            <a key={n.href} className={'mf-nav-link' + (n.active ? ' is-active' : '')} href={n.href}>{n.label}</a>
          ))}
          <a className="mf-nav-link mf-nav-cta" href="#" data-open-carta>{window.t('nav.cartaArrow')}</a>
        </nav>
        <div className="mf-header-actions">
          <LangSwitch />
          <span className="mf-actions-rule" aria-hidden="true"></span>
          <button className="mf-header-cta" data-open-reserva type="button">
            <i className="bg bg--burger mf-cta-ico" aria-hidden="true"></i>
            {window.t('header.reserve')} <span className="arr">→</span>
          </button>
        </div>
        <button
          className={'mf-burger' + (menuOpen ? ' is-open' : '')}
          aria-label="Menú"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((v) => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>

    {/* ▸ MENÚ MÓVIL — fuera del header para evitar que backdrop-filter rompa position:fixed */}
    <div className={'mf-mobile' + (menuOpen ? ' is-open' : '')} aria-hidden={!menuOpen}>
      <div className="mf-mobile-backdrop" onClick={() => setMenuOpen(false)}></div>
      <div className="mf-mobile-panel" role="dialog" aria-modal="true" aria-label="Menú principal">
        <nav className="mf-mobile-nav" aria-label="móvil">
          {NAV.map((n) => (
            <a key={n.href} className="mf-mobile-link" href={n.href} onClick={() => setMenuOpen(false)}>{noTilde(n.label)}</a>
          ))}
          <a className="mf-mobile-link" href="#" data-open-carta onClick={() => setMenuOpen(false)}>{noTilde(window.t('nav.carta'))}</a>
        </nav>
        <div className="mf-mobile-foot">
          <span className="mf-mobile-foot-label">{window.t('header.lang')}</span>
          <LangSwitch variant="stack" />
          <button
            className="mf-mobile-cta"
            type="button"
            data-open-reserva
            onClick={() => setMenuOpen(false)}
          >
            {window.t('header.reserveTable')} <span className="arr">→</span>
          </button>
        </div>
      </div>
    </div>
    </>
  );
}

window.Header = Header;