// Direction C — SAMO·79
// Downtown NY '78-81 × mid-00s streetwear. Xerox, stamps, crowns reframed as stones.
function Samo79Board() {
  const stencil = { fontFamily: 'Anton, sans-serif', textTransform: 'uppercase' };
  const typewriter = { fontFamily: 'Special Elite, monospace' };
  const serif = { fontFamily: 'EB Garamond, serif' };
  const sans = { fontFamily: 'Inter, sans-serif' };
  const mono = { fontFamily: 'JetBrains Mono, monospace' };

  const ink = '#0A0805';
  const cream = '#EFE8D2';
  const newsprint = '#E3D9BC';
  const inkRed = '#B82A12';     // hand-painted red, stronger contrast
  const chalk = '#E8DCB6';
  const fade = '#5C544A';       // for legible secondary text

  // Subtle photocopy grain — only a corner decoration, no blend mode.
  const grainBg = `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'>
      <filter id='n'>
        <feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/>
        <feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0 0.02  0 0 0 0.08 0'/>
      </filter>
      <rect width='100%' height='100%' filter='url(%23n)'/>
    </svg>`
  )}`;

  return (
    <div style={{
      width: '100%', height: '100%', background: cream, color: ink,
      ...sans, boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Subtle grain layer, fixed low opacity, no blend mode */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `url("${grainBg}")`, opacity: 0.5,
        mixBlendMode: 'normal', zIndex: 0,
      }}/>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* HEADER STRIP */}
      <div style={{
        padding: '22px 70px', borderBottom: `2px solid ${ink}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        ...typewriter, fontSize: 14, color: ink, textTransform: 'uppercase', letterSpacing: 1,
      }}>
        <span>DIR · C · SAMO·79</span>
        <span style={{ ...stencil, fontSize: 16, letterSpacing: 3, color: ink }}>HAND STAYS OPEN. HAND STAYS INKED.</span>
        <span>SD / MMXXVI</span>
      </div>

      {/* TITLE BLOCK */}
      <div style={{ padding: '40px 70px 36px', borderBottom: `2px solid ${ink}`, position: 'relative' }}>
        <div style={{ ...typewriter, fontSize: 14, letterSpacing: 1, color: ink, marginBottom: 14 }}>
          ╳ DOWNTOWN '79 × MID-00s STREETWEAR ╳
        </div>

        {/* Wordmark — stencil heavy with manual quotes */}
        <div style={{ position: 'relative', display: 'inline-block' }}>
          <span style={{ position: 'absolute', left: -30, top: -8, ...stencil, fontSize: 60, color: inkRed, lineHeight: 1 }}>"</span>
          <div style={{ ...stencil, fontSize: 156, lineHeight: 0.85, letterSpacing: '-0.005em', color: ink }}>
            STONESET<sup style={{ ...stencil, fontSize: 32, color: inkRed, marginLeft: 6, verticalAlign: 'top' }}>©</sup>
          </div>
          <span style={{ position: 'absolute', right: -10, top: -8, ...stencil, fontSize: 60, color: inkRed, lineHeight: 1 }}>"</span>
        </div>

        <div style={{ marginTop: 18, ...typewriter, fontSize: 13, letterSpacing: 0.5, color: '#1f1a14' }}>
          ── A FAMILIAR PROVERB. NEW MUSCLE. ──
        </div>

        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, maxWidth: 980 }}>
          <div style={{ ...serif, fontStyle: 'italic', fontSize: 30, lineHeight: 1.25, color: ink, fontWeight: 500 }}>
            "Never throw a stone<br/>and hide your hand."
            <div style={{ ...typewriter, fontSize: 11, fontStyle: 'normal', letterSpacing: 1, color: '#3a3020', marginTop: 8 }}>—FOUNDING PROVERB, RE-STAMPED 2026—</div>
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.65, color: '#1a1610', fontWeight: 400 }}>
            Downtown NY when the cops still wrote tickets on carbon paper. SAMO© tags on the Barrio Logan. Photocopied flyers stapled to telephone poles before anyone could afford a real printer. Plus mid-00s — when The Attic was open, Mighty Healthy mattered, and Supreme stickers were currency. <strong style={{ color: inkRed }}>Hand-stamped. Hand-set. Hand on record.</strong>
          </div>
        </div>
      </div>

      {/* MARK SYSTEM */}
      <div style={{ padding: '30px 70px 26px', borderBottom: `2px solid ${ink}` }}>
        <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1.5, color: '#1f1a14', marginBottom: 18, textTransform: 'uppercase' }}>// 01 · MARK SYSTEM — STAMPED, NOT PRINTED</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, height: 220 }}>

          {/* Box stamp */}
          <div style={{ background: cream, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1.5px solid ${ink}` }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>01 · BOX STAMP</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <div style={{
                background: inkRed, color: cream, padding: '14px 22px',
                ...stencil, fontSize: 28, letterSpacing: '0.01em', lineHeight: 1,
                transform: 'rotate(-1.2deg)',
                boxShadow: `2px 2px 0 ${ink}`,
              }}>STONESET</div>
            </div>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020', textAlign: 'right' }}>BLOOD ON DECK</div>
          </div>

          {/* Crown = stone */}
          <div style={{ background: cream, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1.5px solid ${ink}` }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>02 · CROWN — STONE</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <svg viewBox="0 0 120 120" width="160" height="160">
                {/* irregular hand-drawn stone */}
                <path d="M 22 78 L 14 56 L 26 32 L 50 22 L 80 26 L 98 44 L 102 70 L 90 92 L 64 100 L 36 96 Z"
                  fill="none" stroke={ink} strokeWidth="2.4" strokeLinejoin="round"/>
                {/* hand-painted crown points sitting ON the stone */}
                <path d="M 36 36 L 44 18 L 52 36 L 60 14 L 68 36 L 76 18 L 84 36"
                  fill="none" stroke={inkRed} strokeWidth="3.2" strokeLinejoin="round" strokeLinecap="round"/>
                {/* © beside */}
                <text x="98" y="100" fontFamily="Anton" fontSize="14" fill={ink}>©</text>
              </svg>
            </div>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020', textAlign: 'right' }}>CROWN-AS-STONE</div>
          </div>

          {/* Sticker / circle */}
          <div style={{ background: cream, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: `1.5px solid ${ink}` }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>03 · STICKER · CIRCLE</div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
              <svg viewBox="0 0 120 120" width="150" height="150">
                <circle cx="60" cy="60" r="54" fill={ink}/>
                <circle cx="60" cy="60" r="50" fill="none" stroke={cream} strokeWidth="0.8"/>
                <text x="60" y="50" textAnchor="middle" fontFamily="Anton" fontSize="22" fill={cream} letterSpacing="2">STSET</text>
                <line x1="22" y1="58" x2="98" y2="58" stroke={cream} strokeWidth="0.4"/>
                <text x="60" y="74" textAnchor="middle" fontFamily="Anton" fontSize="11" fill={inkRed} letterSpacing="3">SAMO·79</text>
                <text x="60" y="100" textAnchor="middle" fontFamily="Special Elite" fontSize="9" fill={cream} letterSpacing="1.5">FOR PERMANENT USE</text>
                <text x="60" y="22" textAnchor="middle" fontFamily="Special Elite" fontSize="9" fill={cream} letterSpacing="1.5">©·SD·MMXXVI·©</text>
              </svg>
            </div>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020', textAlign: 'right' }}>3" VINYL</div>
          </div>

          {/* Tag — stenciled */}
          <div style={{ background: ink, color: cream, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#c9bea2' }}>04 · STENCIL TAG</div>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1 }}>
              <div style={{ ...stencil, fontSize: 36, lineHeight: 0.9, letterSpacing: '0.005em' }}>STONE</div>
              <div style={{ ...stencil, fontSize: 36, lineHeight: 0.9, letterSpacing: '0.005em', color: inkRed }}>SET·</div>
            </div>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#c9bea2', textAlign: 'right' }}>SPRAY · 1 PASS</div>
          </div>
        </div>
      </div>

      {/* PALETTE + TYPE */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', borderBottom: `2px solid ${ink}` }}>
        {/* Palette */}
        <div style={{ padding: '28px 36px 28px 70px', borderRight: `2px solid ${ink}` }}>
          <div style={{ ...typewriter, fontSize: 13, letterSpacing: 1.2, color: '#1f1a14', marginBottom: 18, textTransform: 'uppercase' }}>// 02 · PALETTE — XEROX & INK</div>
          {[
            { name: 'INK', hex: '#100E0A', use: 'Stamp & stencil. Always.', sw: ink },
            { name: 'CREAM', hex: '#EDE5D0', use: 'Page. Aged paper.', sw: cream, border: true },
            { name: 'NEWSPRINT', hex: '#DCD3BB', use: 'Cards, flyers, zine pages', sw: newsprint, border: true },
            { name: 'INK RED', hex: '#C8341E', use: 'Hand-painted accent. Earned only.', sw: inkRed },
            { name: 'CHALK', hex: '#E8DCB6', use: 'Highlight, marker streaks', sw: chalk, border: true },
          ].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 ? `1.5px solid ${ink}` : 'none' }}/>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ ...stencil, fontSize: 16, letterSpacing: '0.03em' }}>{c.name}</span>
                  <span style={{ ...typewriter, fontSize: 11, color: '#3a3020' }}>{c.hex}</span>
                </div>
                <div style={{ fontSize: 11, color: '#1f1a14', marginTop: 2 }}>{c.use}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Type */}
        <div style={{ padding: '28px 70px 28px 36px' }}>
          <div style={{ ...typewriter, fontSize: 13, letterSpacing: 1.2, color: '#1f1a14', marginBottom: 18, textTransform: 'uppercase' }}>// 03 · TYPE — THREE VOICES</div>
          <div style={{ marginBottom: 14 }}>
            <div style={{ ...typewriter, fontSize: 10, color: '#3a3020', letterSpacing: 1, marginBottom: 6 }}>STENCIL · ANTON — HEADLINES, STAMPS</div>
            <div style={{ ...stencil, fontSize: 56, lineHeight: 0.9 }}>NO WORD WASTED.</div>
          </div>
          <div style={{ marginBottom: 14 }}>
            <div style={{ ...typewriter, fontSize: 10, color: '#3a3020', letterSpacing: 1, marginBottom: 6 }}>EDITORIAL · EB GARAMOND — LONGFORM, CLASSIC</div>
            <div style={{ ...serif, fontStyle: 'italic', fontSize: 28, lineHeight: 1.2, color: ink }}>The stone is the receipt.</div>
          </div>
          <div>
            <div style={{ ...typewriter, fontSize: 10, color: '#3a3020', letterSpacing: 1, marginBottom: 6 }}>SYSTEM · SPECIAL ELITE — METADATA, LABELS</div>
            <div style={{ ...typewriter, fontSize: 16, lineHeight: 1.55, color: ink }}>FOR PERMANENT USE.<br/>NO REFUNDS. NO DISCLAIMERS.</div>
          </div>
        </div>
      </div>

      {/* APPLICATIONS */}
      <div style={{ padding: '30px 70px 32px', flex: 1 }}>
        <div style={{ ...typewriter, fontSize: 13, letterSpacing: 1.2, color: '#1f1a14', marginBottom: 18, textTransform: 'uppercase' }}>// 04 · APPLIED — FLYER, PATCH, ZINE</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr 1.1fr', gap: 16, height: 350 }}>

          {/* Club flyer / drop poster */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>FLYER · DROP / TALK</div>
            <div style={{ background: cream, border: `1.5px solid ${ink}`, flex: 1, padding: 20, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
              <div style={{ ...typewriter, fontSize: 12, color: ink, letterSpacing: 1, display: 'flex', justifyContent: 'space-between' }}>
                <span>NO. 003</span>
                <span>05·19·26 — 7PM</span>
              </div>
              <div style={{ ...stencil, fontSize: 64, lineHeight: 0.82, letterSpacing: '-0.005em', color: ink, marginTop: 22 }}>
                THE<br/>QUIET<br/><span style={{ color: inkRed, position: 'relative', display: 'inline-block' }}>
                  WEIGHT
                  <span style={{ position: 'absolute', left: 0, right: 0, bottom: 6, height: 4, background: inkRed, opacity: 0.85 }}/>
                </span>
              </div>
              <div style={{ flex: 1 }}/>
              <div style={{ borderTop: `1.5px solid ${ink}`, paddingTop: 8, ...typewriter, fontSize: 10, color: ink, lineHeight: 1.5 }}>
                A TALK BY STSET<br/>
                THE OFFICE, LES — RSVP STSET.CO<br/>
                <span style={{ color: inkRed }}>STAND. DON'T POSE.</span>
              </div>
            </div>
          </div>

          {/* Patch / 4" sticker */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>PATCH · 4×4 / HAT</div>
            <div style={{ background: newsprint, border: `1.5px solid ${ink}`, flex: 1, padding: 18, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
              {/* hand drawn open hand with stone */}
              <svg viewBox="0 0 120 120" width="160" height="160">
                <path d="M 20 80 Q 16 70 22 64 Q 28 60 36 64 L 36 56 Q 36 42 46 42 Q 56 42 56 56 L 56 52 Q 56 36 68 36 Q 80 36 80 52 L 80 56 Q 80 44 90 44 Q 100 44 100 60 L 100 78 Q 100 100 70 102 Q 38 102 28 92 Z"
                  fill="none" stroke={ink} strokeWidth="3" strokeLinejoin="round"/>
                {/* the stone in the palm — hand-painted red dot */}
                <circle cx="62" cy="78" r="9" fill={inkRed}/>
                <circle cx="62" cy="78" r="13" fill="none" stroke={inkRed} strokeWidth="1" opacity="0.6"/>
              </svg>
              <div style={{ ...stencil, fontSize: 18, letterSpacing: 2, textAlign: 'center', color: ink }}>OPEN HAND</div>
              <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1.2, color: '#1f1a14', textAlign: 'center' }}>—STSET / NO. 003—</div>
            </div>
          </div>

          {/* Zine cover */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ ...typewriter, fontSize: 11, letterSpacing: 1, color: '#3a3020' }}>ZINE COVER · ISSUE 01</div>
            <div style={{ background: ink, color: cream, flex: 1, padding: 22, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', ...typewriter, fontSize: 12, color: '#c9bea2', letterSpacing: 1 }}>
                <span>ISSUE 01 · SPRING '26</span>
                <span>$0 · TAKE ONE</span>
              </div>
              <div>
                <div style={{ ...stencil, fontSize: 76, lineHeight: 0.82, letterSpacing: '-0.005em' }}>
                  RECEIPTS<br/>OVER<br/><span style={{ color: inkRed }}>VOLUME.</span>
                </div>
              </div>
              <div>
                <div style={{ ...serif, fontStyle: 'italic', fontSize: 17, lineHeight: 1.3, color: '#dcd3bb', marginBottom: 12 }}>
                  Twelve essays by people who don't need a podcast about it.
                </div>
                <div style={{ borderTop: `1px solid ${cream}`, paddingTop: 8, ...typewriter, fontSize: 9, color: '#c9bea2', letterSpacing: 0.5, display: 'flex', justifyContent: 'space-between' }}>
                  <span>STONESET© / STSET, ED.</span>
                  <span>SD · MMXXVI</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      {/* FOOTER */}
      <div style={{
        padding: '14px 70px', borderTop: `2px solid ${ink}`, background: ink, color: cream,
        ...typewriter, fontSize: 13, letterSpacing: 1.2, textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>DIR · C · SAMO·79</span>
        <span style={{ color: inkRed }}>HAND STAYS OPEN.</span>
        <span>STONESET © SD · MMXXVI</span>
      </div>
      </div>
    </div>
  );
}
window.Samo79Board = Samo79Board;