
function WhitePaperPage() {
  return (
    <React.Fragment>
      {/* Hero */}
      <section style={{
        background: 'var(--s4-paper-2)',
        borderBottom: '1px solid var(--s4-rule)',
        padding: '96px 40px 80px',
      }}>
        <div style={{
          maxWidth: 1160, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
              textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
              marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <ProcessMark />
              White Paper · 2026
            </div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 68, lineHeight: 1.0, letterSpacing: '-0.03em',
              margin: 0, maxWidth: 680,
            }}>
              Process Debt:
            </h1>
            <h2 style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
              fontSize: 32, lineHeight: 1.15, letterSpacing: '-0.01em',
              margin: '12px 0 0', color: 'var(--fg-2)', maxWidth: 680,
            }}>
              Why your company isn't ready for AI — and how to fix it.
            </h2>
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.55,
              color: 'var(--fg-1)', marginTop: 32, maxWidth: 560,
            }}>
              A field report from forty engagements. Why most AI pilots fail, what
              process debt is, and a four-step program for paying it down before
              you automate.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="../../assets/white_paper.pdf" target="_blank" style={{
                fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                padding: '14px 26px', border: '1px solid var(--s4-ink)',
                background: 'var(--s4-ink)', color: 'var(--s4-paper)',
                textDecoration: 'none', borderRadius: 2,
              }}>Download PDF  ↓</a>
              <a href="#read" style={{
                fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                padding: '14px 26px', border: '1px solid var(--s4-ink)',
                background: 'transparent', color: 'var(--s4-ink)',
                textDecoration: 'none', borderRadius: 2,
              }}>Read in browser</a>
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase',
              letterSpacing: '0.14em', color: 'var(--fg-3)', marginTop: 32,
            }}>
              32 pages · 18 min read · Sam Meyer, Principal
            </div>
          </div>

          <WhitePaperCover />
        </div>
      </section>

      {/* Pull stat */}
      <section style={{ padding: '96px 40px', maxWidth: 1160, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 200,
            lineHeight: 0.85, letterSpacing: '-0.04em',
            color: 'var(--s4-ink)',
          }}>
            95<span style={{ fontSize: 96, color: 'var(--s4-amber)' }}>%</span>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 28, lineHeight: 1.3,
              color: 'var(--fg-1)', margin: 0, maxWidth: 560,
              fontStyle: 'italic',
            }}>
              "The interest on process debt is paid in delayed transformations,
              failed projects, and competitive disadvantage. It compounds quietly
              until a board-approved AI initiative exposes it."
            </p>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 12,
              textTransform: 'uppercase', letterSpacing: '0.12em',
              color: 'var(--fg-3)', marginTop: 24,
            }}>
              § 1 · The tell
            </div>
          </div>
        </div>
      </section>

      {/* Contents */}
      <section id="read" style={{
        background: 'var(--s4-paper-2)',
        borderTop: '1px solid var(--s4-rule)',
        borderBottom: '1px solid var(--s4-rule)',
        padding: '120px 40px',
      }}>
        <div style={{
          maxWidth: 1160, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
              textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
              marginBottom: 24,
            }}>
              Contents
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em',
              margin: 0,
            }}>
              What you'll read inside.
            </h2>
          </div>
          <div>
            {[
              { n: '§1', t: 'The tell',                   p: 2,  b: 'The pattern every process-debt diagnosis begins with — and what it actually sounds like in a room.' },
              { n: '§2', t: 'What process debt is',       p: 6,  b: 'A working definition. The three forms it takes. Why it behaves like financial debt — and why it\'s worse.' },
              { n: '§3', t: 'Why AI exposes it',          p: 12, b: 'How automation takes garbage in, produces garbage faster, and widens the gaps that were already there.' },
              { n: '§4', t: 'A cautionary tale',          p: 17, b: 'A Fortune-500 AI implementation that failed. Not a technology problem. A process-debt crisis the technology revealed.' },
              { n: '§5', t: 'The Cognitive Framework',    p: 21, b: 'Five levels of cognitive processing. Where autonomous AI holds, where it assists, and where humans stay in the loop.' },
              { n: '§6', t: 'The four-step program',      p: 27, b: 'Process architecture → handoffs → requirements → prioritization. In order. No skipping.' },
              { n: '§7', t: 'Starting on Monday',         p: 31, b: 'A one-page checklist. The fastest credible first move for any operations leader reading this.' },
            ].map((s, i, a) => (
              <a key={s.n} href="#" style={{
                display: 'grid', gridTemplateColumns: '60px 1fr 60px',
                gap: 24, padding: '28px 0',
                borderTop: '1px solid var(--s4-rule)',
                borderBottom: i === a.length - 1 ? '1px solid var(--s4-rule)' : 'none',
                textDecoration: 'none', color: 'inherit',
                alignItems: 'baseline',
                transition: 'background 200ms var(--ease-out)',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--s4-paper-3)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: 'var(--s4-amber-ink)', letterSpacing: '0.04em',
                }}>{s.n}</span>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22,
                    letterSpacing: '-0.01em',
                  }}>{s.t}</div>
                  <div style={{
                    fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.5,
                    color: 'var(--fg-2)', marginTop: 6, maxWidth: 640,
                  }}>{s.b}</div>
                </div>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 12,
                  color: 'var(--fg-3)', textAlign: 'right',
                }}>p.{s.p}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Translations */}
      <section style={{ padding: '120px 40px', maxWidth: 1160, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
          marginBottom: 24,
        }}>
          A recurring device
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 48, lineHeight: 1.02, letterSpacing: '-0.02em',
          margin: 0, maxWidth: 860,
        }}>
          The things executives say, translated.
        </h2>
        <div style={{ marginTop: 56 }}>
          {[
            { q: 'Our process is organic and collaborative, so you can\'t define it.',
              a: 'No one owns it.' },
            { q: 'We\'re too complex to document.',
              a: 'The complexity is the problem, and it isn\'t going anywhere until someone writes it down.' },
            { q: 'Our people just know how it works.',
              a: 'Three people just know how it works. What happens when two leave?' },
            { q: 'We\'ll figure it out in the pilot.',
              a: 'The pilot will figure out that you haven\'t figured it out.' },
          ].map((t, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
              padding: '32px 0',
              borderTop: '1px solid var(--s4-rule)',
              borderBottom: i === 3 ? '1px solid var(--s4-rule)' : 'none',
            }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
                  letterSpacing: '0.14em', color: 'var(--fg-3)', marginBottom: 12,
                }}>What they say</div>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20,
                  lineHeight: 1.4, color: 'var(--fg-2)',
                }}>"{t.q}"</div>
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
                  letterSpacing: '0.14em', color: 'var(--s4-amber-ink)', marginBottom: 12,
                }}>Translation</div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 24,
                  fontWeight: 500, lineHeight: 1.25, color: 'var(--fg-1)',
                  letterSpacing: '-0.01em',
                }}>{t.a}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--s4-ink)', color: 'var(--s4-paper)', padding: '96px 40px' }}>
        <div style={{
          maxWidth: 1160, margin: '0 auto',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 40,
          flexWrap: 'wrap',
        }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em',
            margin: 0, maxWidth: 680,
          }}>
            Want the full paper in your inbox?
          </h2>
          <a href="contact.html" style={{
            fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
            padding: '16px 28px', background: 'var(--s4-paper)', color: 'var(--s4-ink)',
            textDecoration: 'none', border: '1px solid var(--s4-paper)', borderRadius: 2,
            whiteSpace: 'nowrap',
          }}>Request a copy  →</a>
        </div>
      </section>
    </React.Fragment>
  );
}

function WhitePaperCover() {
  return (
    <div style={{
      background: 'var(--s4-paper)',
      border: '1px solid var(--s4-ink)',
      aspectRatio: '0.77',
      position: 'relative', overflow: 'hidden',
      maxWidth: 360, justifySelf: 'end', width: '100%',
      boxShadow: '8px 8px 0 var(--s4-ink)',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(138,138,133,0.2) 1px, transparent 1px)',
        backgroundSize: '16px 16px',
      }} />
      <div style={{
        position: 'relative', padding: '40px 32px',
        display: 'flex', flexDirection: 'column', height: '100%',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
          letterSpacing: '0.14em', color: 'var(--fg-3)',
        }}>
          White Paper · Step 4 Consulting
        </div>
        <div style={{ marginTop: 'auto' }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 42,
            letterSpacing: '-0.03em', lineHeight: 0.95, color: 'var(--s4-ink)',
          }}>
            Process<br/>Debt.
          </div>
          <div style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 16,
            marginTop: 14, color: 'var(--fg-2)', lineHeight: 1.3,
          }}>
            Why your company<br/>isn't ready for AI<br/>— and how to fix it.
          </div>
          <svg width="100%" height="14" viewBox="0 0 240 14" style={{ marginTop: 40 }}>
            <line x1="6" y1="7" x2="234" y2="7" stroke="#0E0E0E" strokeWidth="1.5"/>
            <circle cx="6" cy="7" r="4" fill="#0E0E0E"/>
            <rect x="68" y="3" width="8" height="8" fill="#FAFAF7" stroke="#0E0E0E" strokeWidth="1.5"/>
            <rect x="124" y="3" width="8" height="8" fill="#FAFAF7" stroke="#0E0E0E" strokeWidth="1.5" transform="rotate(45 128 7)"/>
            <rect x="180" y="3" width="8" height="8" fill="#CD713D"/>
            <circle cx="234" cy="7" r="4" fill="#0E0E0E"/>
          </svg>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
            letterSpacing: '0.14em', color: 'var(--fg-3)', marginTop: 24,
          }}>
            Sam Meyer · 2026 Edition
          </div>
        </div>
      </div>
    </div>
  );
}

window.WhitePaperPage = WhitePaperPage;
