// hybrid-promise-cards.jsx — the three cards under the workspace dashboard.

const __PCARD_CSS = `
  .pcard {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 280px;
  }
  .pcard-head {
    display: flex; align-items: center; justify-content: space-between;
    font: 600 11px 'JetBrains Mono', monospace;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .pcard-head .live-dot {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .pcard-head .live-dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #2ec27e;
    box-shadow: 0 0 0 0 rgba(46,194,126,0.5);
    animation: live-pulse 1.8s ease-out infinite;
  }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(46,194,126,0.55); }
    100% { box-shadow: 0 0 0 10px rgba(46,194,126,0); }
  }
  .pcard-visual { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .pcard-foot { border-top: 1px dashed var(--rule); padding-top: 12px; }
  .pcard-foot h3 { margin: 0; font: 700 17px 'Bricolage Grotesque', sans-serif; letter-spacing: -0.015em; color: var(--ink); }
  .pcard-foot p { margin: 4px 0 0; font: 400 13px/1.4 'Geist', sans-serif; color: var(--ink-2); }

  .feed { display: flex; flex-direction: column; gap: 10px; }
  .feed-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; }
  .feed-row .av {
    width: 22px; height: 22px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 700 10px 'Geist', sans-serif; letter-spacing: 0;
  }
  .feed-row .msg { font: 500 12px/1.3 'Geist', sans-serif; color: var(--ink); }
  .feed-row .msg .who { font-weight: 700; }
  .feed-row .msg .what { color: var(--ink-2); }
  .feed-row .ts {
    font: 500 10px 'JetBrains Mono', monospace; color: var(--ink-3);
    background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
  }
  .feed-row.fresh .ts { background: var(--accent-soft); color: var(--accent-deep); }

  .bench { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .bench-agent { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .bench-av {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 16px 'Bricolage Grotesque', sans-serif; color: #fff;
    border: 2px solid var(--paper);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    position: relative;
  }
  .bench-av .status {
    position: absolute; right: -1px; bottom: -1px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--paper);
  }
  .bench-av .status.online { background: #2ec27e; }
  .bench-av .status.away { background: #f5bf4f; }
  .bench-name { font: 600 11px 'Geist', sans-serif; color: var(--ink); }
  .bench-handle { font: 500 9px 'JetBrains Mono', monospace; color: var(--ink-3); letter-spacing: 0.05em; }
  .bench-stat {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-2); border-radius: 8px;
    padding: 8px 12px; margin-top: 4px;
    font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-2);
  }
  .bench-stat strong { color: var(--ink); font-weight: 700; }

  .cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font: 500 11px 'JetBrains Mono', monospace; text-align: center; }
  .cal .cal-h { color: var(--ink-3); font-size: 9px; letter-spacing: 0.1em; padding: 2px 0; }
  .cal .cal-d { padding: 5px 0; color: var(--ink-2); border-radius: 4px; }
  .cal .cal-d.dim { color: var(--ink-3); opacity: 0.5; }
  .cal .cal-d.mon { background: var(--accent); color: #fff; font-weight: 700; }
  .cal .cal-d.mon-next { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; outline: 1px dashed var(--accent); }

  .mini-receipt {
    margin-top: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px 6px 0 0;
    padding: 10px 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.04);
    position: relative;
  }
  .mini-receipt::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
    background-image:
      linear-gradient(135deg, transparent 50%, var(--paper) 50%),
      linear-gradient(45deg,  transparent 50%, var(--paper) 50%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 0;
    background-repeat: repeat-x;
  }
  .mini-receipt .row { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-2); }
  .mini-receipt .row strong { color: var(--ink); font-weight: 700; }
  .mini-receipt .accent { color: var(--accent-deep); font-weight: 700; }
`;

(function injectPCardCss() {
  if (document.getElementById('__pcard_css')) return;
  const s = document.createElement('style');
  s.id = '__pcard_css';
  s.textContent = __PCARD_CSS;
  document.head.appendChild(s);
})();

function Sparkline({ data, color = '#E64A19', height = 28 }) {
  const w = 120;
  const max = Math.max(...data);
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => `${i * step},${height - (v / max) * (height - 2) - 1}`).join(' ');
  return (
    <svg viewBox={`0 0 ${w} ${height}`} width="100%" height={height} preserveAspectRatio="none" style={{ display: 'block' }}>
      <polygon points={`0,${height} ${pts} ${w},${height}`} fill={color} opacity="0.14" />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.4" />
      <circle cx={w} cy={height - (data[data.length-1] / max) * (height - 2) - 1} r="2.5" fill={color} />
    </svg>
  );
}

function CardSharedQueue() {
  const rows = [
    { i: 'M', col: '#E64A19', who: 'Marisol P.', what: '— refund issued, #4823', ts: '2m', fresh: true },
    { i: 'D', col: '#3b6df0', who: 'Devon K.',   what: '— subscription paused',     ts: '7m' },
    { i: 'A', col: '#2ec27e', who: 'Aisha N.',   what: '— wholesale quote drafted', ts: '14m' },
  ];
  const spark = [3, 5, 4, 7, 8, 12, 14, 11, 16, 13, 17, 18];
  return (
    <div className="pcard">
      <div className="pcard-head">
        <span>Activity · today</span>
        <span className="live-dot">live</span>
      </div>
      <div className="pcard-visual">
        <div className="feed">
          {rows.map((r) => (
            <div key={r.i + r.ts} className={`feed-row ${r.fresh ? 'fresh' : ''}`}>
              <div className="av" style={{ background: r.col }}>{r.i}</div>
              <div className="msg"><span className="who">{r.who}</span> <span className="what">{r.what}</span></div>
              <div className="ts">{r.ts}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
            <span style={{ font: '500 10px "JetBrains Mono", monospace', color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>00:00 → now</span>
            <span style={{ font: '700 12px "JetBrains Mono", monospace', color: 'var(--ink)' }}>87 <span style={{ color: 'var(--ink-3)', fontWeight: 500 }}>tickets today</span></span>
          </div>
          <Sparkline data={spark} />
        </div>
      </div>
      <div className="pcard-foot">
        <h3>Shared queue, not a black box.</h3>
        <p>Watch every ticket, every reply, every hour logged.</p>
      </div>
    </div>
  );
}

function CardNamedAgents() {
  const agents = [
    { i: 'SK', name: 'Sarah K.',  handle: '@sarah',  status: 'online', col: 'linear-gradient(135deg,#F5BF4F,#E64A19)' },
    { i: 'DM', name: 'Devon M.',  handle: '@devon',  status: 'online', col: 'linear-gradient(135deg,#62C554,#1E5E50)' },
    { i: 'AN', name: 'Aisha N.',  handle: '@aisha',  status: 'online', col: 'linear-gradient(135deg,#7A5AF8,#4A31C2)' },
    { i: 'JT', name: 'Jordan T.', handle: '@jordan', status: 'away',   col: 'linear-gradient(135deg,#3b6df0,#1f3fa8)' },
  ];
  return (
    <div className="pcard">
      <div className="pcard-head">
        <span>Your bench · this week</span>
        <span>4 · ★ 4.9</span>
      </div>
      <div className="pcard-visual">
        <div className="bench">
          {agents.map((a) => (
            <div key={a.handle} className="bench-agent">
              <div className="bench-av" style={{ background: a.col }}>
                {a.i}
                <span className={`status ${a.status}`} />
              </div>
              <div className="bench-name">{a.name}</div>
              <div className="bench-handle">{a.handle}</div>
            </div>
          ))}
        </div>
        <div className="bench-stat">
          <span>this week</span>
          <span><strong>347</strong> tickets · <strong>92h</strong> logged</span>
        </div>
        <div style={{ display: 'flex', gap: 4, marginTop: 8, flexWrap: 'wrap' }}>
          {['Shopify', 'Gorgias', 'Klaviyo', 'Recharge', '+ 7'].map((s) => (
            <span key={s} style={{ font: '500 10px "JetBrains Mono", monospace', padding: '3px 7px', background: 'var(--bg-2)', borderRadius: 4, color: 'var(--ink-2)' }}>{s}</span>
          ))}
        </div>
      </div>
      <div className="pcard-foot">
        <h3>Named agents, not seat numbers.</h3>
        <p>You meet Sarah, Devon, Aisha — not "Agent #4471".</p>
      </div>
    </div>
  );
}

function CardWeeklyReceipt() {
  const dates = [
    [2, 3, 4, 5, 6],
    [9, 10, 11, 12, 13],
    [16, 17, 18, 19, 20],
    [23, 24, 25, 26, 27],
  ];
  return (
    <div className="pcard">
      <div className="pcard-head">
        <span>Mondays · Q4 2026</span>
        <span>★ next: dec 23</span>
      </div>
      <div className="pcard-visual">
        <div className="cal">
          {['M','T','W','T','F'].map((h, i) => <span key={i} className="cal-h">{h}</span>)}
          {dates.flatMap((row, ri) =>
            row.map((d, ci) => {
              const isMon = ci === 0;
              const isNext = ri === 3 && ci === 0;
              const cls = `cal-d ${isMon && isNext ? 'mon-next' : isMon ? 'mon' : 'dim'}`;
              return <span key={`${ri}-${ci}`} className={cls}>{d}</span>;
            })
          )}
        </div>
        <div className="mini-receipt">
          <div className="row"><span>Mon · Dec 16</span><span>3 agents</span></div>
          <div className="row"><span>tickets handled</span><strong>87</strong></div>
          <div className="row"><span>hours logged</span><strong>34.2h</strong></div>
          <div className="row" style={{ marginTop: 6, paddingTop: 6, borderTop: '1px dashed var(--rule)' }}>
            <span className="accent">SAVED</span><span className="accent">$4,234</span>
          </div>
        </div>
      </div>
      <div className="pcard-foot">
        <h3>A receipt, every Monday.</h3>
        <p>Line-by-line summary of the work, in your inbox.</p>
      </div>
    </div>
  );
}

function PromiseCards() {
  return (
    <div className="promise-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 32, maxWidth: 1180, marginLeft: 'auto', marginRight: 'auto' }}>
      <CardSharedQueue />
      <CardNamedAgents />
      <CardWeeklyReceipt />
    </div>
  );
}

Object.assign(window, { PromiseCards, CardSharedQueue, CardNamedAgents, CardWeeklyReceipt, Sparkline });