// Wireframe 11 — "Paper Collage"
// Layered paper rectangles, torn edge, stamp, taped grid, botanical sketch.
// Warm taupe palette. The "3D" element here is a slowly drifting paper layer
// that parallaxes on cursor — physical, not digital.

const Wireframe11 = ({ tweaks }) => {
  return (
    <div className={`wf ${tweaks.dark ? 'dark' : ''}`} style={{
      width: 1280, height: 860,
      background: tweaks.dark ? '#2a221c' : '#d9c8b6',
      color: tweaks.dark ? '#f0ede5' : '#3d2f24',
    }}>
      <div className="wf-num">w/11</div>
      <div className="wf-meta">paper collage · layered · drifts on cursor</div>

      {/* layered papers */}
      {/* dark grey vertical strip */}
      <div style={{
        position: 'absolute', left: 180, top: 60, width: 90, height: 580,
        background: '#7a6a5c',
      }}></div>
      {/* large torn paper - dark warm */}
      <svg style={{ position: 'absolute', left: 250, top: 80, width: 720, height: 560 }}
        viewBox="0 0 720 560" preserveAspectRatio="none">
        <path d="M0,0 L640,0 L660,40 L640,80 L680,140 L660,200 L700,260 L680,340 L720,440 L700,560 L0,560 Z"
          fill="#8a7a6a" />
      </svg>
      {/* main beige paper */}
      <div style={{
        position: 'absolute', left: 320, top: 130, width: 640, height: 480,
        background: '#e8dcc8', boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
      }}></div>

      {/* tape strip */}
      <div style={{
        position: 'absolute', left: 220, top: 480, width: 80, height: 80,
        background: 'rgba(255,255,255,0.5)',
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 6px)',
        transform: 'rotate(-2deg)',
      }}></div>

      {/* label card on top */}
      <div style={{
        position: 'absolute', left: 280, top: 50, width: 320, height: 70,
        background: '#f4ead8', border: '1.5px solid #3d2f24',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 22, color: '#3d2f24',
        boxShadow: '0 3px 8px rgba(0,0,0,0.1)',
      }}>
        recursive engineering
      </div>

      {/* botanical SVG */}
      <svg style={{ position: 'absolute', left: 290, top: 140, width: 100, height: 200 }} viewBox="0 0 100 200">
        <path d="M50,200 L50,60" stroke="#f4ead8" strokeWidth="1.2" fill="none" />
        <path d="M50,80 Q35,70 30,55 Q35,55 50,75" stroke="#f4ead8" strokeWidth="1" fill="none" />
        <path d="M50,100 Q65,90 70,75 Q65,75 50,95" stroke="#f4ead8" strokeWidth="1" fill="none" />
        <circle cx="32" cy="50" r="5" stroke="#f4ead8" strokeWidth="1" fill="none" />
        <circle cx="50" cy="40" r="6" stroke="#f4ead8" strokeWidth="1" fill="none" />
        <circle cx="68" cy="48" r="5" stroke="#f4ead8" strokeWidth="1" fill="none" />
        <path d="M27,50 Q32,45 37,50 Q32,55 27,50" fill="#f4ead8" opacity="0.4" />
      </svg>

      {/* stamp with mark */}
      <div style={{
        position: 'absolute', right: 200, top: 420, width: 130, height: 150,
        background: '#f4ead8', transform: 'rotate(8deg)',
        backgroundImage: 'radial-gradient(circle at 4px 4px, #d9c8b6 3px, transparent 3px)',
        backgroundSize: '12px 12px',
        boxShadow: '0 4px 10px rgba(0,0,0,0.12)',
      }}>
        <div style={{
          position: 'absolute', inset: 8, background: '#f4ead8',
          border: '1px solid #6a5246',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="60" height="80" viewBox="0 0 60 80">
            <path d="M30,75 L30,35" stroke="#6a5246" strokeWidth="1" fill="none" />
            <path d="M30,40 Q15,30 12,15 Q22,18 30,38" stroke="#6a5246" strokeWidth="0.8" fill="none" />
            <ellipse cx="30" cy="20" rx="10" ry="14" stroke="#6a5246" strokeWidth="1" fill="none" />
            <path d="M25,18 Q30,10 35,18" stroke="#6a5246" strokeWidth="0.8" fill="none" />
          </svg>
        </div>
      </div>

      {/* postmark waves */}
      <svg style={{ position: 'absolute', right: 80, top: 590, width: 180, height: 30 }} viewBox="0 0 180 30">
        {[0,1,2,3].map(i => (
          <path key={i} d={`M0,${6 + i*6} Q45,${i*6} 90,${6+i*6} T180,${6+i*6}`}
            stroke="#6a5246" strokeWidth="0.8" fill="none" opacity="0.6" />
        ))}
      </svg>

      {/* thin frame outline bottom-left */}
      <div style={{
        position: 'absolute', left: 140, top: 580, width: 220, height: 200,
        border: '1.2px solid #f4ead8',
      }}></div>

      {/* main content on the beige paper */}
      <div style={{
        position: 'absolute', left: 360, top: 200, width: 540,
        fontFamily: 'var(--font-serif)',
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.2em', textTransform: 'uppercase',
          color: '#7a6a5c', marginBottom: 24 }}>
          ✦ field notes · vol. i
        </div>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 300,
          fontSize: 56, letterSpacing: '-0.03em', margin: 0, lineHeight: 1,
          color: '#3d2f24',
        }}>
          A small lab.<br/>
          <em style={{ fontWeight: 400 }}>Patient work.</em>
        </h1>
        <p style={{
          fontFamily: 'var(--font-serif)', fontSize: 16, fontStyle: 'italic',
          lineHeight: 1.6, color: '#5a4638', maxWidth: 380, marginTop: 24,
        }}>
          Software, papers, and tools — collected over time, layered like
          letters in a drawer.
        </p>
        <div style={{ marginTop: 36, fontFamily: 'var(--font-mono)', fontSize: 12, display: 'flex', gap: 20 }}>
          <a className="wobble" style={{ color: '#3d2f24' }}>open the drawer →</a>
        </div>
      </div>

      {/* corner stuff */}
      <div style={{
        position: 'absolute', top: 32, left: 48,
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em',
        textTransform: 'uppercase', color: '#5a4638',
      }}>recursive.engineering</div>
      <div style={{
        position: 'absolute', bottom: 32, right: 48,
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 13, color: '#5a4638',
      }}>— posted from oakland, mmxxvi</div>

      <div className="annot" style={{ top: 700, left: 220, transform: 'rotate(-4deg)', color: '#9a3a1a' }}>
        layers parallax<br/>on cursor
      </div>
    </div>
  );
};

window.Wireframe11 = Wireframe11;