"use client";

import { LazyMotion, domAnimation, m, useReducedMotion, useScroll, useTransform } from "motion/react";
import { useRef, type ReactNode } from "react";

/** Slow parallax (≤ 72px) for the hero film as the hero scrolls away. Static under reduced motion. */
export function HeroBackdrop({ children }: { children: ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduceMotion = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const y = useTransform(scrollYProgress, [0, 1], [0, reduceMotion ? 0 : 72]);
  const scale = useTransform(scrollYProgress, [0, 1], [1, reduceMotion ? 1 : 1.035]);

  return (
    <LazyMotion features={domAnimation} strict>
      <div ref={ref} className="absolute inset-0 overflow-hidden">
        <m.div style={{ y, scale }} className="absolute inset-0 origin-bottom will-change-transform">
          {children}
        </m.div>
      </div>
    </LazyMotion>
  );
}