function SubNav({ lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const currentPath = window.location.pathname.split('/').pop() || 'index.html';

  const labels = {
    jp: { service: '事業内容', works: '実績', team: 'メンバー', about: 'digitiveとは', news: 'お知らせ', recruit: '採用', contact: 'お問合せ' },
    en: { service: 'Service', works: 'Works', team: 'Team', about: 'About', news: 'News', recruit: 'Careers', contact: 'Contact' }
  };
  const t = labels[lang] || labels.jp;

  const navLinks = [
    { href: 'Service.html', key: 'service', label: t.service },
    { href: 'Works.html',   key: 'works',   label: t.works },
    { href: 'Team.html',    key: 'team',     label: t.team },
    { href: 'About.html',   key: 'about',    label: t.about },
    { href: 'News.html',    key: 'news',     label: t.news },
    { href: 'Recruit.html', key: 'recruit',  label: t.recruit },
  ];

  return (
    <>
      <nav className={'subnav' + (scrolled ? ' subnav--scrolled' : '')}>
        <div className="subnav__inner">
          <a className="subnav__logo" href="index.html">
            <img src="uploads/digitive!_241031.png" alt="digitive!" />
          </a>
          <div className="subnav__links">
            {navLinks.map(l => (
              <a key={l.key} href={l.href}
                className={'subnav__link' + (currentPath === l.href ? ' active' : '')}>
                {l.label}
              </a>
            ))}
          </div>
          <div className="subnav__actions">
            <div className="subnav__lang" onClick={() => setLang(lang === 'jp' ? 'en' : 'jp')}>
              <span className={'lo' + (lang === 'jp' ? ' active' : '')}>JP</span>
              <span className="ls">/</span>
              <span className={'lo' + (lang === 'en' ? ' active' : '')}>EN</span>
            </div>
            <a className="subnav__cta" href="Contact.html">
              {t.contact}
            </a>
          </div>
          <button
            className={'nav__hamburger' + (mobileOpen ? ' open' : '')}
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label="メニュー"
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      {mobileOpen && (
        <div className="mobile-menu" onClick={() => setMobileOpen(false)}>
          <div className="mobile-menu__panel" onClick={e => e.stopPropagation()}>
            <button className="mobile-menu__close" onClick={() => setMobileOpen(false)}>✕</button>
            {navLinks.map((l, i) => (
              <a key={i} className="mobile-menu__link" href={l.href}
                onClick={() => setMobileOpen(false)}
                {...(l.ext ? { target: '_blank', rel: 'noreferrer' } : {})}>
                {l.label}
              </a>
            ))}
            <a className="mobile-menu__cta-btn" href="Contact.html">
              {t.contact}
            </a>
            <div className="mobile-menu__lang" onClick={() => setLang(lang === 'jp' ? 'en' : 'jp')}>
              <span style={{ color: lang === 'jp' ? 'var(--color-primary)' : undefined }}>JP</span>
              <span style={{ margin: '0 8px', opacity: 0.3 }}>/</span>
              <span style={{ color: lang === 'en' ? 'var(--color-primary)' : undefined }}>EN</span>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
window.SubNav = SubNav;