document.addEventListener('DOMContentLoaded', () => {
  document
    .querySelectorAll('.hero-down-link')
    .forEach(link => link.addEventListener('click', scrollToNext));
});

function scrollToNext(e) {
  e.preventDefault();
  const refEl = e.currentTarget;
  const isMobile = window.matchMedia('(max-width: 768px)').matches;

  if (isMobile) {
    const target = document.getElementById('hero-text');
    if (!target) {
      console.warn('scrollToNext: no element with id="hero-text"');
      return;
    }
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });

  } else {
    const frames = Array.from(document.querySelectorAll('.frame'));
    const nextFrame = frames.find(frame =>
      refEl.compareDocumentPosition(frame) & Node.DOCUMENT_POSITION_FOLLOWING
    );

    if (!nextFrame) {
      console.warn('scrollToNext: no .frame found after this link');
      return;
    }
    nextFrame.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}