// Floaties.jsx — drifting diamond + pearl sprites (rococo jewel-box motion).
(function () {
  const IMAGES = [
    { src: "assets/eli_website_diamond.webp", alt: "" },
    { src: "assets/eli_website_pearl.png", alt: "" },
  ];
  const ITEMS = [
    [0, 18], [1, 28], [0, 13], [1, 44], [0, 32], [1, 18], [0, 52],
    [1, 60], [0, 24], [1, 36], [0, 16], [1, 50], [0, 40], [1, 26],
    [0, 22], [1, 30],
  ];
  function rand(min, max) { return Math.random() * (max - min) + min; }

  function Floatie({ img, size }) {
    const cfg = React.useMemo(() => {
      const dur = rand(9, 22);
      return {
        dur, dx1: rand(-60, 60), dy1: rand(-50, 50), dx2: rand(-60, 60),
        dy2: rand(-50, 50), rot: rand(-30, 30), delay: rand(0, -dur),
        name: "fl" + Math.random().toString(36).slice(2),
        top: rand(0, 92), left: rand(0, 94),
      };
    }, []);
    React.useEffect(() => {
      const s = document.createElement("style");
      s.textContent = `@keyframes ${cfg.name}{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(${cfg.dx1}px,${cfg.dy1}px) rotate(${cfg.rot * 0.5}deg)}50%{transform:translate(${cfg.dx2}px,${cfg.dy2}px) rotate(${cfg.rot}deg)}75%{transform:translate(${cfg.dx1 * 0.4}px,${cfg.dy2 * 0.6}px) rotate(${cfg.rot * 0.3}deg)}100%{transform:translate(0,0) rotate(0)}}`;
      document.head.appendChild(s);
      return () => s.remove();
    }, [cfg]);
    return (
      <img src={IMAGES[img].src} alt="" width={size} height={size}
        style={{
          position: "fixed", top: cfg.top + "vh", left: cfg.left + "vw",
          pointerEvents: "none", zIndex: 190, opacity: 0.88, willChange: "transform",
          animation: `${cfg.name} ${cfg.dur}s ease-in-out ${cfg.delay}s infinite`,
        }} />
    );
  }
  function Floaties() {
    return <div aria-hidden="true">{ITEMS.map(([img, s], i) => <Floatie key={i} img={img} size={s} />)}</div>;
  }
  window.Floaties = Floaties;
})();