// Wireframe 5 — "Network / Particle Field"
// Full-bleed particle 3D as background. Content overlaid as small,
// scattered "nodes" — each project/paper is a labeled point.
// Type: sans + mono. Quiet but constantly moving.

const Wireframe5 = ({ tweaks }) => {
  // each node is positioned absolutely; pretend they're attached to particles
  const nodes = [
    { x: 18, y: 28, kind: 'app',   label: 'Loom',   meta: 'a notetaker that thinks back' },
    { x: 72, y: 22, kind: 'paper', label: 'Self-modifying compilers', meta: 'draft · apr 26' },
    { x: 60, y: 62, kind: 'app',   label: 'Index',  meta: 'search your own brain' },
    { x: 22, y: 72, kind: 'note',  label: 'On building tools at small scale', meta: 'mar 26' },
    { x: 84, y: 78, kind: 'paper', label: 'Fixed points in agent design', meta: 'jan 26' },
  ];

  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 860 }}>
      <div className="wf-num">w/05</div>
      <div className="wf-meta">network · particle field · scattered nodes</div>

      {/* Particle background full-bleed */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.85 }}>
        <FakeParticleField count={70} />
      </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-mono)', fontSize: 10,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'var(--ink-soft)', zIndex: 3,
      }}>
        17 nodes · click to expand
      </div>

      {/* Center wordmark — small, anchored */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        textAlign: 'center', zIndex: 3,
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.2em', textTransform: 'uppercase',
          color: 'var(--ink-soft)', marginBottom: 8 }}>
          [ index ]
        </div>
        <h1 style={{
          fontFamily: 'var(--font-sans)', fontWeight: 400,
          fontSize: 42, letterSpacing: '-0.02em',
          margin: 0, lineHeight: 1,
        }}>
          recursive<br/>engineering
        </h1>
        <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 14, color: 'var(--ink-soft)', marginTop: 10 }}>
          a working network of tools, research and notes
        </div>
      </div>

      {/* Scattered nodes */}
      {nodes.map((n, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${n.x}%`, top: `${n.y}%`,
          transform: 'translate(-50%, -50%)',
          zIndex: 4, maxWidth: 220,
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '4px 10px',
            background: 'var(--paper)',
            border: '1.2px solid var(--rule)',
            fontFamily: 'var(--font-mono)', fontSize: 11,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%',
              background: 'var(--accent)' }}></span>
            <span style={{ color: 'var(--ink-soft)', textTransform: 'uppercase',
              letterSpacing: '0.08em', fontSize: 9 }}>{n.kind}</span>
            <span>{n.label}</span>
          </div>
          <div style={{
            marginTop: 4, marginLeft: 4,
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 12, color: 'var(--ink-soft)',
          }}>
            {n.meta}
          </div>
        </div>
      ))}

      {/* Bottom legend */}
      <div style={{
        position: 'absolute', bottom: 28, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'var(--ink-faint)', letterSpacing: '0.1em',
        textTransform: 'uppercase', zIndex: 3,
      }}>
        <span>○ app  ◇ paper  · note</span>
        <span>drag to pan · scroll to zoom</span>
      </div>

      <svg style={{ position: 'absolute', top: 240, left: 360, width: 90, height: 70, zIndex: 5 }}>
        <path d="M10,55 Q45,30 80,12" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3,3" />
        <polygon points="80,12 72,14 76,22" fill="var(--accent)" />
      </svg>
      <div className="annot" style={{ top: 290, left: 320, transform: 'rotate(8deg)' }}>
        nodes float<br/>with particles
      </div>
    </div>
  );
};

window.Wireframe5 = Wireframe5;