// AnimalMenagerie.jsx — circular animal grid for the book-call modal.
function AnimalCircle({ creature, mobile }) {
  const videoRef = React.useRef(null);
  const isVideoCreature = creature.type === "video";
  const cached = useVideoCached(isVideoCreature ? creature.src : null);
  const showVideo = isVideoCreature && (!mobile || cached);

  useInViewVideo(videoRef, showVideo);

  return (
    <li
      className={`zg-animal-circle${isVideoCreature ? " zg-animal-circle--video" : ""}`}
    >
      {showVideo ? (
        <video
          ref={videoRef}
          src={creature.src}
          poster={creature.poster}
          loop
          muted
          playsInline
          preload="none"
          style={{ objectPosition: creature.position || "50% 50%" }}
          aria-hidden="true"
        />
      ) : (
        <img
          src={
            isVideoCreature && creature.poster ? creature.poster : creature.src
          }
          alt=""
          loading="lazy"
          decoding="async"
          aria-hidden="true"
        />
      )}
      <span className="zg-animal-circle-ring" aria-hidden="true" />
    </li>
  );
}

function AnimalMenagerie({ className = "", compact = false }) {
  const mobile = useMobileLayout(900);
  const creatures = window.JUNGLE_CREATURES || [];
  const visible = compact && mobile ? creatures.slice(0, 8) : creatures;
  const classes = ["zg-animal-menagerie", className].filter(Boolean).join(" ");

  return (
    <ul className={classes} aria-hidden="true">
      {visible.map((creature) => (
        <AnimalCircle key={creature.src} creature={creature} mobile={mobile} />
      ))}
    </ul>
  );
}

window.AnimalMenagerie = AnimalMenagerie;