// Sacred geometry animated card visuals
const { useEffect, useRef } = React;

// Card visual themes
const CARD_THEMES = [
  { // Single Men - concentric expanding circles (breath/energy radiating outward)
    baseHue: 270,
    draw: (ctx, W, H, t) => {
      const cx = W / 2, cy = H / 2;
      const breathe = Math.sin(t * 0.015) * 0.15 + 0.85;
      
      // Pulsing concentric circles
      for (let i = 6; i >= 0; i--) {
        const baseR = 12 + i * 14;
        const r = baseR * breathe + Math.sin(t * 0.008 + i * 0.5) * 4;
        const alpha = (0.08 + Math.sin(t * 0.01 + i) * 0.04) * (1 - i * 0.08);
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(180, 136, 255, ${alpha})`;
        ctx.lineWidth = 1.2;
        ctx.stroke();
      }
      
      // Rotating inner diamond
      const angle = t * 0.003;
      const dSize = 20 * breathe;
      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(angle);
      ctx.beginPath();
      ctx.moveTo(0, -dSize);
      ctx.lineTo(dSize, 0);
      ctx.lineTo(0, dSize);
      ctx.lineTo(-dSize, 0);
      ctx.closePath();
      ctx.strokeStyle = `rgba(200, 160, 255, 0.15)`;
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.restore();
      
      // Center dot
      ctx.beginPath();
      ctx.arc(cx, cy, 3 * breathe, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(180, 136, 255, ${0.3 * breathe})`;
      ctx.fill();
    }
  },
  { // Single Women - lotus/flower of life petals (blooming, sovereignty)
    baseHue: 300,
    draw: (ctx, W, H, t) => {
      const cx = W / 2, cy = H / 2;
      const breathe = Math.sin(t * 0.012) * 0.12 + 0.88;
      
      // Flower of life - overlapping circles
      const petalCount = 6;
      const petalR = 24 * breathe;
      const orbitR = 22 * breathe;
      
      for (let i = 0; i < petalCount; i++) {
        const angle = (i / petalCount) * Math.PI * 2 + t * 0.002;
        const px = cx + Math.cos(angle) * orbitR;
        const py = cy + Math.sin(angle) * orbitR;
        const alpha = 0.06 + Math.sin(t * 0.01 + i * 1.2) * 0.03;
        ctx.beginPath();
        ctx.arc(px, py, petalR, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(220, 160, 255, ${alpha})`;
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      
      // Second layer, smaller, counter-rotating
      for (let i = 0; i < petalCount; i++) {
        const angle = (i / petalCount) * Math.PI * 2 - t * 0.003 + Math.PI / 6;
        const px = cx + Math.cos(angle) * (orbitR * 0.6);
        const py = cy + Math.sin(angle) * (orbitR * 0.6);
        ctx.beginPath();
        ctx.arc(px, py, petalR * 0.6, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(200, 140, 255, 0.05)`;
        ctx.lineWidth = 0.8;
        ctx.stroke();
      }
      
      // Center circle
      ctx.beginPath();
      ctx.arc(cx, cy, petalR, 0, Math.PI * 2);
      ctx.strokeStyle = `rgba(220, 170, 255, ${0.08 * breathe})`;
      ctx.lineWidth = 1;
      ctx.stroke();
      
      // Center dot
      ctx.beginPath();
      ctx.arc(cx, cy, 2.5 * breathe, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(220, 170, 255, ${0.25 * breathe})`;
      ctx.fill();
    }
  },
  { // Couples - two orbits intertwining (connection, synchronicity)
    baseHue: 285,
    draw: (ctx, W, H, t) => {
      const cx = W / 2, cy = H / 2;
      const breathe = Math.sin(t * 0.013) * 0.12 + 0.88;
      
      // Two orbiting dots leaving trails
      const trail = 40;
      for (let j = 0; j < 2; j++) {
        const dir = j === 0 ? 1 : -1;
        const hueShift = j === 0 ? 0 : 40;
        
        for (let i = 0; i < trail; i++) {
          const tt = t - i * 2;
          const angle = tt * 0.008 * dir;
          const orbitX = 35 * breathe;
          const orbitY = 18 * breathe;
          const px = cx + Math.cos(angle) * orbitX;
          const py = cy + Math.sin(angle) * orbitY;
          const alpha = (1 - i / trail) * 0.12;
          const r = (1 - i / trail) * 3 + 1;
          ctx.beginPath();
          ctx.arc(px, py, r, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(${180 + hueShift * 0.5}, ${136 + hueShift * 0.3}, 255, ${alpha})`;
          ctx.fill();
        }
      }
      
      // Infinity symbol (lemniscate) outline
      ctx.beginPath();
      for (let i = 0; i <= 100; i++) {
        const tt = (i / 100) * Math.PI * 2;
        const scale = 38 * breathe;
        const x = cx + (scale * Math.cos(tt)) / (1 + Math.sin(tt) * Math.sin(tt));
        const y = cy + (scale * Math.sin(tt) * Math.cos(tt)) / (1 + Math.sin(tt) * Math.sin(tt));
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.strokeStyle = `rgba(180, 136, 255, ${0.06 * breathe})`;
      ctx.lineWidth = 0.8;
      ctx.stroke();
    }
  }
];

function CardVisual({index, gradient}) {
  const canvasRef = useRef(null);
  const animRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const W = 375, H = 100;
    canvas.width = W * 2; canvas.height = H * 2;
    ctx.scale(2, 2); // retina

    const theme = CARD_THEMES[index] || CARD_THEMES[0];
    let t = Math.random() * 1000; // offset so they don't sync

    const draw = () => {
      t++;
      ctx.clearRect(0, 0, W, H);
      theme.draw(ctx, W, H, t);
      animRef.current = requestAnimationFrame(draw);
    };
    draw();
    return () => { if (animRef.current) cancelAnimationFrame(animRef.current); };
  }, [index]);

  return (
    <div className="card-visual" style={{background: gradient, position: 'relative'}}>
      <canvas ref={canvasRef} style={{position: 'absolute', inset: 0, width: '100%', height: '100%'}} />
    </div>
  );
}

Object.assign(window, { CardVisual });