/* Scroll selects the matching still image; the image itself only crossfades. */
(() => {
  const images = [...document.querySelectorAll('.future-view-image')];
  const scenes = [...document.querySelectorAll('.outcome-scene')];
  const section = document.querySelector('#outcomes');
  const plans = document.querySelector('#plans');
  if (!images.length || images.length !== scenes.length) return;

  let active = -1;
  let scheduled = false;
  let plansShift = 0;
  const reduce = matchMedia('(prefers-reduced-motion: reduce)');
  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
  function syncPlansRise() {
    if (!section || !plans) return;
    if (reduce.matches) {
      plansShift = 0;
      plans.style.setProperty('--plans-shift', '0px');
      section.style.setProperty('--outcomes-exit', '0');
      return;
    }
    // Measure the untransformed position so the reveal tracks scrolling smoothly.
    const baseTop = plans.getBoundingClientRect().top - plansShift;
    const progress = clamp((innerHeight - baseTop) / (innerHeight * .7), 0, 1);
    const eased = progress * progress * (3 - 2 * progress);
    plansShift = Math.round((1 - eased) * Math.min(innerHeight * .17, 154));
    plans.style.setProperty('--plans-shift', `${plansShift}px`);
    plans.style.setProperty('--plans-heading-shift', `${Math.round((1 - eased) * 24)}px`);
    plans.style.setProperty('--plans-heading-opacity', (0.72 + eased * .28).toFixed(3));
    plans.style.setProperty('--plans-edge-opacity', (progress * .9).toFixed(3));
    plans.style.setProperty('--plans-edge-scale', (.5 + progress * .5).toFixed(3));
    section.style.setProperty('--outcomes-exit', active === images.length - 1 ? (clamp((progress - .18) / .82, 0, 1) * .64).toFixed(3) : '0');
  }
  function syncScene() {
    scheduled = false;
    syncPlansRise();
    const mobile = innerWidth <= 760;
    const anchor = innerHeight * (mobile ? .42 : .55);
    let next = 0;
    let nearest = Infinity;
    scenes.forEach((scene, index) => {
      const bounds = scene.getBoundingClientRect();
      const copy = scene.querySelector('.outcome-scene-copy').getBoundingClientRect();
      const target = mobile ? copy.top + Math.min(copy.height * .3, 80) : bounds.top + bounds.height * .5;
      const distance = Math.abs(target - anchor);
      if (distance < nearest) { nearest = distance; next = index; }
    });
    if (next === active) return;
    active = next;
    section?.classList.toggle('is-last-outcome', active === images.length - 1);
    syncPlansRise();
    images.forEach((image, index) => image.classList.toggle('is-active', index === active));
    scenes.forEach((scene, index) => scene.classList.toggle('is-active', index === active));
  }
  function requestSync() {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(syncScene);
  }
  addEventListener('scroll', requestSync, { passive: true });
  addEventListener('resize', requestSync, { passive: true });
  reduce.addEventListener('change', requestSync);
  requestSync();
})();