// Direction B — SPECIMEN
// Clinical archival. Margiela tags × FOG essentials interior × apothecary.
function SpecimenBoard() {
  const mono = { fontFamily: 'Space Mono, monospace' };
  const serif = { fontFamily: 'Newsreader, serif' };
  const sans = { fontFamily: 'Inter, sans-serif' };
  const ink = '#0F0E0C';
  const paper = '#F2EFE6';
  const card = '#FBF8EF';
  const fog = '#8a8275';
  const rx = '#A8331A';     // iodine / Rx signal — used sparingly
  const tape = '#E7DFCB';

  return (
    <div style={{
      width: '100%', height: '100%', background: paper, color: ink,
      ...sans, boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* HEADER STRIP */}
      <div style={{
        padding: '20px 70px', borderBottom: `1px solid ${ink}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        ...mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
      }}>
        <span>DIR · B · SPECIMEN</span>
        <span>LOT — 0024 / MMXXVI</span>
        <span>FOR PERMANENT USE</span>
      </div>

      {/* TITLE BLOCK */}
      <div style={{ padding: '52px 70px 40px', borderBottom: `1px solid ${ink}`, position: 'relative' }}>
        {/* Margiela-style number column */}
        <div style={{ position: 'absolute', top: 52, right: 70, ...mono, fontSize: 11, lineHeight: 2, color: fog, textAlign: 'right' }}>
          <div style={{ color: ink }}>01</div>
          <div>02</div>
          <div>03</div>
          <div>04</div>
          <div>05</div>
          <div>06</div>
          <div style={{ color: rx, fontWeight: 700 }}>07</div>
          <div>08</div>
          <div>09</div>
          <div>10</div>
        </div>

        <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 14 }}>B · SPECIMEN / CLINICAL ARCHIVE</div>
        <div style={{ ...serif, fontSize: 124, lineHeight: 0.92, fontWeight: 400, letterSpacing: '-0.025em' }}>Stoneset</div>
        <div style={{ ...serif, fontStyle: 'italic', fontSize: 56, lineHeight: 1, color: rx, marginTop: -6, fontWeight: 300, letterSpacing: '-0.01em' }}>(set, perm.)</div>

        <div style={{ marginTop: 30, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, maxWidth: 880 }}>
          <div style={{ ...serif, fontStyle: 'italic', fontSize: 22, lineHeight: 1.35, color: '#1f1c19', fontWeight: 400 }}>
            "Never throw a stone<br/>and hide your hand."<br/>
            <span style={{ ...mono, fontSize: 9, letterSpacing: 2, fontStyle: 'normal', color: fog }}>— FOUNDING DIRECTIVE</span>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.65, color: '#3a3530' }}>
            The doctor's side reframed as the streetwear move. Every garment, every word, every release is a specimen — labeled, batched, accounted for. Margiela's tag taxonomy meets Rx packaging meets FOG Essentials interior. The clinical record IS the badge.
          </div>
        </div>
      </div>

      {/* MARK SYSTEM */}
      <div style={{ padding: '32px 70px 28px', borderBottom: `1px solid ${ink}` }}>
        <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>01 · MARK SYSTEM</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, height: 220 }}>

          {/* Wordmark serif */}
          <div style={{ background: card, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1px solid ${ink}` }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>01 · WORDMARK</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <div style={{ ...serif, fontSize: 32, fontWeight: 500, letterSpacing: '-0.01em' }}>
                Stoneset<sup style={{ ...mono, fontSize: 9, fontWeight: 400, letterSpacing: 1, color: rx, marginLeft: 3 }}>℞</sup>
              </div>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>EDITORIAL</div>
          </div>

          {/* Rx seal */}
          <div style={{ background: card, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1px solid ${ink}` }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>02 · ℞ STAMP</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <svg viewBox="0 0 100 100" width="120" height="120">
                <circle cx="50" cy="50" r="46" fill="none" stroke={ink} strokeWidth="0.8"/>
                <circle cx="50" cy="50" r="42" fill="none" stroke={ink} strokeWidth="0.3"/>
                <text x="50" y="38" textAnchor="middle" fontFamily="Newsreader" fontStyle="italic" fontSize="22" fill={rx} fontWeight="500">℞</text>
                <line x1="22" y1="46" x2="78" y2="46" stroke={ink} strokeWidth="0.4"/>
                <text x="50" y="58" textAnchor="middle" fontFamily="Space Mono" fontSize="7" fill={ink} letterSpacing="1">STONESET</text>
                <text x="50" y="68" textAnchor="middle" fontFamily="Space Mono" fontSize="5" fill={fog} letterSpacing="2">STSET</text>
                <text x="50" y="86" textAnchor="middle" fontFamily="Space Mono" fontSize="5" fill={ink} letterSpacing="2.5">· FOR USE AS DIRECTED ·</text>
                <text x="50" y="18" textAnchor="middle" fontFamily="Space Mono" fontSize="5" fill={ink} letterSpacing="2.5">· NDC · 0024-2026 ·</text>
              </svg>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>SCRIPT</div>
          </div>

          {/* Number tag (Margiela) */}
          <div style={{ background: card, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1px solid ${ink}` }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>03 · NUMBER TAG</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, position: 'relative' }}>
              <div style={{ ...mono, fontSize: 13, lineHeight: 1.9, textAlign: 'left', color: fog }}>
                <div>01</div>
                <div>02</div>
                <div style={{
                  color: ink, fontWeight: 700, position: 'relative', display: 'inline-block', padding: '0 4px',
                }}>
                  <span style={{ position: 'absolute', inset: -2, border: `1.2px solid ${rx}`, borderRadius: '50%', transform: 'scale(1.6, 1.1)' }}/>
                  03
                </div>
                <div>04</div>
                <div>05</div>
              </div>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>CIRCLED · 03</div>
          </div>

          {/* Box logo with serial */}
          <div style={{ background: ink, color: paper, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>04 · LABEL</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, flexDirection: 'column' }}>
              <div style={{ ...serif, fontSize: 26, fontWeight: 400, letterSpacing: '-0.01em' }}>Stoneset</div>
              <div style={{ ...mono, fontSize: 8, letterSpacing: 3, color: fog, marginTop: 4 }}>S/T/S — 0024</div>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>SPINE</div>
          </div>

        </div>
      </div>

      {/* PALETTE + TYPE */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', borderBottom: `1px solid ${ink}` }}>
        {/* Palette */}
        <div style={{ padding: '28px 36px 28px 70px', borderRight: `1px solid ${ink}` }}>
          <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>02 · PALETTE / Rx STANDARD</div>
          {[
            { name: 'INK', hex: '#0F0E0C', use: 'Type, marks, hardware', sw: ink },
            { name: 'PAPER', hex: '#F2EFE6', use: 'Primary surface — chart paper', sw: paper, border: true },
            { name: 'CARD', hex: '#FBF8EF', use: 'Tag stock, labels', sw: card, border: true },
            { name: 'IODINE', hex: '#A8331A', use: 'Signal. ℞, hazards, circled numerals.', sw: rx },
            { name: 'FOG', hex: '#8A8275', use: 'Metadata, secondary type', sw: fog },
          ].map((c) => (
            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 16, marginBottom: 12, alignItems: 'center' }}>
              <div style={{ width: 52, height: 52, background: c.sw, border: c.border ? `1px solid ${ink}` : 'none' }}/>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ ...mono, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em' }}>{c.name}</span>
                  <span style={{ ...mono, fontSize: 10, color: fog }}>{c.hex}</span>
                </div>
                <div style={{ fontSize: 11, color: '#5a544c', marginTop: 2 }}>{c.use}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Type */}
        <div style={{ padding: '28px 70px 28px 36px' }}>
          <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>03 · TYPE</div>
          <div style={{ marginBottom: 18 }}>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>DISPLAY · NEWSREADER ROMAN</div>
            <div style={{ ...serif, fontSize: 52, lineHeight: 0.95, fontWeight: 500, letterSpacing: '-0.015em' }}>For permanent use.</div>
          </div>
          <div style={{ marginBottom: 18 }}>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>EDITORIAL · NEWSREADER ITALIC</div>
            <div style={{ ...serif, fontStyle: 'italic', fontSize: 30, lineHeight: 1.2, fontWeight: 400 }}>The record is the receipt.</div>
          </div>
          <div>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>SYSTEM · SPACE MONO</div>
            <div style={{ ...mono, fontSize: 12, lineHeight: 1.55, color: '#1f1c19' }}>℞ 0024 — STSET<br/>SIG / TAKE AS DIRECTED · NO REFILLS</div>
          </div>
        </div>
      </div>

      {/* APPLICATIONS */}
      <div style={{ padding: '32px 70px 36px', flex: 1 }}>
        <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>04 · APPLIED / SPECIMEN DRAWER</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr 1.1fr', gap: 16, height: 340 }}>

          {/* Rx Pad as business card */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>℞ PAD · BUSINESS CARD</div>
            <div style={{ background: card, border: `1px solid ${ink}`, flex: 1, padding: 20, position: 'relative', display: 'flex', flexDirection: 'column' }}>
              <div style={{ ...mono, fontSize: 8, letterSpacing: 2, display: 'flex', justifyContent: 'space-between', borderBottom: `1px solid ${ink}`, paddingBottom: 8 }}>
                <span>STONESET · INC.</span>
                <span style={{ color: rx }}>No. 0024</span>
              </div>
              <div style={{ ...serif, fontSize: 24, fontWeight: 500, marginTop: 14, letterSpacing: '-0.01em' }}>Stoneset Inc.</div>
              <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 1.5, marginTop: 4 }}>FOUNDER · CLINICIAN</div>
              <div style={{ flex: 1, ...serif, fontStyle: 'italic', fontSize: 18, lineHeight: 1.3, marginTop: 18, color: '#1f1c19' }}>
                <span style={{ color: rx, fontWeight: 500 }}>℞</span> Clarity, full strength.<br/>Quiet conviction, as needed.
              </div>
              <div style={{ borderTop: `1px solid ${ink}`, paddingTop: 8, ...mono, fontSize: 8, letterSpacing: 2, color: fog, display: 'flex', justifyContent: 'space-between' }}>
                <span>STSET.CO</span>
                <span>SAN DIEGO</span>
              </div>
            </div>
          </div>

          {/* Hoodie tag — Margiela-style */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>INTERIOR TAG · APPAREL</div>
            <div style={{ background: card, border: `1px solid ${ink}`, flex: 1, padding: 20, display: 'flex', flexDirection: 'column' }}>
              <div style={{ ...mono, fontSize: 9, letterSpacing: 1.6, lineHeight: 2.2, color: fog, textAlign: 'right' }}>
                <div>00 — STSET</div>
                <div>01 — HEAVYWEIGHT HOODIE</div>
                <div>02 — CREWNECK</div>
                <div>03 — TEE</div>
                <div style={{ color: ink, fontWeight: 700, position: 'relative', display: 'inline-block' }}>
                  <span style={{ position: 'absolute', inset: '-3px -10px', border: `1.4px solid ${rx}`, borderRadius: '50%', transform: 'scale(1.05, 1.2)' }}/>
                  04 — CAP
                </div>
                <div>05 — TOTE</div>
                <div>06 — PATCH</div>
              </div>
              <div style={{ borderTop: `1px solid ${ink}`, marginTop: 'auto', paddingTop: 10, ...mono, fontSize: 8, letterSpacing: 1.5, color: ink, lineHeight: 1.5 }}>
                LOT 0024<br/>
                MADE FOR SD<br/>
                ONE STONE / ONE SET
              </div>
            </div>
          </div>

          {/* Drop poster */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>DROP / SPECIMEN POSTER</div>
            <div style={{ background: ink, color: paper, flex: 1, padding: 22, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, display: 'flex', justifyContent: 'space-between' }}>
                <span>℞ 0024 / SPRING MMXXVI</span>
                <span style={{ color: rx }}>FOR USE AS DIRECTED</span>
              </div>
              <div style={{ ...serif, fontSize: 44, lineHeight: 0.95, fontWeight: 500, letterSpacing: '-0.02em' }}>
                Stoneset<sup style={{ ...mono, fontSize: 13, color: rx, fontWeight: 400, marginLeft: 4 }}>℞</sup>
                <div style={{ ...serif, fontStyle: 'italic', fontSize: 24, color: '#dfd8c8', fontWeight: 300, letterSpacing: '-0.01em' }}>(set, perm.) <span style={{ ...mono, fontSize: 11, color: fog, fontStyle: 'normal', letterSpacing: 2 }}>— ADJ., 1.</span></div>
              </div>
              <div>
                <div style={{ ...serif, fontStyle: 'italic', fontSize: 15, lineHeight: 1.35, marginBottom: 10, color: '#dfd8c8' }}>
                  Decided, weighted, done. The conversation is over because there's nothing left to debate.
                </div>
                <div style={{ borderTop: `1px solid ${fog}`, paddingTop: 8, ...mono, fontSize: 8, letterSpacing: 2, color: fog, display: 'flex', justifyContent: 'space-between' }}>
                  <span>NDC · 0024-MMXXVI</span>
                  <span>STSET.CO</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      {/* FOOTER */}
      <div style={{
        padding: '14px 70px', borderTop: `1px solid ${ink}`, background: card,
        ...mono, fontSize: 9, letterSpacing: 3, textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>DIR · B · SPECIMEN</span>
        <span style={{ color: rx }}>℞ THE RECORD IS THE RECEIPT.</span>
        <span>STONESET / INC · LOT 0024</span>
      </div>
    </div>
  );
}
window.SpecimenBoard = SpecimenBoard;