/* Interactive phone mockup — mouse tracking 3D tilt + floating animation */

function InteractiveMockup({ src = 'assets/phones.png', alt = 'Mockup do app Copa no Shape' }) {
  const wrapRef = React.useRef(null);
  const innerRef = React.useRef(null);
  const [isHovered, setIsHovered] = React.useState(false);
  const targetRef = React.useRef({ rx: 0, ry: 0, tx: 0, ty: 0 });
  const currentRef = React.useRef({ rx: 0, ry: 0, tx: 0, ty: 0 });
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    const loop = () => {
      const c = currentRef.current;
      const t = targetRef.current;
      const ease = 0.08;
      c.rx += (t.rx - c.rx) * ease;
      c.ry += (t.ry - c.ry) * ease;
      c.tx += (t.tx - c.tx) * ease;
      c.ty += (t.ty - c.ty) * ease;
      if (innerRef.current) {
        innerRef.current.style.transform =
          `perspective(1200px) rotateX(${c.rx}deg) rotateY(${c.ry}deg) translate3d(${c.tx}px, ${c.ty}px, 0)`;
      }
      rafRef.current = requestAnimationFrame(loop);
    };
    rafRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  const handleMove = (e) => {
    if (!wrapRef.current) return;
    const rect = wrapRef.current.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = (e.clientX - cx) / (rect.width / 2);
    const dy = (e.clientY - cy) / (rect.height / 2);
    targetRef.current = {
      rx: -dy * 10,
      ry: dx * 14,
      tx: dx * 6,
      ty: dy * 6,
    };
  };

  const handleLeave = () => {
    targetRef.current = { rx: 0, ry: 0, tx: 0, ty: 0 };
    setIsHovered(false);
  };

  return (
    <div
      className={'mockup-stage' + (isHovered ? ' is-hovered' : '')}
      ref={wrapRef}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={handleLeave}
      onMouseMove={handleMove}
    >
      <div className="mockup-glow" aria-hidden="true"></div>
      <div className="mockup-curves" aria-hidden="true">
        <svg viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
          <path d="M 30 80 Q 200 40 350 120 T 500 240" stroke="var(--lime)" strokeWidth="1.6" fill="none" strokeDasharray="3 6" opacity="0.55" />
          <path d="M 0 350 Q 150 300 280 380 T 500 410" stroke="var(--lime)" strokeWidth="1.4" fill="none" strokeDasharray="2 5" opacity="0.4" />
          <circle cx="350" cy="120" r="4" fill="var(--lime)" />
          <circle cx="30" cy="80" r="3" fill="var(--lime)" opacity="0.7" />
        </svg>
      </div>

      <div className="mockup-floater" ref={innerRef}>
        <img src={src} alt={alt} className="mockup-img" draggable="false" />
      </div>

      <div className="mockup-badge mockup-badge-1" aria-hidden="true">
        <span className="mb-dot"></span>
        <span>WhatsApp ao vivo</span>
      </div>
      <div className="mockup-badge mockup-badge-2" aria-hidden="true">
        <span className="mb-num">247</span>
        <span>alunas online agora</span>
      </div>

      <div className="mockup-cursor-hint">
        <span>↗ mexa o cursor</span>
      </div>
    </div>
  );
}

window.InteractiveMockup = InteractiveMockup;