/* Top navigation — minimal, sticky, premium */
function Nav() {
  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 navStyle = {
    position: 'sticky', top: 0, zIndex: 50,
    display: 'flex', alignItems: 'center', gap: 24,
    padding: '14px 28px',
    background: scrolled ? 'rgba(255,255,255,0.92)' : 'white',
    backdropFilter: scrolled ? 'saturate(180%) blur(8px)' : 'none',
    borderBottom: '1px solid ' + (scrolled ? 'var(--border)' : 'transparent'),
    transition: 'border-color 160ms ease, background 160ms ease',
    whiteSpace: 'nowrap',
  };
  const linksStyle = {
    display: 'flex', gap: 22, listStyle: 'none',
    margin: 0, padding: 0,
    fontSize: 14, fontWeight: 600,
    flex: 1,
  };

  return (
    <nav style={navStyle} data-screen-label="Navigation">
      <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 0, flexShrink: 0 }}>
        <img src="brand/pmhoa-logo-dark.png" alt="PMHOA Pro" style={{ height: 26 }} />
      </a>
      <ul style={linksStyle} className="nav-links">
        <li><a href="#market" style={navLink}>Opportunity</a></li>
        <li><a href="#routing" style={navLink}>Our services</a></li>
        <li><a href="#service" style={navLink}>How it works</a></li>
        <li><a href="#proof" style={navLink}>Clients</a></li>
        <li><a href="#faq" style={navLink}>FAQ</a></li>
      </ul>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexShrink: 0 }}>
        <a href="tel:+13072281890" className="nav-phone" style={{ fontSize: 13, fontWeight: 600, textDecoration: 'none', color: 'var(--fg-muted)' }}>(307) 228-1890</a>
        <a
          href="#hero-cta"
          className="btn btn--primary"
          onClick={(e) => {
            e.preventDefault();
            window.dispatchEvent(new CustomEvent('pmhoa:open-zip-modal', { detail: { source: 'nav' } }));
          }}
          data-cta-source="nav"
        >Check Your Territory</a>
      </div>
    </nav>
  );
}

const navLink = {
  color: 'var(--fg)',
  textDecoration: 'none',
};

window.Nav = Nav;