// Wireframe 6 — "L-System Tree" (riff on W1)
// Centered, quiet. But the ambient 3D is now a slowly-drawing branching tree
// (recursive L-system) instead of squares. Tree grows then resets.
// Type: serif display + serif body — most editorial of the bunch.

const FakeLSystemTree = () => {
  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();
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      ctx.strokeStyle = 'rgba(21,20,15,0.28)';
      ctx.lineWidth = 1;
      const phase = (t * 0.00012) % 1;
      const maxDepth = 9;
      const branch = (x, y, len, ang, depth) => {
        if (depth <= 0 || len < 2) return;
        const grow = Math.min(1, phase * maxDepth - (maxDepth - depth));
        if (grow <= 0) return;
        const x2 = x + Math.cos(ang) * len * grow;
        const y2 = y + Math.sin(ang) * len * grow;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        if (grow >= 1) {
          const sway = Math.sin(t * 0.0006 + depth) * 0.05;
          branch(x2, y2, len * 0.72, ang - 0.5 + sway, depth - 1);
          branch(x2, y2, len * 0.72, ang + 0.5 + sway, depth - 1);
        }
      };
      branch(W / 2, H * 0.95, H * 0.18, -Math.PI / 2, maxDepth);
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe6 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 820 }}>
      <div className="wf-num">w/06</div>
      <div className="wf-meta">L-system tree · serif editorial · centered</div>

      <div style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
        <FakeLSystemTree />
      </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', color: 'var(--ink-soft)', textTransform: 'uppercase',
      }}>
        <span>recursive.engineering</span>
        <span>04 · 2026</span>
      </div>

      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 80px',
      }}>
        <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 16, color: 'var(--ink-soft)', marginBottom: 18 }}>
          a working lab —
        </div>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 300,
          fontSize: 96, letterSpacing: '-0.04em', margin: 0, lineHeight: 0.95,
        }}>
          Recursive <em style={{ fontWeight: 400 }}>Engineering</em>
        </h1>
        <p style={{
          fontFamily: 'var(--font-serif)', fontSize: 18,
          maxWidth: 540, lineHeight: 1.55, color: 'var(--ink)',
          fontStyle: 'italic', marginTop: 32,
        }}>
          We grow software the way trees grow — slowly, branching, with a
          shape you cannot fully plan in advance.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 28,
          fontFamily: 'var(--font-serif)', fontSize: 15 }}>
          <a className="wobble"><em>read the journal</em></a>
          <span style={{ color: 'var(--ink-faint)' }}>·</span>
          <a className="wobble"><em>see what we ship</em></a>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 28, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)',
        letterSpacing: '0.15em', textTransform: 'uppercase',
      }}>↓ ↓ ↓</div>

      <div className="annot" style={{ top: 90, left: 80, transform: 'rotate(-4deg)' }}>
        tree grows, resets,<br/>grows again
      </div>
    </div>
  );
};

window.Wireframe6 = Wireframe6;
window.FakeLSystemTree = FakeLSystemTree;