How business can leverage Data and Information

<div class="infographic-databiz" id="dbWrap">
  <style>
    .infographic-databiz {
      --ink:        #1a1a1a;
      --ink-soft:   #5c5c5c;
      --paper:      #ffffff;
      --paper-alt:  #f6f3ee;
      --accent:     #2563eb;
      --accent-soft:#e3ebfd;
      --line:       #ddd6c9;

      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding: 2.5rem 1.5rem;
      border-radius: 14px;
      box-sizing: border-box;
      max-width: 920px;
      margin: 0 auto;
    }
    .infographic-databiz[data-theme="dark"] {
      --ink:        #e8e6e1;
      --ink-soft:   #9a968c;
      --paper:      #121212;
      --paper-alt:  #1e1e26;
      --accent:     #5b8def;
      --accent-soft:#202942;
      --line:       #2c313d;
    }
    .infographic-databiz * { box-sizing: border-box; }

    .db-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--accent); font-weight: 700; margin: 0 0 0.4rem;
    }
    .db-title { font-size: 1.55rem; font-weight: 700; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
    .db-sub { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1.75rem; max-width: 55ch; }

    /* --- Use-case hub: grid + detail panel (desktop) --- */
    .db-hub { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
    .db-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; align-content: start;
    }
    .db-cell { display: flex; flex-direction: column; }
    .db-item {
      display: flex; align-items: center; gap: 0.65rem;
      background: var(--paper-alt); border: 1px solid var(--line); border-radius: 9px;
      padding: 0.6rem 0.7rem; font: inherit; color: var(--ink); text-align: left;
      cursor: pointer; transition: border-color .15s, background .15s;
      width: 100%;
    }
    .db-item:hover { border-color: var(--accent); }
    .db-item.is-active { background: var(--accent-soft); border-color: var(--accent); }
    .db-badge {
      flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
      background: var(--paper); border: 1.5px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; font-weight: 700; color: var(--ink-soft);
    }
    .db-item.is-active .db-badge { border-color: var(--accent); color: var(--accent); }
    .db-item-label { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }

    .db-panel {
      background: var(--paper-alt); border: 1px solid var(--line); border-radius: 12px;
      padding: 1.4rem 1.5rem; min-height: 220px;
    }
    .db-panel-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.9rem; color: var(--accent); }
    .db-panel-row { margin-bottom: 0.85rem; }
    .db-panel-row:last-child { margin-bottom: 0; }
    .db-panel-label {
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--ink-soft); font-weight: 700; margin: 0 0 0.25rem;
    }
    .db-panel-text { font-size: 0.88rem; line-height: 1.45; margin: 0; }

    /* --- Inline accordion detail (mobile only, hidden on desktop) --- */
    .db-detail {
      display: none;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
    }
    .db-detail-inner {
      background: var(--accent-soft); border: 1px solid var(--line); border-top: none;
      border-radius: 0 0 9px 9px; padding: 0.7rem 0.8rem; margin-top: -1px;
    }
    .db-detail-row { margin-bottom: 0.55rem; }
    .db-detail-row:last-child { margin-bottom: 0; }
    .db-detail-label {
      font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--ink-soft); font-weight: 700; margin: 0 0 0.15rem;
    }
    .db-detail-text { font-size: 0.82rem; line-height: 1.4; margin: 0; }

    @media (max-width: 700px) {
      .db-hub { grid-template-columns: 1fr; gap: 0; }
      .db-grid { grid-template-columns: 1fr; gap: 0.5rem; }
      .db-panel { display: none; }
      .db-cell.is-active .db-item { border-radius: 9px 9px 0 0; }
      .db-detail {
        display: block;
        transition: max-height .35s ease, opacity .3s ease;
      }
      .db-cell.is-active .db-detail {
        max-height: 300px;
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .infographic-databiz *, .infographic-databiz *::before, .infographic-databiz *::after {
        animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
      }
    }
  </style>

  <p class="db-eyebrow">Data → Business Value</p>
  <h2 class="db-title">How Businesses Leverage Data &amp; Information</h2>
  <p class="db-sub">Ten ways raw data turns into decisions — click a use case to see how.</p>

  <div class="db-hub">
    <div class="db-grid" id="dbGrid"></div>
    <div class="db-panel" id="dbPanel"></div>
  </div>
</div>

<script>
(function () {
  var wrapper = document.getElementById('dbWrap');

  // Dark mode detection — body attribute wins, then cookie, then light default
  var bodyAttr = document.body.getAttribute('data-darkmode');
  var dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');

  var useCases = [
    { title: 'Informed Decision-Making', how: 'Analyze sales, market trends, and customer behavior.', impact: 'Make strategic calls — new products, new markets.' },
    { title: 'Personalizing Experience', how: 'Use past purchases, browsing history, preferences.', impact: 'Deliver personalized ads and recommendations (Amazon, Netflix).' },
    { title: 'Marketing Campaigns', how: 'Track clicks, conversions, and campaign performance.', impact: 'Optimize ad spend, target the right audience, improve ROI.' },
    { title: 'Operational Efficiency', how: 'Monitor supply chain, inventory, and production data.', impact: 'Reduce waste, cut costs, improve productivity.' },
    { title: 'Predictive Analytics', how: 'Use historical data to forecast trends and sales.', impact: 'Plan resources, manage inventory, reduce risk.' },
    { title: 'Risk Management', how: 'Analyze financial, cybersecurity, and operational data.', impact: 'Detect fraud, prevent breaches, stay compliant.' },
    { title: 'Product Development', how: 'Gather user feedback, reviews, and usage data.', impact: 'Improve existing products, innovate new ones.' },
    { title: 'Competitive Analysis', how: 'Study market research and competitor data.', impact: 'Map strengths, weaknesses, opportunities, threats (SWOT).' },
    { title: 'HR &amp; Performance', how: 'Monitor productivity, engagement, and retention data.', impact: 'Better hiring, morale, and lower turnover.' },
    { title: 'Customer Support', how: 'Analyze complaints, chat logs, and call center data.', impact: 'Improve service, cut response times, boost satisfaction.' }
  ];

  var grid = document.getElementById('dbGrid');
  var panel = document.getElementById('dbPanel');

  function renderPanel(i) {
    var uc = useCases[i];
    panel.innerHTML =
      '<h3 class="db-panel-title">' + uc.title + '</h3>' +
      '<div class="db-panel-row"><p class="db-panel-label">How</p><p class="db-panel-text">' + uc.how + '</p></div>' +
      '<div class="db-panel-row"><p class="db-panel-label">Impact</p><p class="db-panel-text">' + uc.impact + '</p></div>';
  }

  var cells = [];

  useCases.forEach(function (uc, i) {
    var cell = document.createElement('div');
    cell.className = 'db-cell' + (i === 0 ? ' is-active' : '');

    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'db-item' + (i === 0 ? ' is-active' : '');
    btn.innerHTML = '<span class="db-badge">' + (i + 1) + '</span><span class="db-item-label">' + uc.title + '</span>';

    var detail = document.createElement('div');
    detail.className = 'db-detail';
    detail.innerHTML =
      '<div class="db-detail-inner">' +
        '<div class="db-detail-row"><p class="db-detail-label">How</p><p class="db-detail-text">' + uc.how + '</p></div>' +
        '<div class="db-detail-row"><p class="db-detail-label">Impact</p><p class="db-detail-text">' + uc.impact + '</p></div>' +
      '</div>';

    btn.addEventListener('click', function () {
      cells.forEach(function (c) {
        c.classList.remove('is-active');
        c.querySelector('.db-item').classList.remove('is-active');
      });
      cell.classList.add('is-active');
      btn.classList.add('is-active');
      renderPanel(i);
    });

    cell.appendChild(btn);
    cell.appendChild(detail);
    grid.appendChild(cell);
    cells.push(cell);
  });
  renderPanel(0);
})();
</script>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});