// Wireframe 14 — "Pattern + Letter"
// Inspired by the geometric pattern field reference. Tile a small recursive
// glyph across a sheet, then drop a clean centered framed badge with the
// wordmark. Beside it, a clean letterhead-style content panel.
// Pattern slowly drifts.

const FakePatternField = () => {
  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 step = 60;
      const offX = (t * 0.005) % step;
      const offY = (t * 0.003) % step;
      ctx.fillStyle = 'rgba(20,30,55,0.72)';
      for (let x = -step; x < W + step; x += step) {
        for (let y = -step; y < H + step; y += step) {
          const cx = x + offX;
          const cy = y + offY;
          const rot = ((x / step) + (y / step)) * 0.3 + t * 0.0003;
          // draw 4-petal mark
          for (let p = 0; p < 4; p++) {
            const a = rot + p * Math.PI / 2;
            const px = cx + Math.cos(a) * 10;
            const py = cy + Math.sin(a) * 10;
            ctx.beginPath();
            ctx.arc(px, py, 3, 0, Math.PI * 2);
            ctx.fill();
          }
        }
      }
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe14 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 1280, height: 820,
      background: tweaks.dark ? '#14130f' : '#fafafa',
    }}>
      <div className="wf-num">w/14</div>
      <div className="wf-meta">pattern + letterhead · split sheet · clean ink</div>

      <div style={{
        position: 'absolute', inset: '60px 60px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
      }}>
        {/* Left sheet — patterned */}
        <div style={{
          background: '#fdfdfd', boxShadow: '0 6px 30px rgba(0,0,0,0.06)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.85 }}>
            <FakePatternField />
          </div>
          {/* centered framed badge */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            transform: 'translate(-50%,-50%)',
            width: 220, height: 220, borderRadius: '50%',
            background: '#fdfdfd',
            border: '1.5px solid #141e37',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
          }}>
            <div style={{
              fontFamily: 'var(--font-sans)', fontWeight: 500,
              fontSize: 22, letterSpacing: '0.18em', color: '#141e37',
            }}>RECURSIVE</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 9,
              letterSpacing: '0.4em', marginTop: 6, color: '#141e37',
            }}>· ENGINEERING ·</div>
            <div style={{
              width: 30, height: 1, background: '#141e37',
              margin: '14px 0 8px',
            }}></div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 9,
              letterSpacing: '0.25em', color: '#141e37',
            }}>EST. MMXXVI</div>
          </div>
        </div>

        {/* Right sheet — letterhead */}
        <div style={{
          background: '#fdfdfd', boxShadow: '0 6px 30px rgba(0,0,0,0.06)',
          padding: '42px 48px', position: 'relative',
          fontFamily: 'var(--font-sans)', color: '#141e37',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto',
            alignItems: 'start', borderBottom: '1px solid #141e37',
            paddingBottom: 18, marginBottom: 28,
          }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: '0.25em' }}>
                RECURSIVE ENGINEERING
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
                color: '#5a6378', marginTop: 4 }}>
                a software lab · oakland · ca
              </div>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
              color: '#5a6378', textAlign: 'right', lineHeight: 1.7 }}>
              ✦ recursive.engineering<br/>
              ✉ hello@recursive.engineering<br/>
              ↗ /work · /writing
            </div>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 500,
            fontSize: 22, letterSpacing: '0.2em', margin: '0 0 18px',
          }}>HEADLINE</h2>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 13,
            lineHeight: 1.75, color: '#3a4258',
            textAlign: 'justify', margin: 0,
          }}>
            Recursive Engineering is a small software lab. We build apps,
            write papers, and ship the tools we wished existed — patiently,
            in public, and in our own voice. Every project is allowed to
            grow at its own pace. Some compound; some don't. We post the
            ones that do.
          </p>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 13,
            lineHeight: 1.75, color: '#3a4258',
            textAlign: 'justify', margin: '14px 0 0',
          }}>
            Currently shipping: Loom, Index, and a paper on self-modifying
            compilers. Drop us a line if any of that resonates.
          </p>
          <div style={{ marginTop: 32, display: 'flex',
            justifyContent: 'space-between', alignItems: 'end' }}>
            <a className="wobble" style={{
              fontFamily: 'var(--font-sans)', fontSize: 12,
              letterSpacing: '0.2em', color: '#141e37',
            }}>READ THE LATEST →</a>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
              color: '#5a6378', textAlign: 'right' }}>
              vol. 01 · issue 04<br/>
              april mmxxvi
            </div>
          </div>
          {/* bottom pattern echo */}
          <svg style={{ position: 'absolute', left: 48, right: 48,
            bottom: 24, height: 24 }} width="100%" height="24">
            {Array.from({ length: 14 }).map((_, i) => (
              <g key={i} transform={`translate(${i * 36 + 8}, 12)`}>
                {[0, 1, 2, 3].map(p => {
                  const a = p * Math.PI / 2 + 0.4;
                  return <circle key={p}
                    cx={Math.cos(a) * 5} cy={Math.sin(a) * 5} r="1.5"
                    fill="#141e37" />;
                })}
              </g>
            ))}
          </svg>
        </div>
      </div>

      <div className="annot" style={{ top: 80, left: 100, transform: 'rotate(-4deg)' }}>
        pattern drifts<br/>like film grain
      </div>
    </div>
  );
};

window.Wireframe14 = Wireframe14;
window.FakePatternField = FakePatternField;