<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdiff-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-bold mb-0">Changes in v5</h6>
        <span class="small text-muted"><span class="text-success fw-bold" id="bsdiffAdded">0</span> added &middot; <span class="text-danger fw-bold" id="bsdiffRemoved">0</span> removed</span>
      </div>
      <pre class="bsdiff-view mb-0" id="bsdiffView"></pre>
    </div>
  </div>
</div>

.bsdiff-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsdiff-view {
  margin: 0; padding: 10px 12px; background: #f8f9fb; border-radius: 8px;
  font: 12.5px/1.7 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.bsdiff-line { display: block; padding: 1px 6px; border-radius: 3px; }
.bsdiff-add { background: #dcfce7; color: #166534; }
.bsdiff-remove { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.bsdiff-same { color: #6b7280; }

const OLD_LINES = [
  'Our platform helps teams ship faster.',
  'Get started with a free 14-day trial.',
  'No credit card required.',
  'Cancel anytime.',
];

const NEW_LINES = [
  'Our platform helps teams ship faster, together.',
  'Get started with a free 30-day trial.',
  'No credit card required.',
  'Trusted by over 2,000 companies.',
];

// A minimal line-level LCS diff — good enough for short, line-oriented
// content like this without pulling in a full diff library.
function diffLines(oldLines, newLines) {
  const m = oldLines.length, n = newLines.length;
  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
  for (let i = m - 1; i >= 0; i--) {
    for (let j = n - 1; j >= 0; j--) {
      dp[i][j] = oldLines[i] === newLines[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
    }
  }
  const result = [];
  let i = 0, j = 0;
  while (i < m && j < n) {
    if (oldLines[i] === newLines[j]) { result.push({ type: 'same', text: oldLines[i] }); i++; j++; }
    else if (dp[i + 1][j] >= dp[i][j + 1]) { result.push({ type: 'remove', text: oldLines[i] }); i++; }
    else { result.push({ type: 'add', text: newLines[j] }); j++; }
  }
  while (i < m) { result.push({ type: 'remove', text: oldLines[i] }); i++; }
  while (j < n) { result.push({ type: 'add', text: newLines[j] }); j++; }
  return result;
}

function escapeHtml(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }

const view = document.getElementById('bsdiffView');
const diff = diffLines(OLD_LINES, NEW_LINES);

const added = diff.filter(d => d.type === 'add').length;
const removed = diff.filter(d => d.type === 'remove').length;
document.getElementById('bsdiffAdded').textContent = added;
document.getElementById('bsdiffRemoved').textContent = removed;

view.innerHTML = diff.map(d => {
  const prefix = d.type === 'add' ? '+ ' : d.type === 'remove' ? '- ' : '  ';
  const cls = d.type === 'add' ? 'bsdiff-add' : d.type === 'remove' ? 'bsdiff-remove' : 'bsdiff-same';
  return '<span class="bsdiff-line ' + cls + '">' + prefix + escapeHtml(d.text) + '</span>';
}).join('');