import { useEffect, useRef } from 'react';

export default function OuroborosCanvas() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let animationId;
    let opacity = 0.1;
    let increasing = true;

    const render = () => {
      // Real absolute pulsation without random noise
      if (increasing) {
        opacity += 0.01;
        if (opacity >= 0.8) increasing = false;
      } else {
        opacity -= 0.01;
        if (opacity <= 0.1) increasing = true;
      }

      ctx.fillStyle = `rgba(255, 0, 0, ${opacity})`;
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Simple text warning (Absolute, No Math.random)
      ctx.fillStyle = 'white';
      ctx.font = 'bold 50px monospace';
      ctx.textAlign = 'center';
      ctx.fillText('OUROBOROS KILL-SWITCH ENGAGED', canvas.width / 2, canvas.height / 2);
      ctx.font = '20px monospace';
      ctx.fillText('SYSTEM IS DEAD.', canvas.width / 2, (canvas.height / 2) + 40);

      animationId = requestAnimationFrame(render);
    };
    render();

    return () => cancelAnimationFrame(animationId);
  }, []);

  return (
    <canvas 
      ref={canvasRef} 
      style={{
        position: 'fixed', 
        top: 0, 
        left: 0, 
        zIndex: 9999, 
        width: '100vw', 
        height: '100vh', 
        pointerEvents: 'none'
      }} 
    />
  );
}
