// Wireframe 1 — "Quiet Manifesto"
// Centered single-column. Wordmark + 1-line manifesto + ambient 3D behind.
// Layout: hero centered at 50/50. 3D is BACKGROUND, low-opacity recursive squares.
// Density: extremely sparse. Maybe 30 words on the page.
// Type: serif display + mono body.

const Wireframe1 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 800 }}>
      <div className="wf-num">w/01</div>
      <div className="wf-meta">quiet manifesto · centered · ambient 3D</div>

      {/* Ambient 3D background */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.35, zIndex: 0 }}>
        <FakeRecursiveSquares />
      </div>

      {/* Top bar */}
      <div style={{
        position: 'absolute', top: 28, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)',
        letterSpacing: '0.1em', textTransform: 'uppercase',
        zIndex: 2,
      }}>
        <span>recursive.engineering</span>
        <span>est. mmxxvi</span>
      </div>

      {/* Center hero */}
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 28, padding: '0 80px', textAlign: 'center',
      }}>
        <div className="chip"><span className="dot"></span>currently · 3 active threads</div>
        <h1 style={{
          fontFamily: 'var(--font-serif)',
          fontWeight: 300,
          fontSize: 92,
          letterSpacing: '-0.04em',
          margin: 0,
          lineHeight: 0.95,
        }}>
          Recursive<br />
          <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Engineering</em>
        </h1>
        <p style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 14,
          color: 'var(--ink-soft)',
          maxWidth: 520,
          lineHeight: 1.6,
          margin: 0,
        }}>
          A small lab building software, papers, and tools that fold back on
          themselves. We make the things we want to use.
        </p>
        <div style={{ display: 'flex', gap: 24, marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 12 }}>
          <a className="wobble">→ work</a>
          <a className="wobble">→ writing</a>
          <a className="wobble">→ contact</a>
        </div>
      </div>

      {/* Bottom corners */}
      <div style={{
        position: 'absolute', bottom: 28, left: 40,
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)',
        letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>
        ↓ scroll · index
      </div>
      <div style={{
        position: 'absolute', bottom: 28, right: 40,
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)',
        letterSpacing: '0.1em',
      }}>
        oakland · ca · 37.80°N
      </div>

      {/* Hand-drawn annotation */}
      <svg style={{ position: 'absolute', top: 180, right: 80, width: 140, height: 90, zIndex: 5 }}>
        <path d="M120,20 Q60,30 30,80" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3,3" />
        <polygon points="30,80 38,72 36,80" fill="var(--accent)" />
      </svg>
      <div className="annot" style={{ top: 150, right: 70, transform: 'rotate(-8deg)' }}>
        ambient recursion<br/><span style={{ fontSize: 14 }}>(slow, almost still)</span>
      </div>
    </div>
  );
};

window.Wireframe1 = Wireframe1;