// celebrate.jsx — Confetti + reward overlay
// Trigger via window.__celebrate(message) or <CelebrationOverlay msg={...} onClose={...} />.
// Uses CSS-only confetti so it works anywhere, no canvas needed.

(() => {
  if (document.getElementById('celebrate-styles')) return;
  const s = document.createElement('style');
  s.id = 'celebrate-styles';
  s.textContent = `
    @keyframes cel-fall {
      0%   { transform: translate3d(0, -20vh, 0) rotate(0deg);   opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translate3d(var(--dx, 0), 120vh, 0) rotate(var(--rot, 720deg)); opacity: 0.9; }
    }
    @keyframes cel-pop {
      0%   { transform: scale(.4); opacity: 0; }
      40%  { transform: scale(1.06); opacity: 1; }
      60%  { transform: scale(.98); }
      100% { transform: scale(1);  opacity: 1; }
    }
    .cel-confetti-piece {
      position: absolute; top: -20px;
      width: 10px; height: 14px; border-radius: 2px;
      animation: cel-fall var(--dur, 2.4s) cubic-bezier(.2,.7,.4,1) forwards;
    }
    .cel-card { animation: cel-pop .55s cubic-bezier(.3, 1.6, .4, 1) forwards }
  `;
  document.head.appendChild(s);
})();

const CELEBRATE_COLORS = ['#D97757','#5E7C6B','#7A5AF8','#F4C95D','#E26D9B','#4A90E2'];

function Confetti({ count = 80 }) {
  const pieces = React.useMemo(() => Array.from({ length: count }, (_, i) => ({
    left: Math.random() * 100,
    dx: (Math.random() - 0.5) * 200,
    rot: 360 + Math.random() * 720,
    dur: 1.8 + Math.random() * 1.8,
    delay: Math.random() * 0.4,
    color: CELEBRATE_COLORS[i % CELEBRATE_COLORS.length],
    shape: i % 3,
  })), [count]);
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 999,
    }}>
      {pieces.map((p, i) => (
        <span key={i} className="cel-confetti-piece" style={{
          left: `${p.left}%`,
          background: p.color,
          '--dx': `${p.dx}px`, '--rot': `${p.rot}deg`, '--dur': `${p.dur}s`,
          animationDelay: `${p.delay}s`,
          borderRadius: p.shape === 0 ? '2px' : p.shape === 1 ? '50%' : '0',
          width: p.shape === 1 ? '10px' : '8px',
          height: p.shape === 1 ? '10px' : '14px',
        }} />
      ))}
    </div>
  );
}

function CelebrationOverlay({ title, subtitle, emoji = '🎉', onClose }) {
  React.useEffect(() => {
    const t = setTimeout(() => onClose?.(), 5000);
    return () => clearTimeout(t);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 1000,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, background: 'rgba(28,42,36,0.55)', backdropFilter: 'blur(6px)',
      cursor: 'pointer',
    }}>
      <Confetti />
      <div className="cel-card" style={{
        background: '#FFFFFF', borderRadius: 28, padding: '32px 28px 26px',
        maxWidth: 320, textAlign: 'center',
        boxShadow: '0 30px 80px rgba(0,0,0,0.3)',
        position: 'relative',
      }}>
        <div style={{ fontSize: 72, lineHeight: 1, marginBottom: 12 }}>{emoji}</div>
        <div style={{
          fontFamily: '"Bricolage Grotesque", system-ui, sans-serif',
          fontWeight: 700, fontSize: 26, letterSpacing: -0.6,
          color: '#1C2A24', marginBottom: 6,
        }}>{title}</div>
        {subtitle && (
          <div style={{ fontSize: 14, color: '#566963', lineHeight: 1.4 }}>{subtitle}</div>
        )}
        <button onClick={onClose} style={{
          marginTop: 18, padding: '11px 22px', borderRadius: 99, border: 'none',
          background: '#1C2A24', color: '#fff', fontSize: 13, fontWeight: 600,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>lekker bezig</button>
      </div>
    </div>
  );
}

Object.assign(window, { Confetti, CelebrationOverlay });