// Wireframe 7 — "Orbital" (riff on W5)
// Off-center wordmark on the LEFT. To the right, a gravity-well: nodes orbit
// a slowly-rotating central point. Each orbit ring = a content type.

const FakeOrbital = ({ items = [] }) => {
  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 cx = W / 2, cy = H / 2;
      ctx.strokeStyle = 'rgba(21,20,15,0.18)';
      ctx.lineWidth = 0.8;
      const rings = [W * 0.18, W * 0.30, W * 0.44];
      rings.forEach(r => {
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.stroke();
      });
      ctx.fillStyle = 'rgba(21,20,15,0.85)';
      ctx.beginPath();
      ctx.arc(cx, cy, 3, 0, Math.PI * 2);
      ctx.fill();
      // dots on rings
      rings.forEach((r, ri) => {
        const speed = 0.0002 / (ri + 1);
        const count = [4, 6, 8][ri];
        for (let i = 0; i < count; i++) {
          const a = (i / count) * Math.PI * 2 + t * speed * (ri % 2 ? -1 : 1);
          const x = cx + Math.cos(a) * r;
          const y = cy + Math.sin(a) * r;
          ctx.fillStyle = 'rgba(21,20,15,0.7)';
          ctx.beginPath();
          ctx.arc(x, y, 2.5, 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 Wireframe7 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 820 }}>
      <div className="wf-num">w/07</div>
      <div className="wf-meta">orbital · gravity-well of work · split layout</div>

      <div style={{
        position: 'absolute', top: 28, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="dot"></span> recursive.engineering
        </span>
        <span>↗ subscribe</span>
      </div>

      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', gridTemplateColumns: '1fr 1fr',
      }}>
        {/* Left: wordmark, anchored bottom-left */}
        <div style={{ padding: '110px 60px 80px', display: 'flex',
          flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="chip" style={{ marginBottom: 20 }}>
              <span className="dot"></span>currently · 3 active orbits
            </div>
            <h1 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 400,
              fontSize: 76, letterSpacing: '-0.04em', margin: 0, lineHeight: 0.92,
            }}>
              recursive<br/>engineering
            </h1>
            <p style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontSize: 19, color: 'var(--ink-soft)', maxWidth: 360,
              lineHeight: 1.5, marginTop: 22,
            }}>
              A small lab. Apps closer in, papers further out. Everything
              orbits the same idea.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8,
            fontFamily: 'var(--font-mono)', fontSize: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 280 }}>
              <span>○ apps</span><span style={{ color: 'var(--ink-faint)' }}>04</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 280 }}>
              <span>◇ papers</span><span style={{ color: 'var(--ink-faint)' }}>06</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 280 }}>
              <span>· notes</span><span style={{ color: 'var(--ink-faint)' }}>23</span>
            </div>
          </div>
        </div>

        {/* Right: orbit canvas */}
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <FakeOrbital />
          {/* tiny labeled callouts to a couple of orbit dots */}
          <div style={{ position: 'absolute', top: '32%', left: '62%',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'var(--ink-soft)', letterSpacing: '0.05em' }}>
            ← Loom
          </div>
          <div style={{ position: 'absolute', top: '68%', left: '38%',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'var(--ink-soft)', letterSpacing: '0.05em' }}>
            Index →
          </div>
          <div style={{ position: 'absolute', top: '20%', left: '24%',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'var(--ink-soft)', letterSpacing: '0.05em' }}>
            ◇ fixed points (jan)
          </div>
        </div>
      </div>

      <div className="annot" style={{ top: 100, right: 80, transform: 'rotate(4deg)' }}>
        each ring = a kind of work
      </div>
    </div>
  );
};

window.Wireframe7 = Wireframe7;
window.FakeOrbital = FakeOrbital;