// Three Meridian brand foundation directions
// Each: wordmark, monogram, colors (light+dark), type, semantic, patterns, specimen

const DIRECTIONS = {
  A: {
    name: 'A · Clinical White',
    subtitle: 'NEJM/JAMA modernized — authoritative, medical',
    paper: '#fbfaf7',
    paperDim: '#f3efe8',
    ink: '#14120f',
    text: '#2a2723',
    muted: '#6b655c',
    rule: '#e2ddd2',
    accent: '#8a1f2b',       // oxblood
    accentDim: 'rgba(138,31,43,0.08)',
    serif: '"Source Serif 4", "Source Serif Pro", Georgia, serif',
    sans: '"Inter", -apple-system, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    semantic: { success: '#3f7a4f', warning: '#b27100', error: '#a33030', info: '#2a5b8f' },
    darkBg: '#141210',
    darkSurface: '#1c1a17',
    darkRule: '#2a2623',
    darkText: '#ebe6dd',
    darkMuted: '#8a8378',
  },
  B: {
    name: 'B · Instrument',
    subtitle: 'Lancet meets scientific catalog — precise, cartographic',
    paper: '#f4f1e8',
    paperDim: '#ebe7dc',
    ink: '#0e1522',
    text: '#1e2738',
    muted: '#5c6577',
    rule: '#d4cfc1',
    accent: '#1f3a68',       // ink navy
    accentDim: 'rgba(31,58,104,0.08)',
    serif: '"Spectral", "Source Serif 4", Georgia, serif',
    sans: '"IBM Plex Sans", "Inter", system-ui, sans-serif',
    mono: '"IBM Plex Mono", "JetBrains Mono", monospace',
    semantic: { success: '#2f6a4d', warning: '#96640a', error: '#8e2a2a', info: '#1f3a68' },
    darkBg: '#0e1522',
    darkSurface: '#161e2d',
    darkRule: '#24304a',
    darkText: '#e5e0d0',
    darkMuted: '#8995ac',
  },
  C: {
    name: 'C · Editorial',
    subtitle: 'eLife × Works in Progress — warm, long-form, readable',
    paper: '#f7f3ea',
    paperDim: '#ede7d8',
    ink: '#1b1f1a',
    text: '#2d322c',
    muted: '#6a6d63',
    rule: '#dcd5c2',
    accent: '#2e4a33',       // forest
    accentDim: 'rgba(46,74,51,0.08)',
    serif: '"Newsreader", "Source Serif 4", Georgia, serif',
    sans: '"Inter", -apple-system, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    semantic: { success: '#2e4a33', warning: '#a66a00', error: '#8c3020', info: '#385a7a' },
    darkBg: '#141612',
    darkSurface: '#1d201a',
    darkRule: '#2c2f26',
    darkText: '#ece6d7',
    darkMuted: '#8a8b7c',
  },
};

// ───────────────────────────── Wordmark ─────────────────────────────
function Wordmark({ d, size = 56, inverse = false }) {
  const ink = inverse ? d.darkText : d.ink;
  const accent = d.accent;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: size * 0.18, color: ink, fontFamily: d.serif, fontWeight: 400, fontSize: size, letterSpacing: '-0.02em', lineHeight: 1 }}>
      <span style={{ fontStyle: 'normal' }}>Meridian</span>
    </div>
  );
}

function WordmarkWithMark({ d, size = 56, inverse = false, variant = 'arc' }) {
  const ink = inverse ? d.darkText : d.ink;
  const stroke = inverse ? d.darkText : d.ink;
  const m = size * 1.05;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.28, color: ink, fontFamily: d.serif, fontSize: size, letterSpacing: '-0.02em', lineHeight: 1 }}>
      {variant === 'arc' && (
        <svg width={m} height={m} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
          <circle cx="50" cy="50" r="44" fill="none" stroke={stroke} strokeWidth="1.5" />
          <line x1="50" y1="6" x2="50" y2="94" stroke={stroke} strokeWidth="1.5" />
          <ellipse cx="50" cy="50" rx="22" ry="44" fill="none" stroke={stroke} strokeWidth="1.5" />
          <circle cx="50" cy="50" r="2.5" fill={d.accent} />
        </svg>
      )}
      {variant === 'tick' && (
        <svg width={m} height={m} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
          <line x1="50" y1="10" x2="50" y2="90" stroke={stroke} strokeWidth="2" />
          <line x1="38" y1="10" x2="62" y2="10" stroke={stroke} strokeWidth="1" />
          <line x1="38" y1="90" x2="62" y2="90" stroke={stroke} strokeWidth="1" />
          <line x1="42" y1="30" x2="58" y2="30" stroke={stroke} strokeWidth="1" />
          <line x1="42" y1="50" x2="58" y2="50" stroke={d.accent} strokeWidth="2" />
          <line x1="42" y1="70" x2="58" y2="70" stroke={stroke} strokeWidth="1" />
        </svg>
      )}
      {variant === 'leaf' && (
        <svg width={m} height={m} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
          <circle cx="50" cy="50" r="44" fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d="M 50 10 Q 18 50 50 90 Q 82 50 50 10" fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1="50" y1="10" x2="50" y2="90" stroke={d.accent} strokeWidth="1.2" />
        </svg>
      )}
      <span>Meridian</span>
    </div>
  );
}

// ───────────────────────────── Monogram ─────────────────────────────
function Monogram({ d, size = 64, inverse = false, variant = 'arc' }) {
  const bg = inverse ? d.darkSurface : d.paper;
  const ink = inverse ? d.darkText : d.ink;
  return (
    <div style={{ width: size, height: size, background: bg, border: `1px solid ${inverse ? d.darkRule : d.rule}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 100 100">
        {variant === 'arc' && (<>
          <circle cx="50" cy="50" r="40" fill="none" stroke={ink} strokeWidth="2" />
          <line x1="50" y1="10" x2="50" y2="90" stroke={ink} strokeWidth="2" />
          <ellipse cx="50" cy="50" rx="20" ry="40" fill="none" stroke={ink} strokeWidth="2" />
          <circle cx="50" cy="50" r="3.5" fill={d.accent} />
        </>)}
        {variant === 'tick' && (<>
          <line x1="50" y1="8" x2="50" y2="92" stroke={ink} strokeWidth="2.5" />
          <line x1="35" y1="8" x2="65" y2="8" stroke={ink} strokeWidth="1.5" />
          <line x1="35" y1="92" x2="65" y2="92" stroke={ink} strokeWidth="1.5" />
          <line x1="40" y1="30" x2="60" y2="30" stroke={ink} strokeWidth="1.5" />
          <line x1="40" y1="50" x2="60" y2="50" stroke={d.accent} strokeWidth="2.5" />
          <line x1="40" y1="70" x2="60" y2="70" stroke={ink} strokeWidth="1.5" />
        </>)}
        {variant === 'leaf' && (<>
          <circle cx="50" cy="50" r="40" fill="none" stroke={ink} strokeWidth="2" />
          <path d="M 50 10 Q 16 50 50 90 Q 84 50 50 10" fill="none" stroke={ink} strokeWidth="2" />
          <line x1="50" y1="10" x2="50" y2="90" stroke={d.accent} strokeWidth="2" />
        </>)}
      </svg>
    </div>
  );
}

// ───────────────────────────── Pattern ─────────────────────────────
function Pattern({ d, kind, inverse = false }) {
  const bg = inverse ? d.darkBg : d.paperDim;
  const stroke = inverse ? d.darkMuted : d.muted;
  const style = { width: '100%', height: 120, background: bg, overflow: 'hidden', position: 'relative' };
  if (kind === 'rules') {
    return (
      <div style={style}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
          {Array.from({ length: 12 }).map((_, i) => (
            <line key={i} x1="0" y1={10 + i * 10} x2="100%" y2={10 + i * 10} stroke={stroke} strokeWidth="0.5" opacity={i % 4 === 0 ? 0.8 : 0.25} />
          ))}
        </svg>
      </div>
    );
  }
  if (kind === 'grid') {
    return (
      <div style={{ ...style, backgroundImage: `linear-gradient(${stroke} 1px, transparent 1px), linear-gradient(90deg, ${stroke} 1px, transparent 1px)`, backgroundSize: '16px 16px', backgroundPosition: '0 0, 0 0', opacity: 1 }}>
        <div style={{ position: 'absolute', inset: 0, background: bg, opacity: 0.75 }} />
        <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: d.accent, opacity: 0.6 }} />
      </div>
    );
  }
  if (kind === 'ticks') {
    return (
      <div style={style}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
          <line x1="0" y1="60" x2="100%" y2="60" stroke={stroke} strokeWidth="1" />
          {Array.from({ length: 40 }).map((_, i) => (
            <line key={i} x1={i * 18 + 8} y1={i % 5 === 0 ? 48 : 54} x2={i * 18 + 8} y2={i % 5 === 0 ? 72 : 66} stroke={i % 10 === 0 ? d.accent : stroke} strokeWidth={i % 5 === 0 ? 1 : 0.5} />
          ))}
        </svg>
      </div>
    );
  }
  if (kind === 'meridian') {
    return (
      <div style={style}>
        <svg width="100%" height="120" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
          {Array.from({ length: 7 }).map((_, i) => (
            <ellipse key={i} cx="50%" cy="60" rx={40 + i * 50} ry="55" fill="none" stroke={stroke} strokeWidth="0.5" opacity="0.4" />
          ))}
          <line x1="50%" y1="0" x2="50%" y2="120" stroke={d.accent} strokeWidth="1" />
        </svg>
      </div>
    );
  }
  if (kind === 'columns') {
    return (
      <div style={style}>
        <div style={{ position: 'absolute', inset: '12px 16px', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 4 }}>
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} style={{ background: i === 5 ? d.accent : stroke, opacity: i === 5 ? 0.5 : 0.18, height: '100%' }} />
          ))}
        </div>
      </div>
    );
  }
  if (kind === 'data') {
    // small histogram-like data lines
    const bars = [0.3, 0.5, 0.7, 0.9, 0.8, 0.55, 0.4, 0.62, 0.78, 0.5, 0.35, 0.22, 0.45, 0.6, 0.75, 0.65, 0.5, 0.4, 0.3, 0.48];
    return (
      <div style={style}>
        <svg width="100%" height="120" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
          <line x1="0" y1="100" x2="100%" y2="100" stroke={stroke} strokeWidth="0.5" />
          {bars.map((b, i) => (
            <rect key={i} x={`${(i / bars.length) * 100 + 1}%`} y={100 - b * 80} width="4%" height={b * 80} fill={stroke} opacity="0.4" />
          ))}
          <polyline points={bars.map((b, i) => `${(i / bars.length) * 100 + 2.5}%,${100 - b * 80}`).join(' ')} fill="none" stroke={d.accent} strokeWidth="1.2" />
        </svg>
      </div>
    );
  }
  return <div style={style} />;
}

// ───────────────────────────── Panels ─────────────────────────────
function Panel({ title, children, d, flex = 1, minWidth = 320 }) {
  return (
    <div style={{ flex, minWidth, background: d.paper, border: `1px solid ${d.rule}`, padding: 28 }}>
      <div style={{ fontFamily: d.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: d.muted, marginBottom: 18 }}>{title}</div>
      {children}
    </div>
  );
}

function Swatch({ label, hex, d, big = false, textColor }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ background: hex, height: big ? 76 : 52, border: `1px solid ${d.rule}` }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{ fontFamily: d.sans, fontSize: 11, color: d.text, fontWeight: 500 }}>{label}</div>
        <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted }}>{hex.toUpperCase()}</div>
      </div>
    </div>
  );
}

// ───────────────────────────── Direction board ─────────────────────────────
function DirectionBoard({ k, d, markVariant }) {
  const width = 1440;
  return (
    <DCArtboard label={d.name} width={width} style={{ background: d.paper, border: `1px solid ${d.rule}` }}>

      {/* Masthead */}
      <div style={{ padding: '44px 48px 32px', borderBottom: `1px solid ${d.rule}`, background: d.paper }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: d.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: d.muted, marginBottom: 24 }}>
          <span>Meridian · Brand Foundation — Direction {k}</span>
          <span>ISSN 0000·0000 · Vol. 01</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40 }}>
          <div>
            <div style={{ fontFamily: d.serif, fontSize: 96, lineHeight: 0.95, color: d.ink, letterSpacing: '-0.03em' }}>Meridian</div>
            <div style={{ fontFamily: d.sans, fontSize: 13, color: d.muted, marginTop: 14, maxWidth: 520, lineHeight: 1.55 }}>{d.subtitle}. An open-access journal of biomedical and healthcare research. Transparent peer review, paid reviewers, fair access.</div>
          </div>
          <div style={{ textAlign: 'right', fontFamily: d.mono, fontSize: 10, color: d.muted, lineHeight: 1.9, letterSpacing: '0.06em' }}>
            <div>ESTABLISHED 2026</div>
            <div>OPEN ACCESS · CC-BY 4.0</div>
            <div>PEER REVIEWED · SIGNED</div>
          </div>
        </div>
      </div>

      {/* Wordmark + Monogram row */}
      <div style={{ padding: 40, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="01 · Wordmark" d={d}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div>
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, marginBottom: 10, letterSpacing: '0.1em' }}>PRIMARY</div>
              <Wordmark d={d} size={64} />
            </div>
            <div>
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, marginBottom: 10, letterSpacing: '0.1em' }}>WITH MARK</div>
              <WordmarkWithMark d={d} size={56} variant={markVariant} />
            </div>
            <div style={{ display: 'flex', gap: 24, alignItems: 'center', padding: '18px 20px', background: d.ink, border: `1px solid ${d.ink}` }}>
              <Wordmark d={d} size={40} inverse />
              <div style={{ width: 1, height: 32, background: d.darkRule }} />
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.darkMuted, letterSpacing: '0.1em' }}>INVERSE · ON DARK</div>
            </div>
          </div>
        </Panel>
        <Panel title="02 · Monogram · Favicon" d={d}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
              <Monogram d={d} size={88} variant={markVariant} />
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted }}>88px</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
              <Monogram d={d} size={44} variant={markVariant} />
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted }}>44px</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
              <Monogram d={d} size={24} variant={markVariant} />
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted }}>24px</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
              <Monogram d={d} size={16} variant={markVariant} />
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted }}>16px</div>
            </div>
          </div>
          <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
            <Monogram d={d} size={44} variant={markVariant} inverse />
            <div style={{ fontFamily: d.sans, fontSize: 11, color: d.muted, lineHeight: 1.5, alignSelf: 'center' }}>
              Works at 16px favicon scale. Single accent dot fades before the stroke at small sizes.
            </div>
          </div>
        </Panel>
      </div>

      {/* Color system */}
      <div style={{ padding: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="03 · Light surface · Paper" d={d}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            <Swatch d={d} label="Paper" hex={d.paper} big />
            <Swatch d={d} label="Paper dim" hex={d.paperDim} big />
            <Swatch d={d} label="Ink" hex={d.ink} big />
            <Swatch d={d} label="Accent" hex={d.accent} big />
            <Swatch d={d} label="Text" hex={d.text} />
            <Swatch d={d} label="Muted" hex={d.muted} />
            <Swatch d={d} label="Rule" hex={d.rule} />
            <Swatch d={d} label="Accent dim" hex={d.accent} />
          </div>
        </Panel>
        <Panel title="04 · Dark surface · Inverse" d={d}>
          <div style={{ background: d.darkBg, padding: 18, border: `1px solid ${d.darkRule}` }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {[
                ['Ink', d.darkBg], ['Surface', d.darkSurface], ['Rule', d.darkRule], ['Accent', d.accent],
                ['Text', d.darkText], ['Muted', d.darkMuted], ['Paper', d.paper], ['Ink inv', d.ink],
              ].map(([l, h]) => (
                <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ background: h, height: 48, border: `1px solid ${d.darkRule}` }} />
                  <div style={{ fontFamily: d.sans, fontSize: 10, color: d.darkText }}>{l}</div>
                  <div style={{ fontFamily: d.mono, fontSize: 9, color: d.darkMuted }}>{h.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </div>
        </Panel>
      </div>

      {/* Semantic */}
      <div style={{ padding: 40, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="05 · Semantic states · Evidence grade" d={d}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {Object.entries(d.semantic).map(([k, v]) => (
              <div key={k} style={{ border: `1px solid ${d.rule}`, padding: 14, background: d.paper }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <div style={{ width: 10, height: 10, background: v }} />
                  <div style={{ fontFamily: d.mono, fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: d.text }}>{k}</div>
                </div>
                <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted }}>{v.toUpperCase()}</div>
                <div style={{ marginTop: 12, fontFamily: d.sans, fontSize: 11, color: d.text }}>
                  <span style={{ padding: '3px 8px', background: v, color: '#fff', fontFamily: d.mono, fontSize: 9, letterSpacing: '0.08em' }}>
                    {k === 'success' && 'PEER REVIEWED'}
                    {k === 'warning' && 'PREPRINT'}
                    {k === 'error' && 'RETRACTED'}
                    {k === 'info' && 'DATA AVAILABLE'}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </Panel>
      </div>

      {/* Type */}
      <div style={{ padding: 40, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="06 · Type specimen" d={d}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            <div>
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted, marginBottom: 14, letterSpacing: '0.1em' }}>EDITORIAL · {d.serif.split(',')[0].replace(/"/g, '')}</div>
              <div style={{ fontFamily: d.serif, fontSize: 56, lineHeight: 1, color: d.ink, letterSpacing: '-0.02em', marginBottom: 8 }}>Display 56</div>
              <div style={{ fontFamily: d.serif, fontSize: 32, lineHeight: 1.15, color: d.ink, marginBottom: 8 }}>Article title 32</div>
              <div style={{ fontFamily: d.serif, fontSize: 22, lineHeight: 1.3, color: d.text, marginBottom: 8 }}>Section header 22</div>
              <div style={{ fontFamily: d.serif, fontSize: 16, lineHeight: 1.65, color: d.text, maxWidth: 360 }}>
                Body serif at 16 px with generous leading for long-form reading. The transitional letterforms remain legible at text sizes while holding editorial weight at display.
              </div>
            </div>
            <div>
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted, marginBottom: 14, letterSpacing: '0.1em' }}>UI · {d.sans.split(',')[0].replace(/"/g, '')}</div>
              <div style={{ fontFamily: d.sans, fontSize: 28, fontWeight: 600, color: d.ink, marginBottom: 6, letterSpacing: '-0.01em' }}>UI heading 28</div>
              <div style={{ fontFamily: d.sans, fontSize: 16, fontWeight: 500, color: d.text, marginBottom: 6 }}>UI label 16</div>
              <div style={{ fontFamily: d.sans, fontSize: 14, lineHeight: 1.55, color: d.text, marginBottom: 16, maxWidth: 360 }}>
                Body sans for product chrome and interface copy. Used for buttons, navigation, form labels, and any non-editorial surface.
              </div>
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted, marginBottom: 8, letterSpacing: '0.1em' }}>MONO · {d.mono.split(',')[0].replace(/"/g, '')}</div>
              <div style={{ fontFamily: d.mono, fontSize: 12, color: d.text, letterSpacing: '0.02em' }}>DOI · 10.xxxx/meridian.2026.0001</div>
              <div style={{ fontFamily: d.mono, fontSize: 12, color: d.text, letterSpacing: '0.02em' }}>VOL 01 · ISS 01 · APR 2026</div>
              <div style={{ fontFamily: d.mono, fontSize: 12, color: d.text, letterSpacing: '0.02em' }}>RECEIVED 14 Mar · ACCEPTED 02 Apr</div>
            </div>
          </div>
        </Panel>
      </div>

      {/* Patterns */}
      <div style={{ padding: 40, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="07 · Patterns · Section dividers" d={d}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {(k === 'A' ? ['rules', 'data', 'columns'] :
              k === 'B' ? ['meridian', 'ticks', 'grid'] :
              ['rules', 'meridian', 'columns']).map((p) => (
              <div key={p} style={{ border: `1px solid ${d.rule}` }}>
                <Pattern d={d} kind={p} />
                <div style={{ padding: '8px 12px', background: d.paper, fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.1em', textTransform: 'uppercase', borderTop: `1px solid ${d.rule}` }}>{p}</div>
              </div>
            ))}
          </div>
        </Panel>
      </div>

      {/* Specimen: article row */}
      <div style={{ padding: 40, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="08 · Applied · Article index row" d={d}>
          <div style={{ background: d.paper }}>
            <div style={{ borderTop: `1px solid ${d.ink}`, paddingTop: 16, display: 'grid', gridTemplateColumns: '100px 1fr 160px', gap: 28 }}>
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted, letterSpacing: '0.1em' }}>
                <div>RESEARCH</div>
                <div style={{ marginTop: 6, color: d.text }}>14 Apr 2026</div>
                <div style={{ marginTop: 2 }}>Vol 01 · 003</div>
              </div>
              <div>
                <div style={{ fontFamily: d.serif, fontSize: 26, lineHeight: 1.2, color: d.ink, letterSpacing: '-0.01em', marginBottom: 8 }}>
                  A cell-free assay for quantifying amyloid-β aggregation kinetics in pre-symptomatic Alzheimer cohorts
                </div>
                <div style={{ fontFamily: d.sans, fontSize: 12, color: d.text, marginBottom: 10 }}>
                  Sarah Chen<span style={{ color: d.muted }}>¹</span> · Miguel Ortega<span style={{ color: d.muted }}>¹</span> · Priya Raman<span style={{ color: d.muted }}>²</span> · Hannes Vogel<span style={{ color: d.muted }}>³</span>
                </div>
                <div style={{ fontFamily: d.serif, fontSize: 14, color: d.text, lineHeight: 1.55, maxWidth: 620 }}>
                  We report a microfluidic cell-free assay that resolves amyloid-β aggregation within 42 minutes, enabling longitudinal monitoring in pre-symptomatic cohorts without tissue sampling…
                </div>
                <div style={{ marginTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {['PEER REVIEWED', 'OPEN DATA', 'SIGNED REVIEW'].map((t, i) => (
                    <span key={t} style={{ fontFamily: d.mono, fontSize: 9, letterSpacing: '0.1em', padding: '3px 7px', color: i === 0 ? d.semantic.success : i === 1 ? d.semantic.info : d.accent, border: `1px solid ${i === 0 ? d.semantic.success : i === 1 ? d.semantic.info : d.accent}` }}>{t}</span>
                  ))}
                </div>
              </div>
              <div style={{ textAlign: 'right', fontFamily: d.mono, fontSize: 10, color: d.muted, letterSpacing: '0.04em', lineHeight: 1.8 }}>
                <div style={{ color: d.text, fontSize: 14 }}>1,284</div>
                <div>reads</div>
                <div style={{ marginTop: 6, color: d.text, fontSize: 14 }}>3</div>
                <div>reviewers · signed</div>
                <div style={{ marginTop: 10, color: d.accent }}>doi/10.xxxx/mer.0003 →</div>
              </div>
            </div>
          </div>
        </Panel>
      </div>

      {/* Specimen: submission dashboard snippet (the rewire moment) */}
      <div style={{ padding: 40, borderBottom: `1px solid ${d.rule}` }}>
        <Panel title="09 · Applied · Submission pipeline (old, familiar — new, alive)" d={d}>
          <div style={{ background: d.paperDim, border: `1px solid ${d.rule}`, padding: 24 }}>
            {/* topbar */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 14, borderBottom: `1px solid ${d.rule}`, marginBottom: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Monogram d={d} size={28} variant={markVariant} />
                <div style={{ fontFamily: d.serif, fontSize: 18, color: d.ink }}>Meridian</div>
                <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.12em', padding: '2px 6px', border: `1px solid ${d.rule}` }}>AUTHOR</div>
              </div>
              <div style={{ fontFamily: d.mono, fontSize: 10, color: d.muted, letterSpacing: '0.08em' }}>MS-2026-003 · RCVD 14 APR</div>
            </div>
            {/* pipeline */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, marginBottom: 18 }}>
              {[
                ['01', 'Intake', 'pass', '42s'],
                ['02', 'Desk review', 'pass', '3h'],
                ['03', 'Peer review', 'active', '14d'],
                ['04', 'Revisions', 'pending', '—'],
                ['05', 'Decision', 'pending', '—'],
                ['06', 'Published', 'pending', '—'],
              ].map(([n, l, s, t], i) => {
                const color = s === 'pass' ? d.semantic.success : s === 'active' ? d.accent : d.muted;
                return (
                  <div key={n} style={{ padding: '14px 16px', borderLeft: i === 0 ? `1px solid ${d.rule}` : 'none', borderRight: `1px solid ${d.rule}`, borderTop: `2px solid ${color}`, background: d.paper, position: 'relative' }}>
                    <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.12em' }}>{n}</div>
                    <div style={{ fontFamily: d.sans, fontSize: 13, color: d.ink, fontWeight: 500, marginTop: 2 }}>{l}</div>
                    <div style={{ fontFamily: d.mono, fontSize: 10, color, marginTop: 6, letterSpacing: '0.06em' }}>{s.toUpperCase()} · {t}</div>
                  </div>
                );
              })}
            </div>
            {/* body split */}
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20 }}>
              <div style={{ background: d.paper, border: `1px solid ${d.rule}`, padding: 18 }}>
                <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.12em', marginBottom: 10 }}>MANUSCRIPT</div>
                <div style={{ fontFamily: d.serif, fontSize: 20, color: d.ink, lineHeight: 1.25, letterSpacing: '-0.01em' }}>A cell-free assay for quantifying amyloid-β aggregation kinetics in pre-symptomatic Alzheimer cohorts</div>
                <div style={{ fontFamily: d.sans, fontSize: 11, color: d.muted, marginTop: 6 }}>Chen · Ortega · Raman · Vogel · 4 authors · 8,421 words · 6 figures</div>
                <div style={{ marginTop: 14, display: 'flex', gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ height: 4, background: d.rule, position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: '64%', background: d.accent }} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: d.mono, fontSize: 9, color: d.muted, marginTop: 6, letterSpacing: '0.06em' }}>
                      <span>REVIEW 2 OF 3 COMPLETE</span><span>ETA 03 MAY</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Completeness', '10/10', d.semantic.success],
                  ['References verified', '47/47', d.semantic.success],
                  ['ORCID linked', '4/4', d.semantic.success],
                  ['APC estimate', '$175', d.ink],
                  ['Time to decision', '~21d', d.accent],
                ].map(([k, v, c]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 12px', background: d.paper, border: `1px solid ${d.rule}`, fontFamily: d.sans, fontSize: 12 }}>
                    <span style={{ color: d.muted }}>{k}</span>
                    <span style={{ color: c, fontFamily: d.mono, fontSize: 11 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Panel>
      </div>

      {/* Specimen: article card + email header */}
      <div style={{ padding: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <Panel title="10 · Applied · Article card" d={d}>
          <div style={{ background: d.paper, border: `1px solid ${d.rule}` }}>
            <div style={{ padding: '10px 16px', borderBottom: `1px solid ${d.rule}`, display: 'flex', justifyContent: 'space-between', fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.12em' }}>
              <span>MERIDIAN · RESEARCH</span>
              <span>01 · 003</span>
            </div>
            <Pattern d={d} kind={k === 'A' ? 'data' : k === 'B' ? 'meridian' : 'rules'} />
            <div style={{ padding: 18, borderTop: `1px solid ${d.rule}` }}>
              <div style={{ fontFamily: d.serif, fontSize: 20, lineHeight: 1.2, color: d.ink, letterSpacing: '-0.01em' }}>Amyloid-β aggregation kinetics, resolved in 42 minutes</div>
              <div style={{ fontFamily: d.sans, fontSize: 11, color: d.muted, marginTop: 8 }}>Chen, Ortega, Raman, Vogel · 14 Apr 2026</div>
              <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
                <span style={{ fontFamily: d.mono, fontSize: 9, padding: '2px 6px', color: d.accent, border: `1px solid ${d.accent}`, letterSpacing: '0.1em' }}>REVIEWED</span>
                <span style={{ fontFamily: d.mono, fontSize: 9, padding: '2px 6px', color: d.semantic.info, border: `1px solid ${d.semantic.info}`, letterSpacing: '0.1em' }}>OPEN DATA</span>
              </div>
            </div>
          </div>
        </Panel>
        <Panel title="11 · Applied · Email header" d={d}>
          <div style={{ background: d.paper, border: `1px solid ${d.rule}` }}>
            <div style={{ padding: '20px 24px 18px', borderBottom: `1px solid ${d.ink}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontFamily: d.serif, fontSize: 32, color: d.ink, letterSpacing: '-0.02em' }}>Meridian</div>
                <div style={{ fontFamily: d.mono, fontSize: 9, color: d.muted, letterSpacing: '0.12em', textAlign: 'right' }}>
                  <div>WEEKLY DISPATCH</div>
                  <div>ISSUE 14 · APR 2026</div>
                </div>
              </div>
            </div>
            <div style={{ padding: 20 }}>
              <div style={{ fontFamily: d.mono, fontSize: 9, color: d.accent, letterSpacing: '0.12em', marginBottom: 8 }}>IN THIS ISSUE</div>
              <div style={{ fontFamily: d.serif, fontSize: 18, color: d.ink, lineHeight: 1.25, marginBottom: 4 }}>Three studies on early-stage neurodegenerative detection</div>
              <div style={{ fontFamily: d.sans, fontSize: 11, color: d.muted }}>Plus: new signed-review data, our April cohort of named reviewers.</div>
            </div>
          </div>
        </Panel>
      </div>

    </DCArtboard>
  );
}

Object.assign(window, { DIRECTIONS, DirectionBoard, Wordmark, Monogram, Pattern });