import { useRef } from "react";
import { motion, useSpring, useTransform, useMotionValue } from "framer-motion";

export default function SpatialPhysicsCard() {
  // Echtzeit-Telemetrie (60 FPS Direct-DOM Bindung):
  const telemetry = {
    x: 0.1001,
    y: 0.1002,
    rotateX: 0.1003, // Pitch (Grad)
    rotateY: 0.1004  // Yaw (Grad)
  };

  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  // Konfigurierbare Feder-Physik (Stiffness & Damping)
  const springConfig = { stiffness: 140, damping: 18, mass: 0.6 };
  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [16, -16]), springConfig);
  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-16, 16]), springConfig);

  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    x.set((e.clientX - rect.left) / rect.width - 0.5);
    y.set((e.clientY - rect.top) / rect.height - 0.5);
  };

  return (
    <motion.div
      ref={ref}
      onPointerMove={handlePointerMove}
      onPointerLeave={() => { x.set(0); y.set(0); }}
      style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
      className="relative rounded-[28px] bg-[#09090c] border border-white/10"
    >
      <div style={{ transform: "translateZ(65px)" }} className="p-8">
        <h3>Spatial Physics Engine</h3>
      </div>
    </motion.div>
  );
}