function StickyHeader() {
  const [visible, setVisible] = React.useState(false);

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

  function toSubscribe(e) {
    e.preventDefault();
    const el = document.getElementById('subscribe');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    if (typeof window.va === 'function') window.va('event', { name: 'sticky_cta_click' });
    if (window.umami) { try { window.umami.track('sticky_cta_click'); } catch (_) {} }
  }

  return (
    <header className={`sticky-header${visible ? ' is-visible' : ''}`} aria-hidden={!visible}>
      <div className="sticky-header-inner">
        <a className="sticky-header-brand" href="https://www.autopreneur.de">Der Autopreneur</a>
        <a className="btn btn-primary sticky-header-cta" href="#subscribe" onClick={toSubscribe}>
          Newsletter abonnieren
        </a>
      </div>
    </header>
  );
}
window.StickyHeader = StickyHeader;