(function () {
  'use strict';
  const NS = (window.Pricing20 = window.Pricing20 || {});

/* projects/pricing-2-0-mobile/app.jsx
 * 移动端的 Pricing 2.0 · 接入方案
 * 共享 window.Pricing20 命名空间，screens 组件由 projects/pricing-2-0/screens-mobile.jsx 提供
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon */

const MB_W = 390, MB_H = 844;

function Pricing2MobileIntro() {
  return (
    <div className="intro" style={{ width: 620 }}>
      <span className="tag" style={{ color: '#8E6BF2', background: '#F3EFFD' }}>Pricing 2.0 · 移动端接入</span>
      <h1>移动端（iOS）· 积分订阅接入</h1>
      <p>
        移动端覆盖设置首页新增「资源用量」入口、资源用量页（免费版 / 升级版两态）、积分明细页
        （07-03 变更：Tab 改为「对话消耗 / 积分增加」，消耗按对话聚合）、iOS 会员方案页。
      </p>
      <p>
        背景澄清：iOS 端自上线起仅承载数据分析能力，任务规划、PPT 生成等生成类能力不在 iOS 侧提供；
        过渡期内旧版 iOS 与 Web 两端独立计额，不做换算（详见 PRD §（4）❷）。
      </p>
      <p style={{ marginTop: 14 }}>
        <a
          href="https://app.notion.com/p/Pricing-2-0-3858b0838b68808c8e93e166fe3351fd"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 999,
            border: '1px solid rgba(142,107,242,0.3)',
            background: 'rgba(142,107,242,0.08)',
            color: '#8E6BF2', fontSize: 13, fontWeight: 500,
            textDecoration: 'none'
          }}>
          <span>📄 查看完整 PRD</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#8E6BF2" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4.5 2.5h5v5" />
            <path d="M9.5 2.5 3 9" />
          </svg>
        </a>
      </p>
    </div>);
}

function Pricing2MobileApp() {
  return (
    <DesignCanvas>
      <DCSection id="intro" title="概览" subtitle="移动端 Pricing 2.0 · iOS 接入">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <Pricing2MobileIntro />
        </div>
      </DCSection>

      <DCSection
        id="mobile"
        title="移动端 · 设置 / 资源用量 / 积分明细 / iOS 会员方案"
        subtitle="设置首页 · 资源用量（免费 / 升级版）· 积分明细 · iOS 会员方案">

        <DCArtboard id="mb-a" label="① 设置首页 · 新增资源用量入口" tag="主流程" width={MB_W} height={MB_H}>
          <NS.MB_SettingsHome />
        </DCArtboard>
        <DCArtboard id="mb-b" label="② 资源用量页 · 免费版" tag="主流程" width={MB_W} height={MB_H}>
          <NS.MB_ResourceFree />
        </DCArtboard>
        <DCArtboard id="mb-c" label="③ 资源用量页 · 升级版（积分 + 明细 + 常见问题）" tag="主流程" width={MB_W} height={MB_H}>
          <NS.MB_ResourcePro />
        </DCArtboard>
        <DCArtboard
          id="mb-d" label="④ 积分明细页（07-03 变更：对话消耗 / 积分增加）" tag="新增" tagVariant="guide"
          caption="Tab 由「全部 / 收入 / 支出」改为「对话消耗 / 积分增加」；对话消耗按对话聚合，仅展示近 30 天有更新的对话"
          width={MB_W} height={MB_H}>
          <NS.MB_CreditLog />
        </DCArtboard>
        <DCArtboard id="mb-e" label="⑤ iOS 会员方案页 · 免费版" tag="主流程" width={MB_W} height={MB_H}>
          <NS.MB_PlanFree />
        </DCArtboard>
        <DCArtboard id="mb-f" label="⑥ iOS 会员方案页 · 已订阅升级版（包年）" tag="主流程" width={MB_W} height={MB_H}>
          <NS.MB_PlanSubscribed />
        </DCArtboard>
      </DCSection>

      <div style={{ position: 'sticky', left: 0, width: '100vw' }}>
        <div style={{ padding: '56px 24px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, textAlign: 'center' }}>
          <div style={{ width: 64, height: 1, background: 'rgba(10,10,6,0.08)' }} />
          <div style={{ marginTop: 6 }}><Raccoon size="md" brand /></div>
          <div style={{ fontSize: 14, color: '#7a7a6e', fontWeight: 500, letterSpacing: '0.3px' }}>—— 移动端 Pricing 2.0 · iOS 接入 ——</div>
          <div style={{ fontSize: 12.5, color: '#a0a094', lineHeight: 1.8 }}>
            视觉对齐 mobile-v1-companion · 内容来源：移动端的 Pricing 2.0 接入 PRD
          </div>
        </div>
      </div>
    </DesignCanvas>);
}

  Object.assign(NS, { Pricing2MobileIntro, Pricing2MobileApp });
})();