// Tiny shim that mimics the parts of `motion/react` we use.
// motion.div / motion.section etc. → plain element with a fade/slide-in CSS class.
// AnimatePresence is a no-op pass-through (mount/unmount is handled by React).
//
// We support the props: initial, animate, exit, layout, layoutId, className, style, children, onClick.
// The motion-specific props are stripped before rendering.

const MOTION_PROPS = new Set([
  "initial", "animate", "exit", "transition", "layout", "layoutId",
  "whileHover", "whileTap", "whileFocus", "variants", "drag",
]);

const stripMotion = (props) => {
  const out = {};
  for (const k in props) if (!MOTION_PROPS.has(k)) out[k] = props[k];
  return out;
};

// Attach a fade-in class when there's an `initial` + `animate` so we get a soft enter.
const motionClass = (props) => {
  if (props.initial && props.animate) return "motion-enter";
  return "";
};

const makeMotion = (tag) => {
  return React.forwardRef(function MotionTag(props, ref) {
    const cls = [props.className || "", motionClass(props)].filter(Boolean).join(" ");
    const cleaned = stripMotion(props);
    return React.createElement(tag, { ...cleaned, ref, className: cls });
  });
};

// Cache one component per tag so `motion.div` returns the SAME component
// across renders. Without this, every access produces a new forwardRef, React
// sees a new component type per render, and the DOM gets unmount/remounted —
// which replays the motion-enter CSS animation and makes cards visibly jump.
const _motionCache = {};
const motion = new Proxy({}, {
  get(_, key) {
    if (!_motionCache[key]) _motionCache[key] = makeMotion(key);
    return _motionCache[key];
  }
});

// AnimatePresence: just render children. React's reconciler handles mount/unmount.
// (We lose exit animations, but enter animations still play via motion-enter class.)
const AnimatePresence = ({ children }) => <>{children}</>;

window.motion = motion;
window.AnimatePresence = AnimatePresence;