// floats.jsx — small 3D coffee icons scattered around sections.
// Each <FloatIcon> is positioned absolutely within its parent and animated with
// one of three float patterns (bob / sway / drift). Rotation + size are tweakable.

function FloatIcon({
  src,
  size = 80,
  top, left, right, bottom,
  rotate = 0,
  anim = "bob",       // bob | sway | drift
  delay = 0,
  duration = 7,
  opacity = 1,
  z = 1,
  blur = 0,
}) {
  const style = {
    position: "absolute",
    width: size,
    height: size,
    top, left, right, bottom,
    transform: `rotate(${rotate}deg)`,
    opacity,
    zIndex: z,
    filter: blur ? `blur(${blur}px)` : undefined,
    pointerEvents: "none",
    "--rot": `${rotate}deg`,
    "--dur": `${duration}s`,
    "--dly": `${delay}s`,
  };
  return (
    <img
      src={src}
      alt=""
      aria-hidden="true"
      className={"float-icon fi-" + anim}
      style={style}
      draggable="false"
    />
  );
}

Object.assign(window, { FloatIcon });