// Wireframe 4 — "Hero Sculpture"
// Big 3D centerpiece. Wordmark below. Asymmetric. Most "show off" of the bunch.
// 3D dominates. Recursive geometry — Menger-sponge-like, slowly rotating.
// Type: sans display.

const Wireframe4 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 900 }}>
      <div className="wf-num">w/04</div>
      <div className="wf-meta">hero sculpture · 3D centerpiece · asymmetric</div>

      {/* Top nav */}
      <div style={{
        position: 'absolute', top: 32, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="dot"></span> recursive.engineering
        </span>
        <div style={{ display: 'flex', gap: 28 }}>
          <a className="wobble">work</a>
          <a className="wobble">research</a>
          <a className="wobble">notes</a>
          <a className="wobble">about</a>
        </div>
      </div>

      {/* 3D hero — large, off-center to the right */}
      <div style={{
        position: 'absolute', top: 90, right: 60,
        width: 620, height: 620,
        border: '1.2px dashed var(--rule)',
        background: 'rgba(0,0,0,0.01)',
      }}>
        <FakeRecursiveSquares />
        <div style={{ position: 'absolute', bottom: -22, right: 0,
          fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)',
          letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          fig.01 — recursive_geom · webgl · 60fps
        </div>
      </div>

      {/* Wordmark — bottom-left, big */}
      <div style={{
        position: 'absolute', left: 48, bottom: 80, maxWidth: 540,
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.15em', textTransform: 'uppercase',
          color: 'var(--ink-soft)', marginBottom: 18 }}>
          [ a software lab · est. 2026 ]
        </div>
        <h1 style={{
          fontFamily: 'var(--font-sans)', fontWeight: 500,
          fontSize: 110, letterSpacing: '-0.05em',
          margin: 0, lineHeight: 0.88,
        }}>
          recursive<br />engineering
        </h1>
        <p style={{
          fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: 17, lineHeight: 1.5, color: 'var(--ink-soft)',
          marginTop: 28, maxWidth: 380,
        }}>
          We build software that builds software, write papers about it,
          and ship the tools we wish existed.
        </p>
        <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
          <button className="chip" style={{ background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' }}>
            current work →
          </button>
          <button className="chip">say hello</button>
        </div>
      </div>

      {/* Bottom-right meta */}
      <div style={{
        position: 'absolute', bottom: 28, right: 48,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.1em', color: 'var(--ink-faint)',
        textAlign: 'right', lineHeight: 1.6,
      }}>
        v0.1 · oakland<br />
        scroll → for index
      </div>

      <svg style={{ position: 'absolute', top: 320, left: 540, width: 120, height: 100, zIndex: 5 }}>
        <path d="M10,20 Q70,40 110,80" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3,3" />
        <polygon points="110,80 102,76 102,86" fill="var(--accent)" />
      </svg>
      <div className="annot" style={{ top: 290, left: 510, transform: 'rotate(-6deg)' }}>
        big 3D thing<br/>(orbits on cursor)
      </div>
    </div>
  );
};

window.Wireframe4 = Wireframe4;