// QBClone — Nav
const QbNav = ({ active = 'home' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'product', label: 'Product', href: '#product' },
    { id: 'compare', label: 'Why QBClone', href: '#compare' },
    { id: 'ai',      label: 'AI', href: '#ai' },
    { id: 'migrate', label: 'Migrate', href: '#migrate' },
  ];
  return (
    <nav className="qb-nav" style={ scrolled ? {} : { background: 'transparent', backdropFilter: 'none', borderBottomColor: 'transparent' } }>
      <div className="qb-nav-inner">
        <a href="index.html" className="qb-brand">
          <img src="assets/logo.svg" alt="" className="qb-brand-logo" />
          QbClone<span className="qb-brand-dot">.</span>
        </a>
        <div className="qb-nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href}
               style={ active === l.id ? { color: 'var(--ink-100)' } : {} }>
              {l.label}
            </a>
          ))}
        </div>
        <div className="qb-nav-right">
          <a className="qb-btn qb-btn-darkgreen" href="#migrate">
            Finally You can leave QuickBooks behind <span className="arr">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

Object.assign(window, { QbNav });