// Wireframe 3 — "Console"
// Terminal-style. Monospace everywhere. Dense top, sparse bottom.
// 3D is interpreted as ASCII / character-art recursion in the left pane.
// Type: all monospace.

const Wireframe3 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 1280, height: 820,
      fontFamily: 'var(--font-mono)',
    }}>
      <div className="wf-num">w/03</div>
      <div className="wf-meta">console · all-mono · ASCII recursion</div>

      {/* Window chrome */}
      <div style={{
        margin: 32, marginTop: 56,
        border: '1.5px solid var(--rule)',
        height: 'calc(100% - 88px)',
        display: 'grid',
        gridTemplateRows: '32px 1fr',
      }}>
        <div style={{
          borderBottom: '1.5px solid var(--rule)',
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '0 12px',
          fontSize: 11, color: 'var(--ink-soft)',
        }}>
          <span style={{ width: 8, height: 8, border: '1px solid var(--rule)', borderRadius: '50%' }}></span>
          <span style={{ width: 8, height: 8, border: '1px solid var(--rule)', borderRadius: '50%' }}></span>
          <span style={{ width: 8, height: 8, border: '1px solid var(--rule)', borderRadius: '50%' }}></span>
          <span style={{ marginLeft: 16 }}>~/recursive.engineering — zsh — 132×40</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr',
          height: '100%', overflow: 'hidden' }}>
          {/* Left: ascii art */}
          <div style={{ borderRight: '1.5px solid var(--rule)',
            padding: 24, fontSize: 11, lineHeight: 1.2,
            whiteSpace: 'pre', color: 'var(--ink)', overflow: 'hidden' }}>
{`> render --recursive --depth=12

  ┌─────────────────────────────┐
  │  ┌───────────────────────┐  │
  │  │  ┌─────────────────┐  │  │
  │  │  │  ┌───────────┐  │  │  │
  │  │  │  │  ┌─────┐  │  │  │  │
  │  │  │  │  │  ·  │  │  │  │  │
  │  │  │  │  └─────┘  │  │  │  │
  │  │  │  └───────────┘  │  │  │
  │  │  └─────────────────┘  │  │
  │  └───────────────────────┘  │
  └─────────────────────────────┘

  depth   nodes   memory
  ─────   ─────   ──────
   01      1      8B
   02      4      32B
   03      16     128B
   ...
   12      16M    128MB

  → fixed point reached at d=14`}
          </div>

          {/* Right: prompt */}
          <div style={{ padding: 24, fontSize: 13, lineHeight: 1.7 }}>
            <div style={{ color: 'var(--ink-faint)' }}>// recursive.engineering · v0.4.1</div>
            <div style={{ color: 'var(--ink-faint)' }}>// last build: 2026.04.21 09:14 PDT</div>
            <div style={{ height: 14 }} />
            <div><span style={{ color: 'var(--accent)' }}>$</span> whoami</div>
            <div style={{ paddingLeft: 16 }}>
              a small lab building software, research,<br />
              and tools that fold back on themselves.
            </div>
            <div style={{ height: 14 }} />
            <div><span style={{ color: 'var(--accent)' }}>$</span> ls ./work</div>
            <div style={{ paddingLeft: 16, color: 'var(--ink-soft)' }}>
              loom/         &nbsp;app · live<br />
              index/        &nbsp;app · beta<br />
              papers/       &nbsp;6 entries<br />
              notes/        &nbsp;blog · weekly
            </div>
            <div style={{ height: 14 }} />
            <div><span style={{ color: 'var(--accent)' }}>$</span> cat ./manifesto.md | head -3</div>
            <div style={{ paddingLeft: 16, color: 'var(--ink-soft)' }}>
              # one engineer<br />
              # tools we want to use<br />
              # patient compounding
            </div>
            <div style={{ height: 14 }} />
            <div>
              <span style={{ color: 'var(--accent)' }}>$</span> _<span className="cursor-blink"></span>
            </div>
            <div style={{ height: 32 }} />
            <div style={{ display: 'flex', gap: 18, color: 'var(--ink-soft)', fontSize: 11 }}>
              <span>[w] work</span>
              <span>[r] research</span>
              <span>[n] notes</span>
              <span>[c] contact</span>
              <span>[?] help</span>
            </div>
          </div>
        </div>
      </div>

      <svg style={{ position: 'absolute', top: 200, left: 320, width: 100, height: 80, zIndex: 5 }}>
        <path d="M80,60 Q40,40 10,15" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3,3" />
        <polygon points="10,15 18,17 14,24" fill="var(--accent)" />
      </svg>
      <div className="annot" style={{ top: 270, left: 280, transform: 'rotate(6deg)' }}>
        animated ASCII<br/>(self-drawing)
      </div>
    </div>
  );
};

window.Wireframe3 = Wireframe3;