Science & Trust Builder

<!--
  SCIENCE & SOCIAL PROOF BAR — mushroom supplement, brand-agnostic
  Skio custom embedded block (portal settings)
  ---------------------------------------------------------------
  WHAT THIS IS
  Same block structure as the generic version, recast for a
  functional-mushroom subscription (lion's mane / reishi / cordyceps
  / chaga territory) instead of gut-health. No brand name anywhere —
  everything brand-specific lives in the CONFIG object below.
  WHERE THE CONTENT CAME FROM
  Built by looking at how a few real mushroom-supplement brands talk
  about themselves (fruiting-body vs. mycelium sourcing, dual
  extraction, beta-glucan concentration, NSF/GMP-certified
  manufacturing, third-party heavy-metal testing, member counts,
  star ratings, day-30/day-60 "% of users reported..." stats) and
  recombining that INTO ORIGINAL COPY — nothing here is copy-pasted
  from any single brand, and none of the numbers are real; they're
  placeholders shaped like the kind of numbers this category
  typically reports, for you to replace with a merchant's actual
  figures.
  STILL A PLACEHOLDER
  Every stat, percentage, and citation is illustrative. Swap CONFIG
  values for a specific merchant's real, substantiated claims before
  this goes near live subscribers — supplement efficacy claims carry
  real regulatory exposure if they're not backed by what the brand
  can actually support.
  SIZE
  Fits Skio's custom block constraints: 657px desktop, 302px mobile.
-->
<!-- ============ HTML ============ -->
<div class="sp-bar" id="sp-bar">
  <div class="sp-eyebrow"><span class="sp-dot"></span><span class="sp-eyebrow-text">Grown, Tested, Verified</span></div>
  <div class="sp-badges" id="sp-badges"></div>
  <div class="sp-cite-row">
    <button class="sp-nav" id="sp-prev" aria-label="Previous citation" type="button">‹</button>
    <div class="sp-cite" id="sp-cite-text"></div>
    <button class="sp-nav" id="sp-next" aria-label="Next citation" type="button">›</button>
  </div>
  <div class="sp-dots" id="sp-dots"></div>
  <div class="sp-stats" id="sp-stats"></div>
  <div class="sp-ing" id="sp-ing"></div>
  <div class="sp-press" id="sp-press">
    <div class="sp-press-label">As trusted by subscribers nationwide</div>
    <div class="sp-press-row" id="sp-press-row"></div>
  </div>
</div>
<!-- ============ CSS ============ -->
<style>
  #sp-bar, #sp-bar * { box-sizing: border-box; }
  #sp-bar {
    max-width: 657px;
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: #FDF7F3;
    border: 1px solid #e5e1d6;
    border-radius: 10px;
    padding: 16px 18px 18px;
  }
  @media (max-width: 480px) {
    #sp-bar { max-width: 302px; padding: 14px; }
  }
  #sp-bar .sp-eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #200039; margin-bottom: 10px;
  }
  #sp-bar .sp-dot { width: 5px; height: 5px; border-radius: 50%; background: #200039; flex: none; }
  #sp-bar .sp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  #sp-bar .sp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: #4a3a20;
    background: #F0E9FF; border: 1px solid #8851FF;
    border-radius: 20px; padding: 5px 10px; white-space: nowrap;
  }
  #sp-bar .sp-cite-row { display: flex; align-items: center; gap: 8px; border-top: 1px dashed #e5e1d6; padding-top: 12px; }
  #sp-bar .sp-nav {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid #e0dccf; background: #fff; color: #2a251c;
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  }
  #sp-bar .sp-nav:hover { background: #f6f3ea; }
  #sp-bar .sp-cite { flex: 1; font-size: 12.5px; line-height: 1.5; color: #3c362b; font-style: italic; }
  #sp-bar .sp-cite .sp-src { display: block; margin-top: 4px; font-size: 10px; font-style: normal; color: #93897a; font-family: "SFMono-Regular", Consolas, monospace; }
  #sp-bar .sp-dots { display: flex; justify-content: center; gap: 4px; margin: 8px 0 14px; }
  #sp-bar .sp-dot-item { width: 5px; height: 5px; border-radius: 50%; background: #e0dccf; }
  #sp-bar .sp-dot-item.on { background: #8a6d3f; }
  #sp-bar .sp-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    border-top: 1px dashed #e5e1d6; border-bottom: 1px dashed #e5e1d6;
    padding: 12px 0; margin-bottom: 12px;
  }
  #sp-bar .sp-stat { text-align: center; }
  #sp-bar .sp-stat .num {
    font-size: 17px; font-weight: 700; color: #2a251c;
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  #sp-bar .sp-stat .lbl { font-size: 9.5px; color: #93897a; margin-top: 2px; line-height: 1.3; }
  #sp-bar .sp-ing { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  #sp-bar .sp-ing-row {
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid #ece7d9; border-radius: 6px; padding: 8px 10px; font-size: 11.5px;
  }
  #sp-bar .sp-ing-name { font-weight: 600; color: #2a251c; display: flex; align-items: center; gap: 6px; }
  #sp-bar .sp-ing-sub { display: block; font-weight: 400; color: #93897a; font-size: 9.5px; margin-top: 1px; }
  #sp-bar .sp-check { color: #8a6d3f; }
  #sp-bar .sp-ing-sup { color: #93897a; font-size: 10px; text-align: right; white-space: nowrap; }
  #sp-bar .sp-press-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: #200039; text-align: center; margin-bottom: 8px;
  }
  #sp-bar .sp-press-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
  #sp-bar .sp-press-item {
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: #200039;
    border: 1px solid #ece7d9; border-radius: 5px; padding: 5px 10px;
  }
  #sp-bar button:focus-visible { outline: 2px solid #8a6d3f; outline-offset: 2px; }
</style>
<!-- ============ JS ============ -->
<script>
(function () {
  // =======================================================================
  // CONFIG — everything brand-specific lives here. Edit values, not markup,
  // to point this at a real mushroom-supplement merchant.
  // =======================================================================
  var CONFIG = {
    badges: [
      { icon: '🍄', label: 'Fruiting Body Only' },
      { icon: '🧪', label: '3rd-Party Tested' },
      { icon: '🛡️', label: 'NSF/GMP Facility' },
      { icon: '🌾', label: 'USDA Organic' },
      { icon: '🌱', label: 'Non-GMO' }
    ],
    citations: [
      { q: '“Dual-extracted for both water- and alcohol-soluble compounds, so beta-glucans and triterpenes are drawn out — not just powdered whole mushroom.”', s: '[Extraction method, verify with lab] · See the process →' },
      { q: '“Every lot is third-party tested for heavy metals and microbial contaminants before it ships.”', s: '[Lab / cert no.] · View the certificate →' },
      { q: '“Grown from fruiting bodies, not mycelium on grain — so what’s on the label is mushroom, not starch filler.”', s: '[Sourcing note] · Read about sourcing →' }
    ],
    // Species are real, generic mushroom-supplement categories — swap the
    // benefit line and sourcing note for a specific merchant's real claims.
    ingredients: [
      { name: 'Lion’s Mane', note: 'Focus & memory support', sup: '[Beta-glucan %]' },
      { name: 'Reishi', note: 'Calm & immune balance', sup: '[Beta-glucan %]' },
      { name: 'Cordyceps', note: 'Energy & stamina', sup: '[Beta-glucan %]' },
      { name: 'Chaga', note: 'Antioxidant support', sup: '[Beta-glucan %]' }
    ],
    // Base social-proof numbers — shaped like what this category typically
    // reports (member counts, star ratings, day-30 "% who noticed X"), but
    // entirely placeholder. Replace with a real merchant's actual figures.
    stats: {
      members: 68000,
      avgRating: 4.7,
      reviews: 9400
    },
    // Optional third stat row: outcome call-outs, styled like the others.
    // Set to null to hide and fall back to reviews/rating only.
    outcomeStat: { pct: 64, label: 'reported sharper focus within 30 days' },
    press: ['Wellness Weekly', 'Mind & Body', 'Daily Ritual', 'Functional Foods Report'],
    // How much to randomly jitter member/review counts on each page load,
    // as a fraction of the base value (0.06 = ±6%). Keeps an exact real
    // number from sitting in view-source while still reading as current.
    // Set to 0 to show exact configured numbers instead.
    JITTER_PCT: 0.06
  };
  // =======================================================================
  function jitter(value, pct) {
    if (!pct) return value;
    var delta = value * pct;
    return value + (Math.random() * 2 - 1) * delta;
  }
  function formatCount(n) {
    n = Math.round(n);
    if (n >= 1000) return (n / 1000).toFixed(n % 1000 === 0 ? 0 : 1) + 'k+';
    return String(n);
  }
  var root = document.getElementById('sp-bar');
  if (!root) return;
  // --- Badges ---
  var badgesEl = document.getElementById('sp-badges');
  CONFIG.badges.forEach(function (b) {
    var span = document.createElement('span');
    span.className = 'sp-badge';
    span.textContent = b.icon + ' ' + b.label;
    badgesEl.appendChild(span);
  });
  // --- Citations carousel ---
  var i = 0;
  var citeEl = document.getElementById('sp-cite-text');
  var dotsEl = document.getElementById('sp-dots');
  CONFIG.citations.forEach(function () {
    var d = document.createElement('span');
    d.className = 'sp-dot-item';
    dotsEl.appendChild(d);
  });
  var dotEls = dotsEl.querySelectorAll('.sp-dot-item');
  function renderCitation() {
    citeEl.innerHTML = CONFIG.citations[i].q + '<span class="sp-src">— ' + CONFIG.citations[i].s + '</span>';
    dotEls.forEach(function (d, idx) { d.classList.toggle('on', idx === i); });
  }
  document.getElementById('sp-prev').addEventListener('click', function () {
    i = (i - 1 + CONFIG.citations.length) % CONFIG.citations.length; renderCitation();
  });
  document.getElementById('sp-next').addEventListener('click', function () {
    i = (i + 1) % CONFIG.citations.length; renderCitation();
  });
  var citeTimer = setInterval(function () {
    i = (i + 1) % CONFIG.citations.length; renderCitation();
  }, 6000);
  root.addEventListener('mouseenter', function () { clearInterval(citeTimer); });
  renderCitation();
  // --- Social proof stats (jittered) ---
  var statsEl = document.getElementById('sp-stats');
  var memberCount = jitter(CONFIG.stats.members, CONFIG.JITTER_PCT);
  var reviewCount = jitter(CONFIG.stats.reviews, CONFIG.JITTER_PCT);
  var rating = Math.min(5, CONFIG.stats.avgRating + (Math.random() * 0.2 - 0.1));
  var thirdStat = CONFIG.outcomeStat
    ? { num: CONFIG.outcomeStat.pct + '%', lbl: CONFIG.outcomeStat.label }
    : { num: formatCount(reviewCount), lbl: 'Verified reviews' };
  [
    { num: formatCount(memberCount), lbl: 'Subscribers on the same routine' },
    { num: rating.toFixed(1) + ' ★', lbl: 'Average subscriber rating' },
    thirdStat
  ].forEach(function (s) {
    var wrap = document.createElement('div');
    wrap.className = 'sp-stat';
    wrap.innerHTML = '<div class="num">' + s.num + '</div><div class="lbl">' + s.lbl + '</div>';
    statsEl.appendChild(wrap);
  });
  // --- Ingredients ---
  var ingEl = document.getElementById('sp-ing');
  CONFIG.ingredients.forEach(function (item) {
    var row = document.createElement('div');
    row.className = 'sp-ing-row';
    row.innerHTML =
      '<span class="sp-ing-name"><span class="sp-check">✓</span>' + item.name +
      '<span class="sp-ing-sub">' + item.note + '</span></span>' +
      '<span class="sp-ing-sup">' + item.sup + '</span>';
    ingEl.appendChild(row);
  });
  // --- Press strip ---
  var pressRow = document.getElementById('sp-press-row');
  CONFIG.press.forEach(function (p) {
    var item = document.createElement('span');
    item.className = 'sp-press-item';
    item.textContent = p;
    pressRow.appendChild(item);
  });
})();
</script>