// Email rendered to canvas at runtime — never a text node in the DOM.
// Address is assembled from base64 parts so it's not a plain string in source.
function EmailSVG({ width = 320, color = 'currentColor', font = 'JetBrains Mono, ui-monospace, monospace', size = 16 }) {
  const ref = React.useRef();
  const h = size + 10;

  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;

    const draw = () => {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = width * dpr;
      canvas.height = h * dpr;
      canvas.style.width = width + 'px';
      canvas.style.height = h + 'px';

      const ctx = canvas.getContext('2d');
      ctx.scale(dpr, dpr);

      // resolve CSS variable or currentColor to a real color value
      let resolved = color;
      if (color === 'currentColor') {
        resolved = getComputedStyle(canvas).color || '#1a1a1a';
      } else if (color.startsWith('var(')) {
        const name = color.slice(4, -1).trim();
        resolved = getComputedStyle(document.documentElement).getPropertyValue(name).trim() || '#1a1a1a';
      }

      ctx.fillStyle = resolved;
      ctx.font = `${size}px ${font}`;

      // assembled at runtime — not a plain email string anywhere in source
      const addr = atob('Y2hyaXN0b3Bo') + '\x40' + atob('cGhpbGlwcC5zd2lzcw==');
      ctx.fillText(addr, 0, size);
    };

    // wait for web fonts before drawing so the right typeface is used
    document.fonts.ready.then(draw);
  }, [color, font, size, width]);

  return (
    <canvas
      ref={ref}
      style={{ display: 'block' }}
      aria-label="email address"
    />
  );
}

window.EmailSVG = EmailSVG;