const HOME_PAGE = 'index.html';
const APPLY_PAGE = 'Apply.html';

const siteNavItems = [
  { label: 'Home', href: HOME_PAGE },
  { label: 'Services', href: HOME_PAGE + '#framework' },
  { label: 'Results', href: HOME_PAGE + '#where' },
  { label: 'Case Studies', href: 'Case Studies.html' },
  { label: 'Testimonials', href: HOME_PAGE + '#founder' },
  { label: 'Contact Us', href: HOME_PAGE + '#offer' },
];

function SiteNav() {
  const { Button } = window.RankForestDesignSystem_3a10f3;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const logo = scrolled ? 'images/logo-footer.png' : 'images/logo-header.png';
  return (
    <React.Fragment>
      <div className={'ba-navbar' + (scrolled ? ' on' : '')}>
        <nav className="ba-nav" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, fontFamily: 'var(--font-sans)', padding: scrolled ? '12px 20px' : '18px 20px', maxWidth: 1140, margin: '0 auto', transition: 'padding .25s ease' }}>
          <a href={HOME_PAGE} style={{ textDecoration: 'none', flexShrink: 0, minWidth: 0 }}><img src={logo} alt="BoostifyAd" style={{ width: scrolled ? 158 : 185, maxWidth: '42vw', height: 'auto', display: 'block' }} /></a>
          <div className="ba-nav-links" style={{ display: 'flex', background: scrolled ? 'rgba(255,255,255,0.08)' : 'var(--forest-900)', borderRadius: 'var(--radius-pill)', padding: scrolled ? 3 : 4, gap: 2, transition: 'background .25s ease,padding .25s ease' }}>
            {siteNavItems.map((it) => (
              <a key={it.label} href={it.href} style={{
                textDecoration: 'none', cursor: 'pointer', fontWeight: 600, fontSize: scrolled ? 13.5 : 14, padding: scrolled ? '8px 15px' : '9px 16px', borderRadius: 'var(--radius-pill)',
                background: 'transparent', color: 'var(--text-on-dark-secondary)', transition: 'background .18s ease,font-size .25s ease,padding .25s ease',
              }}>{it.label}</a>
            ))}
          </div>
          <a className="ba-nav-cta" href={APPLY_PAGE} style={{ textDecoration: 'none' }}><Button size="sm" style={{ minWidth: scrolled ? 158 : 161, height: scrolled ? 34 : 36, fontSize: scrolled ? 12.5 : undefined, whiteSpace: 'nowrap', flexShrink: 0, transition: 'all .25s ease' }}>Get a Free Audit</Button></a>
          <button className={'ba-burger' + (open ? ' open' : '')} aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
            <span></span><span></span><span></span>
          </button>
        </nav>
      </div>
      <div className={'ba-drawer' + (open ? ' show' : '')} onClick={() => setOpen(false)}>
        <div className="ba-drawer-panel" onClick={(e) => e.stopPropagation()}>
          {siteNavItems.map((it) => (
            <a className="ba-drawer-link" key={it.label} href={it.href} onClick={() => setOpen(false)}>{it.label}</a>
          ))}
          <div className="ba-drawer-cta">
            <a href={APPLY_PAGE} style={{ textDecoration: 'none' }}><Button style={{ width: '100%', justifyContent: 'center' }}>Get a Free Audit</Button></a>
          </div>
        </div>
      </div>
      <div className="ba-nav-spacer" aria-hidden="true"></div>
    </React.Fragment>
  );
}

Object.assign(window, { SiteNav });