/* global React */
// Atmospheric backdrop: falling wine-red stars + radial vignette.
// Respects prefers-reduced-motion (falls back to static specks).

function StarField() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    let raf = 0;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function resize() {
      canvas.width = canvas.offsetWidth * dpr;
      canvas.height = canvas.offsetHeight * dpr;
    }
    resize();
    window.addEventListener('resize', resize);

    const N = 70;
    const stars = Array.from({ length: N }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      r: Math.random() * 1.4 * dpr + 0.3 * dpr,
      v: (Math.random() * 0.5 + 0.15) * dpr,
      a: Math.random() * 0.4 + 0.2,
    }));

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (const s of stars) {
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(139, 0, 0, ${s.a})`;
        ctx.fill();
        if (!reduced) {
          s.y += s.v;
          if (s.y > canvas.height) {
            s.y = -2;
            s.x = Math.random() * canvas.width;
          }
        }
      }
      if (!reduced) raf = requestAnimationFrame(draw);
    }
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return (
    <canvas
      ref={ref}
      style={{
        position: 'fixed', inset: 0, width: '100%', height: '100%',
        pointerEvents: 'none', zIndex: 0,
      }}
    />
  );
}

function Vignette() {
  return (
    <div style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1,
      background: 'radial-gradient(ellipse 95% 78% at 50% 50%, transparent 42%, rgba(0,0,0,0.55) 100%)',
    }} />
  );
}

window.StarField = StarField;
window.Vignette = Vignette;