// More 3D placeholders for variations 6-10.

// A pulsing single point with halos
const FakePulsePoint = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2, cy = H / 2;
      // halos
      for (let i = 0; i < 4; i++) {
        const phase = (t * 0.0008 + i * 0.25) % 1;
        const r = phase * Math.min(W, H) * 0.45;
        ctx.strokeStyle = `rgba(21,20,15,${(1 - phase) * 0.35})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.stroke();
      }
      // center dot
      ctx.fillStyle = 'rgba(21,20,15,0.95)';
      ctx.beginPath();
      ctx.arc(cx, cy, 4, 0, Math.PI * 2);
      ctx.fill();
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

// Folded paper / origami unfolding-folding
const FakeFoldedPaper = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2, cy = H / 2;
      const a = t * 0.0003;
      const s = Math.min(W, H) * 0.32;
      // 6 triangular folds rotating, each at slightly different angle
      for (let k = 0; k < 6; k++) {
        const ang = a + (k * Math.PI / 3);
        const fold = 0.7 + 0.3 * Math.sin(t * 0.0006 + k * 0.5);
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(ang);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(s * fold, -s * 0.15);
        ctx.lineTo(s * fold * 0.95, s * 0.15);
        ctx.closePath();
        ctx.strokeStyle = `rgba(21,20,15,${0.25 + k * 0.08})`;
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.restore();
      }
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

// Constellation — fixed nodes with connecting lines, slight breathing
const FakeConstellation = ({ nodes, edges }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      // edges
      ctx.strokeStyle = 'rgba(21,20,15,0.18)';
      ctx.lineWidth = 0.8;
      edges.forEach(([i, j]) => {
        const a = nodes[i], b = nodes[j];
        const wob = Math.sin(t * 0.0005 + i + j) * 1.5;
        ctx.beginPath();
        ctx.moveTo(a.x * W + wob, a.y * H);
        ctx.lineTo(b.x * W, b.y * H + wob);
        ctx.stroke();
      });
      // nodes
      nodes.forEach((n, k) => {
        const pulse = 0.5 + 0.5 * Math.sin(t * 0.001 + k * 0.7);
        ctx.fillStyle = `rgba(21,20,15,${0.4 + pulse * 0.4})`;
        ctx.beginPath();
        ctx.arc(n.x * W, n.y * H, 2.5, 0, Math.PI * 2);
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, [nodes, edges]);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

// Drift dots — sparse points slowly drifting like stars on a chart
const FakeDriftField = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const stars = Array.from({ length: 120 }, () => ({
      x: Math.random(), y: Math.random(),
      r: Math.random() * 1.2 + 0.3,
      drift: Math.random() * 0.00005,
    }));
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      stars.forEach((s, k) => {
        const x = ((s.x + t * s.drift) % 1) * W;
        const y = s.y * H + Math.sin(t * 0.0005 + k) * 0.5;
        const a = 0.2 + 0.4 * Math.sin(t * 0.001 + k * 1.7);
        ctx.fillStyle = `rgba(21,20,15,${0.2 + a * 0.4})`;
        ctx.beginPath();
        ctx.arc(x, y, s.r, 0, Math.PI * 2);
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

Object.assign(window, {
  FakePulsePoint, FakeFoldedPaper, FakeConstellation, FakeDriftField,
});