借鉴CheckMyRate房贷案例，Shopify储能设备独立站如何讲清回本？

{%- comment -%}
  文件：sections/checkmyrate-roi-calculator.liquid
  设计参考：CheckMyRate: Webflow Site for a Mortgage Broker (by Figmatica Studio)
  功能：Onest 字体 + 深海蓝/活力粉 (#FC50AD) 配色的交互式 ROI 省钱计算器、双轨费率对比卡与动态 SVG 双曲线图
{%- endcomment -%}

<link rel="preconnect" href="https://fonts.googleAPIs.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  .cmr-sec-{{ section.id }} {
    --cmr-white: #FFFFFF;
    --cmr-light-pink: #FDE8F3;
    --cmr-accent-pink: #FC50AD;
    --cmr-accent-pink-hover: #E83E99;
    --cmr-grey-bg: #F2F4F7;
    --cmr-navy: #192131;
    --cmr-dark-footer: #0C1018;
    --cmr-muted: #5A6478;
    --cmr-border: #E2E7F0;
    --cmr-font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: var(--cmr-white);
    color: var(--cmr-navy);
    font-family: var(--cmr-font);
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }

  .cmr-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* 顶部信任评分徽章与大标题 */
  .cmr-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
  }
  .cmr-review-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--cmr-light-pink);
    color: var(--cmr-navy);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .cmr-review-pill span {
    color: var(--cmr-accent-pink);
  }
  .cmr-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--cmr-navy);
  }
  .cmr-title em {
    font-style: normal;
    color: var(--cmr-accent-pink);
  }
  .cmr-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cmr-muted);
    margin: 0;
  }

  /* 双栏主体：左侧互动问卷滑块 + 右侧双轨对比与省钱曲线 */
  .cmr-main-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 28px;
    align-items: stretch;
  }
  @media screen and (max-width: 960px) {
    .cmr-main-grid {
      grid-template-columns: 1fr;
    }
  }

  .cmr-panel-left {
    background-color: var(--cmr-grey-bg);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }
  .cmr-step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cmr-muted);
    margin: 0 0 10px;
  }

  /* 场景选择胶囊按钮（对应原案 Questionnaire 分流） */
  .cmr-scenario-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cmr-scenario-btn {
    background-color: var(--cmr-white);
    color: var(--cmr-navy);
    border: 1.5px solid var(--cmr-border);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--cmr-font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .cmr-scenario-btn.is-active,
  .cmr-scenario-btn:hover {
    background-color: var(--cmr-accent-pink);
    color: var(--cmr-white);
    border-color: var(--cmr-accent-pink);
  }

  /* 滑块控件 */
  .cmr-slider-box {
    background-color: var(--cmr-white);
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid var(--cmr-border);
  }
  .cmr-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .cmr-slider-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cmr-accent-pink);
  }
  .cmr-range {
    width: 100%;
    accent-color: var(--cmr-accent-pink);
    cursor: pointer;
  }

  /* 原案标志性：柔光浅粉 (#FDE8F3) 创始人/专家贴士卡 */
  .cmr-tip-card {
    background-color: var(--cmr-light-pink);
    border-radius: 18px;
    padding: 20px 22px;
    position: relative;
  }
  .cmr-tip-quote-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--cmr-accent-pink);
    color: var(--cmr-white);
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 10px;
  }
  .cmr-tip-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cmr-navy);
    margin: 0 0 8px;
    font-weight: 500;
  }
  .cmr-tip-author {
    font-size: 0.75rem;
    color: var(--cmr-muted);
    font-weight: 600;
    margin: 0;
  }

  /* 右侧结果看板：双轨费率对比 + 年度节省总额 + SVG 双折线图 */
  .cmr-panel-right {
    background-color: var(--cmr-grey-bg);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

  .cmr-rate-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  @media screen and (max-width: 600px) {
    .cmr-rate-cards {
      grid-template-columns: 1fr;
    }
  }
  .cmr-rate-card {
    background-color: var(--cmr-white);
    border: 1.5px solid var(--cmr-border);
    border-radius: 18px;
    padding: 20px;
  }
  .cmr-rate-card--highlight {
    background-color: var(--cmr-light-pink);
    border-color: var(--cmr-accent-pink);
  }
  .cmr-rate-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cmr-muted);
    margin: 0 0 8px;
  }
  .cmr-rate-num {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--cmr-navy);
  }
  .cmr-rate-card--highlight .cmr-rate-num {
    color: var(--cmr-accent-pink);
  }

  /* 年度节省大字横幅 + SVG 曲线容器 */
  .cmr-chart-card {
    background-color: var(--cmr-white);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--cmr-border);
  }
  .cmr-savings-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
  }
  .cmr-savings-big {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--cmr-accent-pink);
  }
  .cmr-legend {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cmr-muted);
  }
  .cmr-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
  }

  /* 底部深海午夜蓝 (#0C1018) 行动与保障条 */
  .cmr-cta-footer {
    background-color: var(--cmr-dark-footer);
    color: var(--cmr-white);
    border-radius: 18px;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .cmr-btn-pink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--cmr-accent-pink);
    color: var(--cmr-white);
    font-family: var(--cmr-font);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .cmr-btn-pink:hover {
    background-color: var(--cmr-accent-pink-hover);
    transform: translateY(-1px);
  }
</style>

<section class="cmr-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="cmr-container">
    <div class="cmr-header">
      {% if section.settings.show_review_badge and section.settings.review_rating != blank and section.settings.review_badge_text != blank %}
      <div class="cmr-review-pill">
        <span>★ {{ section.settings.review_rating | escape }}</span> {{ section.settings.review_badge_text | escape }}
      </div>
      {% endif %}
      <h2 class="cmr-title">
        {{ section.settings.heading_prefix | escape }} <em>{{ section.settings.heading_highlight | escape }}</em>
      </h2>
      <p class="cmr-subtitle">{{ section.settings.subtitle | escape }}</p>
    </div>

    <div class="cmr-main-grid">
      {%- comment -%} 左栏：分场景问卷胶囊 + 交互滑块 + 浅粉专家贴士卡 {%- endcomment -%}
      <div class="cmr-panel-left">
        <div>
          <p class="cmr-step-label">01 · 选择您的使用场景（Tailored Solutions）</p>
          <div class="cmr-scenario-group" role="tablist">
            {%- for block in section.blocks -%}
              <button
                type="button"
                class="cmr-scenario-btn {% if forloop.first %}is-active{% endif %}"
                data-old-cost="{{ block.settings.baseline_unit_cost | escape }}"
                data-new-cost="{{ block.settings.optimized_unit_cost | escape }}"
                data-upfront-cost="{{ block.settings.upfront_cost | escape }}"
                data-annual-extra="{{ block.settings.annual_extra_cost | escape }}"
                data-unit-name="{{ block.settings.unit_label | escape }}"
                data-default-usage="{{ block.settings.default_monthly_units | escape }}"
                data-tip="{{ block.settings.expert_tip | escape }}"
                data-cta-text="{{ block.settings.cta_label | escape }}"
                data-cta-url="{{ block.settings.product.url | default: block.settings.fallback_url | default: '#' | escape }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.scenario_name | escape }}
              </button>
            {%- endfor -%}
          </div>
        </div>

        <div class="cmr-slider-box">
          <div class="cmr-slider-head">
            <span>02 · 每月平均消耗 / 用量</span>
            <span class="cmr-slider-val" id="CmrUsageVal-{{ section.id }}">60 单位/月</span>
          </div>
          <input
            type="range"
            class="cmr-range"
            id="CmrUsageSlider-{{ section.id }}"
            min="10"
            max="300"
            step="5"
            value="60"
            aria-label="每月平均消耗量"
          >
        </div>

        <div class="cmr-slider-box">
          <div class="cmr-slider-head">
            <span>03 · 测算累计周期（年）</span>
            <span class="cmr-slider-val" id="CmrYearsVal-{{ section.id }}">5 年</span>
          </div>
          <input
            type="range"
            class="cmr-range"
            id="CmrYearsSlider-{{ section.id }}"
            min="1"
            max="10"
            step="1"
            value="5"
            aria-label="测算累计周期"
          >
        </div>

        <div class="cmr-tip-card">
          <div class="cmr-tip-quote-icon">“</div>
          <p class="cmr-tip-text" id="CmrTipText-{{ section.id }}">
            把日常高频支出从外部零售价切换到自持设备/订阅方案，回本时间需结合设备投入与实际用量计算。
          </p>
          <p class="cmr-tip-author">{{ section.settings.expert_name | escape }}</p>
        </div>
      </div>

      {%- comment -%} 右栏：双轨单价对比 + 年度省钱大数字 + 动态 SVG 双曲线对比图 {%- endcomment -%}
      <div class="cmr-panel-right">
        <div class="cmr-rate-cards">
          <div class="cmr-rate-card">
            <p class="cmr-rate-label">当前传统方式单次成本 (Before)</p>
            <div class="cmr-rate-num" id="CmrOldRate-{{ section.id }}">$6.20</div>
          </div>
          <div class="cmr-rate-card cmr-rate-card--highlight">
            <p class="cmr-rate-label">采用本店方案折算成本 (After)</p>
            <div class="cmr-rate-num" id="CmrNewRate-{{ section.id }}">$1.35</div>
          </div>
        </div>

        <div class="cmr-chart-card" aria-live="polite">
          <div class="cmr-savings-header">
            <div>
              <div style="font-size:0.8125rem;font-weight:600;color:var(--cmr-muted);margin-bottom:4px;">
                年度运行成本差额（Operating Cost Difference）
              </div>
              <div class="cmr-savings-big" id="CmrAnnualSave-{{ section.id }}">
                $3,492/Year
              </div>
              <div style="font-size:0.8125rem;color:var(--cmr-navy);font-weight:600;margin-top:4px;" id="CmrTotalSave-{{ section.id }}">
                5 年扣除初始投入后的差额：—
              </div>
              <p id="CmrInvestment-{{ section.id }}" style="font-size:.8125rem;color:var(--cmr-muted);margin:8px 0 0;"></p>
              <p id="CmrPayback-{{ section.id }}" aria-live="polite" style="font-size:.9375rem;font-weight:600;margin:8px 0 0;"></p>
            </div>

            <div class="cmr-legend">
              <span><i class="cmr-legend-dot" style="background:#192131;"></i>原方案累计支出</span>
              <span><i class="cmr-legend-dot" style="background:#FC50AD;"></i>新方案累计支出</span>
            </div>
          </div>

          {%- comment -%} 动态 SVG 双曲线图（Before vs After） {%- endcomment -%}
          <svg viewBox="0 0 520 170" width="100%" height="170" role="img" aria-label="原方案与新方案累计支出对比曲线">
            <line x1="30" y1="145" x2="500" y2="145" stroke="#E2E7F0" stroke-width="1.5"/>
            <line x1="30" y1="95" x2="500" y2="95" stroke="#E2E7F0" stroke-width="1" stroke-dasharray="4 4"/>
            <line x1="30" y1="45" x2="500" y2="45" stroke="#E2E7F0" stroke-width="1" stroke-dasharray="4 4"/>
            <text id="CmrChartScale-{{ section.id }}" x="30" y="12" font-size="11" fill="#5A6478"></text>
            <text x="30" y="165" font-size="11" fill="#5A6478">0 年</text>
            <text id="CmrChartYears-{{ section.id }}" x="470" y="165" font-size="11" fill="#5A6478"></text>
            <path id="CmrPathBefore-{{ section.id }}" d="M30,145 Q260,105 500,25" fill="none" stroke="#192131" stroke-width="3" stroke-linecap="round"/>
            <path id="CmrPathAfter-{{ section.id }}" d="M30,145 Q260,135 500,112" fill="none" stroke="#FC50AD" stroke-width="3.5" stroke-linecap="round"/>
            <circle id="CmrDotBefore-{{ section.id }}" cx="500" cy="25" r="5" fill="#192131"/>
            <circle id="CmrDotAfter-{{ section.id }}" cx="500" cy="112" r="6" fill="#FC50AD"/>
          </svg>
        </div>

        <div class="cmr-cta-footer">
          <div>
            <div style="font-size:0.9375rem;font-weight:600;">按您的使用场景查看对应配置</div>
            <div style="font-size:0.75rem;color:#A0AAB8;margin-top:2px;">
              {{ section.settings.compliance_note | escape }}
            </div>
          </div>
          <a href="#" class="cmr-btn-pink" id="CmrMainCta-{{ section.id }}">
            <span id="CmrMainCtaText-{{ section.id }}">Check My Fit &amp; Unlock Savings</span>
            <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  (function() {
    var sec = document.querySelector('.cmr-sec-{{ section.id }}');
    if (!sec) return;

    var scenarioBtns = sec.querySelectorAll('.cmr-scenario-btn');
    var usageSlider = sec.querySelector('#CmrUsageSlider-{{ section.id }}');
    var yearsSlider = sec.querySelector('#CmrYearsSlider-{{ section.id }}');
    var usageValEl = sec.querySelector('#CmrUsageVal-{{ section.id }}');
    var yearsValEl = sec.querySelector('#CmrYearsVal-{{ section.id }}');
    var oldRateEl = sec.querySelector('#CmrOldRate-{{ section.id }}');
    var newRateEl = sec.querySelector('#CmrNewRate-{{ section.id }}');
    var annualSaveEl = sec.querySelector('#CmrAnnualSave-{{ section.id }}');
    var totalSaveEl = sec.querySelector('#CmrTotalSave-{{ section.id }}');
    var tipTextEl = sec.querySelector('#CmrTipText-{{ section.id }}');
    var mainCta = sec.querySelector('#CmrMainCta-{{ section.id }}');
    var mainCtaText = sec.querySelector('#CmrMainCtaText-{{ section.id }}');
    var beforePath = sec.querySelector('#CmrPathBefore-{{ section.id }}');
    var beforeDot = sec.querySelector('#CmrDotBefore-{{ section.id }}');
    var investmentEl = sec.querySelector('#CmrInvestment-{{ section.id }}');
    var paybackEl = sec.querySelector('#CmrPayback-{{ section.id }}');
    var scaleEl = sec.querySelector('#CmrChartScale-{{ section.id }}');
    var chartYearsEl = sec.querySelector('#CmrChartYears-{{ section.id }}');
    var currencyCode = {{ section.settings.currency_code | default: 'USD' | json }};
    var currentUpfront = 0;
    var currentAnnualExtra = 0;
    var configured = false;
    var afterPath = sec.querySelector('#CmrPathAfter-{{ section.id }}');
    var afterDot = sec.querySelector('#CmrDotAfter-{{ section.id }}');

    var currentOldCost = 6.20;
    var currentNewCost = 1.35;
    var currentUnitName = '杯';

    // Same currency and constant monthly usage. No discounting, resale or financing model.
    function calculateCashflow(oldCost, newCost, units, years, upfront, annualExtra) {
      var values = [oldCost, newCost, units, years, upfront, annualExtra];
      if (values.some(function(value) { return !Number.isFinite(value) || value < 0; }) || years === 0) return null;
      var monthlyBefore = oldCost * units;
      var monthlyAfter = newCost * units + annualExtra / 12;
      var monthlyDifference = monthlyBefore - monthlyAfter;
      var beforeTotal = monthlyBefore * 12 * years;
      var afterTotal = upfront + monthlyAfter * 12 * years;
      return {
        annualDifference: monthlyDifference * 12,
        beforeTotal: beforeTotal,
        afterTotal: afterTotal,
        netDifference: beforeTotal - afterTotal,
        paybackMonths: monthlyDifference > 0 ? upfront / monthlyDifference : null
      };
    }

    function money(value, digits) {
      try {
        return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode, maximumFractionDigits: digits }).format(value);
      } catch (error) {
        return 'USD ' + value.toFixed(digits);
      }
    }

    function updateCalculation() {
      var units = Number(usageSlider.value);
      var years = Number(yearsSlider.value);
      var result = configured ? calculateCashflow(currentOldCost, currentNewCost, units, years, currentUpfront, currentAnnualExtra) : null;
      if (!result) {
        annualSaveEl.textContent = '请先配置有效的场景成本';
        totalSaveEl.textContent = '各项成本须使用同一币种与计量单位';
        paybackEl.textContent = '暂不能测算回本';
        mainCta.removeAttribute('href');
        mainCta.setAttribute('aria-disabled', 'true');
        return;
      }
      var targetUrl = mainCta.getAttribute('data-target-url');
      if (targetUrl && targetUrl !== '#') {
        mainCta.setAttribute('href', targetUrl);
        mainCta.removeAttribute('aria-disabled');
      } else {
        mainCta.removeAttribute('href');
        mainCta.setAttribute('aria-disabled', 'true');
      }
      usageValEl.textContent = units + ' ' + currentUnitName + '/月';
      yearsValEl.textContent = years + ' 年';
      oldRateEl.textContent = money(currentOldCost, 2) + ' / ' + currentUnitName;
      newRateEl.textContent = money(currentNewCost, 2) + ' / ' + currentUnitName;
      annualSaveEl.textContent = money(result.annualDifference, 0) + '/Year';
      totalSaveEl.textContent = years + ' 年扣除初始投入后的差额：' + money(result.netDifference, 0);
      investmentEl.textContent = '初始投入 ' + money(currentUpfront, 0) + '；额外年维护费 ' + money(currentAnnualExtra, 0);
      paybackEl.textContent = result.paybackMonths === null ? '当前假设下，新方案没有运行成本优势，无法简单回本。'
        : currentUpfront === 0 ? '无初始投入；请按实际购机与安装成本填写后再判断回本。'
        : '简单回本约 ' + result.paybackMonths.toFixed(1) + ' 个月' + (result.paybackMonths > years * 12 ? '（超过当前测算周期）' : '');

      // Constant unit costs produce straight cumulative-cost lines; both share one scale.
      var maxCost = Math.max(result.beforeTotal, result.afterTotal, currentUpfront, 1) * 1.1;
      function y(cost) { return (145 - 120 * cost / maxCost).toFixed(2); }
      beforePath.setAttribute('d', 'M30,145 L500,' + y(result.beforeTotal));
      afterPath.setAttribute('d', 'M30,' + y(currentUpfront) + ' L500,' + y(result.afterTotal));
      beforeDot.setAttribute('cy', y(result.beforeTotal));
      afterDot.setAttribute('cy', y(result.afterTotal));
      scaleEl.textContent = '累计支出；上界 ' + money(maxCost, 0);
      chartYearsEl.textContent = years + ' 年';
    }

    scenarioBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        scenarioBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });
        configured = true;
        currentOldCost = Number(btn.getAttribute('data-old-cost'));
        currentUpfront = Number(btn.getAttribute('data-upfront-cost'));
        currentAnnualExtra = Number(btn.getAttribute('data-annual-extra'));
        currentNewCost = Number(btn.getAttribute('data-new-cost'));
        currentUnitName = btn.getAttribute('data-unit-name') || '单位';
        var defUsage = btn.getAttribute('data-default-usage') || '60';
        usageSlider.value = String(Math.max(Number(usageSlider.min), Math.min(Number(usageSlider.max), Number(defUsage))));
        tipTextEl.textContent = btn.getAttribute('data-tip') || '';
        mainCtaText.textContent = btn.getAttribute('data-cta-text') || 'Check My Fit';
        mainCta.setAttribute('data-target-url', btn.getAttribute('data-cta-url') || '#');
        updateCalculation();
      });
    });

    usageSlider.addEventListener('input', updateCalculation);
    yearsSlider.addEventListener('input', updateCalculation);

    if (scenarioBtns.length > 0) {
      scenarioBtns[0].click();
    } else {
      updateCalculation();
    }
  })();
</script>

{% schema %}
{
  "name": "CheckMyRate 省钱计算器",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_review_badge",
      "label": "显示已核验的真实评分",
      "default": false
    },
    {
      "type": "text",
      "id": "review_rating",
      "label": "真实评分（例如4.9/5），无数据时留空"
    },
    {
      "type": "text",
      "id": "currency_code",
      "label": "测算币种ISO代码（所有成本须同币种）",
      "default": "USD"
    },
    {
      "type": "text",
      "id": "review_badge_text",
      "label": "已核验评分对应的说明，未取得真实评价时留空"
    },
    {
      "type": "text",
      "id": "heading_prefix",
      "label": "主标题前段",
      "default": "Small Changes."
    },
    {
      "type": "text",
      "id": "heading_highlight",
      "label": "主标题粉色高亮部分",
      "default": "Significant Impact."
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "副标题说明",
      "default": "按实际用量、单位成本、设备投入与维护费，对比运行差额和简单回本时间。"
    },
    {
      "type": "text",
      "id": "expert_name",
      "label": "浅粉贴士卡署名",
      "default": "— Product Advisory Team · Savings Audit"
    },
    {
      "type": "text",
      "id": "compliance_note",
      "label": "底部深色条说明小字",
      "default": "示例测算基于固定用量与单价，未计融资、折现和残值；分期与售后以实际政策为准。"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 24,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "顶部内边距",
      "default": 64
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 24,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "底部内边距",
      "default": 64
    }
  ],
  "blocks": [
    {
      "type": "scenario",
      "name": "选型场景卡",
      "settings": [
        {
          "type": "text",
          "id": "scenario_name",
          "label": "场景按钮名称",
          "default": "家庭日常自用 (Home)"
        },
        {
          "type": "product",
          "id": "product",
          "label": "关联推荐商品"
        },
        {
          "type": "text",
          "id": "unit_label",
          "label": "计量单位名称（如：杯、度kWh、件）",
          "default": "杯"
        },
        {
          "type": "text",
          "id": "baseline_unit_cost",
          "label": "原方案单次成本 ($)",
          "default": "6.20"
        },
        {
          "type": "text",
          "id": "optimized_unit_cost",
          "label": "本店方案折算单次成本 ($)",
          "default": "1.35"
        },
        {
          "type": "number",
          "id": "default_monthly_units",
          "label": "该场景默认月消耗量",
          "default": 60
        },
        {
          "type": "textarea",
          "id": "expert_tip",
          "label": "该场景专属贴士文案",
          "default": "请填写实际成本与用量。年度运行差额不等于扣除购机投入后的净差额。"
        },
        {
          "type": "text",
          "id": "cta_label",
          "label": "右侧底部主按钮文案",
          "default": "查看对应商品配置"
        },
        {
          "type": "url",
          "id": "fallback_url",
          "label": "备用跳转链接"
        },
        {
          "type": "text",
          "id": "upfront_cost",
          "label": "购机、安装等初始投入（同一币种）",
          "default": "1500"
        },
        {
          "type": "text",
          "id": "annual_extra_cost",
          "label": "每年额外维护费（不重复计入单位成本）",
          "default": "0"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "CheckMyRate 省钱计算器",
      "blocks": [
        {
          "type": "scenario",
          "settings": {
            "scenario_name": "家庭日常萃取 (Home)",
            "unit_label": "杯",
            "baseline_unit_cost": "6.20",
            "optimized_unit_cost": "1.35",
            "default_monthly_units": 60,
            "expert_tip": "按每月60杯、原单价6.20和新单价1.35演示，年度运行差额为3,492；还需扣除设备投入。",
            "cta_label": "解锁家庭版省钱套装",
            "upfront_cost": "1500",
            "annual_extra_cost": "0"
          }
        },
        {
          "type": "scenario",
          "settings": {
            "scenario_name": "家庭储能削峰 (Solar Storage)",
            "unit_label": "度(kWh)",
            "baseline_unit_cost": "0.48",
            "optimized_unit_cost": "0.09",
            "default_monthly_units": 280,
            "expert_tip": "储能演示须计入安装投入与维护费。实际单价应结合当地电价、效率、衰减和设备寿命。",
            "cta_label": "查看家庭储能推荐配置",
            "upfront_cost": "4800",
            "annual_extra_cost": "120"
          }
        },
        {
          "type": "scenario",
          "settings": {
            "scenario_name": "工作室与小型商用 (Studio/Pro)",
            "unit_label": "件",
            "baseline_unit_cost": "4.50",
            "optimized_unit_cost": "0.85",
            "default_monthly_units": 180,
            "expert_tip": "商用演示的单位成本之外，还需填写投入与维护费，人工、停机与税费按业务另计。",
            "cta_label": "获取商用版批量方案",
            "upfront_cost": "6000",
            "annual_extra_cost": "300"
          }
        }
      ]
    }
  ]
}
{% endschema %}