function Header({ active = 'home' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const { lang, setLang, t } = useI18n();

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

  React.useEffect(() => {
    document.body.classList.toggle('menu-open', menuOpen);
    return () => document.body.classList.remove('menu-open');
  }, [menuOpen]);

  const toggle = () => setLang(lang === 'ja' ? 'en' : 'ja');
  const close = () => setMenuOpen(false);

  const navItems = [
    { href: 'index.html#about',    label: t('nav.about'),    en: 'About',    isActive: active === 'home' },
    { href: 'index.html#business', label: t('nav.business'), en: 'Business', isActive: false },
    { href: 'index.html#culture',  label: t('nav.culture'),  en: 'Culture',  isActive: false },
    { href: 'contact.html',        label: t('nav.contact'),  en: 'Contact',  isActive: active === 'contact' },
  ];

  return (
    <React.Fragment>
      <header className={`site-header ${scrolled ? 'scrolled' : ''}`}>
        <a href="index.html" style={{ display: 'block' }} onClick={close}>
          <FutoLockup />
        </a>
        <nav className="nav-menu">
          {navItems.map(it => (
            <a key={it.href} href={it.href} className={`nav-link ${it.isActive ? 'active' : ''}`}>{it.label}</a>
          ))}
          <button className="lang-toggle" onClick={toggle} aria-label="Switch language">
            <span className={`lang-opt ${lang === 'ja' ? 'on' : ''}`}>JP</span>
            <span className="lang-sep">/</span>
            <span className={`lang-opt ${lang === 'en' ? 'on' : ''}`}>EN</span>
          </button>
          <button
            className={`menu-toggle ${menuOpen ? 'open' : ''}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle menu"
            aria-expanded={menuOpen}
          >
            <span className="bar"></span>
            <span className="bar"></span>
            <span className="bar"></span>
          </button>
        </nav>
      </header>

      <div className={`drawer-backdrop ${menuOpen ? 'open' : ''}`} onClick={close}></div>
      <aside className={`mobile-drawer ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        {navItems.map(it => (
          <a key={it.href} href={it.href} className={it.isActive ? 'active' : ''} onClick={close}>
            <span>{it.label}</span>
            <span className="en">{it.en}</span>
          </a>
        ))}
      </aside>
    </React.Fragment>
  );
}
window.Header = Header;