// fx.jsx — mikroanimacje potwierdzeń: rysowany ptaszek + confetti
const CONFETTI_COLORS = ['#0D9488', '#7C3AED', '#F59E0B', '#16A34A', '#2563EB', '#F87171', '#2DD4BF'];

// Rysowany znacznik (ring + check, stroke draw). Kolor = currentColor.
function DrawCheck({ size = 56, ring = true, stroke = 4, className = '' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 52 52" className={className} fill="none" aria-hidden="true">
      {ring && <circle cx="26" cy="26" r="23" stroke="currentColor" strokeWidth={stroke - 1} strokeOpacity="0.9"
        strokeDasharray="146" strokeDashoffset="146" style={{ animation: 'om-draw .5s cubic-bezier(.65,0,.35,1) forwards' }} />}
      <path d="M15 27l7.5 7.5L38 18" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray="42" strokeDashoffset="42" style={{ animation: `om-draw .42s cubic-bezier(.65,0,.35,1) ${ring ? .38 : .05}s forwards` }} />
    </svg>
  );
}

// Wybuch confetti — montowany na czas trwania (samoczynnie znika u rodzica przez key)
function Confetti({ count = 46 }) {
  const parts = React.useMemo(() => Array.from({ length: count }).map((_, i) => {
    const ang = Math.random() * Math.PI * 2;
    const dist = 70 + Math.random() * 190;
    return {
      dx: Math.cos(ang) * dist,
      dy: Math.sin(ang) * dist - 60,
      rot: (Math.random() * 900 - 450) + 'deg',
      c: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
      delay: Math.random() * 0.12,
      size: 6 + Math.random() * 7,
      round: Math.random() > 0.5,
      dur: 0.85 + Math.random() * 0.4,
    };
  }), []);
  return (
    <div className="absolute inset-0 z-[75] pointer-events-none overflow-hidden flex items-center justify-center" aria-hidden="true">
      {parts.map((p, i) => (
        <span key={i} style={{
          position: 'absolute', width: p.size, height: p.size, background: p.c,
          borderRadius: p.round ? '50%' : 2,
          '--dx': p.dx + 'px', '--dy': p.dy + 'px', '--rot': p.rot,
          animation: `om-confetti ${p.dur}s cubic-bezier(.15,.7,.4,1) ${p.delay}s both`,
        }} />
      ))}
    </div>
  );
}

// Pełnoekranowy (w obrębie telefonu) ekran sukcesu
function SuccessOverlay({ title, sub, tone: t = 'success' }) {
  const c = tone(t);
  return (
    <div className="absolute inset-0 z-[78] flex flex-col items-center justify-center text-center px-10 anim-fade" style={{ background: 'rgb(var(--c-bg) / .96)' }}>
      <Confetti />
      <div className={`relative flex items-center justify-center w-24 h-24 rounded-full ${c.bg} ${c.text} mb-5`}>
        <DrawCheck size={64} />
      </div>
      <h2 className="font-display font-800 text-text text-[22px] anim-rise">{title}</h2>
      {sub && <p className="text-[14px] text-text-secondary mt-1.5 anim-rise">{sub}</p>}
    </div>
  );
}

Object.assign(window, { DrawCheck, Confetti, SuccessOverlay, CONFETTI_COLORS });