// Wireframe 12 — "Ink Axis"
// Inspired by the ink-on-paper sketch. A faint vertical axis line splits the
// page. Three calligraphic marks descend the axis: handwritten word at top,
// ink-splash glyph in middle, ink-wash ring at bottom. Extreme negative space.

const FakeInkRing = () => {
  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();
    // generate jittery strokes per frame to feel alive but barely
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2, cy = H / 2;
      const baseR = Math.min(W, H) * 0.35;
      // outer wash
      for (let i = 0; i < 80; i++) {
        const a = (i / 80) * Math.PI * 2;
        const jitter = Math.sin(a * 7 + t * 0.0008) * 4 + Math.random() * 3;
        const r = baseR + jitter;
        const x = cx + Math.cos(a) * r;
        const y = cy + Math.sin(a) * r;
        ctx.fillStyle = `rgba(20,18,15,${0.15 + Math.random() * 0.4})`;
        ctx.beginPath();
        ctx.arc(x, y, 1 + Math.random() * 2, 0, Math.PI * 2);
        ctx.fill();
      }
      // inner clean ring
      ctx.strokeStyle = 'rgba(20,18,15,0.7)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(cx, cy, baseR * 0.55, 0, Math.PI * 2);
      ctx.stroke();
      raf = requestAnimationFrame(draw);
    };
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const Wireframe12 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 720, height: 1280,
      background: tweaks.dark ? '#14130f' : '#f7f4ed',
    }}>
      <div className="wf-num">w/12</div>
      <div className="wf-meta">ink axis · vertical · extreme negative space</div>

      {/* faint vertical axis */}
      <div style={{
        position: 'absolute', left: '50%', top: 80, bottom: 80, width: 1,
        background: 'rgba(20,18,15,0.18)',
      }}></div>

      {/* top: small caps name */}
      <div style={{
        position: 'absolute', top: 90, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-script)', fontSize: 28,
        letterSpacing: '0.15em', color: 'var(--ink)',
      }}>
        recursive engineering
      </div>

      {/* horizontal hairline crossing the axis at first focal point */}
      <div style={{
        position: 'absolute', top: 320, left: 80, right: 80, height: 1,
        background: 'rgba(20,18,15,0.25)',
      }}></div>

      {/* middle-upper: large calligraphic mark */}
      <div style={{
        position: 'absolute', top: 250, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-script)', fontSize: 96,
        color: 'var(--ink)', lineHeight: 1, fontWeight: 400,
      }}>
        recurse.
      </div>

      {/* middle: ink splash / brushstroke */}
      <svg style={{
        position: 'absolute', top: 540, left: '50%', transform: 'translateX(-50%)',
        width: 140, height: 60,
      }} viewBox="0 0 140 60">
        <path d="M10,35 Q40,15 70,30 Q100,45 130,28"
          stroke="rgba(20,18,15,0.85)" strokeWidth="3" fill="none" strokeLinecap="round" />
        {[...Array(20)].map((_, i) => (
          <circle key={i}
            cx={20 + i * 5 + Math.sin(i) * 8}
            cy={35 + Math.sin(i * 1.7) * 10}
            r={Math.random() * 1.2}
            fill="rgba(20,18,15,0.4)" />
        ))}
      </svg>

      {/* small caption beneath splash */}
      <div style={{
        position: 'absolute', top: 620, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 14, color: 'var(--ink-soft)',
      }}>
        — a small lab —
      </div>

      {/* lower: the ink ring (animated) */}
      <div style={{
        position: 'absolute', top: 760, left: '50%',
        transform: 'translateX(-50%)',
        width: 200, height: 200,
      }}>
        <FakeInkRing />
      </div>

      {/* bottom nav, axis-centered */}
      <div style={{
        position: 'absolute', bottom: 100, left: 0, right: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
        fontFamily: 'var(--font-script)', fontSize: 22,
      }}>
        <a className="wobble">work</a>
        <a className="wobble">writing</a>
        <a className="wobble">contact</a>
      </div>

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

      <div className="annot" style={{ top: 540, right: 30, transform: 'rotate(-8deg)' }}>
        ring slowly<br/>shimmers
      </div>
    </div>
  );
};

window.Wireframe12 = Wireframe12;
window.FakeInkRing = FakeInkRing;