// Nav.jsx — sticky translucent top navigation (multi-page; 5 links + Become a Member)
const navLinks = [
  { label: 'What is Direct Primary Care', href: 'what-is-dpc.html', key: 'dpc' },
  { label: 'Services', href: 'services.html', key: 'services' },
  { label: 'Membership', href: 'membership.html', key: 'membership' },
  { label: 'About', href: 'about.html', key: 'about' },
  { label: 'FAQ', href: 'faq.html', key: 'faq' },
];

function Nav({ active, portal = 'https://peacefulheartsdpc.atlas.md' }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', f); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <header className={'ph-nav' + (scrolled ? ' is-scrolled' : '')}>
      <div className="ph-nav-utility">
        <div className="ph-nav-utility-inner">
          <span className="ph-nav-util-loc"><Icon name="pin" size={15} /> Orlando, Florida</span>
          <a href="contact.html"><Icon name="mail" size={15} /> Contact</a>
          <a href={portal} target="_blank" rel="noopener"><Icon name="user" size={15} /> Patient portal</a>
        </div>
      </div>
      <div className="ph-nav-inner">
        <a href="index.html" className="ph-nav-logo" aria-label="Peaceful Hearts, home">
          <img src="assets/peaceful-hearts-logo-trim.png" alt="Peaceful Hearts Direct Primary Care" />
        </a>
        <nav className="ph-nav-links" aria-label="Primary">
          {navLinks.map(l => (
            <a key={l.key} href={l.href} className={active === l.key ? 'is-active' : ''}
              aria-current={active === l.key ? 'page' : undefined}>{l.label}</a>
          ))}
        </nav>
        <div className="ph-nav-cta">
          <a className="btn btn-primary btn-sm" href="enroll.html">Become a member</a>
        </div>
        <button className="ph-nav-burger" onClick={() => setOpen(o => !o)}
          aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}>
          <Icon name={open ? 'x' : 'menu'} size={26} color="#1E364E" />
        </button>
      </div>
      {open && (
        <div className="ph-nav-mobile">
          {navLinks.map(l => (
            <a key={l.key} href={l.href} className={active === l.key ? 'is-active' : ''}>{l.label}</a>
          ))}
          <a href="contact.html">Contact</a>
          <a className="btn btn-primary" href="enroll.html">Become a member</a>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { Nav });