// SpotlightCard — ported from React Bits (reactbits.dev) to plain JSX. A soft radial highlight
// follows the pointer across a card. Used on the services page's ScrollStack cards.
//
// Deviations from upstream, all deliberate:
//
//   * **None of upstream's card chrome comes with it.** Its CSS sets `border-radius: 1.5rem`,
//     `border: 1px solid #222`, `background-color: #111` and `padding: 2rem` — a whole dark
//     card design, written for a near-black page. Dropping that onto `.svc-stack__card` would
//     replace this site's accent ground with a black box. Only the spotlight mechanics are
//     ported; the card it is applied to keeps its own ground, radius and padding.
//   * **The pointer writes are rAF-throttled.** Upstream sets three custom properties straight
//     from the `mousemove` handler, so a fast drag across seven cards is three style writes per
//     event. The effect can only change once per painted frame, which is the same reason
//     VariableProximity and MagnetLines throttle theirs.
//   * **`--spotlight-color` is set once in CSS, not re-written on every move.** Upstream writes
//     it alongside the coordinates on each event even though it never changes.
//   * **Nothing runs for a coarse pointer or under `prefers-reduced-motion`** — the whole
//     effect is cursor-driven, so on a phone it is a listener and a paint layer that can never
//     do anything. The same stand-down the clinic gallery's effects used to take.
//   * It takes `style` so the caller can keep passing its own custom properties through.
const SpotlightCard = ({
  children,
  className = "",
  spotlightColor,
  style,
  ...rest
}) => {
  const { useRef, useEffect } = React;
  const ref = useRef(null);

  const inert = typeof window !== "undefined" && window.matchMedia
    && (window.matchMedia("(prefers-reduced-motion: reduce)").matches
     || window.matchMedia("(pointer: coarse)").matches);

  useEffect(() => {
    const el = ref.current;
    if (!el || inert) return;
    let raf = 0;
    let x = 0, y = 0;
    const paint = () => {
      raf = 0;
      el.style.setProperty("--mouse-x", `${x}px`);
      el.style.setProperty("--mouse-y", `${y}px`);
    };
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      x = e.clientX - r.left;
      y = e.clientY - r.top;
      if (!raf) raf = requestAnimationFrame(paint);
    };
    el.addEventListener("mousemove", onMove);
    return () => {
      el.removeEventListener("mousemove", onMove);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [inert]);

  const merged = spotlightColor
    ? Object.assign({ "--spotlight-color": spotlightColor }, style)
    : style;

  return (
    <div ref={ref}
         className={`${inert ? "" : "card-spotlight "}${className}`.trim()}
         style={merged}
         {...rest}>
      {children}
    </div>
  );
};
window.SpotlightCard = SpotlightCard;