function StickyBar() {
  const [hasScrolled, setHasScrolled] = React.useState(false);
  const [isCtaVisible, setIsCtaVisible] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setHasScrolled(window.scrollY >= 400);
    };

    handleScroll();
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  React.useEffect(() => {
    const cta = document.getElementById('cta');

    if (!cta) {
      console.warn('StickyBar: #cta not found');
      return;
    }

    if (!('IntersectionObserver' in window)) {
      return;
    }

    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];

      setIsCtaVisible(entry.isIntersecting);
    });

    observer.observe(cta);

    return () => observer.disconnect();
  }, []);

  const handleClick = () => {
    const cta = document.getElementById('cta');

    if (!cta) {
      return;
    }

    cta.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const isVisible = hasScrolled && !isCtaVisible;

  return (
    <div className={'sticky-bar' + (isVisible ? ' sticky-bar--visible' : '')}>
      <div className="sticky-bar__inner">
        <div className="sticky-bar__label">Free PDF · 4 moves · 10 min</div>
        <button type="button" className="sticky-bar__button" onClick={handleClick}>
          Get the Pre-Lift Stack →
        </button>
      </div>
    </div>
  );
}

window.StickyBar = StickyBar;