// Template detail page — EDITORIAL (magazine layout · prestige)

const ED_DET = {
  bg:      '#fbf8f1',
  bg2:     '#f6f0e2',
  ink:     '#1a1814',
  ink2:    '#3a362d',
  dim:     '#9a8a72',
  line:    '#d8d4c8',
  line2:   '#b0a89c',
  accent:  '#9a2828',
  display: 'DM Serif Display, "IBM Plex Serif", serif',
  serif:   'IBM Plex Serif, "Source Serif Pro", Georgia, serif',
  sans:    'IBM Plex Sans, system-ui, sans-serif',
  mono:    'IBM Plex Mono, monospace',
};
const E = ED_DET;
const eyebrow = { fontFamily: E.mono, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: E.dim };

function EDC01_Shell() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, color: E.ink, padding: '10px 12px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid ' + E.line, paddingBottom: 6 }}>
        <div style={eyebrow}>VOL IV · No. 207 · FRI MAY 15</div>
        <div style={{ fontFamily: E.display, fontSize: 18, letterSpacing: '-0.01em' }}>The Draw Quarterly</div>
        <div style={eyebrow}>STERLING · LENDER</div>
      </div>
      <div style={{ display: 'flex', gap: 14, marginTop: 8, fontFamily: E.mono, fontSize: 10, color: E.ink2 }}>
        {['Portfolio','Open draws','Approvals','Inspections','Variance','Audit'].map((n, i) => (
          <span key={n} style={{ borderBottom: i === 0 ? '1.5px solid ' + E.accent : 'none', paddingBottom: 3, color: i === 0 ? E.accent : E.ink2, fontWeight: i === 0 ? 600 : 400 }}>{n}</span>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 8, left: 12, right: 12, fontFamily: E.mono, fontSize: 8, color: E.dim, letterSpacing: '0.08em', borderTop: '1px solid ' + E.line, paddingTop: 4 }}>
        // masthead · TOC nav · acting-as line
      </div>
    </div>
  );
}
function EDC02_Signin() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: 240, textAlign: 'center' }}>
        <div style={eyebrow}>SUBSCRIBER ACCESS</div>
        <div style={{ fontFamily: E.display, fontSize: 26, marginTop: 6, lineHeight: 1.05 }}>The Draw<br/>Quarterly</div>
        <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 13, color: E.ink2, marginTop: 6 }}>Magic-link admission. No password required.</div>
        <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
        <div style={{ padding: '5px 10px', borderBottom: '1px solid ' + E.ink, fontFamily: E.mono, fontSize: 10.5, textAlign: 'left' }}>marcus@cornerstone.cap</div>
        <div style={{ marginTop: 12, padding: '8px 12px', background: E.ink, color: E.bg, fontFamily: E.mono, fontSize: 10.5, letterSpacing: '0.06em' }}>RECEIVE LINK →</div>
      </div>
    </div>
  );
}
function EDC03_Actors() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 10, color: E.ink }}>
      <div style={eyebrow}>// CONTRIBUTORS · MASTHEAD · 8</div>
      <hr style={{ margin: '4px 0 10px', border: 0, borderTop: '1px solid ' + E.line }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {TPL_SAMPLE.actors.slice(0, 6).map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '28px 1fr', gap: 8, alignItems: 'center', paddingBottom: 4, borderBottom: i < 4 ? '1px dotted ' + E.line2 : 'none' }}>
            <div style={{ width: 24, height: 24, borderRadius: '50%', background: i === 0 ? E.accent : E.bg2, color: i === 0 ? E.bg : E.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: E.serif, fontSize: 11, fontWeight: 600, border: '1px solid ' + (i === 0 ? E.accent : E.line2) }}>{a[0]}</div>
            <div>
              <div style={{ fontFamily: E.display, fontSize: 12.5, lineHeight: 1.1 }}>{a[1]}</div>
              <div style={{ fontFamily: E.serif, fontSize: 10.5, fontStyle: 'italic', color: E.dim, marginTop: 1 }}>{a[2]}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
function EDC04_Home() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 14, color: E.ink }}>
      <div style={eyebrow}>SECTION A · LEAD</div>
      <h1 style={{ fontFamily: E.display, fontSize: 26, letterSpacing: '-0.01em', lineHeight: 1.05, marginTop: 4, marginBottom: 4, fontWeight: 400 }}>
        Eight applications.<br/><span style={{ color: E.dim }}>One needs your eyes.</span>
      </h1>
      <div style={{ fontFamily: E.serif, fontSize: 11, fontStyle: 'italic', color: E.dim }}>By Marcus Sterling, Lender Admin · 18:37</div>
      <hr style={{ margin: '6px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 6 }}>
        {[['EXPOSURE','$62.6M','12 active'],['RELEASED','$127.8K','net retainage'],['FLAGS','01','> 5%']].map(([l, v, sub], i) => (
          <div key={i}>
            <div style={eyebrow}>{l}</div>
            <div style={{ fontFamily: E.display, fontSize: 22, letterSpacing: '-0.01em', marginTop: 2 }}>{v}</div>
            <div style={{ fontFamily: E.serif, fontSize: 10, fontStyle: 'italic', color: E.dim }}>{sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
function EDC05_List() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 10, color: E.ink }}>
      <div style={eyebrow}>// LISTINGS · DRAWS IN FLIGHT · 08</div>
      <hr style={{ margin: '4px 0 6px', border: 0, borderTop: '1px solid ' + E.line }} />
      {TPL_SAMPLE.draws.map((d, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr 70px 80px', gap: 8, padding: '5px 0', borderBottom: '1px solid ' + E.line, alignItems: 'baseline' }}>
          <span style={{ fontFamily: E.mono, fontSize: 10, color: E.dim }}>{d[0]}</span>
          <span style={{ fontFamily: E.display, fontSize: 13 }}>{d[1]}</span>
          <span style={{ fontFamily: E.mono, fontSize: 10.5, textAlign: 'right' }}>{d[2]}</span>
          <span style={{ fontFamily: E.serif, fontSize: 10.5, fontStyle: 'italic', color: d[3] === 'correction' ? E.accent : E.dim, textAlign: 'right' }}>{d[3]}</span>
        </div>
      ))}
    </div>
  );
}
function EDC06_Detail() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 14, color: E.ink }}>
      <div style={eyebrow}>FEATURED · ARTICLE</div>
      <h2 style={{ fontFamily: E.display, fontSize: 22, letterSpacing: '-0.005em', lineHeight: 1.1, marginTop: 4 }}>Riverline Plaza</h2>
      <div style={{ fontFamily: E.serif, fontSize: 11, fontStyle: 'italic', color: E.dim, marginTop: 2 }}>Application 7 of an ongoing series. Period ending May 31, 2026.</div>
      <hr style={{ margin: '8px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
      <div style={{ fontFamily: E.serif, fontSize: 12, lineHeight: 1.55, color: E.ink2 }}>
        <span style={{ float: 'left', fontFamily: E.display, fontSize: 36, lineHeight: 0.85, marginRight: 6, marginTop: 4, color: E.accent }}>T</span>
        his draw requests $142,000 against a contract sum of $2,377,000. Work in place stands at 76 percent. Five waivers received; one variance flag is open.
      </div>
    </div>
  );
}
function EDC07_Form() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 12, color: E.ink }}>
      <div style={eyebrow}>// SUBMISSION · STAGE 03 / 05</div>
      <h3 style={{ fontFamily: E.display, fontSize: 17, marginTop: 4, letterSpacing: '-0.005em' }}>Schedule of values</h3>
      <hr style={{ margin: '6px 0', border: 0, borderTop: '1px solid ' + E.line }} />
      <div style={{ marginTop: 6 }}>
        {[['Project','Riverline Plaza'],['Period','2026·05·31'],['Lines','12 line items']].map(([l, v], i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 8, padding: '4px 0', borderBottom: '1px dotted ' + E.line2, alignItems: 'baseline' }}>
            <span style={{ fontFamily: E.serif, fontSize: 11, fontStyle: 'italic', color: E.dim }}>{l}</span>
            <span style={{ fontFamily: E.serif, fontSize: 13 }}>{v}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 10, right: 12, fontFamily: E.mono, fontSize: 10.5 }}>
        <span style={{ color: E.dim }}>← back  </span>
        <span style={{ padding: '4px 10px', background: E.ink, color: E.bg, letterSpacing: '0.04em' }}>NEXT →</span>
      </div>
    </div>
  );
}
function EDC08_Workflow() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 12, color: E.ink }}>
      <div style={eyebrow}>BYLINE · SIGNATORIES IN ORDER</div>
      <hr style={{ margin: '4px 0 10px', border: 0, borderTop: '1px solid ' + E.line }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[['Diego Ortega','Contractor', true],['Hank Mendez','Inspector', true],['Aisha Patel','Loan officer', false],['Sarah Kim','Owner', false],['Pedro Alvarez','Finance', false]].map(([n, role, done], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 18, height: 18, borderRadius: '50%', background: done ? E.accent : 'transparent', border: '1.5px solid ' + (done ? E.accent : E.line2), color: E.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: E.mono, fontSize: 9, fontWeight: 700 }}>{done ? '✓' : i + 1}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: E.display, fontSize: 13, color: done ? E.ink : E.dim }}>{n}</div>
              <div style={{ fontFamily: E.serif, fontSize: 10, fontStyle: 'italic', color: E.dim }}>{role}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
function EDC09_Audit() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 10, color: E.ink }}>
      <div style={eyebrow}>// CHRONICLE · LAST 5</div>
      <hr style={{ margin: '4px 0 6px', border: 0, borderTop: '1px solid ' + E.line }} />
      {TPL_SAMPLE.audit.map((a, i) => (
        <div key={i} style={{ padding: '5px 0', borderBottom: i === 4 ? 'none' : '1px solid ' + E.line }}>
          <div style={{ fontFamily: E.mono, fontSize: 9.5, color: E.dim }}>{a[0]}</div>
          <div style={{ fontFamily: E.serif, fontSize: 12, marginTop: 1 }}>
            <i>{a[1]}</i>
            <span style={{ color: E.dim }}> — {a[2]}</span>
          </div>
        </div>
      ))}
    </div>
  );
}
function EDC10_Output() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 10, color: E.ink }}>
      <div style={eyebrow}>// GENERATED · PACKET · 4 PP.</div>
      <div style={{ marginTop: 6, height: 154, background: '#fffdf6', border: '1px solid ' + E.line2, padding: '10px 14px', boxShadow: '0 6px 14px rgba(0,0,0,0.08)' }}>
        <div style={{ textAlign: 'center', fontFamily: E.mono, fontSize: 7.5, letterSpacing: '0.14em', color: E.dim }}>DOCUMENT G702 · APP 07</div>
        <div style={{ fontFamily: E.display, fontSize: 18, textAlign: 'center', marginTop: 4, lineHeight: 1 }}>Riverline Plaza</div>
        <hr style={{ margin: '4px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
        <div style={{ fontFamily: E.display, fontSize: 22, textAlign: 'center', color: E.accent }}>$142,000</div>
        <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[100, 92, 78, 85].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: E.mono, fontSize: 8 }}>
              <span style={{ width: 14, color: E.dim }}>0{i+1}</span>
              <div style={{ flex: 1, height: 3, background: E.line }}><div style={{ height: '100%', width: p + '%', background: E.accent }} /></div>
              <span style={{ width: 22, textAlign: 'right' }}>{p}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
function EDC11_Settings() {
  const roles = ['Admin','Loan','GC','Sub','Inspector','Owner'];
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, padding: 10, color: E.ink }}>
      <div style={eyebrow}>// MASTHEAD · PERMISSIONS</div>
      <hr style={{ margin: '4px 0 6px', border: 0, borderTop: '1px solid ' + E.line }} />
      <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: E.mono, fontSize: 10 }}>
        <thead><tr style={{ borderBottom: '1px solid ' + E.line2 }}>{['Role','read','submit','approve','release'].map((h, i) => (<th key={i} style={{ padding: '4px 4px', textAlign: i === 0 ? 'left' : 'center', fontFamily: E.mono, fontSize: 8, color: E.dim, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{h}</th>))}</tr></thead>
        <tbody>
          {roles.map((r, i) => (
            <tr key={r} style={{ borderBottom: '1px solid ' + E.line }}>
              <td style={{ padding: '3px 4px', fontFamily: E.serif, fontSize: 11 }}>{r}</td>
              {[0,1,2,3].map(j => {
                const g = (i === 0) || (j === 0) || (i < 3 && j < 3) || (i === 5 && j === 3);
                return <td key={j} style={{ textAlign: 'center', color: g ? E.accent : E.line2, fontFamily: E.serif, fontSize: 12 }}>{g ? '●' : '○'}</td>;
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
function EDC12_Empty() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: E.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 16, textAlign: 'center', color: E.ink }}>
      <div style={{ fontFamily: E.display, fontSize: 28, lineHeight: 1, letterSpacing: '-0.01em' }}>—</div>
      <div style={{ fontFamily: E.display, fontSize: 18, marginTop: 8, letterSpacing: '-0.005em' }}>The shelf is bare.</div>
      <div style={{ fontFamily: E.serif, fontSize: 12.5, fontStyle: 'italic', color: E.dim, marginTop: 4, maxWidth: 220 }}>Invite a contractor and the first article will appear here.</div>
      <span style={{ marginTop: 12, padding: '6px 16px', background: E.accent, color: E.bg, fontFamily: E.mono, fontSize: 10, letterSpacing: '0.08em' }}>INVITE A CONTRIBUTOR</span>
    </div>
  );
}

function TemplateDetailEditorial() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f6f4ef', overflow: 'auto', fontFamily: 'IBM Plex Sans, system-ui', color: '#1a1814' }}>
      <TplNav />
      <TplBreadcrumb tplId="editorial" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ padding: '20px 36px 32px', borderRight: '1px solid #d8d4c8' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: E.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// 05 of 06 · template</span>
            <span style={{ padding: '2px 8px', borderRadius: 99, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: E.mono, fontSize: 10, color: E.accent, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: E.accent }} /> prestige play</span>
          </div>
          <h1 style={{ fontFamily: E.display, fontSize: 64, letterSpacing: '-0.025em', lineHeight: 1, marginTop: 12, fontWeight: 400 }}>Editorial.</h1>
          <div style={{ fontFamily: E.serif, fontSize: 22, fontStyle: 'italic', color: '#6b6557', marginTop: 6, lineHeight: 1.2 }}>The dashboard reads like a quarterly.</div>
          <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.55, color: '#3a362d', maxWidth: 540 }}>
            Editorial renders every uStack app as a calm, prestige publication. DM Serif Display headlines · drop caps · multi-column body · IBM Plex Mono dateline. The dashboard becomes a <b>lead article</b>. The draws list becomes <b>Listings</b>. The audit log becomes the <b>Chronicle</b>.
            Oxblood accent appears once per page — for an item that needs your eyes. The whole app feels printed, considered, and expensive.
          </p>
          <TplBestForPills items={['ClientHub', 'RFPRoom', 'CampaignGate', 'PolicyDesk (alt)', 'AuditField (alt)']} />
        </div>
        <div style={{ padding: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f0eee9' }}>
          <div style={{ width: '100%', height: 380, borderRadius: 4, overflow: 'hidden', boxShadow: '0 16px 44px rgba(28,24,16,0.18)', background: E.bg, padding: '20px 26px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
            <div style={{ borderBottom: '4px double ' + E.ink, paddingBottom: 6, textAlign: 'center' }}>
              <div style={eyebrow}>VOL IV · NUMBER 207 · FRIDAY MAY 15 MMXXVI</div>
              <div style={{ fontFamily: 'UnifrakturCook, ' + E.display, fontWeight: 700, fontSize: 38, letterSpacing: '0.01em', lineHeight: 1, marginTop: 2 }}>The Stack Times</div>
              <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 11, marginTop: 1 }}>All the operations fit to print</div>
            </div>
            <div style={{ display: 'flex', gap: 8, padding: '4px 0', borderBottom: '1px solid ' + E.ink, fontFamily: E.mono, fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: E.ink2 }}>
              <span style={{ color: E.accent, fontWeight: 600 }}>A · Portfolio</span><span>·</span><span>B · Listings</span><span>·</span><span>C · Of Note</span><span style={{ marginLeft: 'auto' }}>pp. 7 / 24</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18, marginTop: 12, flex: 1, minHeight: 0 }}>
              <div style={{ borderRight: '1px solid ' + E.line2, paddingRight: 14 }}>
                <div style={eyebrow}>LEAD · DRAW REVIEW</div>
                <h2 style={{ fontFamily: E.display, fontSize: 22, letterSpacing: '-0.005em', lineHeight: 1.05, marginTop: 4, fontWeight: 400 }}>
                  Eight applications.<br/><span style={{ color: E.dim }}>One needs your eyes.</span>
                </h2>
                <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 10.5, color: E.dim, marginTop: 4 }}>By Marcus Sterling, Lender Admin · 18:37 EDT</div>
                <hr style={{ margin: '6px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
                <div style={{ columnCount: 2, columnGap: 14, fontFamily: E.serif, fontSize: 11.5, lineHeight: 1.55, color: E.ink2, textAlign: 'justify', hyphens: 'auto' }}>
                  <p style={{ margin: 0 }}>
                    <span style={{ float: 'left', fontFamily: E.display, fontSize: 36, lineHeight: 0.85, marginRight: 4, marginTop: 4, fontWeight: 400 }}>P</span>
                    ortfolio exposure stood at <b>$62.6 million</b> across twelve active loans at week's end, with $127,800 released this period net of retainage. Four parties had to agree before money moved on DRAW-2031, and the requisite signatures were obtained in due course.
                  </p>
                  <p style={{ marginTop: 8 }}>
                    Among open applications, the Hawthorne Apartments draw at <b>$620,000</b> exceeds the approval matrix threshold and now awaits your desk.
                  </p>
                </div>
              </div>
              <div>
                <div style={eyebrow}>OF NOTE</div>
                <div style={{ fontFamily: E.display, fontSize: 14, fontStyle: 'italic', lineHeight: 1.2, marginTop: 8, borderLeft: '3px solid ' + E.accent, paddingLeft: 10 }}>
                  "Four parties must agree before money moves. Eight if you count us."
                </div>
                <hr style={{ margin: '10px 0', border: 0, borderTop: '1px solid ' + E.line2 }} />
                <div style={eyebrow}>AUDIT NOTICE</div>
                <ul style={{ paddingLeft: 14, fontFamily: E.serif, fontSize: 11, marginTop: 6, color: E.ink2, lineHeight: 1.45 }}>
                  <li style={{ marginBottom: 4 }}><i>packet generated</i> · M. Sterling</li>
                  <li style={{ marginBottom: 4 }}><i>waiver expired</i> · Northwind</li>
                  <li style={{ marginBottom: 4 }}><i>draw released</i> · P. Alvarez</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <TplWhy title="Some workflows want to be read, not operated." reasons={[
        ['Advisory teams trust prestige.',  'Lawyers, financial advisors, agencies — their work is sold on the calm of the page. Editorial speaks that dialect at first glance.'],
        ['Drop caps signal slow.',          'A capital P at 36px tells the reader: this matters, take your time. Operational software almost never gets to say that.'],
        ['One accent earns its color.',     'Oxblood appears once per page — at the exception that needs your eyes. The restraint makes the signal land.'],
      ]} />

      <TplInProduction items={[
        { name: 'ClientHub',    industry: 'Agency client portal', url: 'clienthub.ustack.ai',    actors: 7, signature: 'Engagements as cover stories · deliverables as listings · status reports', accent: E.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: E.bg, color: E.ink, padding: 12 }}>
              <div style={{ borderBottom: '2px solid ' + E.ink, paddingBottom: 4, textAlign: 'center' }}>
                <div style={eyebrow}>VOL II · ISSUE 04</div>
                <div style={{ fontFamily: E.display, fontSize: 18, marginTop: 2 }}>Aldridge &amp; Co.</div>
              </div>
              <h3 style={{ fontFamily: E.display, fontSize: 16, marginTop: 8, letterSpacing: '-0.005em' }}>Three deliverables on track. Two awaiting your sign-off.</h3>
              <div style={{ fontFamily: E.serif, fontSize: 10, fontStyle: 'italic', color: E.dim, marginTop: 2 }}>From Sarah Lin, Account Lead</div>
            </div>
          ) },
        { name: 'RFPRoom',      industry: 'RFP responses',        url: 'rfproom.ustack.ai',      actors: 7, signature: 'Question library · reviewer chains · final response packet', accent: E.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: E.bg, color: E.ink, padding: 12 }}>
              <div style={eyebrow}>// RESPONSE PACKET · DRAFT 03</div>
              <h3 style={{ fontFamily: E.display, fontSize: 17, marginTop: 4 }}>Northwind RFP-2031</h3>
              <div style={{ fontFamily: E.serif, fontSize: 11, fontStyle: 'italic', color: E.dim, marginTop: 2 }}>14 questions · 9 fresh · 3 stale · 2 unanswered</div>
              <div style={{ marginTop: 8, fontFamily: E.serif, fontSize: 11, lineHeight: 1.5, color: E.ink2 }}>
                <span style={{ float: 'left', fontFamily: E.display, fontSize: 28, lineHeight: 0.85, marginRight: 4, marginTop: 2, color: E.accent }}>Q</span>
                Question 7: <i>Describe your data residency model and audit posture.</i>
              </div>
            </div>
          ) },
        { name: 'CampaignGate', industry: 'Marketing approval',   url: 'campaigngate.ustack.ai', actors: 7, signature: 'Creative review as press read · brand + legal + exec sign-off · launch checklist', accent: E.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: E.bg, color: E.ink, padding: 12, textAlign: 'center' }}>
              <div style={eyebrow}>CAMPAIGN A-204 · IN REVIEW</div>
              <div style={{ fontFamily: E.display, fontSize: 22, marginTop: 6, letterSpacing: '-0.005em' }}>Summer Collection ·<br/><span style={{ fontStyle: 'italic', color: E.accent }}>The Coastal Edit</span></div>
              <hr style={{ margin: '10px 18px', border: 0, borderTop: '1px solid ' + E.line2 }} />
              <div style={{ fontFamily: E.serif, fontSize: 11, color: E.dim, fontStyle: 'italic' }}>Brand ✓ · Legal ✓ · Exec pending</div>
            </div>
          ) },
      ]} />

      <TplComponentsGrid title="Twelve canonical components — every one set in serifs and rules.">
        <TplCComp no="01" name="App shell"        sub="masthead · TOC nav">           <EDC01_Shell /></TplCComp>
        <TplCComp no="02" name="Sign-in"          sub="subscriber access">             <EDC02_Signin /></TplCComp>
        <TplCComp no="03" name="Persona switcher" sub="contributors masthead">          <EDC03_Actors /></TplCComp>
        <TplCComp no="04" name="Home · dashboard" sub="lead article">                   <EDC04_Home /></TplCComp>
        <TplCComp no="05" name="Object list"      sub="listings · dot leaders">         <EDC05_List /></TplCComp>
        <TplCComp no="06" name="Object detail"    sub="feature with drop cap">          <EDC06_Detail /></TplCComp>
        <TplCComp no="07" name="Form · multi-step"sub="submission form">                <EDC07_Form /></TplCComp>
        <TplCComp no="08" name="Workflow chain"   sub="byline · signatories">           <EDC08_Workflow /></TplCComp>
        <TplCComp no="09" name="Audit feed"       sub="chronicle">                       <EDC09_Audit /></TplCComp>
        <TplCComp no="10" name="Generated output" sub="printed packet">                  <EDC10_Output /></TplCComp>
        <TplCComp no="11" name="Settings · admin" sub="masthead permissions">            <EDC11_Settings /></TplCComp>
        <TplCComp no="12" name="Empty state"      sub="the shelf is bare">                <EDC12_Empty /></TplCComp>
      </TplComponentsGrid>

      <TplTokens
        tokens={[
          { kind: 'TYPE',     v: 'DM Serif Display + IBM Plex Serif + Mono', sub: 'big headlines · justified body · monospace dateline' },
          { kind: 'COLOR',    v: 'Newsprint cream + ink + oxblood',          sub: 'one accent · reserved for what needs your eyes' },
          { kind: 'DENSITY',  v: 'Generous · whitespace-led',                sub: 'rules and dividers carry structure' },
          { kind: 'CHROME',   v: 'Drop caps · pull quotes · rules',          sub: 'masthead chrome · no sidebars · justified columns' },
          { kind: 'TONE',     v: 'Prestige · slow · authoritative',          sub: 'feels printed, not produced' },
        ]}
        swatches={[
          ['paper',   E.bg],
          ['paper-2', E.bg2],
          ['ink',     E.ink],
          ['oxblood', E.accent],
          ['rule',    E.line2],
        ]}
      />

      <TplCTA title="Build your app in Editorial, or browse the other five." ctaColor={E.accent} ctaLabel="Build in Editorial →" />
      <TplFooter text="© 2026 ustack · editorial template · all 12 components live" />
    </div>
  );
}

window.TemplateDetailEditorial = TemplateDetailEditorial;