// User's logo — 187N.AI mark rendered from uploaded PNG asset
const InfinityLoop = ({ className = "w-32 h-32", animated = false, interactive = false }) => {
  const [hover, setHover] = React.useState(false);
  const animClass = interactive
    ? 'infinity-hover'
    : animated
      ? 'infinity-anim'
      : '';
  return (
    <div
      className={`relative ${className} ${animClass} infinity-glow transition-transform duration-700 ease-out`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={interactive ? {
        transform: hover
          ? 'perspective(800px) rotateY(12deg) rotateX(-6deg) scale(1.04)'
          : 'perspective(800px) rotateY(0deg) rotateX(0deg) scale(1)'
      } : undefined}
    >
      <img src="assets/logo.png" alt="187N.AI" className="w-full h-full object-contain select-none pointer-events-none" draggable="false" />
    </div>
  );
};

window.InfinityLoop = InfinityLoop;