// Animated starfield + planets background
const StarsBg = () => (
  <div className="starfield" aria-hidden="true">
    <div className="layer stars-1" />
    <div className="layer stars-2" />
    <div className="planet planet-1" />
    <div className="planet planet-2" />
  </div>
);

// Confetti burst
const Confetti = ({ active }) => {
  if (!active) return null;
  const colors = ['#ff3d8a', '#00e5ff', '#ffd60a', '#7cff5e', '#a06cff', '#ff5e62'];
  const pieces = Array.from({ length: 60 }, (_, i) => {
    const left = Math.random() * 100;
    const dur = 1.2 + Math.random() * 1.6;
    const delay = Math.random() * 0.4;
    const color = colors[i % colors.length];
    const size = 6 + Math.random() * 10;
    return (
      <span
        key={i}
        style={{
          left: left + 'vw',
          background: color,
          width: size + 'px',
          height: size * 0.4 + 'px',
          animationDuration: dur + 's',
          animationDelay: delay + 's',
          transform: `rotate(${Math.random() * 360}deg)`
        }}
      />
    );
  });
  return <div className="confetti">{pieces}</div>;
};

window.StarsBg = StarsBg;
window.Confetti = Confetti;