function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
      transition: 'border-color 200ms cubic-bezier(.2,.8,.2,1)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#" style={{display: 'flex', alignItems: 'center'}}>
          <img src="assets/logo-effizienzpioniere-rgb.png" alt="Effizienzpioniere" style={{height: 36, width: 'auto'}} />
        </a>
        <nav style={{display: 'flex', gap: 28, alignItems: 'center', fontSize: 14, fontWeight: 500}}>
          <a href="#problem" style={{color: 'var(--fg-1)', textDecoration: 'none'}}>Herausforderung</a>
          <a href="#methodik" style={{color: 'var(--fg-1)', textDecoration: 'none'}}>Methodik</a>
          <a href="#leistungen" style={{color: 'var(--fg-1)', textDecoration: 'none'}}>Leistungen</a>
          <a href="#referenzen" style={{color: 'var(--fg-1)', textDecoration: 'none'}}>Referenzen</a>
          <a href="#kontakt" className="btn-primary" style={{textDecoration: 'none'}}>Ersteinschätzung anfragen</a>
        </nav>
      </div>
    </header>
  );
}
window.Header = Header;