const { useEffect, useRef } = React;

// Betrouwbaar smooth-scrollen naar een sectie (anchor links werken niet altijd in iframe-omgevingen)
function smoothScrollTo(el) {
  const y = el.getBoundingClientRect().top + window.scrollY - 68;
  window.scrollTo({ top: y, behavior: 'smooth' });
}

function scrollToId(e, id) {
  e.preventDefault();
  const el = document.querySelector(id);
  if (!el) return;
  // Voeg een history-stap toe zodat de back-button binnen de site blijft
  try { history.pushState(null, '', id); } catch (_) {}
  smoothScrollTo(el);
}

// Back/forward button: scroll naar de sectie uit de URL i.p.v. de site te verlaten
window.addEventListener('popstate', () => {
  const id = location.hash;
  const el = id && document.querySelector(id);
  if (el) smoothScrollTo(el);
  else window.scrollTo({ top: 0, behavior: 'smooth' });
});

function Nav({ activeSection }) {
  const navRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      if (!navRef.current) return;
      navRef.current.style.borderBottomColor =
        window.scrollY > 60 ? 'rgba(22,20,16,0.18)' : 'rgba(22,20,16,0.12)';
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const sections = ['#services', '#cases', '#pricing', '#contact'];
  const labels   = ['Services',  'Cases',   'Pricing',  'Contact'];

  return (
    <nav ref={navRef}>
      <a href="#" className="logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        Nakamoto <span>IT</span>
      </a>
      <ul>
        {sections.map((href, i) => (
          <li key={href}>
            {href === '#contact'
              ? <a href={href} className="nav-cta" onClick={(e) => scrollToId(e, href)}>Book a Call →</a>
              : <a
                  href={href}
                  onClick={(e) => scrollToId(e, href)}
                  style={{ color: activeSection === href ? 'var(--ink)' : '' }}
                >
                  {labels[i]}
                </a>
            }
          </li>
        ))}
      </ul>
    </nav>
  );
}

Object.assign(window, { Nav, scrollToId });