// motion-extras.jsx — premium landing-page motion bits

// Count-up: animates a number when it scrolls into view
const CountUp = ({ to, duration = 1400, suffix = '', prefix = '' }) => {
  const ref = React.useRef(null);
  const [v, setV] = React.useState(0);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setV(to * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  const display = to % 1 === 0 ? Math.round(v) : v.toFixed(1);
  return <span ref={ref}>{prefix}{display}{suffix}</span>;
};

// Magnetic — element drifts toward cursor on hover
const Magnetic = ({ children, strength = 0.25, className = '', ...rest }) => {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - (r.left + r.width / 2)) * strength;
    const y = (e.clientY - (r.top + r.height / 2)) * strength;
    el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  };
  const onLeave = () => { if (ref.current) ref.current.style.transform = 'translate3d(0,0,0)'; };
  return (
    <span ref={ref} onMouseMove={onMove} onMouseLeave={onLeave}
      className={className}
      style={{ display: 'inline-block', transition: 'transform 0.3s cubic-bezier(.22,.8,.32,1)' }}
      {...rest}
    >{children}</span>
  );
};

// Drifting gradient mesh — soft animated blobs in the background of a section
const MeshBg = ({ height = '100%' }) => (
  <div className="mesh-bg" aria-hidden style={{ height }}>
    <span className="mesh-blob b1" />
    <span className="mesh-blob b2" />
    <span className="mesh-blob b3" />
  </div>
);

// Marquee strip
const Marquee = ({ items, speed = 40 }) => (
  <div className="marquee" style={{ '--mq-speed': `${speed}s` }}>
    <div className="marquee-track">
      {[...items, ...items].map((it, i) => (
        <span key={i} className="marquee-item">{it}</span>
      ))}
    </div>
  </div>
);

// Glow card — wraps any element with a cursor-following glow border
const GlowCard = ({ children, className = '', ...rest }) => {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--gx', `${e.clientX - r.left}px`);
    el.style.setProperty('--gy', `${e.clientY - r.top}px`);
  };
  return (
    <div ref={ref} onMouseMove={onMove}
      className={`glow-card ${className}`} {...rest}>
      <div className="glow-card-inner">{children}</div>
    </div>
  );
};

window.CountUp = CountUp;
window.Magnetic = Magnetic;
window.MeshBg = MeshBg;
window.Marquee = Marquee;
window.GlowCard = GlowCard;