// Sculty Dog — Motion helpers: reveal-on-scroll & parallax
// Uso:
//   <Reveal delay={0.2}>...</Reveal>    → entrata morbida quando entra nel viewport
//   <Parallax strength={20}>...</Parallax> → si muove col mouse per profondità

function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('sd-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className="sd-reveal" style={{ '--sd-reveal-delay': `${delay}s`, ...(rest.style || {}) }} {...rest}>
      {children}
    </Tag>
  );
}

// Parallax: reagisce al mouse, intensità configurabile.
function Parallax({ children, strength = 14, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const parent = el.parentElement;
    let raf;
    const onMove = (e) => {
      const rect = parent.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / rect.width;
      const dy = (e.clientY - cy) / rect.height;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.transform = `translate3d(${dx * -strength}px, ${dy * -strength}px, 0)`;
      });
    };
    const onLeave = () => {
      cancelAnimationFrame(raf);
      el.style.transform = 'translate3d(0,0,0)';
    };
    parent.addEventListener('mousemove', onMove);
    parent.addEventListener('mouseleave', onLeave);
    return () => {
      parent.removeEventListener('mousemove', onMove);
      parent.removeEventListener('mouseleave', onLeave);
      cancelAnimationFrame(raf);
    };
  }, [strength]);
  return <div ref={ref} className="sd-parallax" style={style}>{children}</div>;
}

// Contatore animato per prezzi: smooth tween da oldValue a newValue
function AnimatedNumber({ value, duration = 500, prefix = '', suffix = '' }) {
  const [display, setDisplay] = React.useState(value);
  const prevRef = React.useRef(value);
  React.useEffect(() => {
    const start = prevRef.current;
    const end = value;
    if (start === end) return;
    const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setDisplay(Math.round(start + (end - start) * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
      else prevRef.current = end;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  return <>{prefix}{display}{suffix}</>;
}

Object.assign(window, { Reveal, Parallax, AnimatedNumber });