// Wireframe 15 — "Empty Page, One Mark"
// Inspired by the toucan-on-paper reference: a single ink illustration
// anchored to a corner of mostly-empty paper. The illustration here is a
// recursive line-drawing creature that slowly redraws itself.
// Maximum negative space.

const FakeRecursiveCreature = () => {
  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();
    // a self-similar fern-like figure that "redraws"
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      ctx.strokeStyle = 'rgba(80,52,38,0.85)';
      ctx.lineWidth = 1.2;
      const phase = (t * 0.00008) % 1;
      const branch = (x, y, len, ang, depth, age) => {
        if (depth <= 0 || len < 1) return;
        const visible = Math.min(1, age * 5);
        if (visible <= 0) return;
        const x2 = x + Math.cos(ang) * len * visible;
        const y2 = y + Math.sin(ang) * len * visible;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        if (visible >= 1) {
          branch(x2, y2, len * 0.7, ang - 0.4, depth - 1, age - 0.18);
          branch(x2, y2, len * 0.7, ang + 0.4, depth - 1, age - 0.18);
          branch(x2, y2, len * 0.5, ang, depth - 1, age - 0.22);
        }
      };
      // a swirl/eye anchor
      ctx.beginPath();
      ctx.arc(W * 0.32, H * 0.7, 14, 0, Math.PI * 2);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(W * 0.32, H * 0.7, 5, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(80,52,38,0.85)';
      ctx.fill();
      // body — a long recursive limb
      branch(W * 0.32, H * 0.7, H * 0.08, -Math.PI / 2.4, 6, phase * 1.2);
      branch(W * 0.32, H * 0.7, H * 0.07, Math.PI / 1.3, 5, phase * 1.0);
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe15 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 720, height: 1100,
      background: tweaks.dark ? '#1a1814' : '#efece2',
      backgroundImage: tweaks.dark ? 'none'
        : 'radial-gradient(circle at 30% 20%, rgba(120,90,60,0.04), transparent 60%), radial-gradient(circle at 70% 80%, rgba(120,90,60,0.05), transparent 60%)',
    }}>
      <div className="wf-num">w/15</div>
      <div className="wf-meta">empty page · one mark · self-redrawing</div>

      {/* paper texture: tiny dots */}
      <svg style={{ position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none' }}>
        {Array.from({ length: 200 }).map((_, i) => (
          <circle key={i}
            cx={`${(i * 73) % 100}%`}
            cy={`${(i * 41) % 100}%`}
            r="0.6"
            fill="rgba(80,52,38,0.4)" />
        ))}
      </svg>

      {/* tiny title at top */}
      <div style={{
        position: 'absolute', top: 80, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.4em', textTransform: 'uppercase',
        color: 'rgba(80,52,38,0.7)',
      }}>recursive · engineering</div>

      {/* tiny number */}
      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 13, color: 'rgba(80,52,38,0.5)',
      }}>· field №01 ·</div>

      {/* The single mark in the bottom-left, like the toucan */}
      <div style={{
        position: 'absolute', left: 0, bottom: 80,
        width: 280, height: 360,
      }}>
        <FakeRecursiveCreature />
      </div>

      {/* tiny handwritten note bottom-right corner */}
      <div style={{
        position: 'absolute', bottom: 100, right: 60,
        textAlign: 'right',
        fontFamily: 'var(--font-script)', fontSize: 22,
        color: 'rgba(80,52,38,0.85)', lineHeight: 1.3, maxWidth: 260,
      }}>
        we make<br/>
        the things we<br/>
        wished existed.
      </div>
      <div style={{
        position: 'absolute', bottom: 60, right: 60,
        fontFamily: 'var(--font-mono)', fontSize: 9,
        letterSpacing: '0.3em', color: 'rgba(80,52,38,0.5)',
        textTransform: 'uppercase',
      }}>— oakland · 2026</div>

      {/* page-edge hint */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 30, width: 1,
        background: 'rgba(80,52,38,0.08)',
      }}></div>

      <div className="annot" style={{ top: 360, right: 80, transform: 'rotate(-6deg)' }}>
        creature redraws<br/>itself slowly,<br/>limb by limb
      </div>
    </div>
  );
};

window.Wireframe15 = Wireframe15;
window.FakeRecursiveCreature = FakeRecursiveCreature;