// Wireframe 8 — "Tower" (W1 lineage, dense)
// Centered single column but TALLER: hero → manifesto → 3 work cards → footer,
// all visible without scrolling on a tall artboard. Ambient 3D continues
// behind the whole tower. Quiet but more substantial than W1.

const Wireframe8 = ({ tweaks }) => {
  const work = [
    { kind: 'app',   name: 'Loom',   line: 'a notetaker that thinks back', when: 'live' },
    { kind: 'paper', name: 'Self-modifying compilers', line: 'on programs that rewrite themselves', when: 'apr 26 · draft' },
    { kind: 'app',   name: 'Index',  line: 'search your own brain', when: 'beta' },
  ];

  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{ width: 1080, height: 1400 }}>
      <div className="wf-num">w/08</div>
      <div className="wf-meta">tower · centered column · ambient bg continues</div>

      <div style={{ position: 'absolute', inset: 0, opacity: 0.28 }}>
        <FakeRecursiveSquares />
      </div>

      <div style={{
        position: 'absolute', top: 32, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
      }}>
        <span>recursive.engineering</span>
        <span>↗ rss · email</span>
      </div>

      <div style={{
        position: 'relative', maxWidth: 640, margin: '0 auto',
        padding: '180px 40px 80px', display: 'flex', flexDirection: 'column',
        gap: 80, textAlign: 'center', zIndex: 2,
      }}>
        {/* Hero */}
        <div>
          <div className="chip" style={{ marginBottom: 24 }}>
            <span className="dot"></span>est. 2026 · oakland
          </div>
          <h1 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 300,
            fontSize: 84, letterSpacing: '-0.04em', margin: 0, lineHeight: 0.95,
          }}>
            Recursive<br/>
            <em style={{ fontWeight: 400 }}>Engineering</em>
          </h1>
          <p style={{
            fontFamily: 'var(--font-mono)', fontSize: 13,
            color: 'var(--ink-soft)', maxWidth: 440, lineHeight: 1.6,
            margin: '24px auto 0',
          }}>
            A lab building software, papers, and tools that fold back on
            themselves. We make the things we want to use.
          </p>
        </div>

        {/* Work */}
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 18,
            display: 'flex', justifyContent: 'space-between' }}>
            <span>— Currently shipping</span>
            <span>03 of 14</span>
          </div>
          {work.map((w, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr auto',
              padding: '16px 0', borderTop: '1px solid var(--ink-faint)',
              alignItems: 'baseline', gap: 16,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
                color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                {w.kind}
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22 }}>{w.name}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                  fontSize: 14, color: 'var(--ink-soft)', marginTop: 2 }}>{w.line}</div>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
                color: 'var(--ink-soft)' }}>{w.when}</span>
            </div>
          ))}
          <div style={{ borderTop: '1px solid var(--ink-faint)' }} />
          <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
            <a className="wobble">→ full index (14)</a>
          </div>
        </div>

        {/* Newsletter */}
        <div style={{ borderTop: '1.5px solid var(--rule)',
          borderBottom: '1.5px solid var(--rule)', padding: '32px 0' }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 18, color: 'var(--ink)', marginBottom: 16 }}>
            One letter a month. What we're working on.
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center',
            maxWidth: 360, margin: '0 auto' }}>
            <input style={{
              flex: 1, border: '1.2px solid var(--rule)',
              background: 'transparent', padding: '10px 12px',
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)',
            }} placeholder="your@email" />
            <button className="chip" style={{
              background: 'var(--ink)', color: 'var(--paper)',
              borderColor: 'var(--ink)', padding: '8px 16px',
            }}>subscribe</button>
          </div>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 28, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)',
        letterSpacing: '0.1em', textTransform: 'uppercase', zIndex: 2,
      }}>
        <span>© 2026 recursive engineering</span>
        <span>github · twitter · email</span>
      </div>

      <div className="annot" style={{ top: 220, right: 80, transform: 'rotate(-6deg)' }}>
        same ambient bg as W1<br/>
        but vertical, fits more
      </div>
    </div>
  );
};

window.Wireframe8 = Wireframe8;