// parallax.jsx — lightweight scroll-driven parallax utilities.
//
// Why not pure CSS animation-timeline scroll()? It's Chrome-only as of mid-2026
// and the user expects this to work in Safari/Firefox too. So: a single global
// scroll listener feeds rAF-throttled updates to all subscribed callbacks.
// Each callback writes a CSS transform — the browser composites it on the GPU.

(function setupParallaxBus() {
  if (window.__parallaxBus) return;
  const bus = {
    scrollY: 0,
    subs: new Set(),
    raf: 0,
  };
  function tick() {
    bus.scrollY = window.scrollY || window.pageYOffset || 0;
    bus.subs.forEach((fn) => {
      try { fn(bus.scrollY); } catch (e) {}
    });
    bus.raf = 0;
  }
  function onScroll() {
    if (!bus.raf) bus.raf = requestAnimationFrame(tick);
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll, { passive: true });
  // Prime the bus once on first tick so subscribers that mount mid-page get a value.
  requestAnimationFrame(tick);
  window.__parallaxBus = bus;
})();

// useParallax — subscribes to the bus, writes transform to a ref.
//   speed > 0  : element drifts DOWN relative to scroll  (slower-than-scroll)
//   speed < 0  : element drifts UP relative to scroll    (faster-than-scroll feel)
//   speed = 0  : pinned (no parallax)
// `mode = 'fixed'` is for fixed-position layers (translates entirely by scrollY * speed).
// `mode = 'flow'` is for in-flow elements (translates by relative offset from section center).
function useParallax(speed = 0.3, mode = 'fixed') {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches) {
      return undefined;
    }
    const bus = window.__parallaxBus;
    if (!bus) return undefined;
    let parentTop = 0;
    let parentH = 0;
    let viewportH = window.innerHeight;

    const measure = () => {
      const el = ref.current;
      if (!el || !el.parentElement) return;
      const r = el.parentElement.getBoundingClientRect();
      parentTop = r.top + (window.scrollY || 0);
      parentH = r.height;
      viewportH = window.innerHeight;
    };

    const update = (y) => {
      const el = ref.current;
      if (!el) return;
      let dy;
      if (mode === 'fixed') {
        dy = -y * speed;
      } else {
        // Progress: -1 when section is fully below viewport, +1 when fully above.
        const center = parentTop + parentH / 2;
        const rel = (y + viewportH / 2 - center) / (viewportH / 2 + parentH / 2);
        dy = rel * speed * 100; // up to ±speed*100 px of drift
      }
      el.style.transform = `translate3d(0, ${dy.toFixed(2)}px, 0)`;
    };

    measure();
    bus.subs.add(update);
    update(bus.scrollY);

    const ro = (typeof ResizeObserver !== 'undefined') ? new ResizeObserver(measure) : null;
    if (ro && ref.current?.parentElement) ro.observe(ref.current.parentElement);

    return () => {
      bus.subs.delete(update);
      if (ro) ro.disconnect();
    };
  }, [speed, mode]);
  return ref;
}

function Parallax({ speed = 0.3, mode = 'flow', children, style, ...rest }) {
  const ref = useParallax(speed, mode);
  return (
    <div ref={ref} style={{ willChange: 'transform', ...style }} {...rest}>
      {children}
    </div>
  );
}

// StarField — globally pinned, multi-layer parallax dots that drift past as you scroll.
// Three layers at different speeds give cheap depth without WebGL.
function StarField() {
  const layer1Ref = useParallax(-0.10, 'fixed'); // back, smallest, slowest
  const layer2Ref = useParallax(-0.22, 'fixed'); // mid
  const layer3Ref = useParallax(-0.45, 'fixed'); // front, brightest, fastest

  return (
    <div aria-hidden="true" style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
      overflow: 'hidden',
    }}>
      {/* Layer 1 — distant haze */}
      <div ref={layer1Ref} style={{
        position: 'absolute', left: 0, right: 0, top: '-30vh', bottom: '-30vh',
        opacity: 0.32,
        backgroundImage:
          'radial-gradient(0.6px 0.6px at 13% 22%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 72% 8%, #E8E0FF, transparent 60%),' +
          'radial-gradient(0.6px 0.6px at 31% 54%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 88% 35%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 6% 72%, #D9CCFF, transparent 60%),' +
          'radial-gradient(0.6px 0.6px at 56% 89%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 24% 90%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 79% 64%, #E8E0FF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 47% 17%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.5px 0.5px at 65% 46%, #FFFFFF, transparent 60%)',
        backgroundSize: '100% 200vh',
        backgroundRepeat: 'repeat-y',
      }} />
      {/* Layer 2 — mid */}
      <div ref={layer2Ref} style={{
        position: 'absolute', left: 0, right: 0, top: '-30vh', bottom: '-30vh',
        opacity: 0.42,
        backgroundImage:
          'radial-gradient(1px 1px at 8% 12%, #FFFFFF, transparent 60%),' +
          'radial-gradient(1px 1px at 92% 28%, #E8E0FF, transparent 60%),' +
          'radial-gradient(1px 1px at 42% 42%, #FFFFFF, transparent 60%),' +
          'radial-gradient(1px 1px at 18% 66%, #FFFFFF, transparent 60%),' +
          'radial-gradient(1px 1px at 67% 76%, #D9CCFF, transparent 60%),' +
          'radial-gradient(0.8px 0.8px at 36% 26%, #FFFFFF, transparent 60%),' +
          'radial-gradient(0.8px 0.8px at 84% 88%, #FFFFFF, transparent 60%)',
        backgroundSize: '100% 240vh',
        backgroundRepeat: 'repeat-y',
      }} />
      {/* Layer 3 — front, brightest with subtle glow */}
      <div ref={layer3Ref} style={{
        position: 'absolute', left: 0, right: 0, top: '-50vh', bottom: '-50vh',
        opacity: 0.55,
        backgroundImage:
          'radial-gradient(1.5px 1.5px at 21% 8%, #FFFFFF, transparent 50%),' +
          'radial-gradient(1.5px 1.5px at 78% 52%, #FFFFFF, transparent 50%),' +
          'radial-gradient(1.5px 1.5px at 50% 80%, #FFFFFF, transparent 50%),' +
          'radial-gradient(1.5px 1.5px at 11% 38%, #E8E0FF, transparent 50%)',
        backgroundSize: '100% 320vh',
        backgroundRepeat: 'repeat-y',
        filter: 'drop-shadow(0 0 4px rgba(232,224,255,0.6))',
      }} />
      {/* Atmospheric halo that drifts very slowly with scroll */}
      <Parallax speed={-0.05} mode="fixed" style={{
        position: 'absolute', inset: '-20vh 0',
        background:
          'radial-gradient(ellipse 50% 35% at 12% 8%, rgba(221,211,255,0.10), transparent 60%),' +
          'radial-gradient(ellipse 40% 30% at 88% 65%, rgba(124,99,210,0.10), transparent 60%),' +
          'radial-gradient(ellipse 60% 40% at 50% 100%, rgba(60,40,140,0.10), transparent 60%)',
      }} />
    </div>
  );
}

Object.assign(window, { Parallax, useParallax, StarField });