// Wireframe 13 — "Two-Tone Field"
// Big asymmetric color block split with hand-drawn vertical lines as the seam.
// Type sits centered in the soft-paper half. 3D = the line field subtly breathes.
// Inspired by the striped two-tone reference.

const FakeLineField = () => {
  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);
      const lineCount = 90;
      const gap = H / lineCount;
      ctx.strokeStyle = 'rgba(60,48,40,0.55)';
      ctx.lineWidth = 1.4;
      for (let i = 0; i < lineCount; i++) {
        const y = i * gap + gap / 2;
        const breathe = Math.sin(t * 0.0008 + i * 0.15) * 8;
        const wob = Math.sin(t * 0.0006 + i * 0.4) * 4;
        ctx.beginPath();
        ctx.moveTo(20, y + wob);
        // wiggle along
        const segs = 8;
        for (let s = 1; s <= segs; s++) {
          const x = 20 + (W - 40) * (s / segs);
          const wy = y + wob + Math.sin(s + i * 0.3 + t * 0.0005) * 2 + breathe * 0.1;
          ctx.lineTo(x, wy);
        }
        ctx.stroke();
      }
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe13 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 1280, height: 820,
      background: tweaks.dark ? '#14130f' : '#f4eee2',
    }}>
      <div className="wf-num">w/13</div>
      <div className="wf-meta">two-tone · breathing line field · soft</div>

      {/* small dusty top color band */}
      <div style={{
        position: 'absolute', top: 0, left: '38%', right: 0, height: 130,
        background: '#cbb8a4',
        clipPath: 'polygon(8% 100%, 100% 0, 100% 100%, 0 100%)',
      }}></div>

      {/* left half: line field (full height) */}
      <div style={{
        position: 'absolute', top: 0, left: 0, width: '38%', height: '100%',
        background: '#f4eee2',
        clipPath: 'polygon(0 0, 100% 0, 92% 100%, 0 100%)',
      }}>
        <FakeLineField />
      </div>

      {/* freckle dots on right */}
      <svg style={{ position: 'absolute', top: 0, right: 0, width: '62%', height: '100%',
        pointerEvents: 'none' }}>
        {Array.from({ length: 80 }).map((_, i) => (
          <circle key={i}
            cx={`${10 + (i * 37) % 90}%`}
            cy={`${(i * 53) % 100}%`}
            r="1"
            fill={i % 7 === 0 ? '#c97a3a' : 'rgba(60,48,40,0.18)'} />
        ))}
      </svg>

      {/* corners */}
      <div style={{
        position: 'absolute', top: 32, right: 48,
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.15em', textTransform: 'uppercase',
        color: '#5a4638', zIndex: 3,
      }}>recursive.engineering</div>

      {/* main copy on right */}
      <div style={{
        position: 'absolute', top: '50%', right: 80, transform: 'translateY(-50%)',
        textAlign: 'center', maxWidth: 540, zIndex: 3,
      }}>
        <div style={{
          fontFamily: 'var(--font-hand)', fontWeight: 400,
          fontSize: 44, color: '#3d2f24', lineHeight: 1.4,
          letterSpacing: '0.02em',
        }}>
          what would<br/>
          you build<br/>
          if it could<br/>
          build itself?
        </div>
        <div style={{
          marginTop: 56, fontFamily: 'var(--font-mono)', fontSize: 12,
          color: '#7a6a5c', letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>
          a working lab — est. mmxxvi
        </div>
        <div style={{
          marginTop: 20, display: 'flex', gap: 28, justifyContent: 'center',
          fontFamily: 'var(--font-hand)', fontSize: 18,
        }}>
          <a className="wobble" style={{ color: '#3d2f24' }}>see the work</a>
          <a className="wobble" style={{ color: '#3d2f24' }}>read along</a>
        </div>
      </div>

      {/* footer corners */}
      <div style={{
        position: 'absolute', bottom: 24, left: 32,
        fontFamily: 'var(--font-mono)', fontSize: 9,
        letterSpacing: '0.15em', textTransform: 'uppercase',
        color: '#7a6a5c', zIndex: 3,
      }}>fig.13 / breathing field</div>

      <div className="annot" style={{ top: 60, left: 60, transform: 'rotate(-4deg)', color: '#c97a3a' }}>
        lines breathe slowly<br/>(~6s cycle)
      </div>
    </div>
  );
};

window.Wireframe13 = Wireframe13;
window.FakeLineField = FakeLineField;