/* global React, Logo, Button, Icon */
const { useState: useStateH, useEffect: useEffectH } = React;

const NAV = [
  { href: '#/', label: 'Home' },
  { href: '#/dienstleistungen', label: 'Dienstleistungen' },
  { href: '#/ueber-uns', label: 'Über uns' },
  { href: '#/jobs', label: 'Jobs' },
  { href: '#/blog', label: 'Blog' },
];

function Header({ route, headerStyle = 'sticky' }) {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const isCurrent = (href) => {
    if (href === '#/') return route === '/' || route === '';
    return route.startsWith(href.replace('#', ''));
  };

  const positionStyle = headerStyle === 'static'
    ? { position: 'relative' }
    : { position: 'sticky', top: 0 };

  const centered = headerStyle === 'centered';

  return (
    <header style={{
      ...positionStyle,
      zIndex: 50,
      borderBottom: scrolled ? '1px solid var(--kmu-line)' : '1px solid transparent',
      background: scrolled ? 'rgba(255,255,255,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      transition: 'all 220ms var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto', height: 92,
        display: 'flex', alignItems: 'center',
        justifyContent: centered ? 'center' : 'space-between',
        padding: '0 28px', gap: 32,
        flexDirection: centered ? 'column' : 'row',
        paddingTop: centered ? 18 : 0,
        paddingBottom: centered ? 18 : 0,
        height: centered ? 'auto' : 92,
      }}>
        <a href="#/" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <Logo height={52} />
        </a>
        <nav style={{ display: 'flex', gap: centered ? 28 : 30, alignItems: 'center' }}>
          {NAV.map((item) => {
            const cur = isCurrent(item.href);
            return (
              <a key={item.href} href={item.href} style={{
                fontFamily: 'var(--font-sans)', fontWeight: cur ? 600 : 500, fontSize: 15,
                color: cur ? 'var(--fg-1)' : 'var(--fg-2)', textDecoration: 'none',
                position: 'relative', padding: '4px 0',
                transition: 'color 150ms',
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--kmu-blue)'}
                onMouseLeave={(e) => e.currentTarget.style.color = cur ? 'var(--fg-1)' : 'var(--fg-2)'}
              >
                {item.label}
                {cur && <span style={{
                  position: 'absolute', left: 0, right: 0, bottom: -2,
                  height: 2, background: 'var(--kmu-blue)', borderRadius: 2,
                }}/>}
              </a>
            );
          })}
          <Button variant="primary" size="sm" as="a" href="#/kontakt" icon="arrow-right">Kontakt</Button>
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;