Stars Background

/* Index-derived positions keep server and client markup identical —
   Math.random() here would throw a hydration mismatch. */
const STARS = Array.from({ length: 20 }, (_, i) => ({
  left: (i * 37) % 100,
  top: (i * 61) % 100,
  delay: i * 0.5,
  opacity: 0.3 + ((i * 13) % 70) / 100,
}));

export function StarsBackground({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative grid h-40 place-items-center overflow-hidden rounded-xl bg-zinc-950">
      <div className="absolute inset-0" aria-hidden>
        {STARS.map((s, i) => (
          <span key={i} className="absolute size-0.5 animate-pulse rounded-full bg-white"
            style={{ left: `${s.left}%`, top: `${s.top}%`, animationDelay: `${s.delay}s`, opacity: s.opacity }} />
        ))}
      </div>
      <div className="relative">{children}</div>
    </div>
  );
}