/* Site header + mobile nav. Props: route, lang, navigate, setLang */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;

  const Header = ({ route, lang, navigate, setLang }) => {
    const t = (v) => window.tr(lang, v);
    const S = window.SITE.ui;
    const [open, setOpen] = useState(false);
    useEffect(() => { setOpen(false); }, [route]);
    useEffect(() => {
      document.body.style.overflow = open ? 'hidden' : '';
      return () => { document.body.style.overflow = ''; };
    }, [open]);

    const items = [
      ['home', S.nav.home], ['system', S.nav.system], ['products', S.nav.products],
      ['projects', S.nav.projects],
    ];

    const Brand = (props) => React.createElement('div', {
      className: 'brand', onClick: () => navigate('home'), ...props,
      role: 'button', 'aria-label': 'EINSTEIN Fugentechnik — Start',
    },
      React.createElement('img', { className: 'brand__logo', src: 'assets/logo-einstein.png', alt: 'EINSTEIN® Fugentechnik' })
    );

    const LangToggle = (extra) => React.createElement('div', { className: 'lang', ...extra },
      ['de', 'en'].map((l) => React.createElement('button', {
        key: l, className: l === lang ? 'is-active' : '', onClick: () => setLang(l),
      }, l.toUpperCase()))
    );

    return React.createElement(React.Fragment, null,
      React.createElement('header', { className: 'site-header' },
        React.createElement('div', { className: 'container site-header__bar' },
          React.createElement(Brand),
          React.createElement('nav', { className: 'nav' },
            items.map(([key, label]) => React.createElement('a', {
              key, className: 'nav__link ' + (route === key ? 'is-active' : ''),
              onClick: () => navigate(key), role: 'button',
            }, t(label)))
          ),
          React.createElement('div', { className: 'header__actions' },
            LangToggle(),
            React.createElement('button', {
              className: 'btn btn--ctaheader btn--sm', onClick: () => navigate('contact'),
            }, React.createElement(Icon, { name: 'map-pin', size: 15 }), React.createElement('span', null, t(S.cta.partner))),
            React.createElement('button', {
              className: 'burger', onClick: () => setOpen((o) => !o), 'aria-label': 'Menü',
            }, React.createElement(Icon, { name: open ? 'x' : 'menu', size: 22 }))
          )
        )
      ),
      React.createElement('div', { className: 'mobile-nav ' + (open ? 'is-open' : '') },
        items.map(([key, label]) => React.createElement('a', {
          key, className: 'mobile-nav__link ' + (route === key ? 'is-active' : ''),
          onClick: () => navigate(key), role: 'button',
        }, t(label))),
        React.createElement('div', { className: 'mobile-nav__actions' },
          React.createElement('button', { className: 'btn btn--primary', onClick: () => navigate('contact') },
            React.createElement(Icon, { name: 'map-pin', size: 16 }), React.createElement('span', null, t(S.cta.partner))),
          LangToggle({ style: { alignSelf: 'flex-start' } })
        )
      )
    );
  };

  window.Header = Header;
})();