function Nav({ onReservar }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [lang, setLang] = useLang();
  const t = useT();

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

  const links = [
    { href: '#sobre',    label: t.nav.sobre },
    { href: '#menu',     label: t.nav.menu },
    { href: '#eventos',  label: t.nav.eventos },
    { href: '#visita',   label: t.nav.visita },
  ];

  const wrap = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    padding: scrolled ? '14px 0' : '24px 0',
    background: scrolled ? 'var(--bg)' : 'transparent',
    borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    transition: 'all .3s ease',
  };
  const inner = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32 };
  const logo = { display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none', color: 'var(--ink)' };
  const logoMark = { fontFamily: "'DM Serif Display', serif", fontSize: 28, lineHeight: 1, letterSpacing: '-0.02em' };
  const logoSub = { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' };
  const linkList = { display: 'flex', alignItems: 'center', gap: 36 };
  const linkStyle = { fontFamily: "'Inter', sans-serif", fontSize: 14, color: 'var(--ink)', textDecoration: 'none', position: 'relative', padding: '4px 0' };

  const langBtn = (code, label, active) => ({
    background: 'transparent', border: 'none', cursor: 'pointer',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    color: active ? 'var(--accent)' : 'var(--ink-soft)',
    padding: '4px 2px', textDecoration: active ? 'underline' : 'none',
    textUnderlineOffset: 4,
  });

  const LangToggle = () => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <button onClick={() => setLang('pt')} style={langBtn('pt', 'PT', lang === 'pt')}>PT</button>
      <span style={{ color: 'var(--line)' }}>/</span>
      <button onClick={() => setLang('en')} style={langBtn('en', 'EN', lang === 'en')}>EN</button>
    </span>
  );

  return (
    <header style={wrap}>
      <div className="wrap">
        <div style={inner}>
          <a href="#top" style={logo}>
            <span className="title-font" style={logoMark}>Trem de Minas</span>
          </a>

          <nav style={{ ...linkList, display: 'flex' }} className="nav-links">
            {links.map(l => (
              <a key={l.href} href={l.href} style={linkStyle}>{l.label}</a>
            ))}
          </nav>

          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }} className="nav-right">
            <LangToggle />
            <button className="btn btn-ghost" onClick={onReservar}>
              {t.nav.reservar}
              <span style={{ fontSize: 10 }}>→</span>
            </button>
          </div>

          <button
            className="menu-toggle"
            onClick={() => setOpen(!open)}
            style={{
              display: 'none',
              background: 'transparent', border: '1px solid var(--ink)',
              padding: '10px 14px', cursor: 'pointer',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase',
            }}
          >
            {open ? (lang === 'en' ? 'Close' : 'Fechar') : 'Menu'}
          </button>
        </div>

        {open && (
          <div style={{
            marginTop: 20, paddingTop: 20, borderTop: '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            {links.map(l => (
              <a key={l.href} href={l.href} style={{ ...linkStyle, fontSize: 18 }} onClick={() => setOpen(false)}>{l.label}</a>
            ))}
            <div style={{ paddingTop: 10 }}><LangToggle /></div>
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 820px) {
          .nav-links { display: none !important; }
          .menu-toggle { display: inline-block !important; }
          header .nav-right { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;