// Top navigation — Contact unified anchor + active state follows scroll
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [activeId, setActiveId] = React.useState('heritage');

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const sectionIds = ['heritage', 'capabilities', 'network', 'partners', 'compliance', 'contact'];
    const sections = sectionIds
      .map((id) => document.getElementById(id))
      .filter(Boolean);
    if (sections.length === 0) return;

    // Trigger when section's top crosses 30% from viewport top
    const io = new IntersectionObserver((entries) => {
      // Prefer the entry closest to top that's intersecting
      const visible = entries
        .filter((e) => e.isIntersecting)
        .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible.length > 0) {
        setActiveId(visible[0].target.id);
      }
    }, {
      rootMargin: '-20% 0px -60% 0px',
      threshold: 0,
    });

    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  const links = [
    { label: 'Heritage',     href: '#heritage',     id: 'heritage' },
    { label: 'Capabilities', href: '#capabilities', id: 'capabilities' },
    { label: 'Network',      href: '#network',      id: 'network' },
    { label: 'Partners',     href: '#partners',     id: 'partners' },
    { label: 'Compliance',   href: '#compliance',   id: 'compliance' },
    { label: 'Contact',      href: '#contact',      id: 'contact' },
  ];

  return (
    <nav className={`gb-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="gb-nav__inner">
        <a className="gb-nav__brand" href="#top">
          <img src="assets/logo-wordmark.png?v=6" alt="Goodbrand Group" className="gb-nav__logo" style={{height:56,width:'auto',display:'block',marginTop:29}}/>
        </a>
        <div className="gb-nav__links">
          {links.map((l) => (
            <a
              key={l.label}
              href={l.href}
              className={`gb-nav__link ${activeId === l.id ? 'is-active' : ''}`}
            >
              {l.label}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
};
window.Nav = Nav;