/* global React */
const { useState, useEffect, useRef, useCallback } = React;

/* ============ Sparkle SVG ============ */
function SparkleIcon({ size = 24, color = '#FFE066' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} style={{display:'block'}}>
      <path d="M12 0 L13.5 9.5 L23 11 L13.5 12.5 L12 22 L10.5 12.5 L1 11 L10.5 9.5 Z"/>
    </svg>
  );
}

function HeartIcon({ size = 24, color = '#E8163C' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} style={{display:'block'}}>
      <path d="M12 21s-7-4.5-9.5-9C.5 8 3 4 7 4c2 0 3.7 1.2 5 3 1.3-1.8 3-3 5-3 4 0 6.5 4 4.5 8-2.5 4.5-9.5 9-9.5 9z"/>
    </svg>
  );
}

/* ============ Confetti ============ */
function spawnConfetti(x, y, count = 24) {
  const emojis = ['💖','✨','💗','⭐','💕','🌸','💘','💞'];
  for (let i = 0; i < count; i++) {
    const piece = document.createElement('div');
    piece.className = 'confetti-piece';
    piece.textContent = emojis[Math.floor(Math.random() * emojis.length)];
    const angle = (Math.PI * 2 * i) / count + (Math.random() - 0.5) * 0.5;
    const dist = 80 + Math.random() * 220;
    const dx = Math.cos(angle) * dist;
    const dy = Math.sin(angle) * dist + 80;
    piece.style.left = x + 'px';
    piece.style.top = y + 'px';
    piece.style.fontSize = (16 + Math.random() * 18) + 'px';
    piece.style.setProperty('--dx', dx + 'px');
    piece.style.setProperty('--dy', dy + 'px');
    piece.style.setProperty('--rot', (Math.random() * 720 - 360) + 'deg');
    document.body.appendChild(piece);
    setTimeout(() => piece.remove(), 1700);
  }
}

function confettiFromEvent(e, count) {
  const r = e.currentTarget.getBoundingClientRect();
  spawnConfetti(r.left + r.width / 2, r.top + r.height / 2, count);
}

/* ============ Sticker ============ */
function Sticker({ children, variant = '', style }) {
  return <span className={`sticker ${variant}`} style={style}>{children}</span>;
}

/* ============ Sparkle field ============ */
function SparkleField({ count = 8 }) {
  const sparkles = Array.from({ length: count }).map((_, i) => ({
    left: Math.random() * 100,
    top: Math.random() * 100,
    size: 14 + Math.random() * 30,
    delay: Math.random() * 4,
    color: ['#FFE066','#FF3D9A','#E8163C','#FFC8E6'][i % 4]
  }));
  return (
    <>
      {sparkles.map((s, i) => (
        <div key={i} className="sparkle" style={{
          left: s.left + '%',
          top: s.top + '%',
          width: s.size, height: s.size,
          color: s.color,
          animationDelay: s.delay + 's'
        }}>
          <svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
            <path d="M12 0 L13.5 9.5 L23 11 L13.5 12.5 L12 22 L10.5 12.5 L1 11 L10.5 9.5 Z"/>
          </svg>
        </div>
      ))}
    </>
  );
}

/* ============ Animated counter on viewport ============ */
function useCountUp(target, duration = 1800, ref) {
  const [value, setValue] = useState(0);
  const startedRef = useRef(false);
  useEffect(() => {
    if (!ref?.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting && !startedRef.current) {
          startedRef.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);
            setValue(Math.round(target * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target, duration, ref]);
  return value;
}

Object.assign(window, {
  SparkleIcon, HeartIcon, Sticker, SparkleField,
  spawnConfetti, confettiFromEvent, useCountUp
});