// Wireframe 2 — "Editorial Index"
// Research-paper feel. Two-column. Strong vertical rule. Numbered entries.
// 3D is small — a single sculpture in the masthead next to the title.
// Density: medium. Reads like a journal contents page.
// Type: serif display + mono.

const Wireframe2 = ({ tweaks }) => {
  const entries = [
    { n: '001', kind: 'paper', title: 'On self-modifying compilers', date: 'Apr 2026', status: 'draft' },
    { n: '002', kind: 'app', title: 'Loom — a recursive notetaker', date: 'Mar 2026', status: 'live' },
    { n: '003', kind: 'note', title: 'Why we left the framework', date: 'Mar 2026', status: 'live' },
    { n: '004', kind: 'app', title: 'Index — search your own brain', date: 'Feb 2026', status: 'beta' },
    { n: '005', kind: 'paper', title: 'Fixed points in agent design', date: 'Jan 2026', status: 'live' },
    { n: '006', kind: 'note', title: 'On building tools at small scale', date: 'Dec 2025', status: 'live' },
  ];

  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1280, height: 900 }}>
      <div className="wf-num">w/02</div>
      <div className="wf-meta">editorial · journal index · 3D in masthead</div>

      {/* Masthead */}
      <div style={{
        padding: '60px 60px 24px',
        borderBottom: '1.5px solid var(--rule)',
        display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 32,
      }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em',
            textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 12 }}>
            Vol. I  ·  Issue 04  ·  recursive.engineering
          </div>
          <h1 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400,
            fontSize: 78, letterSpacing: '-0.03em', margin: 0, lineHeight: 0.95,
          }}>
            Recursive <em>Engineering</em>
          </h1>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 18, color: 'var(--ink-soft)', marginTop: 12 }}>
            A working journal of software, research, and tools.
          </div>
        </div>
        <div style={{ width: 140, height: 140, border: '1.2px solid var(--rule)' }}>
          <FakeWireSculpture />
        </div>
      </div>

      {/* Two-col body */}
      <div style={{ padding: '40px 60px', display: 'grid',
        gridTemplateColumns: '1fr 320px', gap: 60 }}>

        {/* Index column */}
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 16,
            display: 'flex', justifyContent: 'space-between' }}>
            <span>— Index</span>
            <span>06 entries · sorted recent</span>
          </div>
          {entries.map(e => (
            <div key={e.n} style={{
              display: 'grid',
              gridTemplateColumns: '60px 80px 1fr 120px 80px',
              padding: '14px 0',
              borderBottom: '1px dotted var(--ink-faint)',
              fontFamily: 'var(--font-mono)', fontSize: 12,
              alignItems: 'baseline',
            }}>
              <span style={{ color: 'var(--ink-faint)' }}>{e.n}</span>
              <span style={{ color: 'var(--accent)', textTransform: 'uppercase', fontSize: 10 }}>{e.kind}</span>
              <span style={{ fontFamily: 'var(--font-serif)', fontSize: 18 }}>{e.title}</span>
              <span style={{ color: 'var(--ink-soft)' }}>{e.date}</span>
              <span style={{ color: 'var(--ink-soft)', textAlign: 'right' }}>{e.status}</span>
            </div>
          ))}
        </div>

        {/* Side rail */}
        <aside style={{ borderLeft: '1px solid var(--rule)', paddingLeft: 28 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 14 }}>— About</div>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 15,
            lineHeight: 1.55, marginTop: 0, color: 'var(--ink)' }}>
            Recursive Engineering is a one-person lab — for now — making the
            kinds of tools that take years to mature.
          </p>
          <div className="hr-sketch" style={{ margin: '24px 0' }} />
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 10 }}>— Subscribe</div>
          <div style={{ border: '1.2px solid var(--rule)', padding: '10px 12px',
            fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-faint)',
            display: 'flex', justifyContent: 'space-between' }}>
            <span>your@email</span>
            <span>↵</span>
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)',
            fontSize: 10, color: 'var(--ink-faint)' }}>
            ~one dispatch per month. no tracking.
          </div>
        </aside>
      </div>

      <svg style={{ position: 'absolute', top: 120, right: 240, width: 90, height: 60, zIndex: 5 }}>
        <path d="M10,40 Q40,10 80,20" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3,3" />
        <polygon points="80,20 72,18 76,28" fill="var(--accent)" />
      </svg>
      <div className="annot" style={{ top: 100, right: 230, transform: 'rotate(-4deg)' }}>
        small 3D mark
      </div>
    </div>
  );
};

window.Wireframe2 = Wireframe2;