{% comment %}
FACT-CORRECTED UI PROTOTYPE / 2026-11-13. No live variant/cart, subscription, entitlement or official Care fulfilment integration. Observe current market data; do not deploy as a completed transaction component.
{% endcomment %}
{%- comment -%}
  文件：sections/dji-combo-and-ecosystem.liquid
  设计参考：DJI Official Store (store.dji.com) - Osmo Action 5 Pro Standard vs Adventure Combo
  功能：
    1. 二元黄金套装选择器 (Standard Combo vs Adventure Combo) + 差异高亮说明
    2. 动态 In the Box 装箱数量矩阵 (切换畅拍版时电池自动由 ×1 变为 ×3 并高亮新增配件)
    3. DJI Care 1年/2年随心换 + OsmoAudio 无线麦克风生态连带加购
    4. 严谨工程条件脚注 ([1]-[4]) 与官方推荐 SD 卡型号清单
{%- endcomment -%}

<style>
  .dji-sec-{{ section.id }} {
    --dji-bg: #F5F6F7;
    --dji-card: #FFFFFF;
    --dji-ink: #141414;
    --dji-muted: #6C7075;
    --dji-blue: #0070D5;
    --dji-blue-tint: #EBF4FC;
    --dji-border: #E0E2E5;
    --dji-dark: #1F2022;
    --dji-font: -apple-system, BlinkMacSystemFont, 'Open Sans', 'Helvetica Neue', sans-serif;

    background-color: var(--dji-bg);
    color: var(--dji-ink);
    font-family: var(--dji-font);
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }

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

  /* 顶部主区域：左侧核心卖点与 In the Box 矩阵 + 右侧二元套装与生态加购 */
  .dji-top-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 40px;
  }
  @media screen and (max-width: 960px) {
    .dji-top-grid {
      grid-template-columns: 1fr;
    }
  }

  .dji-panel {
    background: var(--dji-card);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--dji-border);
  }

  .dji-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dji-blue);
    background: var(--dji-blue-tint);
    padding: 5px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
  }
  .dji-title {
    font-size: clamp(1.625rem, 2.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 12px;
  }
  .dji-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--dji-muted);
  }
  .dji-highlights li strong {
    display: block;
    color: var(--dji-ink);
    font-size: 0.875rem;
    margin-bottom: 2px;
  }

  /* In the Box 可视化数量网格 (×1 / ×3) */
  .dji-box-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--dji-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dji-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  @media screen and (max-width: 600px) {
    .dji-box-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .dji-box-item {
    background: var(--dji-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  .dji-box-item.is-upgraded {
    background: var(--dji-blue-tint);
    border-color: var(--dji-blue);
    font-weight: 600;
  }
  .dji-box-item[hidden] {
    display: none !important;
  }
  .dji-qty-tag {
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--dji-ink);
    white-space: nowrap;
  }
  .dji-box-item.is-upgraded .dji-qty-tag {
    color: var(--dji-blue);
  }

  /* 右栏：Select Option 二元黄金套装卡片 */
  .dji-sec-label {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dji-combo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  .dji-combo-card {
    background: #FFFFFF;
    border: 2px solid var(--dji-border);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .dji-combo-card:hover {
    border-color: #999999;
  }
  .dji-combo-card.is-selected {
    border-color: var(--dji-blue);
    background: var(--dji-blue-tint);
  }
  .dji-combo-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .dji-combo-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dji-ink);
  }
  .dji-combo-price {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--dji-ink);
  }
  .dji-combo-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--dji-muted);
    margin: 8px 0 0;
  }

  /* OsmoAudio 无线麦克风跨品类连带卡 & DJI Care 随心换 */
  .dji-eco-card {
    background: var(--dji-bg);
    border: 1.5px solid var(--dji-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s ease;
  }
  .dji-eco-card.is-selected {
    border-color: var(--dji-blue);
    background: var(--dji-blue-tint);
  }
  .dji-care-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .dji-care-btn {
    background: #FFFFFF;
    border: 1.5px solid var(--dji-border);
    border-radius: 10px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
  }
  .dji-care-btn.is-selected {
    border-color: var(--dji-blue);
    background: var(--dji-blue-tint);
  }

  .dji-checkout-bar {
    padding-top: 20px;
    border-top: 1px solid var(--dji-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .dji-total-num {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--dji-ink);
    line-height: 1;
  }
  .dji-btn-buy {
    background: var(--dji-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .dji-btn-buy:hover {
    opacity: 0.9;
  }

  /* 底部：工程边界说明与推荐 SD 卡列表 */
  .dji-footnotes-box {
    background: var(--dji-card);
    border: 1px solid var(--dji-border);
    border-radius: 16px;
    padding: 24px 28px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--dji-muted);
  }
  .dji-footnotes-box strong {
    color: var(--dji-ink);
  }
</style>

<section class="dji-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="dji-container">
    <div class="dji-top-grid">
      {%- comment -%} 左栏：6 大核心规格摘要 + 动态 In the Box 装箱数量矩阵 {%- endcomment -%}
      <div class="dji-panel">
        <div class="dji-credit-badge">
          <span>✓ 1% DJI Credit Reward</span>
          <span>·</span>
          <span>✓ Up to 30-Day Returns</span>
        </div>

        <h2 class="dji-title">{{ section.settings.product_title }}</h2>

        <ul class="dji-highlights">
          <li>
            <strong>All-New 1/1.3″ Sensor (4nm Chip)</strong>
            2.4 μm 等效像素尺寸与 13.5 挡高动态范围，支持 10-bit D-Log M 色彩预览。
          </li>
          <li>
            <strong>4hrs Extended Battery Life <sup>[1]</sup></strong>
            续航提升 50%，单块电池最长录制 4 小时；在 -20°C 极寒下仍可录制 3.6 小时。
          </li>
          <li>
            <strong>Dual OLED Touchscreens (1000 nits)</strong>
            前后双 OLED 高亮触摸屏，屏占比提升 16%，强光下取景依然清晰。
          </li>
          <li>
            <strong>DJI OsmoAudio™ 直连生态 <sup>[2]</sup></strong>
            无需接收器即可直连最多 2 个 DJI Mic 2 / Mic Mini 发射器，实现 48kHz 收音。
          </li>
        </ul>

        <div class="dji-box-title">
          <span>📦 In the Box (包装清单明细)</span>
          <span style="font-size:0.75rem;color:var(--dji-blue);" id="DjiBoxBadge-{{ section.id }}">
            当前展示：Adventure Combo（畅拍套装 · 3电全配）
          </span>
        </div>

        <div class="dji-box-grid">
          <div class="dji-box-item">
            <span>Osmo Action 5 Pro 主机</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
          <div class="dji-box-item is-upgraded" id="DjiItemBat-{{ section.id }}">
            <span>耐寒增强续航电池 (1950 mAh)</span>
            <span class="dji-qty-tag" id="DjiQtyBat-{{ section.id }}">× 3</span>
          </div>
          <div class="dji-box-item is-upgraded" id="DjiItemCase-{{ section.id }}">
            <span>多功能电池收纳充电盒 2</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
          <div class="dji-box-item is-upgraded" id="DjiItemRod-{{ section.id }}">
            <span>Osmo 1.5m 延长杆 (±5%)</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
          <div class="dji-box-item">
            <span>横竖拍防护框</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
          <div class="dji-box-item" id="DjiItemMount-{{ section.id }}">
            <span>快拆转接件 (标准 + Mini)</span>
            <span class="dji-qty-tag" id="DjiQtyMount-{{ section.id }}">× 2</span>
          </div>
          <div class="dji-box-item">
            <span>曲面粘接底座 &amp; 锁紧螺杆</span>
            <span class="dji-qty-tag" id="DjiQtyScrew-{{ section.id }}">× 2</span>
          </div>
          <div class="dji-box-item">
            <span>Type-C to C PD 快充线</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
          <div class="dji-box-item">
            <span>橡胶镜头保护套 &amp; 玻璃镜头盖</span>
            <span class="dji-qty-tag">× 1</span>
          </div>
        </div>
      </div>

      {%- comment -%} 右栏：Select Option 二元黄金套装 + OsmoAudio 麦克风连带 + DJI Care {%- endcomment -%}
      <div class="dji-panel">
        <div class="dji-sec-label">
          <span>1. Select Option（二元套装锚点：一电与三电及新增配件逐项对比；无订单占比数据）</span>
        </div>

        <div class="dji-combo-list" role="radiogroup" aria-label="选择套装版本">
          <button
            type="button"
            class="dji-combo-card"
            data-combo-type="standard"
            data-combo-name="Standard Combo"
            data-combo-price="{{ section.settings.standard_price }}"
          >
            <div class="dji-combo-head">
              <span class="dji-combo-name">Osmo Action 5 Pro Standard Combo（标准套装）</span>
              <span class="dji-combo-price">${{ section.settings.standard_price }}</span>
            </div>
            <p class="dji-combo-desc">
              含主机 × 1、耐寒电池 × 1、横竖拍保护框 × 1 及基础快拆件，适合已有旧款电池或短途轻量化记录。
            </p>
          </button>

          <button
            type="button"
            class="dji-combo-card is-selected"
            data-combo-type="adventure"
            data-combo-name="Adventure Combo"
            data-combo-price="{{ section.settings.adventure_price }}"
          >
            <div class="dji-combo-head">
              <span class="dji-combo-name">
                Osmo Action 5 Pro Adventure Combo（畅拍套装 🔥）
              </span>
              <span class="dji-combo-price">${{ section.settings.adventure_price }}</span>
            </div>
            <p class="dji-combo-desc">
              <strong>多含 2 块 1950mAh 耐寒电池（共 3 块）、1 个多功能集充电池盒 2、以及 1 根 1.5m 延长杆</strong>，一站满足全天滑雪、骑行与多角度自拍。
            </p>
          </button>
        </div>

        <div class="dji-sec-label">
          <span>2. DJI OsmoAudio™ 生态直连配件（无需接收器直连机身）</span>
        </div>
        <div
          class="dji-eco-card"
          id="DjiMicAddon-{{ section.id }}"
          data-mic-price="99"
          role="checkbox"
          aria-checked="false"
          tabindex="0"
        >
          <div>
            <div style="font-size:0.875rem;font-weight:700;">
              🎙️ 加购 DJI Mic 2 发射器（透明黑 / 珍珠白）
            </div>
            <div style="font-size:0.75rem;color:var(--dji-muted);margin-top:2px;">
              通过 OsmoAudio™ 蓝牙/专有协议直连相机，骑行头盔内收音或双人 Vlog 免插接收器
            </div>
          </div>
          <div style="font-weight:800;color:var(--dji-blue);white-space:nowrap;">+$99</div>
        </div>

        <div class="dji-sec-label" style="margin-top:20px;">
          <span>3. DJI Care Refresh 随心换（进水、碰撞、碎屏低价极速换新）</span>
        </div>
        <div class="dji-care-grid" role="radiogroup" aria-label="选择 DJI Care 随心换">
          <button type="button" class="dji-care-btn js-dji-care" data-care-name="1-Year Plan" data-care-price="29">
            <div style="font-size:0.8125rem;font-weight:700;">DJI Care 1 年版</div>
            <div style="font-size:0.75rem;color:var(--dji-muted);">1 年内 2 次低价置换 · <strong>+$29</strong></div>
          </button>
          <button type="button" class="dji-care-btn js-dji-care" data-care-name="2-Year Plan" data-care-price="45">
            <div style="font-size:0.8125rem;font-weight:700;">DJI Care 2 年版（资格与费用另核）</div>
            <div style="font-size:0.75rem;color:var(--dji-muted);">2 年内 4 次低价置换 · <strong>+$45</strong></div>
          </button>
        </div>

        <div class="dji-checkout-bar">
          <div>
            <div class="dji-total-num" id="DjiTotalNum-{{ section.id }}">${{ section.settings.adventure_price }}</div>
            <div style="font-size:0.75rem;color:var(--dji-muted);margin-top:4px;" id="DjiSummaryLine-{{ section.id }}">
              Adventure Combo (含 3 电 + 充电盒 + 1.5m 杆)
            </div>
          </div>
          <button type="button" class="dji-btn-buy">界面原型 · 未接真实购物车</button>
        </div>
      </div>
    </div>

    {%- comment -%} 底部：严苛工程边界条件与官方推荐 SD 卡名单 {%- endcomment -%}
    <div class="dji-footnotes-box">
      <strong>🔍 关键使用条件与官方资料条件说明（未在此店铺执行测试）（避免买错与设置误区）：</strong><br>
      • <strong>[1] 续航与极寒测试条件：</strong>4 小时最长续航与 -20°C 下 3.6 小时续航均在 1080p/24fps (16:9)、开启 RockSteady、关闭 Wi-Fi 与前后屏幕条件下测得。<br>
      • <strong>[2] 边充边录（Pass-Through）限制条件：</strong>支持通过 Type-C 连接外部电源边充边录；但<strong>「人物居中跟随（Subject Tracking，仅限横拍最高 2.7K/60fps）」与「超级夜景（SuperNight）」模式必须在机内安装电池时才可启用</strong>。<br>
      • <strong>[3] 内置存储 vs. SD 卡无线传输速率差异：</strong>无干扰环境下，机身内置存储通过 Wi-Fi 6 无线传输最高可达 <strong>80 MB/s</strong>，而 SD 卡内素材无线传输最高为 <strong>50 MB/s</strong>。<br>
      • <strong>[4] 官方推荐 microSD 卡具体型号：</strong><code>SanDisk Extreme PRO 32GB U3 A1 V30</code>、<code>Kingston CANVAS Go! Plus 64GB/128GB/256GB/512GB/1TB U3 A2 V30</code>、<code>Lexar Professional 1066x 64GB / 512GB U3 A2 V30</code>。
    </div>
  </div>
</section>

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

    var comboCards = sec.querySelectorAll('.dji-combo-card');
    var micCard = sec.querySelector('#DjiMicAddon-{{ section.id }}');
    var careBtns = sec.querySelectorAll('.js-dji-care');

    var boxBadge = sec.querySelector('#DjiBoxBadge-{{ section.id }}');
    var itemBat = sec.querySelector('#DjiItemBat-{{ section.id }}');
    var qtyBat = sec.querySelector('#DjiQtyBat-{{ section.id }}');
    var itemCase = sec.querySelector('#DjiItemCase-{{ section.id }}');
    var itemRod = sec.querySelector('#DjiItemRod-{{ section.id }}');
    var qtyMount = sec.querySelector('#DjiQtyMount-{{ section.id }}');
    var qtyScrew = sec.querySelector('#DjiQtyScrew-{{ section.id }}');

    var totalNumEl = sec.querySelector('#DjiTotalNum-{{ section.id }}');
    var summaryLineEl = sec.querySelector('#DjiSummaryLine-{{ section.id }}');

    var comboPrice = parseFloat('{{ section.settings.adventure_price }}' || '359');
    var comboName = 'Adventure Combo';
    var micSelected = false;
    var micPrice = 99;
    var carePrice = 0;
    var careName = '';

    function updateView() {
      var total = comboPrice + (micSelected ? micPrice : 0) + carePrice;
      totalNumEl.textContent = '$' + total.toFixed(0);
      var labels = [comboName];
      if (micSelected) labels.push('DJI Mic 2 发射器');
      if (careName) labels.push('DJI Care (' + careName + ')');
      summaryLineEl.textContent = labels.join(' + ');
    }

    comboCards.forEach(function(card) {
      card.addEventListener('click', function() {
        comboCards.forEach(function(c) { c.classList.toggle('is-selected', c === card); });
        var type = card.getAttribute('data-combo-type');
        comboName = card.getAttribute('data-combo-name');
        comboPrice = parseFloat(card.getAttribute('data-combo-price') || '279');

        if (type === 'adventure') {
          boxBadge.textContent = '当前展示：Adventure Combo（畅拍套装 · 3电全配）';
          qtyBat.textContent = '× 3';
          itemBat.classList.add('is-upgraded');
          itemCase.removeAttribute('hidden');
          itemRod.removeAttribute('hidden');
          qtyMount.textContent = '× 2';
          qtyScrew.textContent = '× 2';
        } else {
          boxBadge.textContent = '当前展示：Standard Combo（标准单电版）';
          qtyBat.textContent = '× 1';
          itemBat.classList.remove('is-upgraded');
          itemCase.setAttribute('hidden', 'hidden');
          itemRod.setAttribute('hidden', 'hidden');
          qtyMount.textContent = '× 1';
          qtyScrew.textContent = '× 1';
        }
        updateView();
      });
    });

    if (micCard) {
      micCard.addEventListener('click', function() {
        micSelected = !micSelected;
        micCard.classList.toggle('is-selected', micSelected);
        micCard.setAttribute('aria-checked', String(micSelected));
        updateView();
      });
    }

    careBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var already = btn.classList.contains('is-selected');
        careBtns.forEach(function(b) { b.classList.remove('is-selected'); });
        if (already) {
          carePrice = 0;
          careName = '';
        } else {
          btn.classList.add('is-selected');
          carePrice = parseFloat(btn.getAttribute('data-care-price') || '0');
          careName = btn.getAttribute('data-care-name');
        }
        updateView();
      });
    });
  })();
</script>

{% schema %}
{
  "name": "DJI 二元套装与装箱矩阵",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "product_title",
      "label": "商品标题",
      "default": "Osmo Action 5 Pro"
    },
    {
      "type": "text",
      "id": "standard_price",
      "label": "Standard Combo 翻新机观察价 (SG / USD，非实时)",
      "default": "279"
    },
    {
      "type": "text",
      "id": "adventure_price",
      "label": "Adventure Combo 翻新机观察价 (SG / USD，非实时)",
      "default": "359"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 20,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "顶部内边距",
      "default": 48
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 20,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "底部内边距",
      "default": 64
    }
  ],
  "presets": [
    {
      "name": "DJI 二元套装与装箱矩阵"
    }
  ]
}
{% endschema %}