// Matrix-style ambient background canvas — very subtle digital rain
function MatrixCanvas() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;
    const chars = '01ΔΘΛΞΣΩαβγδεζηθλμνξπρστφχψω▮▯◇◈◊∴∵◆░▒▓│┃┊┋';
    const fontSize = 12;
    const cols = Math.floor(width / fontSize);
    const drops = Array.from({ length: cols }, () => Math.random() * height / fontSize);
    const speeds = Array.from({ length: cols }, () => 0.3 + Math.random() * 0.4);

    let raf;
    const draw = () => {
      ctx.fillStyle = 'rgba(7, 9, 26, 0.08)';
      ctx.fillRect(0, 0, width, height);
      ctx.font = `${fontSize}px "Geist Mono", monospace`;
      for (let i = 0; i < cols; i++) {
        const ch = chars[Math.floor(Math.random() * chars.length)];
        const y = drops[i] * fontSize;
        // Head glyph: cyan tint
        ctx.fillStyle = `rgba(75, 232, 255, ${0.22 + Math.random() * 0.18})`;
        ctx.fillText(ch, i * fontSize, y);
        // Trail: violet/dim
        if (Math.random() > 0.6) {
          ctx.fillStyle = 'rgba(139, 107, 255, 0.08)';
          ctx.fillText(chars[Math.floor(Math.random() * chars.length)], i * fontSize, y - fontSize * 2);
        }
        if (y > height && Math.random() > 0.975) drops[i] = 0;
        drops[i] += speeds[i];
      }
      raf = requestAnimationFrame(draw);
    };
    draw();

    const onResize = () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    };
    window.addEventListener('resize', onResize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
  }, []);
  return (
    <canvas
      ref={ref}
      style={{
        position: 'fixed', inset: 0,
        zIndex: -1,
        opacity: 0.16,
        pointerEvents: 'none',
        mixBlendMode: 'screen',
        mask: 'radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 75%)',
        WebkitMask: 'radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 75%)',
      }}
    />
  );
}

// Scan pulse — sweeps across the screen every ~8s
function ScanPulse() {
  return (
    <div style={{
      position: 'fixed', inset: 0,
      pointerEvents: 'none', zIndex: 1,
      overflow: 'hidden',
      mixBlendMode: 'screen',
    }}>
      <div style={{
        position: 'absolute',
        top: 0, left: 0, right: 0,
        height: 2,
        background: 'linear-gradient(180deg, rgba(75, 232, 255, 0.6), transparent)',
        boxShadow: '0 0 32px rgba(75, 232, 255, 0.4)',
        animation: 'scan 14s linear infinite',
      }}/>
    </div>
  );
}

window.MatrixCanvas = MatrixCanvas;
window.ScanPulse = ScanPulse;