// Contra · 01 Comms — 5 RADICALLY DIFFERENT design genres
// Each one is its own visual language — not the same shell with a different grid.

const MSG = [
  { from: 'Sarah Johnson',  job: 'Johnson Kitchen',  ch: 'SMS',   text: "Can we also add the pergola while you're here? Willing to pay extra.", time: '2m',  intent: 'CHANGE',   unread: true },
  { from: 'ABC Supply · Ron', job: 'Harborview Blk B', ch: 'EMAIL', text: 'Rebar #4 order ready for pickup, 40 bundles. Confirm Friday AM delivery window.', time: '14m', intent: 'SCHEDULE', unread: true },
  { from: 'David Pike',     job: 'Pike Bath',        ch: 'VOICE', text: '[1:24] Checking on tile ETA, guests arriving Saturday morning...', time: '47m', intent: 'QUESTION', unread: true },
  { from: 'Calloway Co',    job: 'Calloway TI',      ch: 'EMAIL', text: 'Wire transfer confirmation — $28,400 · Milestone 2 paid · Ref #CW-2209', time: '2h',  intent: 'PAYMENT' },
  { from: 'Mike Torres',    job: 'Smith Bath',       ch: 'SMS',   text: 'Running 20 min late, dropping my kid at school. On site by 7:50.', time: '3h',  intent: 'SCHEDULE' },
  { from: 'Jen Marsh',      job: 'Marsh Addition',   ch: 'SMS',   text: 'When are you pouring the footings? Neighbor keeps asking about the noise lol', time: '5h', intent: 'QUESTION' },
  { from: 'City Permits',   job: 'Harborview Blk B', ch: 'EMAIL', text: 'Permit #HB-4412 inspection scheduled Thu Apr 29 10:00 AM. Reply Y to confirm.', time: '8h', intent: 'SCHEDULE' },
];

// ════════════════════════════════════════════════════════════
// V-A · OPERATOR TERMINAL (Bloomberg / tmux / power-user)
// Dense mono, green-on-black, keyboard-first, zero chrome
// ════════════════════════════════════════════════════════════
function CommsV_Terminal() {
  const mono = '"JetBrains Mono", ui-monospace, monospace';
  const bg = '#0a0d0a';
  const fg = '#c5d8c0';
  const dim = '#4a6148';
  const amber = '#f0b041';
  const green = '#7ed957';
  const row = (m, i) => (
    <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 44px 80px 170px 1fr 70px', gap: 10, padding: '3px 0', fontSize: 12, color: fg, borderLeft: i === 0 ? `2px solid ${amber}` : '2px solid transparent', paddingLeft: 8 }}>
      <span style={{ color: m.unread ? amber : dim }}>{m.unread ? '●' : '○'}</span>
      <span style={{ color: dim }}>{String(i+1).padStart(3,'0')}</span>
      <span style={{ color: m.ch === 'SMS' ? green : m.ch === 'EMAIL' ? '#6ab0ff' : amber }}>[{m.ch}]</span>
      <span style={{ color: '#fff' }}>{m.from.slice(0,18).padEnd(18,' ')}</span>
      <span style={{ color: fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.text}</span>
      <span style={{ color: dim, textAlign: 'right' }}>{m.time}</span>
    </div>
  );
  return (
    <div style={{ width: '100%', height: '100%', background: bg, color: fg, fontFamily: mono, fontSize: 12, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* top bar */}
      <div style={{ background: '#0f130f', borderBottom: `1px solid #1d2a1d`, padding: '6px 14px', display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
        <div><span style={{ color: amber }}>CONTRA</span> <span style={{ color: dim }}>·</span> INBOX <span style={{ color: dim }}>·</span> <span style={{ color: green }}>●connected</span> <span style={{ color: dim }}>· 127 msgs · 12 unread</span></div>
        <div style={{ color: dim }}>10:42:08 · load 0.42 · M.REYES@contra</div>
      </div>
      {/* column bar */}
      <div style={{ display: 'grid', gridTemplateColumns: '24px 44px 80px 170px 1fr 70px', gap: 10, padding: '8px 22px 6px', borderBottom: `1px solid #1d2a1d`, color: dim, fontSize: 10, letterSpacing: '0.1em' }}>
        <span> </span><span>IDX</span><span>CH</span><span>FROM</span><span>MESSAGE</span><span style={{ textAlign: 'right' }}>AGE</span>
      </div>
      {/* list */}
      <div style={{ flex: 1, padding: '6px 14px', overflow: 'auto' }}>
        {MSG.map(row)}
        <div style={{ color: dim, padding: '12px 10px', fontSize: 11 }}>── 120 earlier messages hidden · type <span style={{ color: amber }}>:all</span> to show ──</div>
      </div>
      {/* split ai panel */}
      <div style={{ background: '#0c120c', borderTop: `1px solid #1d2a1d`, padding: '10px 14px', display: 'grid', gridTemplateColumns: '160px 1fr 280px', gap: 18, minHeight: 140 }}>
        <div>
          <div style={{ color: amber, fontSize: 10, letterSpacing: '0.14em', marginBottom: 6 }}>▼ FOCUS · MSG 001</div>
          <div style={{ color: '#fff', fontSize: 13 }}>SARAH JOHNSON</div>
          <div style={{ color: dim, fontSize: 11, marginTop: 2 }}>johnson_kitchen</div>
          <div style={{ color: dim, fontSize: 11 }}>sms · 2m ago</div>
          <div style={{ color: fg, marginTop: 10, fontSize: 11, lineHeight: 1.5 }}>{MSG[0].text}</div>
        </div>
        <div>
          <div style={{ color: green, fontSize: 10, letterSpacing: '0.14em', marginBottom: 6 }}>▼ AI REPLY · EDITABLE</div>
          <div style={{ background: '#000', border: `1px solid #2a3a2a`, padding: 10, fontSize: 12, color: '#e8ffd8', lineHeight: 1.55, height: 72, overflow: 'auto' }}>
            Happy to take a look! Pergolas usually run $4,200–$6,800 depending on materials. Want me to send a change order with firm number by tomorrow?<span style={{ background: green, color: '#000', marginLeft: 2 }}>█</span>
          </div>
          <div style={{ color: dim, fontSize: 10, marginTop: 6, letterSpacing: '0.08em' }}>NEXT: CO-003 · SUBFLOOR ROT · $864</div>
        </div>
        <div>
          <div style={{ color: '#ff7a59', fontSize: 10, letterSpacing: '0.14em', marginBottom: 6 }}>▼ SCOPE ALERT</div>
          <div style={{ fontSize: 11, color: fg, lineHeight: 1.5 }}>
            Token <span style={{ color: amber }}>"pergola"</span> not in <span style={{ color: '#6ab0ff' }}>johnson_kitchen.scope[]</span>. CO draft queued.
          </div>
          <div style={{ color: dim, fontSize: 10, marginTop: 10, letterSpacing: '0.06em' }}>conf 0.94 · 4 similar jobs</div>
        </div>
      </div>
      {/* status bar */}
      <div style={{ background: amber, color: '#1a1200', padding: '3px 14px', fontSize: 11, display: 'flex', justifyContent: 'space-between' }}>
        <div><b>NORMAL</b> · inbox · 001/127 · 12 drafted</div>
        <div>[j/k] nav · [r] reply · [c] change order · [!] mark · [?] help</div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// V-B · SPATIAL CANVAS (Figma / node graph / relationship view)
// Messages float on a map, threaded to their job node
// ════════════════════════════════════════════════════════════
function CommsV_Canvas() {
  const bg = '#f6f5f1';
  const grid = 'radial-gradient(circle, #d8d6ce 1px, transparent 1px)';
  const jobs = [
    { id: 'jk',  label: 'Johnson Kitchen',   x: 180, y: 240, c: '#c2a24f' },
    { id: 'hb',  label: 'Harborview Blk B',  x: 680, y: 140, c: '#4a7e63' },
    { id: 'pb',  label: 'Pike Bath',         x: 960, y: 330, c: '#c0624e' },
    { id: 'ct',  label: 'Calloway TI',       x: 220, y: 540, c: '#5a6cb0' },
    { id: 'sb',  label: 'Smith Bath',        x: 620, y: 540, c: '#a25a8a' },
    { id: 'ma',  label: 'Marsh Addition',    x: 960, y: 580, c: '#3e8a8a' },
  ];
  const notes = [
    { j:'jk', dx: 100, dy: -140, hot: true, m: 'Sarah — pergola add?' },
    { j:'jk', dx: -160, dy: 40, m: 'Inspector confirmed Thu' },
    { j:'hb', dx: 110, dy: 60, hot: true, m: 'ABC Supply · Friday AM' },
    { j:'hb', dx: -150, dy: -100, m: 'Permit #HB-4412 · reply Y' },
    { j:'pb', dx: 80, dy: -100, hot: true, m: 'David · tile ETA?' },
    { j:'ct', dx: 120, dy: 110, m: '$28,400 wire received' },
    { j:'sb', dx: -120, dy: -110, m: 'Mike · 20 min late' },
    { j:'ma', dx: 60, dy: -150, m: 'Jen · footings date?' },
  ];
  const find = id => jobs.find(j => j.id === id);
  return (
    <div style={{ width: '100%', height: '100%', background: bg, backgroundImage: grid, backgroundSize: '22px 22px', position: 'relative', overflow: 'hidden', fontFamily: '"Inter Tight", sans-serif' }}>
      {/* top chrome */}
      <div style={{ position: 'absolute', top: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10 }}>
        <div style={{ background: '#fff', border: '1px solid #e0ded4', borderRadius: 10, padding: '8px 14px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 12, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>
          <span style={{ fontFamily: 'Instrument Serif, serif', fontSize: 18 }}>Messages</span>
          <span style={{ color: '#a8a397' }}>·</span>
          <span style={{ fontSize: 12, color: '#6b6758' }}>23 live · 12 unread · zoom 72%</span>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['Map','List','Intent','Timeline'].map((l, i) => <div key={l} style={{ background: i === 0 ? '#14121a' : '#fff', color: i === 0 ? '#fff' : '#14121a', border: '1px solid #e0ded4', borderRadius: 999, padding: '7px 14px', fontSize: 12 }}>{l}</div>)}
        </div>
      </div>
      {/* svg edges */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        {notes.map((n, i) => {
          const j = find(n.j);
          return <line key={i} x1={j.x} y1={j.y} x2={j.x + n.dx} y2={j.y + n.dy} stroke={n.hot ? j.c : '#c5c2b6'} strokeWidth={n.hot ? 1.6 : 1} strokeDasharray={n.hot ? '0' : '4 4'} opacity={n.hot ? 0.8 : 0.5} />;
        })}
      </svg>
      {/* job nodes */}
      {jobs.map(j => (
        <div key={j.id} style={{ position: 'absolute', left: j.x - 44, top: j.y - 44, width: 88, height: 88, borderRadius: '50%', background: '#fff', border: `2px solid ${j.c}`, display: 'grid', placeItems: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.06)' }}>
          <div style={{ textAlign: 'center', padding: 6 }}>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 13, color: '#14121a', lineHeight: 1.05 }}>{j.label.split(' ').slice(0,2).join(' ')}</div>
            <div style={{ fontSize: 9, color: j.c, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', marginTop: 3 }}>◆ ACTIVE</div>
          </div>
        </div>
      ))}
      {/* sticky notes */}
      {notes.map((n, i) => {
        const j = find(n.j);
        const x = j.x + n.dx, y = j.y + n.dy;
        const rot = ((i * 37) % 7) - 3;
        return (
          <div key={i} style={{ position: 'absolute', left: x - 88, top: y - 28, width: 176, background: n.hot ? '#fffbe3' : '#fff', border: `1px solid ${n.hot ? '#d4c47c' : '#e0ded4'}`, borderRadius: 8, padding: '9px 12px', fontSize: 12, color: '#2e2a38', transform: `rotate(${rot}deg)`, boxShadow: '0 3px 8px rgba(0,0,0,0.07)', lineHeight: 1.4 }}>
            {n.hot && <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: '#b07a1a', letterSpacing: '0.1em', marginBottom: 3 }}>● NEEDS REPLY</div>}
            {n.m}
          </div>
        );
      })}
      {/* mini-map */}
      <div style={{ position: 'absolute', bottom: 16, right: 16, background: '#fff', border: '1px solid #e0ded4', borderRadius: 10, padding: 12, fontSize: 11, color: '#6b6758', width: 220 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: '#a8a397', marginBottom: 8 }}>FILTER</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
          {['unread', 'change', 'payment', 'schedule', 'questions', 'today'].map(t => <span key={t} style={{ fontSize: 11, padding: '3px 9px', borderRadius: 999, background: t === 'unread' ? '#14121a' : '#f0eee8', color: t === 'unread' ? '#fff' : '#2e2a38' }}>{t}</span>)}
        </div>
      </div>
      {/* AI pill */}
      <div style={{ position: 'absolute', bottom: 16, left: 16, background: '#14121a', color: '#e0ddd2', borderRadius: 999, padding: '10px 18px 10px 14px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 10, maxWidth: 420 }}>
        <div style={{ width: 20, height: 20, borderRadius: 4, background: '#c2a24f' }} />
        3 hot replies drafted. Tap a yellow note to open.
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// V-C · IMESSAGE / CONVERSATION STACK (chat-native, iOS feel)
// Big bubbles, quick-reply suggestions, consumer-grade intimacy
// ════════════════════════════════════════════════════════════
function CommsV_Chat() {
  return (
    <div style={{ width: '100%', height: '100%', background: '#f2f2f7', fontFamily: '-apple-system, "SF Pro Text", sans-serif', display: 'grid', gridTemplateColumns: '340px 1fr 320px', overflow: 'hidden', color: '#1c1c1e' }}>
      {/* left rail — contacts */}
      <div style={{ background: '#fff', borderRight: '1px solid #e5e5ea', overflow: 'auto' }}>
        <div style={{ padding: '18px 20px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 22, fontWeight: 700 }}>Messages</div>
          <div style={{ width: 30, height: 30, borderRadius: '50%', background: '#007aff', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 18 }}>✎</div>
        </div>
        <div style={{ padding: '0 16px 10px' }}>
          <div style={{ background: '#e5e5ea', borderRadius: 10, padding: '7px 12px', fontSize: 13, color: '#8e8e93' }}>🔍 Search</div>
        </div>
        {MSG.map((m, i) => (
          <div key={i} style={{ padding: '11px 16px', borderTop: i ? '1px solid #f2f2f7' : 'none', display: 'flex', gap: 11, background: i === 0 ? '#e8f0ff' : 'transparent' }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: ['#ff9500','#34c759','#af52de','#ff3b30','#5ac8fa','#ff2d55','#a2845e'][i], color: '#fff', display: 'grid', placeItems: 'center', fontSize: 16, fontWeight: 600, flexShrink: 0 }}>{m.from.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: m.unread ? '#000' : '#1c1c1e' }}>{m.from}</span>
                <span style={{ fontSize: 11, color: '#8e8e93' }}>{m.time}</span>
              </div>
              <div style={{ fontSize: 13, color: '#3c3c4399', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', lineHeight: 1.35 }}>{m.text}</div>
              {m.unread && <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#007aff', position: 'absolute', right: 24 }} />}
            </div>
          </div>
        ))}
      </div>
      {/* center — active conversation */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '14px 24px', borderBottom: '1px solid #e5e5ea', background: '#f8f8fbee', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#ff9500', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 600 }}>SJ</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Sarah Johnson</div>
            <div style={{ fontSize: 11, color: '#8e8e93' }}>Johnson Kitchen · active 2m ago</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, color: '#007aff', fontSize: 18 }}>☏ ⓘ</div>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ textAlign: 'center', fontSize: 11, color: '#8e8e93', margin: '8px 0' }}>Mon Apr 22 · 4:12 PM</div>
          <Bub side="in" color="#e5e5ea">Cabinets are in! Color is absolutely perfect. Mike was super nice too.</Bub>
          <Bub side="out" color="#007aff" light>So glad you love them. Backsplash arrives Thurs — we'll set it Friday.</Bub>
          <div style={{ textAlign: 'center', fontSize: 11, color: '#8e8e93', margin: '8px 0' }}>Today · 10:42 AM</div>
          <Bub side="in" color="#e5e5ea">Can we also add the pergola while you're here? Willing to pay extra obviously 😊</Bub>

          {/* AI suggestion tray */}
          <div style={{ marginTop: 14, background: '#fff', border: '1px solid #e5e5ea', borderRadius: 18, padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#8e8e93', marginBottom: 10 }}>
              <div style={{ width: 18, height: 18, borderRadius: 4, background: 'linear-gradient(135deg, #af52de, #ff2d55)' }} />
              Contra suggests · tap to send
            </div>
            {[
              '👍  Happy to take a look! Pergolas run $4,200–$6,800. Send over a CO tomorrow?',
              '📐  Sure — let me measure the yard Friday after backsplash. CO to follow.',
              '💬  Love that! Quick Q: attached or freestanding? Changes price a lot.',
            ].map((s, i) => (
              <div key={i} style={{ padding: '10px 12px', borderTop: i ? '1px solid #f2f2f7' : 'none', fontSize: 14, color: '#007aff', cursor: 'default' }}>{s}</div>
            ))}
          </div>
        </div>
        <div style={{ padding: '10px 16px 16px', borderTop: '1px solid #e5e5ea', display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#e5e5ea', display: 'grid', placeItems: 'center', fontSize: 20, color: '#8e8e93' }}>+</div>
          <div style={{ flex: 1, background: '#fff', border: '1px solid #d1d1d6', borderRadius: 18, padding: '8px 14px', fontSize: 14, color: '#8e8e93' }}>iMessage · type or pick above…</div>
        </div>
      </div>
      {/* right rail — job context */}
      <div style={{ background: '#fff', borderLeft: '1px solid #e5e5ea', padding: 22, overflow: 'auto' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ width: 72, height: 72, borderRadius: '50%', background: '#ff9500', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 28, fontWeight: 600, margin: '0 auto 10px' }}>SJ</div>
          <div style={{ fontSize: 17, fontWeight: 600 }}>Sarah Johnson</div>
          <div style={{ fontSize: 12, color: '#8e8e93' }}>Client · since March</div>
        </div>
        <div style={{ background: '#f2f2f7', borderRadius: 12, padding: 14, marginTop: 20, fontSize: 13 }}>
          <div style={{ fontSize: 10, color: '#8e8e93', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Johnson Kitchen</div>
          <div style={{ fontSize: 22, fontWeight: 700 }}>$84,200 <span style={{ fontSize: 13, fontWeight: 400, color: '#8e8e93' }}>· 67%</span></div>
          <div style={{ height: 6, background: '#e5e5ea', borderRadius: 3, marginTop: 10 }}><div style={{ width: '67%', height: '100%', background: '#34c759', borderRadius: 3 }} /></div>
        </div>
        <div style={{ background: '#fff5d6', border: '1px solid #f0c84a66', borderRadius: 12, padding: 14, marginTop: 12 }}>
          <div style={{ fontSize: 11, color: '#b07a1a', fontWeight: 600, marginBottom: 4 }}>⚠ SCOPE DETECTED</div>
          <div style={{ fontSize: 13, color: '#1c1c1e', lineHeight: 1.4 }}>"pergola" isn't in the scope. Create CO-003?</div>
          <div style={{ marginTop: 10, background: '#007aff', color: '#fff', borderRadius: 10, padding: '9px 12px', fontSize: 13, fontWeight: 600, textAlign: 'center' }}>Create Change Order</div>
        </div>
        <div style={{ marginTop: 20, fontSize: 12, color: '#8e8e93' }}>
          <div style={{ padding: '10px 0', borderTop: '1px solid #f2f2f7', display: 'flex', justifyContent: 'space-between' }}><span>Invoices</span><span style={{ color: '#1c1c1e' }}>3 paid · 1 due</span></div>
          <div style={{ padding: '10px 0', borderTop: '1px solid #f2f2f7', display: 'flex', justifyContent: 'space-between' }}><span>Change orders</span><span style={{ color: '#1c1c1e' }}>2 · both approved</span></div>
          <div style={{ padding: '10px 0', borderTop: '1px solid #f2f2f7', display: 'flex', justifyContent: 'space-between' }}><span>Photos shared</span><span style={{ color: '#1c1c1e' }}>28</span></div>
        </div>
      </div>
    </div>
  );
}
function Bub({ side, children, color, light }) {
  return (
    <div style={{ display: 'flex', justifyContent: side === 'out' ? 'flex-end' : 'flex-start' }}>
      <div style={{ maxWidth: '72%', background: color, color: light ? '#fff' : '#1c1c1e', padding: '9px 14px', borderRadius: 18, fontSize: 14.5, lineHeight: 1.35 }}>{children}</div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// V-D · NEWSPAPER / BROADSHEET (Morning Brief, editorial)
// Serif masthead, columns, datelines, pull quote — reads like paper
// ════════════════════════════════════════════════════════════
function CommsV_Newspaper() {
  return (
    <div style={{ width: '100%', height: '100%', background: '#fbf8f0', color: '#1a1410', fontFamily: 'Georgia, "Playfair Display", serif', padding: '28px 56px', overflow: 'auto' }}>
      {/* masthead */}
      <div style={{ borderBottom: '3px double #1a1410', paddingBottom: 10, marginBottom: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.1em', color: '#6b5f50' }}>
          <span>VOL. MMXXVI · NO. 117</span>
          <span>FRIDAY · APRIL 24, 2026</span>
          <span>EST. 2022 · TULSA, OK</span>
        </div>
        <div style={{ fontFamily: '"Playfair Display", "Instrument Serif", Georgia, serif', fontSize: 72, fontWeight: 900, letterSpacing: '-0.02em', textAlign: 'center', lineHeight: 1, margin: '6px 0 4px' }}>The Morning Brief</div>
        <div style={{ fontStyle: 'italic', textAlign: 'center', fontSize: 13, color: '#6b5f50' }}>All the communications fit to reply — for Marcus Reyes, General Contractor</div>
      </div>

      {/* lede strip */}
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 1fr', gap: 30, borderBottom: '1px solid #1a1410', paddingBottom: 16, marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#a05a2c', marginBottom: 6 }}>LEAD STORY · CHANGE ORDERS</div>
          <div style={{ fontSize: 34, fontWeight: 900, lineHeight: 1.05, letterSpacing: '-0.01em' }}>Johnson Client Requests Pergola Addition; Ballpark Drafted</div>
          <div style={{ fontSize: 13, color: '#6b5f50', fontStyle: 'italic', marginTop: 8 }}>Marcus to review CO-003 · $4,200–$6,800 range · two past approvals in 24h</div>
        </div>
        <div>
          <div style={{ fontSize: 11, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#6b5f50', marginBottom: 8 }}>INDEX</div>
          <div style={{ fontSize: 13, lineHeight: 1.8, color: '#2e241c' }}>
            Lead · <span style={{ fontStyle: 'italic' }}>Pergola request</span> ……… 1<br />
            Deliveries · <span style={{ fontStyle: 'italic' }}>Rebar, Fri AM</span> …… 2<br />
            Voicemail · <span style={{ fontStyle: 'italic' }}>Pike tile ETA</span> ……… 2<br />
            Finance · <span style={{ fontStyle: 'italic' }}>Wire $28,400</span> ……… 3<br />
            Schedule · <span style={{ fontStyle: 'italic' }}>Inspector Thu</span> ……… 3
          </div>
        </div>
      </div>

      {/* 3 columns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, columnRule: '1px solid #d7ccb6' }}>
        <div style={{ borderRight: '1px solid #d7ccb6', paddingRight: 32 }}>
          <div style={{ fontSize: 10, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#a05a2c', marginBottom: 4 }}>10:42 AM · SMS</div>
          <div style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.15, marginBottom: 6 }}>Sarah Johnson Inquires About Backyard Pergola</div>
          <div style={{ fontSize: 11, color: '#6b5f50', fontStyle: 'italic', marginBottom: 8 }}>By Contra Desk</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: '#2e241c', textAlign: 'justify', textIndent: 18 }}>
            TULSA — In a short message delivered at 10:42 this morning, homeowner Sarah Johnson asked the contractor to add a pergola to the Johnson Kitchen project, citing a willingness to "pay extra obviously."
          </div>
          <div style={{ borderLeft: '3px solid #a05a2c', paddingLeft: 14, margin: '14px 0', fontFamily: '"Playfair Display", Georgia, serif', fontSize: 18, fontStyle: 'italic', color: '#1a1410', lineHeight: 1.3 }}>
            "Can we also add the pergola while you're here?"
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: '#2e241c', textAlign: 'justify', textIndent: 18 }}>
            Contra has drafted a reply quoting $4,200–$6,800 and queued change order CO-003 for review. Past orders on this project were signed within 24 hours of sending.
          </div>
        </div>
        <div style={{ borderRight: '1px solid #d7ccb6', paddingRight: 32 }}>
          <div style={{ fontSize: 10, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#a05a2c', marginBottom: 4 }}>10:28 AM · EMAIL</div>
          <div style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.15, marginBottom: 6 }}>ABC Supply Confirms Rebar Ready For Friday Pickup</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: '#2e241c', textAlign: 'justify', textIndent: 18 }}>
            Ron at ABC Supply reports 40 bundles of #4 rebar staged for pickup. Awaiting delivery window confirmation. Default draft of "Friday 7–9 AM" prepared for approval.
          </div>
          <hr style={{ border: 'none', borderTop: '1px solid #d7ccb6', margin: '16px 0' }} />
          <div style={{ fontSize: 10, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#a05a2c', marginBottom: 4 }}>9:55 AM · VOICEMAIL</div>
          <div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.15, marginBottom: 6 }}>Pike Presses On Tile Timeline Ahead Of Weekend Hosting</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: '#2e241c', textAlign: 'justify', textIndent: 18 }}>
            David Pike left a 1-minute 24-second voicemail regarding tile completion. Guests arrive Saturday. Transcript attached; reply assuring Friday close-out drafted.
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#4a7e63', marginBottom: 4 }}>8:42 AM · FINANCE</div>
          <div style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.15, marginBottom: 6 }}>Calloway Wires $28,400 For Second Milestone</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: '#2e241c', textAlign: 'justify', textIndent: 18 }}>
            Wire transfer from Calloway Co. cleared at 8:42 AM (Ref #CW-2209), matching milestone 2 of the Calloway TI contract. No action required.
          </div>
          <hr style={{ border: 'none', borderTop: '1px solid #d7ccb6', margin: '16px 0' }} />
          <div style={{ background: '#1a1410', color: '#fbf8f0', padding: '16px 18px', borderRadius: 4 }}>
            <div style={{ fontSize: 10, fontFamily: 'ui-monospace, monospace', letterSpacing: '0.14em', color: '#d4a85c', marginBottom: 8 }}>FROM THE EDITOR</div>
            <div style={{ fontFamily: 'Georgia, serif', fontSize: 14, lineHeight: 1.55, fontStyle: 'italic' }}>
              Twelve messages need you today. I've drafted eleven replies. The only one I want you to look at first is Sarah's pergola — it's a scope change and it's warm money.
            </div>
            <div style={{ fontSize: 11, color: '#a89478', marginTop: 8 }}>— CONTRA</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// V-E · KINETIC / DARK MOTION HUD (ops control, live pulse)
// Deep ink, neon accents, pulsing dots, waveforms, live ticker
// ════════════════════════════════════════════════════════════
function CommsV_HUD() {
  return (
    <div style={{ width: '100%', height: '100%', background: 'radial-gradient(ellipse at 20% 10%, #1a1a3a 0%, #0a0a18 50%, #05050c 100%)', color: '#e8e8ff', fontFamily: '"Inter Tight", -apple-system, sans-serif', overflow: 'hidden', position: 'relative' }}>
      <style>{`
        @keyframes pulse { 0%,100% { opacity:.4; transform:scale(1); } 50% { opacity:1; transform:scale(1.2); } }
        @keyframes slide { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
        @keyframes scan { 0% { top: -2px; } 100% { top: 100%; } }
      `}</style>
      {/* ticker */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 28, background: 'rgba(0,0,0,0.5)', borderBottom: '1px solid #2a2a5a', overflow: 'hidden' }}>
        <div style={{ whiteSpace: 'nowrap', fontSize: 12, fontFamily: 'JetBrains Mono, monospace', color: '#9a9acf', lineHeight: '28px', animation: 'slide 40s linear infinite', paddingLeft: '100%' }}>
          ● SARAH.JOHNSON · PERGOLA ADD +$5.6K · SCOPE-FLAG ········· ● ABC.SUPPLY · REBAR READY · FRI 07:00 ········· ● PIKE · VOICEMAIL 1:24 · TILE ETA ········· ● CALLOWAY · WIRE $28,400 · CLEARED ········· ● MIKE.TORRES · ETA +20m · SMITH ········· ● JEN.MARSH · FOOTINGS Q ········· ● PERMITS · HB-4412 · THU 10:00 ·········
        </div>
      </div>

      <div style={{ position: 'absolute', top: 28, left: 0, right: 0, bottom: 0, display: 'grid', gridTemplateColumns: '280px 1fr 320px', gap: 16, padding: 16 }}>
        {/* left: live streams */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: '#6a6aaa' }}>▸ LIVE CHANNELS</div>
          {[
            ['SMS',   9, '#39ff88'],
            ['EMAIL', 11, '#39d6ff'],
            ['VOICE', 3, '#ffaa39'],
          ].map(([ch, n, c]) => (
            <div key={ch} style={{ background: 'rgba(255,255,255,0.03)', border: `1px solid ${c}33`, borderRadius: 10, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: c, letterSpacing: '0.1em' }}>{ch}</span>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: c, animation: 'pulse 1.6s ease-in-out infinite' }} />
              </div>
              <div style={{ fontSize: 28, fontWeight: 700, marginTop: 6, letterSpacing: '-0.02em' }}>{n}<span style={{ fontSize: 13, color: '#6a6aaa', fontWeight: 400 }}> new</span></div>
              {/* mini waveform */}
              <div style={{ display: 'flex', gap: 2, marginTop: 10, height: 18 }}>
                {Array.from({ length: 28 }).map((_, i) => <div key={i} style={{ flex: 1, background: c, opacity: 0.25 + Math.abs(Math.sin(i * 0.7 + n)) * 0.7, borderRadius: 1 }} />)}
              </div>
            </div>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{ background: 'rgba(120, 80, 255, 0.08)', border: '1px solid #6a4af066', borderRadius: 10, padding: 14 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: '0.14em', color: '#9a7aff', marginBottom: 6 }}>▸ AI LOAD</div>
            <div style={{ fontSize: 11, color: '#c8c8ff', lineHeight: 1.5 }}>Processing · 4 threads<br/>Drafting · 6 replies<br/>Alerts queued · 2</div>
          </div>
        </div>

        {/* center: message grid w/ scan line */}
        <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid #2a2a5a', borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: 'linear-gradient(90deg, transparent, #39ff88, transparent)', animation: 'scan 4s linear infinite', opacity: 0.5 }} />
          <div style={{ padding: 16, borderBottom: '1px solid #2a2a5a', display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>Inbox · <span style={{ color: '#39ff88' }}>23 live</span></div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6a6aaa', letterSpacing: '0.12em', marginTop: 3 }}>STREAM · 10:42:08 CDT · LAST SYNC 0.3s</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['ALL','UNREAD','HOT','AI-ACTION'].map((t, i) => <span key={t} style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', padding: '5px 10px', borderRadius: 4, border: i === 2 ? '1px solid #39ff88' : '1px solid #2a2a5a', color: i === 2 ? '#39ff88' : '#9a9acf' }}>{t}</span>)}
            </div>
          </div>
          <div style={{ padding: '6px 10px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
            {MSG.map((m, i) => {
              const cc = m.ch === 'SMS' ? '#39ff88' : m.ch === 'EMAIL' ? '#39d6ff' : '#ffaa39';
              const hot = i < 3;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '44px 52px 180px 1fr 90px 80px', gap: 10, padding: '11px 12px', borderBottom: '1px solid #1a1a3a', alignItems: 'center', background: hot ? 'rgba(57, 255, 136, 0.04)' : 'transparent' }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: hot ? cc : '#2a2a5a', animation: hot ? 'pulse 1.8s ease-in-out infinite' : 'none' }} />
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: cc, letterSpacing: '0.12em' }}>{m.ch}</span>
                  <span style={{ fontSize: 13, color: '#fff' }}>{m.from}</span>
                  <span style={{ fontSize: 12, color: '#a8a8d8', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.text}</span>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6a6aaa', letterSpacing: '0.08em' }}>{m.intent}</span>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6a6aaa', textAlign: 'right' }}>T-{m.time}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* right: response pod */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid #2a2a5a', borderRadius: 10, padding: 16 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#39ff88', letterSpacing: '0.14em' }}>▸ AGENT · ACTIVE</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 6 }}>Drafting reply to Sarah</div>
            <div style={{ fontSize: 12, color: '#a8a8d8', marginTop: 10, lineHeight: 1.55 }}>
              <span style={{ color: '#6a6aaa' }}>pattern_match</span> 4/4 past jobs · <br />
              <span style={{ color: '#6a6aaa' }}>tone</span> warm · brief · action<br />
              <span style={{ color: '#6a6aaa' }}>confidence</span> <span style={{ color: '#39ff88' }}>0.94</span>
            </div>
            <div style={{ marginTop: 12, padding: 12, background: '#000', border: '1px solid #2a2a5a', borderRadius: 6, fontSize: 12, color: '#c8ffd8', lineHeight: 1.5, fontFamily: 'JetBrains Mono, monospace' }}>
              Happy to take a look! Pergolas run $4.2k–$6.8k. Want me to send a change order with a firm number by tomorrow?<span style={{ background: '#39ff88', color: '#000', marginLeft: 2 }}>█</span>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <span style={{ flex: 1, textAlign: 'center', padding: '8px 0', background: '#39ff88', color: '#001a0a', fontWeight: 600, fontSize: 12, borderRadius: 5 }}>SEND ⌘↵</span>
              <span style={{ padding: '8px 14px', border: '1px solid #2a2a5a', fontSize: 12, borderRadius: 5, color: '#9a9acf' }}>Edit</span>
            </div>
          </div>
          <div style={{ background: 'rgba(255, 100, 100, 0.06)', border: '1px solid #ff564a66', borderRadius: 10, padding: 14 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#ff564a', letterSpacing: '0.14em' }}>▸ ALERT · SCOPE DRIFT</div>
            <div style={{ fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>"pergola" not in scope. CO-003 queued. Est. <b style={{ color: '#ff9a8a' }}>+$5,600</b> to contract.</div>
          </div>
          <div style={{ flex: 1, background: 'rgba(255,255,255,0.02)', border: '1px solid #2a2a5a', borderRadius: 10, padding: 14 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6a6aaa', letterSpacing: '0.14em', marginBottom: 10 }}>▸ REPLIES · 10m WINDOW</div>
            {[['10:42', 'drafted', '#39ff88'], ['10:38', 'sent', '#39d6ff'], ['10:31', 'sent', '#39d6ff'], ['10:22', 'escalated', '#ffaa39'], ['10:14', 'sent', '#39d6ff']].map(([t, s, c], i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: '#a8a8d8' }}>
                <span>{t}</span>
                <span style={{ color: c }}>● {s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CommsV_Terminal, CommsV_Canvas, CommsV_Chat, CommsV_Newspaper, CommsV_HUD });