/* ============================================
   MOTION + ILLUSTRATIONS — Clinical Vet
   Scroll reveals, SVG art (paws, cat, dog, hearts)
   ============================================ */

const { useEffect: useEffectM, useRef: useRefM, useState: useStateM } = React;

// ============================================
// REVEAL — scroll-triggered fade/slide animation
// ============================================
function Reveal({ children, as = 'div', delay = 0, y = 24, x = 0, scale = 1, duration = 700, once = true, className = '', style = {}, ...props }) {
  const ref = useRefM(null);
  const [visible, setVisible] = useStateM(false);

  useEffectM(() => {
    if (!ref.current) return;
    const el = ref.current;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setVisible(true);
          if (once) obs.unobserve(el);
        } else if (!once) {
          setVisible(false);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [once]);

  const Tag = as;
  const startTransform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translate3d(0,0,0) scale(1)' : startTransform,
        transition: `opacity ${duration}ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms, transform ${duration}ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms`,
        willChange: 'opacity, transform',
        ...style,
      }}
      {...props}
    >
      {children}
    </Tag>
  );
}

// Stagger children with incremental delays
function Stagger({ children, gap = 80, base = 0, as = 'div', className = '', style = {} }) {
  const arr = React.Children.toArray(children);
  const Tag = as;
  return (
    <Tag className={className} style={style}>
      {arr.map((c, i) => (
        <Reveal key={i} delay={base + i * gap}>{c}</Reveal>
      ))}
    </Tag>
  );
}

// ============================================
// COUNTER — animates from 0 to target on scroll
// ============================================
function Counter({ to, duration = 1600, prefix = '', suffix = '', decimals = 0, ...props }) {
  const ref = useRefM(null);
  const [val, setVal] = useStateM(0);
  const started = useRefM(false);

  useEffectM(() => {
    if (!ref.current) return;
    const obs = 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 ease = 1 - Math.pow(1 - t, 3);
            setVal(to * ease);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);

  return (
    <span ref={ref} {...props}>
      {prefix}{val.toLocaleString('pt-BR', { maximumFractionDigits: decimals, minimumFractionDigits: decimals })}{suffix}
    </span>
  );
}

// ============================================
// SVG ILLUSTRATIONS
// ============================================
const Illust = {
  // Floating paw print — for decorative use
  Paw: ({ size = 80, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style} fill={color}>
      <ellipse cx="50" cy="65" rx="22" ry="20"/>
      <ellipse cx="22" cy="42" rx="10" ry="13" transform="rotate(-20 22 42)"/>
      <ellipse cx="78" cy="42" rx="10" ry="13" transform="rotate(20 78 42)"/>
      <ellipse cx="35" cy="22" rx="9" ry="11" transform="rotate(-10 35 22)"/>
      <ellipse cx="65" cy="22" rx="9" ry="11" transform="rotate(10 65 22)"/>
    </svg>
  ),

  // Heart with monoline stroke
  HeartLine: ({ size = 80, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M50 85 C 20 65, 10 40, 25 25 C 35 15, 45 20, 50 30 C 55 20, 65 15, 75 25 C 90 40, 80 65, 50 85 Z"/>
    </svg>
  ),

  // Cat silhouette — minimal editorial
  CatSilhouette: ({ size = 120, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 120 120" style={style} fill={color}>
      <path d="M30 30 L20 12 L38 22 C46 18, 56 16, 64 16 C 72 16, 82 18, 90 22 L108 12 L98 30 C 108 38, 112 50, 112 60 C 112 88, 90 102, 64 102 C 38 102, 16 88, 16 60 C 16 50, 20 38, 30 30 Z"/>
      <circle cx="48" cy="55" r="3" fill="#fff"/>
      <circle cx="80" cy="55" r="3" fill="#fff"/>
      <path d="M58 68 L64 73 L70 68" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/>
    </svg>
  ),

  // Dog silhouette — minimal
  DogSilhouette: ({ size = 120, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 120 120" style={style} fill={color}>
      <path d="M18 36 C 14 30, 18 18, 28 22 L 38 30 C 46 24, 56 22, 64 22 C 72 22, 82 24, 90 30 L 100 22 C 110 18, 114 30, 110 36 C 116 50, 116 64, 110 76 C 100 96, 84 104, 64 104 C 44 104, 28 96, 18 76 C 12 64, 12 50, 18 36 Z"/>
      <circle cx="50" cy="58" r="3.5" fill="#fff"/>
      <circle cx="78" cy="58" r="3.5" fill="#fff"/>
      <ellipse cx="64" cy="72" rx="6" ry="4" fill="#fff" opacity="0.4"/>
    </svg>
  ),

  // Animated wagging tail (used in hero)
  WagTail: ({ size = 60, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 60 60" style={style} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M30 50 C 22 38, 18 22, 30 10">
        <animate attributeName="d"
          values="M30 50 C 22 38, 18 22, 30 10;
                  M30 50 C 38 38, 42 22, 30 10;
                  M30 50 C 22 38, 18 22, 30 10"
          dur="2s" repeatCount="indefinite"/>
      </path>
    </svg>
  ),

  // Stethoscope line art
  StethoArt: ({ size = 100, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M25 15 L25 35 C 25 50, 35 58, 45 58 L 55 58 C 65 58, 75 50, 75 35 L 75 15"/>
      <path d="M55 58 L 55 70 C 55 78, 62 84, 70 84 C 78 84, 85 78, 85 70 L 85 60"/>
      <circle cx="85" cy="56" r="6"/>
      <circle cx="25" cy="13" r="3"/>
      <circle cx="75" cy="13" r="3"/>
    </svg>
  ),

  // Pulse line — like ECG
  Pulse: ({ width = 200, height = 40, color = 'currentColor', style = {} }) => (
    <svg width={width} height={height} viewBox="0 0 200 40" style={style} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M0 20 L40 20 L 50 20 L 55 8 L 60 32 L 65 20 L 80 20 L 100 20 L 105 14 L 115 26 L 120 20 L 200 20"
        strokeDasharray="400"
        strokeDashoffset="400"
      >
        <animate attributeName="stroke-dashoffset" from="400" to="0" dur="2s" repeatCount="indefinite"/>
      </path>
    </svg>
  ),

  // Floating bone for petshop
  Bone: ({ size = 60, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 60 60" style={style} fill={color}>
      <path d="M15 18 C 10 14, 6 18, 6 22 C 6 26, 10 28, 14 26 L 22 30 L 14 34 C 10 32, 6 34, 6 38 C 6 42, 10 46, 15 42 C 18 46, 22 46, 26 42 L 38 30 L 50 22 C 54 18, 50 14, 46 14 C 42 14, 40 18, 42 22 L 34 26 L 42 22 C 46 24, 50 22, 50 18 C 50 14, 46 12, 42 16 C 38 12, 34 16, 38 18 L 26 26 L 18 22 C 22 18, 18 14, 15 18 Z"/>
    </svg>
  ),

  // Sparkle decoration
  Sparkle: ({ size = 24, color = 'currentColor', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style} fill={color}>
      <path d="M12 0 L13.5 9 L22 11 L13.5 13 L12 22 L10.5 13 L2 11 L10.5 9 Z" opacity="0.9"/>
    </svg>
  ),

  // Wave / squiggle decoration
  Squiggle: ({ width = 80, height = 16, color = 'currentColor', style = {} }) => (
    <svg width={width} height={height} viewBox="0 0 80 16" style={style} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round">
      <path d="M2 8 Q 12 1, 22 8 T 42 8 T 62 8 T 80 8"/>
    </svg>
  ),
};

// ============================================
// ParallaxFloat — slowly drifts up on scroll
// ============================================
function FloatDeco({ children, speed = 0.2, style = {} }) {
  const ref = useRefM(null);
  useEffectM(() => {
    let raf;
    const onScroll = () => {
      if (!ref.current) return;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const rect = ref.current.getBoundingClientRect();
        const offset = (window.innerHeight - rect.top) * speed;
        ref.current.style.transform = `translateY(${-offset * 0.1}px)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [speed]);
  return <div ref={ref} style={{...style, willChange:'transform'}}>{children}</div>;
}

Object.assign(window, { Reveal, Stagger, Counter, Illust, FloatDeco });