function SBNav({ onOpenModal }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={"nav sb-nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-inner">
        <a href="#top" className="wordmark" aria-label="Byrne Real Estate Group ... home">
          <img src="assets/kw-byrne-logo.png" alt="KW Byrne Real Estate Group" />
          <span className="wordmark-divider" />
          <span className="wordmark-tag">The Buyer Guarantee</span>
        </a>
        <div className="nav-links">
          <a href="#problem">The Problem</a>
          <a href="#plan">The Plan</a>
          <a href="#packages">Marketing</a>
          <a href="tel:+15129427880" className="nav-phone" aria-label="Call Byrne Real Estate Group">
            <span className="nav-phone-icon" aria-hidden="true">✆</span>
            512-942-7880
          </a>
          <button className="nav-cta" onClick={onOpenModal}>Book a Buyer Call →</button>
        </div>
      </div>
    </nav>
  );
}
window.SBNav = SBNav;