// Wireframe 9 — "Constellation" (W5 lineage, paper-feel)
// Like W5 but the connections are HAND-DRAWN lines between named "stars".
// Each star = a project. Lines = relationships (built-on, derived-from).
// More paper/cartography than tech.

const FakeStarfield = () => {
  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 stars = Array.from({ length: 60 }, () => ({
      x: Math.random(), y: Math.random(),
      r: Math.random() * 0.7 + 0.3,
      tw: Math.random() * Math.PI * 2,
    }));
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      stars.forEach(s => {
        const alpha = 0.2 + 0.5 * (0.5 + 0.5 * Math.sin(t * 0.001 + s.tw));
        ctx.fillStyle = `rgba(21,20,15,${alpha * 0.5})`;
        ctx.beginPath();
        ctx.arc(s.x * W, s.y * H, s.r * 2, 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 Wireframe9 = ({ tweaks }) => {
  // hand-positioned constellation
  const stars = [
    { id: 'l',  x: 22, y: 40, label: 'Loom',   kind: 'app',   big: true },
    { id: 'i',  x: 38, y: 28, label: 'Index',  kind: 'app',   big: true },
    { id: 'sm', x: 60, y: 20, label: 'self-mod compilers', kind: 'paper' },
    { id: 'fp', x: 76, y: 38, label: 'fixed points',       kind: 'paper' },
    { id: 'on', x: 30, y: 64, label: 'on small tools',     kind: 'note' },
    { id: 'wf', x: 54, y: 72, label: 'why we left the framework', kind: 'note' },
    { id: 'ad', x: 72, y: 60, label: 'agent design',       kind: 'paper' },
  ];
  // edges drawn as svg lines
  const edges = [
    ['l', 'i'], ['l', 'on'], ['i', 'sm'], ['sm', 'fp'],
    ['fp', 'ad'], ['on', 'wf'], ['wf', 'ad'], ['i', 'wf'],
  ];
  const byId = Object.fromEntries(stars.map(s => [s.id, s]));

  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 880 }}>
      <div className="wf-num">w/09</div>
      <div className="wf-meta">constellation · hand-drawn map · drifting stars</div>

      <div style={{ position: 'absolute', inset: 0, opacity: 0.6 }}>
        <FakeStarfield />
      </div>

      {/* Top corners */}
      <div style={{
        position: 'absolute', top: 32, left: 48,
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        display: 'flex', gap: 10, alignItems: 'center', zIndex: 3,
      }}>
        <span className="dot"></span>
        <span>recursive.engineering</span>
      </div>
      <div style={{
        position: 'absolute', top: 32, right: 48,
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 14, color: 'var(--ink-soft)', zIndex: 3,
      }}>
        — a working map
      </div>

      {/* SVG edges between stars */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 2 }}>
        {edges.map(([a, b], i) => {
          const sa = byId[a], sb = byId[b];
          // jitter the line a bit for hand-drawn feel
          const x1 = sa.x * 12.8, y1 = sa.y * 8.8;
          const x2 = sb.x * 12.8, y2 = sb.y * 8.8;
          const mx = (x1 + x2) / 2 + (i % 2 ? -8 : 8);
          const my = (y1 + y2) / 2 + (i % 2 ? 6 : -6);
          return (
            <path key={i} d={`M${x1},${y1} Q${mx},${my} ${x2},${y2}`}
              stroke="rgba(21,20,15,0.32)" strokeWidth="0.8"
              fill="none" strokeDasharray="2,3" />
          );
        })}
      </svg>

      {/* Stars */}
      {stars.map(s => (
        <div key={s.id} style={{
          position: 'absolute', left: `${s.x}%`, top: `${s.y}%`,
          transform: 'translate(-50%, -50%)', zIndex: 4,
          textAlign: 'center',
        }}>
          <div style={{
            width: s.big ? 10 : 6, height: s.big ? 10 : 6,
            borderRadius: '50%',
            background: s.big ? 'var(--accent)' : 'var(--ink)',
            margin: '0 auto 6px',
            boxShadow: '0 0 0 4px var(--paper)',
          }}></div>
          <div style={{
            fontFamily: s.big ? 'var(--font-serif)' : 'var(--font-mono)',
            fontSize: s.big ? 18 : 11,
            fontStyle: s.big ? 'italic' : 'normal',
            background: 'var(--paper)', padding: '0 6px',
            color: 'var(--ink)',
          }}>{s.label}</div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 9,
            color: 'var(--ink-faint)', letterSpacing: '0.1em',
            textTransform: 'uppercase', marginTop: 2,
          }}>{s.kind}</div>
        </div>
      ))}

      {/* Center wordmark — small, anchored bottom */}
      <div style={{
        position: 'absolute', bottom: 60, left: '50%',
        transform: 'translateX(-50%)', textAlign: 'center', zIndex: 5,
        background: 'var(--paper)', padding: '8px 20px',
        border: '1.5px solid var(--rule)',
      }}>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400,
          fontSize: 28, letterSpacing: '-0.02em', margin: 0,
        }}>
          recursive <em>engineering</em>
        </h1>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9,
          color: 'var(--ink-soft)', letterSpacing: '0.2em',
          textTransform: 'uppercase', marginTop: 4 }}>
          07 stars · 8 connections
        </div>
      </div>

      <div className="annot" style={{ top: 360, left: 200, transform: 'rotate(-12deg)' }}>
        lines = "is built on"
      </div>
    </div>
  );
};

window.Wireframe9 = Wireframe9;
window.FakeStarfield = FakeStarfield;