// Parametric mesh — cold/computational side of Lumen, light mode
function ParametricMesh({ accent = "#c98a2a" }) {
  const W = 460, H = 360;
  const cols = 24, rows = 18;

  const heightAt = (i, j) => {
    const x = i / cols - 0.5;
    const y = j / rows - 0.5;
    const r = Math.sqrt(x * x + y * y);
    return Math.sin(r * 14) * 18 + Math.cos(i * 0.4 + j * 0.3) * 6;
  };

  const project = (i, j) => {
    const cellW = W / cols;
    const cellH = H / rows;
    const z = heightAt(i, j);
    const px = i * cellW + (j - rows / 2) * 4;
    const py = j * cellH * 0.7 + 60 - z;
    return [px, py];
  };

  const hLines = [];
  for (let j = 0; j <= rows; j++) {
    let d = "";
    for (let i = 0; i <= cols; i++) {
      const [x, y] = project(i, j);
      d += `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)} `;
    }
    hLines.push(d);
  }
  const vLines = [];
  for (let i = 0; i <= cols; i++) {
    let d = "";
    for (let j = 0; j <= rows; j++) {
      const [x, y] = project(i, j);
      d += `${j === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)} `;
    }
    vLines.push(d);
  }

  const selI = 9, selJ = 8;
  const [selX, selY] = project(selI, selJ);

  return (
    <svg viewBox={`-20 -20 ${W + 40} ${H + 40}`} style={{ width: "100%", height: "100%", maxHeight: 380 }}>
      <g stroke="#b5b0a3" strokeWidth="0.6" fill="none" opacity="0.85">
        {hLines.map((d, i) => <path key={`h${i}`} d={d} />)}
        {vLines.map((d, i) => <path key={`v${i}`} d={d} />)}
      </g>

      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#8a8478" letterSpacing="0.1em">
        <text x={-4} y={H + 18} textAnchor="end">0,0</text>
        <text x={W} y={H + 18}>{cols}.0</text>
        <text x={-4} y={4} textAnchor="end">{rows}.0</text>
      </g>

      <g stroke={accent} strokeWidth="0.8" fill="none">
        <line x1={-20} y1={selY} x2={W + 20} y2={selY} strokeDasharray="2 4" opacity="0.7" />
        <line x1={selX} y1={-20} x2={selX} y2={H + 20} strokeDasharray="2 4" opacity="0.7" />
        <circle cx={selX} cy={selY} r="6" fill="none" />
        <circle cx={selX} cy={selY} r="14" fill="none" opacity="0.6">
          <animate attributeName="r" from="6" to="22" dur="2.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.8" to="0" dur="2.4s" repeatCount="indefinite" />
        </circle>
        <circle cx={selX} cy={selY} r="2.5" fill={accent} />
      </g>

      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#3a382f" letterSpacing="0.06em">
        <text x={selX + 14} y={selY - 10}>51.9244° N</text>
        <text x={selX + 14} y={selY + 2}>4.4777° E</text>
      </g>

      <g stroke="#3a382f" strokeWidth="0.8" fill="none" opacity="0.7">
        <path d="M -10 -10 L -10 4 M -10 -10 L 4 -10" />
        <path d={`M ${W + 10} -10 L ${W + 10} 4 M ${W + 10} -10 L ${W - 4} -10`} />
        <path d={`M -10 ${H + 10} L -10 ${H - 4} M -10 ${H + 10} L 4 ${H + 10}`} />
        <path d={`M ${W + 10} ${H + 10} L ${W + 10} ${H - 4} M ${W + 10} ${H + 10} L ${W - 4} ${H + 10}`} />
      </g>
    </svg>
  );
}
window.ParametricMesh = ParametricMesh;