// Wireframe 10 — "Sphere of Text"
// The wordmark IS the 3D thing. Letters arranged on a sphere/cylinder,
// slowly rotating in 3D space. Most "logo-forward" of the bunch.
// Centered, single screen. Sparse.

const FakeTextSphere = ({ word = 'RECURSIVE.ENGINEERING' }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    // arrange letters around a cylinder, multiple rings
    const word2 = word.repeat(1);
    const rings = 6;
    const lettersPerRing = word2.length;
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2, cy = H / 2;
      const rotY = t * 0.0003;
      const radius = Math.min(W, H) * 0.32;
      ctx.font = `${Math.min(W, H) * 0.045}px ui-monospace, monospace`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      for (let r = 0; r < rings; r++) {
        const yOff = (r - (rings - 1) / 2) * (radius * 0.32);
        const ringR = Math.sqrt(Math.max(0, radius * radius - yOff * yOff)) * 1.2;
        for (let i = 0; i < lettersPerRing; i++) {
          const a = (i / lettersPerRing) * Math.PI * 2 + rotY * (r % 2 ? 1 : -1);
          const x = Math.cos(a) * ringR;
          const z = Math.sin(a) * ringR;
          const depth = (z + ringR) / (ringR * 2); // 0..1
          if (z < -ringR * 0.3) continue; // back-face cull
          ctx.fillStyle = `rgba(21,20,15,${0.15 + depth * 0.7})`;
          ctx.fillText(word2[i], cx + x, cy + yOff);
        }
      }
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, [word]);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe10 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 820 }}>
      <div className="wf-num">w/10</div>
      <div className="wf-meta">sphere of text · the wordmark IS the 3D</div>

      <div style={{
        position: 'absolute', top: 32, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
        zIndex: 3,
      }}>
        <span>recursive.engineering</span>
        <span style={{ display: 'flex', gap: 22 }}>
          <a className="wobble">work</a>
          <a className="wobble">writing</a>
          <a className="wobble">contact</a>
        </span>
      </div>

      {/* The sphere */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <FakeTextSphere />
      </div>

      {/* Caption underneath */}
      <div style={{
        position: 'absolute', bottom: 80, left: 0, right: 0,
        textAlign: 'center', zIndex: 3,
      }}>
        <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 18, color: 'var(--ink)', maxWidth: 540, margin: '0 auto',
          lineHeight: 1.5 }}>
          A lab. Software, research, and tools<br/>that fold back on themselves.
        </div>
        <div style={{ marginTop: 28, display: 'flex', gap: 24, justifyContent: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          <a className="wobble">enter →</a>
          <a className="wobble">manifesto</a>
        </div>
      </div>

      {/* Bottom corners */}
      <div style={{
        position: 'absolute', bottom: 24, left: 48,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'var(--ink-faint)', letterSpacing: '0.1em',
        textTransform: 'uppercase', zIndex: 3,
      }}>v0.1</div>
      <div style={{
        position: 'absolute', bottom: 24, right: 48,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'var(--ink-faint)', letterSpacing: '0.1em',
        textTransform: 'uppercase', zIndex: 3,
      }}>drag to spin</div>

      <div className="annot" style={{ top: 130, right: 80, transform: 'rotate(6deg)' }}>
        the wordmark itself<br/>is the 3D piece
      </div>
    </div>
  );
};

window.Wireframe10 = Wireframe10;
window.FakeTextSphere = FakeTextSphere;