/* ZY console — Shopify COO 日报仪表盘（shopify_coo_operations_daily_digest.v1）。
   受控写 COO：会自主执行业务写（库存净零 / SEO meta / blog 发布），每笔走门控 + 留痕。
   驾驶舱不放执行按钮——写要么已按既定策略自动发生，要么走 COO 自己的审批流。
   卡片展示「已自动做了什么」+「待你拍板什么」。null ≠ 0；attention 按严重度上色。 */
const DSSP = window.ZYDesignSystem_d746df;

const SP_ADMIN = "https://admin.shopify.com";

// run state → 严重度 / 渲染（§5）
const SP_RUN = {
  verified_green: { sev: "green", txt: "已验证 · 库存净零写 ✓" },
  success:        { sev: "green", txt: "成功" },
  no_submission:  { sev: "neutral", txt: "受控空转 · 今日无写（正常）" },
  blocked_daily_execution_limit: { sev: "neutral", txt: "已达当日执行上限 · 受控（正常）" },
  blocked:        { sev: "red", txt: "已阻断 · 需排查" },
  failed:         { sev: "red", txt: "失败 · 需排查" },
};
function spRunSev(state) { return (SP_RUN[state] || { sev: "neutral" }).sev; }

const SP_AREA_LABEL = {
  automation_scorecard: "自动作业",
  store_metrics: "店铺指标",
  approvals_pending: "待拍板",
  seo_content: "SEO·内容",
  controlled_write: "受控写",
  controlled_write_audit: "受控写",
  autonomy: "自治策略",
  autonomy_policy: "自治策略",
  finance_mirror: "财务镜像",
};
const SP_KEY_LABEL = {
  inventory_blocked: "库存自动作业阻断", automation_failed: "自动作业失败",
  pending: "待拍板积压", to_fulfill: "待履约", low_stock: "低库存", refunds: "退款",
  failed: "受控写失败", rolled_back: "受控写已回滚", not_approved: "授权未批·写面关闭",
  returns_rma_requested: "退货 RMA 申请待拍板",
};
// 受控写车道 / 状态标签（controlled_write_audit）
const SP_LANE_LABEL = { inventory: "库存", seo: "SEO", blog: "博客" };
const SP_STATUS_LABEL = { done: "已完成", failed: "失败", rolled_back: "已回滚", blocked: "受控限流" };

// 计数 chip：null→「–」弱化；0→平静绿；attention 项上色
function SPCount({ k, label, v, attn, sev }) {
  const isAtt = attn && (v || 0) > 0;
  const cls = isAtt ? " ttc--" + (sev || "amber") : (v === 0 ? " ttc--zero" : "");
  return (
    <div className={"ttc" + cls}>
      <span className="ttc__v num">{v == null ? <span className="ttnull">–</span> : v}</span>
      <span className="ttc__l">{label}</span>
    </div>
  );
}

function SPCard({ title, icon, time, area, body, write, clean, footnote, wide }) {
  const { Icon } = DSSP;
  return (
    <div className={"ttcard" + (wide ? " spgrid__wide" : "")} id={"sp-" + area}>
      <div className="ttcard__h">
        <span className="ttcard__ic"><Icon name={icon} size={16} /></span>
        <span className="ttcard__title">{title}</span>
        <span className="spcorner">
          {write
            ? <span className="spchip spchip--write"><Icon name="PenLine" size={11} />含自动写</span>
            : <span className="spchip spchip--nowrite"><Icon name="Eye" size={11} />只读</span>}
          {clean
            ? <span className="spchip spchip--clean"><Icon name="ShieldCheck" size={11} />脱敏✓</span>
            : <span className="spchip spchip--dirty"><Icon name="ShieldAlert" size={11} />脱敏异常</span>}
          <span className="ttcard__time"><Icon name="Clock" size={11} />{time}</span>
        </span>
      </div>
      <div className="ttcard__body">
        {clean
          ? body
          : <div className="spneed"><div className="spneed__i"><Icon name="ShieldAlert" size={14} />脱敏异常，暂不展示明细 · 已阻断本卡内容渲染，避免未脱敏数据外露</div></div>}
      </div>
      {footnote && <div className="spfoot"><Icon name="Info" size={12} />{footnote}</div>}
    </div>
  );
}

function KitShopify() {
  const { Icon, Pill, Card } = DSSP;
  const D = window.KIT.shopifyDigest, A = D.areas;
  const sc = A.automation_scorecard, sm = A.store_metrics, ap = A.approvals_pending, seo = A.seo_content;
  const cwa = A.controlled_write_audit, au = A.autonomy_policy, fm = A.finance_mirror;
  const [openTask, setOpenTask] = React.useState(null);
  const [blogPrev, setBlogPrev] = React.useState(false);
  // 修正3：顶栏与各卡时间戳统一由 digest 根 freshness.captured_at 驱动
  const T = D.freshness.captured_at;

  const scrollTo = (area) => {
    const el = document.getElementById("sp-" + area);
    const host = document.querySelector(".scroll");
    if (el && host) host.scrollTop = Math.max(0, host.scrollTop + (el.getBoundingClientRect().top - host.getBoundingClientRect().top) - 16);
    if (el) { el.classList.add("ttcard--flash"); setTimeout(() => el.classList.remove("ttcard--flash"), 1200); }
  };

  // 顶部 attention 聚合（"area:key"）→ 严重度排序
  const caps = (D.attention || []).map(full => {
    const [area, key] = full.split(":");
    const red = /blocked|failed|inventory_blocked|automation_failed|not_approved|rolled_back|revoked|missing/.test(key);
    return { full, area, key, red };
  }).sort((a, b) => b.red - a.red);

  // 自动作业各 job
  const jobs = Object.entries(sc.runs).map(([id, r]) => ({ id, ...r, sev: spRunSev(r.state) }));
  const blocked = jobs.filter(j => j.sev === "red").length;

  return (
    <div className="view viewfade">
      <Card className="ovstrip">
        <div className="ovstrip__head">
          <span className="ovstrip__orb"><Icon name="ShoppingBag" size={20} /></span>
          <div className="ovstrip__id">
            <div className="ovstrip__title">Shopify COO · 日报
              <span className="ovstrip__mode"><span className="ovstrip__dot" />受控写 · 门控留痕</span>
            </div>
            <div className="ovstrip__judge">{D.shop} · 只读聚合快照（无明细 / 无 PII）· COO 会自主执行业务写（库存净零 / SEO / 博客），每笔走门控；驾驶舱<b style={{ color: "var(--fg-2)" }}>不放执行按钮</b>——展示「已自动做了什么」+「待你拍板什么」。</div>
          </div>
          <div className="ovstrip__src">
            <span className="ovstrip__srclabel">数据源</span>
            <span className="ovstrip__srcval">Shopify COO 日报（只读聚合）</span>
            <Pill tone={D.business_write_performed ? "accent" : "good"} soft>{D.business_write_performed ? "含自动写" : "只读"}</Pill>
          </div>
        </div>
        <div className="pqhead">
          <Icon name="Sparkles" size={16} />
          <span className="pqhead__t">{D.headline}</span>
          <span className={"spfresh" + (D.freshness.stale ? " is-stale" : "")}>
            <span className="spfresh__dot" />
            {D.freshness.stale ? "数据已过期" : "数据新鲜"} · 截至 {D.freshness.captured_at}
          </span>
        </div>
      </Card>

      {/* ATTENTION 聚合条 — 现在该看什么 */}
      <Card>
        <div className="sechead">
          <div className="sechead__l">
            <span className="sechead__ic"><Icon name="Megaphone" size={15} /></span>
            <div>
              <div className="sechead__t">现在该看什么 · ATTENTION</div>
              <div className="sechead__s">由各区 attention 聚合 · 红=自动作业阻断/失败 · 琥珀=待拍板/店铺时效 · 点胶囊跳到对应卡</div>
            </div>
          </div>
        </div>
        {caps.length > 0 ? (
          <div className="ttatt">
            {caps.map(c => (
              <button key={c.full} className={"ttcap ttcap--" + (c.red ? "red" : "amber")} onClick={() => scrollTo(c.area)}>
                <span className="ttcap__dot" />
                <span className="ttcap__area">{SP_AREA_LABEL[c.area] || c.area}</span>
                <span className="ttcap__k">{SP_KEY_LABEL[c.key] || c.key}</span>
              </button>
            ))}
          </div>
        ) : (
          <div className="spcalm"><Icon name="CircleCheck" size={16} />全部正常 · <b>0 项</b>需要你现在处理。自动作业全绿，无待拍板。</div>
        )}
      </Card>

      <div className="spgrid">
        {/* 自动作业成绩 — 仪表盘核心 */}
        <SPCard wide area="automation_scorecard" title="昨日自动作业成绩" icon="Bot"
          time={T} write={sc.business_write_performed} clean={sc.redaction_clean}
          footnote="4 条 timer 当日回执。受控空转 / 达上限为正常态，不计入 attention；仅阻断 / 失败标红。"
          body={
            <div className="spsplit">
              {blocked > 0
                ? <div className="spneed"><div className="spneed__i"><Icon name="OctagonAlert" size={14} />{blocked} 条自动作业阻断 / 失败 · 需排查</div></div>
                : null}
              <div className="spjobs">
                {jobs.map(j => {
                  const meta = SP_RUN[j.state] || { txt: j.state };
                  return (
                    <div key={j.id} className={"spjob spjob--" + j.sev}>
                      <span className="spjob__light" />
                      <div className="spjob__main">
                        <div className="spjob__name">{j.label}</div>
                        <div className="spjob__state">{meta.txt}
                          {j.net_zero ? <span> · <b>净变化为零</b></span> : null}
                          {typeof j.published_count === "number" ? <span> · 发布 <b>{j.published_count}</b> 篇</span> : null}
                        </div>
                      </div>
                      <div className="spjob__right">
                        {j.id === "daily_blog_auto_publish" && <button className="spjobbtn" onClick={() => setBlogPrev(true)}><Icon name="Eye" size={12} />预览博文</button>}
                        {j.worker_submit_performed
                          ? <span className="spwrite"><Icon name="PenLine" size={10} />已发生 Worker 写</span>
                          : <span className="spwrite spwrite--idle"><Icon name="Minus" size={10} />无写</span>}
                        <span className="spjob__time">昨日 {j.ran_at}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          } />

        {/* 店铺只读指标 */}
        <SPCard area="store_metrics" title="店铺关键指标" icon="Store"
          time={T} write={sm.business_write_performed} clean={sm.redaction_clean}
          footnote="– = 未采到 / 未知（读端点接上实时查询后填真值）；0 = 明确为空。两者视觉可区分。"
          body={
            <div className="spsplit">
              <div className="ttcgrid">
                <SPCount k="total" label="订单总数" v={sm.orders.total} />
                <SPCount k="unfulfilled" label="待履约" v={sm.orders.unfulfilled} attn={(sm.fulfillment.to_fulfill || sm.orders.unfulfilled) != null} sev="amber" />
                <SPCount k="to_fulfill" label="待发货" v={sm.fulfillment.to_fulfill} attn sev="amber" />
                <SPCount k="refunded" label="已退款 / 部分" v={sm.orders.refunded_or_partial} />
                <SPCount k="low_stock" label="低库存 SKU" v={sm.inventory.low_stock_skus} attn sev="amber" />
              </div>
              <div>
                <div className="spseg__cap"><Icon name="Activity" size={12} />店铺日常指标 · Shopify Admin 只读</div>
                {sm.performance ? (
                  <div className="ttperf">
                    {[["visitors", "访客数"], ["sessions", "会话数"], ["conversion_rate", "转化率"], ["aov", "客单价"]].map(([k, lab]) => (
                      <div className="ttperf__i" key={k}>
                        <span className="ttperf__v num">{sm.performance[k] == null ? <span className="ttnull">–</span> : sm.performance[k]}</span>
                        <span className="ttperf__l">{lab}</span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="ttnull" style={{ fontSize: 12.5 }}>暂未接入 Shopify Admin 访客 / 转化数据源</div>
                )}
              </div>
              {sm.exceptions.refunded_orders.length > 0 && (
                <div className="spreflist">
                  <span className="spreflist__cap">已退款单（展示号 · 无客户明细）</span>
                  {sm.exceptions.refunded_orders.map(no => (
                    <a key={no} className="spref" href={SP_ADMIN + "/orders"} target="_blank" rel="noopener noreferrer">
                      {no}<Icon name="ArrowUpRight" size={12} />
                    </a>
                  ))}
                </div>
              )}
            </div>
          } />

        {/* 待拍板 / 异常 */}
        <SPCard area="approvals_pending" title="待你拍板 / 异常" icon="Inbox"
          time={T} write={ap.business_write_performed} clean={ap.redaction_clean}
          footnote="只汇总待办，不在中台直接写；受控写走 COO 自己的 decision_ref 审批流。"
          body={
            <div className="spsplit">
              <div className="ttcgrid">
                <SPCount k="pending_controlled_writes" label="待审受控写" v={ap.pending_controlled_writes} attn sev="amber" />
                <SPCount k="approval_inbox_count" label="审批收件箱" v={ap.approval_inbox_count} attn sev="amber" />
              </div>
              {ap.needs_human.length > 0 ? (
                <div className="spneed">
                  {ap.needs_human.map(k => (
                    <div key={k} className="spneed__i"><Icon name="UserCog" size={14} />需人工介入 · {SP_KEY_LABEL[k] || k}</div>
                  ))}
                </div>
              ) : (
                <div className="spcalm"><Icon name="CircleCheck" size={16} />收件箱已清空，无需人工介入。</div>
              )}
            </div>
          } />

        {/* SEO / 内容进展 */}
        <SPCard area="seo_content" title="SEO / 内容进展" icon="FileText"
          time={T} write={seo.business_write_performed} clean={seo.redaction_clean}
          footnote="进展计数，弱化展示；仅待办机会积压（>0）进 attention。"
          body={
            <div className="spsplit">
              <div className="spprog">
                <div className="spprogi"><span className="spprogi__v num">{seo.seo_autopilot.writes_today}</span><span className="spprogi__l">SEO 自动写（今日）</span></div>
                <div className="spprogi"><span className="spprogi__v num">{seo.blog.published_today}</span><span className="spprogi__l">今日博客发布</span></div>
                <SPCount k="open_count" label="待办机会" v={seo.opportunities.open_count} attn sev="amber" />
                <div className="spprogi"><span className="spprogi__v num" style={{ fontSize: 13 }}>{seo.blog.last_publish_at}</span><span className="spprogi__l">上次发布</span></div>
              </div>
              <div className="ttbadges">
                <span className="ttbadges__cap">SEO 自动写状态</span>
                <span className="ttbadge">{SP_RUN[seo.seo_autopilot.last_state] ? SP_RUN[seo.seo_autopilot.last_state].txt : seo.seo_autopilot.last_state}</span>
              </div>
            </div>
          } />

        {/* 受控写回执（可钻取，D2）— 与成绩卡互为「成绩 ↔ 凭证」 */}
        {cwa.source_unavailable ? (
          <div className="ttcard spgrid__wide" id="sp-controlled_write_audit">
            <div className="ttcard__h"><span className="ttcard__ic"><Icon name="ClipboardCheck" size={16} /></span><span className="ttcard__title">受控写回执（可钻取）</span></div>
            <div className="ttcard__body"><div className="ttnull" style={{ fontSize: 12.5 }}>该卡数据源待接（回执 ledger 聚合读模型未上线）；按系统规则显示空态，不用演示数据补位。</div></div>
          </div>
        ) : (
        <SPCard wide area="controlled_write_audit" title="受控写回执（可钻取）" icon="ClipboardCheck"
          time={T} write={cwa.business_write_performed} clean={cwa.redaction_clean}
          footnote="持久回执 ledger，每笔一行。点一笔看 decision_ref / executor / 记录时间；失败 / 回滚标红。与成绩卡互为凭证。"
          body={
            <div className="spsplit">
              <div className="ttbadges">
                <span className="ttbadges__cap">本窗 {cwa.window}</span>
                <span className="ttbadge ttbadge--stat">今日写入<b className="num">{cwa.writes_total}</b></span>
                <span className={"ttbadge" + (cwa.by_status.failed > 0 ? " ttbadge--red" : "")}>失败<b className="num">{cwa.by_status.failed}</b></span>
                <span className={"ttbadge" + (cwa.by_status.rolled_back > 0 ? " ttbadge--red" : "")}>已回滚<b className="num">{cwa.by_status.rolled_back}</b></span>
                <span className="ttbadge">已完成<b className="num">{cwa.by_status.done}</b></span>
              </div>
              <div className="ttbadges">
                <span className="ttbadges__cap">车道</span>
                {[["inventory", "库存"], ["seo", "SEO"], ["blog", "博客"]].map(([k, lab]) => (
                  <span className="ttbadge" key={k}>{lab}<b className="num">{cwa.by_lane[k]}</b></span>
                ))}
              </div>
              {cwa.writes_total === 0
                ? <div className="spcalm"><Icon name="CircleCheck" size={16} />今日无受控写（正常）。</div>
                : <div className="spaudit">
                    {cwa.entries.map(e => {
                      const open = openTask === e.task_id;
                      const sev = (e.status === "failed" || e.status === "rolled_back") ? "red" : e.status === "blocked" ? "neutral" : "green";
                      return (
                        <div className={"spaudit__row spaudit__row--" + sev} key={e.task_id}>
                          <button className="spaudit__head" onClick={() => setOpenTask(open ? null : e.task_id)}>
                            <span className={"spaudit__light spaudit__light--" + sev} />
                            <span className="spaudit__lane">{SP_LANE_LABEL[e.write] || e.write}</span>
                            <span className="spaudit__wt num">{e.worker_type}</span>
                            <span className="spaudit__st">{SP_STATUS_LABEL[e.status] || e.status}</span>
                            <Icon name={open ? "ChevronDown" : "ChevronRight"} size={14} />
                          </button>
                          {open && (
                            <div className="spaudit__detail">
                              <div className="spaudit__kv"><span>decision_ref</span><b className="num">{e.decision_ref}</b></div>
                              <div className="spaudit__kv"><span>executor</span><b className="num">{e.executor}</b></div>
                              <div className="spaudit__kv"><span>task_id</span><b className="num">{e.task_id}</b></div>
                              <div className="spaudit__kv"><span>记录时间</span><b className="num">{e.recorded_at}</b></div>
                              <div className="spaudit__kv"><span>error</span><b>{e.error == null ? "—" : e.error}</b></div>
                              <div className="spaudit__note"><Icon name="ShieldCheck" size={11} />脱敏 result 不含 GID / 域名 / 凭据</div>
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>}
            </div>
          } />
        )}

        {/* 自治策略（只读授权状态，D3）*/}
        {au.source_unavailable ? (
          <div className="ttcard" id="sp-autonomy_policy">
            <div className="ttcard__h"><span className="ttcard__ic"><Icon name="ShieldCheck" size={16} /></span><span className="ttcard__title">自治策略 · 授权状态</span></div>
            <div className="ttcard__body"><div className="ttnull" style={{ fontSize: 12.5 }}>该卡数据源待接（授权状态读模型未上线）；按系统规则显示空态，不用演示数据补位。</div></div>
          </div>
        ) : (
        <SPCard area="autonomy_policy" title="自治策略 · 授权状态" icon="ShieldCheck"
          time={T} write={au.business_write_performed} clean={au.redaction_clean}
          footnote={"凭据 " + au.decision_ref + " · 改授权属高风险，走 COO 审计流 + 老板签名；本卡只读，不放改策略控件。"}
          body={
            <div className="spsplit">
              {au.approval_status === "approved"
                ? <div className="spauto spauto--ok">
                    <Icon name="ShieldCheck" size={18} />
                    <div><div className="spauto__t">已授权（{au.final_approver}）</div><div className="spauto__s">{au.approval_scope}</div></div>
                  </div>
                : <div className="spauto spauto--bad">
                    <Icon name="ShieldAlert" size={18} />
                    <div><div className="spauto__t">写面已关闭 · {au.approval_status}</div><div className="spauto__s">授权未批 / 被吊销，后端写面自动关闭。</div></div>
                  </div>}
              <div className="ttflags">
                <span className="ttflag">库存净零</span>
                <span className="ttflag">每日 {au.bounds.daily_execution_limit_per_lane} 笔 / 车道</span>
                <span className={"ttflag" + (au.bounds.payment_or_refund_writes ? " ttflag--red" : "")}><Icon name="Ban" size={12} />禁付款 / 退款写</span>
                <span className={"ttflag" + (au.bounds.live_business_messages ? " ttflag--red" : "")}><Icon name="Ban" size={12} />禁业务外发消息</span>
                <span className={"ttflag" + (au.bounds.kill_switch ? " ttflag--ok" : "")}>kill-switch {au.bounds.kill_switch ? "可用" : "不可用"}</span>
                {au.write_surface_closed_by_default && <span className="ttflag">写面默认关闭</span>}
              </div>
            </div>
          } />
        )}

        {/* 财务镜像（可选，只读徽章）— 非权威，财务 COO 为准；不重复对账/利润判断 */}
        {fm && <SPCard area="finance_mirror" title="财务镜像 · 只读徽章" icon="Wallet"
          time={T} write={false} clean={true}
          footnote="镜像·非权威，财务COO为准 —— 本卡不做对账/利润判断，口径解释与最终数字以财务 COO 驾驶舱为准。"
          body={
            <div className="spsplit">
              <div className="spsample">镜像·非权威，财务COO为准</div>
              <div className="ttbadges">
                <span className="ttbadge">应收<b className="num">{window.fmtMoney(fm.receivable, fm.currency)}</b></span>
                <span className="ttbadge">到账<b className="num">{window.fmtMoney(fm.settled, fm.currency)}</b>{fm.settle_basis && <span className="finbasis finbasis--amber">{fm.settle_basis === "shopify_payments_payouts" ? "实到" : fm.settle_basis}</span>}</span>
                <span className="ttbadge">待收<b className="num">{window.fmtMoney(fm.pending_settlement, fm.currency)}</b></span>
                <span className="ttbadge">退款<b className="num">{window.fmtMoney(fm.refund, fm.currency)}</b></span>
              </div>
            </div>
          } />}
      </div>

      {blogPrev && <SPBlogPreview seo={seo} onClose={() => setBlogPrev(false)} />}
    </div>
  );
}

function SPBlogPreview({ seo, onClose }) {
  const { Icon } = DSSP;
  const STYLES = [{ k: "default", label: "默认" }, { k: "magazine", label: "杂志" }, { k: "minimal", label: "极简" }];
  const [style, setStyle] = React.useState("default");
  // 示例博文(真实内容在 Shopify 博客；本卡按聚合只读，不带正文，故预览为示例排版）
  const POST = {
    title: "夏日居家焕新 · 桌面收纳灵感清单",
    excerpt: "小空间也能很整洁——本期精选 5 件高复购收纳单品,附搭配思路。",
    seo_title: "桌面收纳灵感清单 | LIEE FLAT",
    seo_desc: "5 件高复购桌面收纳单品与搭配思路,夏日居家焕新必看。",
    body: [
      "换季是重新整理桌面的好时机。我们从近 30 天动销里挑出复购最高的几件收纳单品,按使用场景给出搭配。",
      "建议先按使用频率分层:高频物件就近放、低频物件归整收纳;再用统一色系收口,视觉立刻清爽。",
      "本文由 SEO autopilot 依选题机会自动生成草稿,经受控写发布;线上实际内容与样式以 Shopify 博客为准。",
    ],
  };
  return (
    <div className="camodal__scrim" onClick={onClose}>
      <div className="camodal camodal--blog" onClick={e => e.stopPropagation()}>
        <div className="camodal__head">
          <span className="camodal__ic"><Icon name="FileText" size={20} /></span>
          <div>
            <div className="camodal__t">博文预览 <span className="spsample">示例排版</span></div>
            <div className="camodal__sub">每日博客自动发布 · 上次 {seo.blog.last_publish_at} · 今日发布 {seo.blog.published_today} 篇</div>
          </div>
          <button className="camodal__x" onClick={onClose}><Icon name="X" size={17} /></button>
        </div>
        <div className="camodal__body">
          <div className="spblogbar">
            <span className="spblogbar__l">排版样式</span>
            <div className="fchips">{STYLES.map(s => <button key={s.k} className={"fchip" + (style === s.k ? " is-on" : "")} onClick={() => setStyle(s.k)}>{s.label}</button>)}</div>
            <a className="spblogbar__go" href={SP_ADMIN + "/content/blog_posts"} target="_blank" rel="noopener noreferrer">在 Shopify 打开博文<Icon name="ArrowUpRight" size={13} /></a>
          </div>
          <article className={"spblog spblog--" + style}>
            <div className="spblog__kicker">LIEE FLAT · 博客</div>
            <h1 className="spblog__title">{POST.title}</h1>
            <div className="spblog__meta">自动发布 · {seo.blog.last_publish_at} · SEO autopilot</div>
            <div className="spblog__hero"><Icon name="Image" size={22} /><span>题图占位</span></div>
            <p className="spblog__lead">{POST.excerpt}</p>
            {POST.body.map((p, i) => <p className="spblog__p" key={i}>{p}</p>)}
            <div className="spblog__seo">
              <div className="spblog__seocap"><Icon name="Search" size={12} />SEO meta · title_tag / description_tag</div>
              <div className="spblog__seot">{POST.seo_title}</div>
              <div className="spblog__seod">{POST.seo_desc}</div>
            </div>
          </article>
          <div className="spfoot" style={{ marginTop: 0 }}><Icon name="Info" size={12} />示例排版,便于检查版式;真实内容 / 样式以 Shopify 博客线上为准,点上方深链前往核对。</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KitShopify });