// Direction A — MONOLITH
// Brutalist monochrome. ACW × FOG. The museum-plaque heavyweight.
function MonolithBoard() {
  const wm = { fontFamily: 'Archivo Black, sans-serif', letterSpacing: '0.005em', textTransform: 'uppercase' };
  const mono = { fontFamily: 'JetBrains Mono, monospace' };
  const serif = { fontFamily: 'Instrument Serif, serif' };
  const ink = '#0A0908';
  const bone = '#EDE8DE';
  const concrete = '#C7C1B5';
  const fog = '#9C968B';

  return (
    <div style={{
      width: '100%', height: '100%', background: bone, color: ink,
      fontFamily: 'Inter, sans-serif', boxSizing: 'border-box',
      padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* HEADER STRIP */}
      <div style={{
        padding: '28px 70px', borderBottom: `1px solid ${ink}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        ...mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase',
      }}>
        <span>DIR · A</span>
        <span>STONESET / MONOLITH</span>
        <span>SET IN STONE</span>
      </div>

      {/* TITLE BLOCK */}
      <div style={{ padding: '52px 70px 36px', borderBottom: `1px solid ${ink}` }}>
        <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 14 }}>A · MONOLITH / BRUTALIST MONOCHROME</div>
        <div style={{ ...wm, fontSize: 140, lineHeight: 0.82, marginLeft: -6 }}>STONE<br/>SET</div>
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60 }}>
          <div style={{ ...serif, fontStyle: 'italic', fontSize: 28, lineHeight: 1.25, color: '#1f1c19' }}>
            "Never throw a stone<br/>and hide your hand."
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.65, color: '#3a3530' }}>
            The version of Stoneset that walks into a boardroom and a tunnel show and is somehow at home in both. Heavy condensed wordmark. Cold-stamped seal. Concrete and bone. No color. No noise. The weight does the talking.
          </div>
        </div>
      </div>

      {/* LOGO SYSTEM */}
      <div style={{ padding: '36px 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 }}>
          {/* Primary wordmark */}
          <div style={{ background: ink, color: bone, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>01 · PRIMARY WORDMARK</div>
            <div style={{ ...wm, fontSize: 32, lineHeight: 1, textAlign: 'center' }}>STONESET</div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>INC.</div>
          </div>
          {/* Box logo */}
          <div style={{ background: bone, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1px solid ${ink}` }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>02 · BOX</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <div style={{
                background: ink, color: bone, padding: '10px 18px',
                ...wm, fontSize: 24, letterSpacing: '0.01em', lineHeight: 1,
              }}>STONESET</div>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: '#7a7268', textAlign: 'right' }}>STAMP</div>
          </div>
          {/* Cold stamp seal */}
          <div style={{ background: bone, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1px solid ${ink}` }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>03 · COLD-STAMP SEAL</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="1"/>
                <circle cx="50" cy="50" r="40" fill="none" stroke={ink} strokeWidth="0.4"/>
                <text x="50" y="44" textAnchor="middle" fontFamily="Archivo Black" fontSize="14" fill={ink} letterSpacing="0.5">SET</text>
                <line x1="22" y1="50" x2="78" y2="50" stroke={ink} strokeWidth="0.5"/>
                <text x="50" y="62" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="6" fill={ink} letterSpacing="2">PERMANENT</text>
                <text x="50" y="86" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="5" fill={ink} letterSpacing="2.5">· STONESET · INC ·</text>
                <text x="50" y="18" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="5" fill={ink} letterSpacing="2.5">· SAN DIEGO · MMXXVI ·</text>
              </svg>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: '#7a7268', textAlign: 'right' }}>NOTARIAL</div>
          </div>
          {/* SS monogram */}
          <div style={{ background: ink, color: bone, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>04 · MONOGRAM</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <div style={{ ...wm, fontSize: 96, lineHeight: 0.85, letterSpacing: '-0.04em' }}>SS</div>
            </div>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, textAlign: 'right' }}>S/S</div>
          </div>
        </div>
      </div>

      {/* PALETTE + TYPE */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', borderBottom: `1px solid ${ink}`, flex: 'none' }}>
        {/* Palette */}
        <div style={{ padding: '32px 36px 32px 70px', borderRight: `1px solid ${ink}` }}>
          <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>02 · PALETTE / FOUR STONES</div>
          {[
            { name: 'INK', hex: '#0A0908', use: 'Primary. Headlines, marks, base.', sw: ink, fg: bone },
            { name: 'BONE', hex: '#EDE8DE', use: 'Page. Never white. Always warm.', sw: bone, fg: ink, border: true },
            { name: 'CONCRETE', hex: '#C7C1B5', use: 'Mid. Cards, surfaces, divisions.', sw: concrete, fg: ink },
            { name: 'FOG', hex: '#9C968B', use: 'Metadata. Secondary type.', sw: fog, fg: ink },
          ].map((c) => (
            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 18, marginBottom: 14, alignItems: 'center' }}>
              <div style={{ width: 60, height: 60, background: c.sw, border: c.border ? `1px solid ${ink}` : 'none' }}/>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ ...wm, fontSize: 16, 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: '32px 70px 32px 36px' }}>
          <div style={{ ...mono, fontSize: 10, letterSpacing: 3, color: fog, marginBottom: 18 }}>03 · TYPE</div>
          <div style={{ marginBottom: 22 }}>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>DISPLAY · ARCHIVO BLACK</div>
            <div style={{ ...wm, fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.005em' }}>STAND.<br/>DON'T POSE.</div>
          </div>
          <div style={{ marginBottom: 22 }}>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>EDITORIAL · INSTRUMENT SERIF ITALIC</div>
            <div style={{ ...serif, fontStyle: 'italic', fontSize: 30, lineHeight: 1.2 }}>The hand stays open, the hand stays known.</div>
          </div>
          <div>
            <div style={{ ...mono, fontSize: 9, color: fog, letterSpacing: 2, marginBottom: 6 }}>SYSTEM · JETBRAINS MONO</div>
            <div style={{ ...mono, fontSize: 13, lineHeight: 1.5, color: '#1f1c19' }}>LOT-024 · STSET · SD · MMXXVI<br/>STONESET / INC / VOL. 01</div>
          </div>
        </div>
      </div>

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

          {/* Business card */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>BUSINESS CARD · FRONT/BACK</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, flex: 1 }}>
              <div style={{ background: ink, color: bone, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ ...wm, fontSize: 14, lineHeight: 1 }}>STONESET</div>
                <div>
                  <div style={{ ...serif, fontStyle: 'italic', fontSize: 18, lineHeight: 1.1, marginBottom: 6 }}>Stoneset Inc.</div>
                  <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>FOUNDER · CLINICIAN</div>
                </div>
              </div>
              <div style={{ background: bone, color: ink, padding: 18, border: `1px solid ${ink}`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ ...mono, fontSize: 8, letterSpacing: 2 }}>STSET.CO<br/>SAN DIEGO<br/>BY APPOINTMENT</div>
                <div style={{ ...serif, fontStyle: 'italic', fontSize: 13, lineHeight: 1.2 }}>"Never throw a stone and hide your hand."</div>
              </div>
            </div>
          </div>

          {/* Hoodie tag */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>INTERIOR TAG · APPAREL</div>
            <div style={{ background: bone, border: `1px solid ${ink}`, flex: 1, padding: 18, position: 'relative' }}>
              <div style={{ ...wm, fontSize: 18, lineHeight: 1, marginBottom: 16 }}>STONESET</div>
              <div style={{ borderTop: `1px solid ${ink}`, paddingTop: 10 }}>
                <div style={{ ...mono, fontSize: 9, letterSpacing: 1.5, lineHeight: 1.7, color: '#1f1c19' }}>
                  CAPSULE / 01<br/>
                  STYLE / SS-001 HEAVYWEIGHT<br/>
                  COLOR / BONE<br/>
                  SIZE / L<br/>
                  FAB / 14oz COTTON · 100%<br/>
                  ORIGIN / MADE FOR SD<br/>
                  LOT / 0024-MMXXVI<br/>
                  CARE / WASH COLD · HANG
                </div>
              </div>
              <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, borderTop: `1px solid ${ink}`, paddingTop: 8, ...mono, fontSize: 7, letterSpacing: 2, color: fog, display: 'flex', justifyContent: 'space-between' }}>
                <span>STAND. DON'T POSE.</span>
                <span>© STSET</span>
              </div>
            </div>
          </div>

          {/* Podcast bumper / drop tile */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>DROP TILE · SPEAKING / PODCAST</div>
            <div style={{ background: ink, color: bone, flex: 1, padding: 22, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', ...mono, fontSize: 8, letterSpacing: 2, color: fog }}>
                <span>EP. 014</span>
                <span>05·19·MMXXVI</span>
              </div>
              <div style={{ ...wm, fontSize: 38, lineHeight: 0.85, letterSpacing: '-0.01em' }}>QUIET<br/>WEIGHT.</div>
              <div>
                <div style={{ ...serif, fontStyle: 'italic', fontSize: 16, lineHeight: 1.2, marginBottom: 10, color: '#dfd8c8' }}>"You don't need a mic. You need a record."</div>
                <div style={{ ...mono, fontSize: 8, letterSpacing: 2, color: fog, display: 'flex', justifyContent: 'space-between', borderTop: `1px solid ${fog}`, paddingTop: 8 }}>
                  <span>STONESET / INC</span>
                  <span>STSET</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      {/* FOOTER */}
      <div style={{
        padding: '14px 70px', borderTop: `1px solid ${ink}`, background: ink, color: bone,
        ...mono, fontSize: 9, letterSpacing: 3, textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>DIR · A · MONOLITH</span>
        <span>STAND. DON'T POSE.</span>
        <span>STONESET / INC · VOL. 01</span>
      </div>
    </div>
  );
}
window.MonolithBoard = MonolithBoard;