// FloatingFrame — wraps a Helios screen (1280×820) and tilts it in 3D.
// Uses CSS variables for rotation so drift loops can apply +/- offsets.

const FloatingFrame = ({
  children,
  scale = 0.5,
  rx = 8, ry = -18, rz = 0,
  drift = "a",          // "a" | "b" | "c" | null
  duration = 9,         // seconds for drift loop
  delay = 0,
  style = {},
  className = "",
  width = 1280,
  height = 820,
}) => {
  const driftAnim = drift
    ? `drift-${drift} ${duration}s ease-in-out ${delay}s infinite`
    : "none";
  return (
    <div
      className={`float-frame ${className}`}
      style={{
        width:  width  * scale,
        height: height * scale,
        ["--rx"]: `${rx}deg`,
        ["--ry"]: `${ry}deg`,
        ["--rz"]: `${rz}deg`,
        animation: driftAnim,
        transform: `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`,
        ...style,
      }}
    >
      <div
        className="scaler"
        style={{
          width, height,
          transform: `scale(${scale})`,
        }}
      >
        {children}
      </div>
    </div>
  );
};

window.FloatingFrame = FloatingFrame;