/* projects/pricing-2-0/app.jsx
 * Pricing 2.0 · 积分订阅体系 · 全平台交互设计稿
 * 依赖：shared/shared.jsx · design-canvas.jsx
 *       screens-desktop-profile.jsx · screens-desktop-settings.jsx
 *       screens-desktop-chat.jsx · screens-mobile.jsx
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon,
   PR_MenuFreeCollapsed, PR_MenuFreeExpanded, PR_MenuProExpanded,
   ST_ResourcePro, ST_ResourceFree, ST_ResourceFreeFrozen, ST_PlanFree, ST_PlanSubscribed,
   CH_ModelNormal, CH_ModelLocked, CH_ModelUpgrade, CH_CreditDisplay,
   CH_InsufficientModal, CH_BoosterModal, CH_BoosterModalFree, CH_BoosterSuccess,
   PP_PublicPage, PP_BoosterSection, PP_W */

const D_W = 880, D_H = 620;   /* 桌面端 artboard */

function Pricing2Intro() {
  return (
    <div className="intro" style={{ width: 620 }}>
      <span className="tag" style={{ color: '#8E6BF2', background: '#F3EFFD' }}>Pricing 2.0 · 积分订阅体系</span>
      <h1>会员订阅保权益 + 积分机制控算力</h1>
      <p>
        从「次数配额」升级为「积分 + 加油包」双轨机制：订阅决定权益层（功能解锁、容量上限、优先级），
        积分控制算力消耗（每次 AI 任务扣分，不同模型费率不同）。
      </p>
      <p>
        本稿覆盖三大平台的核心交互：<b>桌面端</b>（Profile Menu 积分卡片 · 设置弹窗双 Tab · 对话区模型切换与积分消耗）、
        <b>移动端</b>（设置首页 · 资源用量页 · 积分明细 · iOS 会员方案页）。
        视觉对齐 officev3 SettingModal（桌面端）和 mobile-v1-companion（移动端）。
      </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 Pricing2App() {
  return (
    <DesignCanvas>

      {/* —— 概览 —— */}
      <DCSection id="intro" title="概览" subtitle="Pricing 2.0 设计稿 · 积分订阅体系">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <Pricing2Intro />
        </div>
      </DCSection>

      {/* —— ❶ 桌面端 Profile Menu 积分余额卡片 —— */}
      <DCSection
        id="profile-menu"
        title="(1) Profile Menu · 积分余额卡片（桌面）"
        subtitle="任意页面 → 头像菜单 → 资源用量浮层"
        description={
          <>
            积分余额的<strong>轻量入口</strong>：左下角 UserCard 副文案常驻显示积分数；点头像出菜单，菜单内「资源用量」行右侧也展示积分数（与展开态无关，始终可见）；点击展开右侧浮层卡片，包含三行带进度条的资源用量 + 套餐操作（升级 / 管理订阅 / 重新订阅 / 续费）+ 跳转完整页入口。
            <br />
            五种状态对应套餐 × 订阅生命周期的所有组合，重点验证操作按钮的措辞与跳转目标在不同状态下是否合理。
          </>
        }
      >
        <DCArtboard
          id="pr-a" label="① 菜单默认收起 · 免费版" tag="主流程"
          caption="菜单本体：手机号 / 切换身份 / 资源用量（行内显示积分）/ 升级 / 设置 / 退出登录；免费版多出「升级」行并带「解锁更多」chip"
          notes={[
            <><strong>左下角 UserCard 副文案常驻显示「可用积分 N」</strong>，替代原欢迎语「Hi，早上好！」，让用户在任意页面都能一眼看到积分余额；身份标签随套餐切换为「免费版 / 升级版」。</>,
            <>菜单内「资源用量」行右侧的积分数字常驻显示，无论右侧资源卡片是否展开都不隐藏。</>,
          ]}
          width={D_W} height={D_H}
        >
          <PR_MenuFreeCollapsed />
        </DCArtboard>
        <DCArtboard
          id="pr-b" label="② 展开资源卡片 · 免费版" tag="主流程"
          caption="点击「资源用量」展开右侧浮层：套餐名「个人免费版」+「升级」按钮；无到期时间副信息行；进度条按可用量推算"
          width={D_W} height={D_H}
        >
          <PR_MenuFreeExpanded />
        </DCArtboard>
        <DCArtboard
          id="pr-c" label="③ 展开资源卡片 · 升级版 · 续订中" tag="主流程"
          caption="连续订阅生效中：操作按钮「管理订阅」→ 设置/资源用量；副信息「下次续费：YYYY-MM-DD」"
          width={D_W} height={D_H}
        >
          <PR_MenuProExpanded />
        </DCArtboard>
        <DCArtboard
          id="pr-d" label="④ 升级版 · 连续订阅已取消" tag="边缘态" tagVariant="edge"
          caption="用户取消了续订，但当前周期内仍享有权益：操作按钮变「重新订阅」→ 扫码续订页；副信息「到期时间：YYYY-MM-DD」提示失效节点"
          width={D_W} height={D_H}
        >
          <PR_MenuProCancelledExpanded />
        </DCArtboard>
        <DCArtboard
          id="pr-e" label="⑤ 升级版 · 一次性购买（年卡）" tag="边缘态" tagVariant="edge"
          caption="月/季/年卡购买不自动续费：操作按钮「续费」→ 订阅页；副信息「到期时间：YYYY-MM-DD」与已取消续订相同口径"
          width={D_W} height={D_H}
        >
          <PR_MenuProOneoffExpanded />
        </DCArtboard>
      </DCSection>

      {/* —— ❷ 桌面端 · 设置 → 资源用量 Tab —— */}
      <DCSection
        id="settings-resource"
        title="(2) 设置 → 资源用量 Tab（桌面）"
        subtitle="积分明细的完整入口 · 三段式信息结构"
        description={
          <>
            三段式（<strong>总览 / 积分构成 / 积分流水</strong>）对齐 Profile Menu 资源卡片的视觉语言：总览三行带进度条呈现账户健康度，积分构成按来源拆四类 + 消耗顺序灰字，积分流水仅升级版可见。
            三种状态覆盖：升级版正常态 / 一直未升级的免费版（按钮置灰 + Tooltip）/ 升级版退订回退（加油包仍有余额但不可用，横幅 + 行内 chip 解释）。
          </>
        }
      >
        <DCArtboard
          id="st-res-a" label="① 升级版 · 完整态" tag="主流程"
          caption="完整三段式：总览 + 积分构成（4 类来源）+ 积分流水 + FAQ。购买加油包按钮跳转独立购买页"
          width={D_W} height={D_H}
        >
          <ST_ResourcePro />
        </DCArtboard>
        <DCArtboard
          id="st-res-b" label="② 免费版 · 一直未升级" tag="引导态" tagVariant="guide"
          caption="积分构成除每日额度外全 0；购买加油包按钮置灰，hover 出 Tooltip「加油包仅限升级版用户购买 · 立即升级 →」"
          width={D_W} height={D_H}
        >
          <ST_ResourceFree />
        </DCArtboard>
        <DCArtboard
          id="st-res-c" label="③ 免费版 · 升级版退订回退" tag="边缘态" tagVariant="edge"
          caption="加油包仍有余额但不可用：余额数字灰显 + 行内 chip「升级版专享，升级后可用」；总览的可用积分不含这部分余额"
          width={D_W} height={D_H}
        >
          <ST_ResourceFreeFrozen />
        </DCArtboard>
      </DCSection>

      {/* —— ❸ 桌面端 · 设置 → 会员方案 Tab —— */}
      <DCSection
        id="settings-plan"
        title="(3) 设置 → 会员方案 Tab（桌面）"
        subtitle="账户设置 → 会员方案 Tab"
        description={
          <>
            沿用<strong>线上现有信息架构</strong>：顶部教育版 banner 入口 + 三列方案对比表（个人免费版 / 个人升级版 / 企业标准版）+ 企业标准版下方的「私有化部署 →」小字链接。本稿不引入线上没有的入口与列。
            <br />
            两个状态对应「<strong>未订阅</strong>」与「<strong>已订阅升级版</strong>」，重点验证已订阅状态下当前方案 CTA 的置灰交互（取代原「当前已订阅」文字态）。
          </>
        }
      >
        <DCArtboard
          id="st-plan-a"
          label="① 未订阅（免费版）· 三列方案对比表"
          caption="3 列（个人免费版 / 个人升级版 / 企业标准版）；升级版「推荐」徽标 + 紫色高亮"
          notes={[
            <>顶部沿用线上「<strong>合作院校同学可免费领取『专享教育版』</strong> · 立即查看 →」banner，链接到教育版领取页（不在本稿展开）。</>,
            <>「<strong>私有化部署 →</strong>」保留为 企业标准版 CTA 下方的小字链接，不升格为独立列；点击跳转商务联系页。</>,
            <>对比表共 7 个分组：积分与算力 / AI 功能权益 / 文件上传 / 知识管理 / 我的文档 / 管理支持 / 用户支持。</>,
          ]}
          width={D_W} height={D_H}
        >
          <ST_PlanFree />
        </DCArtboard>
        <DCArtboard
          id="st-plan-b"
          label="② 已订阅升级版 · 当前方案高亮 + CTA 置灰"
          caption="当前方案列保留推荐紫色样式；标题下方显示「个人升级版（包年），到期 YYYY-MM-DD」"
          notes={[
            <>已订阅方案的 CTA <strong>不替换为「当前已订阅」文字</strong>，而是保留「获取升级版 →」按钮但<strong>置灰、不可点击</strong>（cursor: not-allowed）。</>,
            <>鼠标 hover 到置灰按钮时显示 Tooltip，文案沿用既有逻辑（不在本稿展开），用于说明当前订阅状态与可执行操作。</>,
            <>其他两列（免费版 / 企业版）CTA 保持可点击；企业版下方「私有化部署 →」链接同未订阅态。</>,
          ]}
          width={D_W} height={D_H}
        >
          <ST_PlanSubscribed />
        </DCArtboard>
      </DCSection>

      {/* —— ❹ 桌面端 · 对话 Header 消耗积分展示 —— */}
      <DCSection
        id="chat-credit-display"
        title="(4) 对话 Header · 消耗积分展示（桌面）"
        subtitle="对话标题下方时间戳同行，紧跟「· 消耗 N 积分」"
        description={
          <>
            积分消耗信息<strong>不占用独立横条</strong>，而是作为对话元信息附在标题下方的时间戳一行，与「11 天前」用间隔号分隔：
            <code style={{ background: '#F3EFFD', color: '#6E45D9', padding: '1px 6px', borderRadius: 4, margin: '0 4px' }}>11 天前 · 消耗 320 积分</code>。
            <br />
            <strong>展示规则：</strong>颜色与时间戳一致（灰色次级文字）；积分数字为整数、不带千分位；每次 AI 回复完成后更新，不在生成过程中跳动；下限裁剪 0，不呈现负值。
            <br />
            视觉对齐 officev3 <code style={{ background: '#F2F2F2', padding: '1px 6px', borderRadius: 4 }}>chatHeader.tsx</code>：容器 70px 高灰底，标题 16px 加粗，右侧操作按钮 pill 形白底细描边。
          </>
        }
      >
        <DCArtboard
          id="ch-credit" label="① 对话 Header · 消耗 X 积分（紧跟时间戳）" tag="主流程"
          caption="积分消耗与「11 天前」同行显示；不展示余额、不带 emoji、不占用独立横条"
          notes={[
            <>每次 AI 回复完成后整体刷新一次「消耗 X 积分」，<strong>不在生成过程中实时跳动</strong>，避免分散用户对内容的注意力。</>,
            <>余额、加油包入口等信息<strong>不</strong>出现在对话 Header，统一收口到左下角 UserCard 副文案与 Profile Menu 资源用量浮层。</>,
            <>展示做下限裁剪：透支态在前端最低显示「消耗 0 积分」，后台真实负值仅用于系统判定。</>,
          ]}
          width={D_W} height={D_H}
        >
          <CH_CreditDisplay />
        </DCArtboard>
      </DCSection>

      {/* —— ❺ 桌面端 · 对话区模型切换 —— */}
      <DCSection
        id="chat-model-switch"
        title="(5) 对话区 · 模型切换（桌面）"
        subtitle="输入框右侧「模型 Chip」三态：付费版可切 / 任务绑定置灰 / 免费用户引导升级"
      >
        <DCArtboard id="ch-a" label="① 模型切换 · 付费版正常态（下拉可选标准/升级）" width={D_W} height={D_H}>
          <CH_ModelNormal />
        </DCArtboard>
        <DCArtboard id="ch-b" label="② 模型切换 · 任务绑定置灰（PPT 创意模式 Tooltip）" width={D_W} height={D_H}>
          <CH_ModelLocked />
        </DCArtboard>
        <DCArtboard id="ch-c" label="③ 模型切换 · 免费用户点击 → 引导升级弹层" width={D_W} height={D_H}>
          <CH_ModelUpgrade />
        </DCArtboard>
      </DCSection>

      {/* —— ❻ 桌面端 · 积分不足 + 加油包购买 —— */}
      <DCSection
        id="insufficient-purchase"
        title="(6) 积分不足拦截 + 加油包购买（桌面）"
        subtitle="任务开始前积分余额不足 → 拦截弹窗 → 点击「购买加油包」→ 套餐选择弹窗"
      >
        <DCArtboard id="pu-a" label="① 积分不足 · 拦截弹窗（显示分类余额 + 两个 CTA）" width={D_W} height={D_H}>
          <CH_InsufficientModal />
        </DCArtboard>
        <DCArtboard id="pu-b" label="② 加油包购买弹窗（小/中/大包选择）" width={D_W} height={D_H}>
          <CH_BoosterModal />
        </DCArtboard>
      </DCSection>

      {/* —— ❼ 公开 Pricing 页面（marketing 站，所有访客可见） —— */}
      <DCSection
        id="public-pricing"
        title="(7) 公开 Pricing 页面（marketing 站）"
        subtitle="xiaohuanxiong.sensetime.com/pricing · 改版为积分制叙事"
        description={
          <>
            线上 <strong>/pricing</strong> 页面（无需登录，所有访客可见）的积分制改版。三个改造重点：
            <br />
            ①<strong>方案卡新增「积分赠送」高亮区</strong>，把"每日 200/500/1000 积分"这条核心差异前置到最显眼位置；
            ②<strong>新增「积分怎么用」科普 strip</strong>，向访客解释「一次对话 ≈ 1~5 积分」「不同任务费率不同」「余额实时可见」「加油包按需购买」四件事；
            ③<strong>方案对比表把「积分与算力」分组置顶并标「核心差异」</strong>，其余分组（对话 / 文件 / 知识 / 管理 / 支持）按既有顺序保留。
            <br />
            企业私有化 banner 和教育版入口（沿用线上）保持原有视觉，不重新设计。
          </>
        }
      >
        <DCArtboard
          id="pp-a" label="① 公开 Pricing 页 · 积分制改版（办公小浣熊 Tab）" tag="主流程"
          caption="完整页面：Hero + Tabs + 三列方案卡（积分高亮）+ 积分科普 strip + 企业私有化 banner + 方案对比表（积分置顶）"
          notes={[
            <>方案卡内的「积分赠送」高亮区是<strong>本次改版新增</strong>，使用虚线边框 + 紫绿渐变背景与下方常规权益区拉开层级；免费版/升级版/企业版三档积分数字字号一致，确保横向对比。</>,
            <>「积分怎么用」科普 strip 仅在公开 Pricing 页出现，登录后的设置 → 资源用量 Tab 不重复展示（用户已经能直接看到自己的余额和明细）。</>,
            <>方案对比表的「积分与算力」分组在分组标题旁加紫色「核心差异」chip，与其他分组在视觉权重上明显区分。</>,
            <>导航栏、教育版入口、企业私有化 banner 与线上一致，本稿只展示积分相关变更，避免与品牌站其它改版混淆。</>,
          ]}
          width={PP_W} height={PP_H}
        >
          <PP_PublicPage />
        </DCArtboard>
      </DCSection>

      {/* —— ❽ 加油包购买弹窗 · 完整流程 —— */}
      <DCSection
        id="booster-modal"
        title="(8) 加油包购买弹窗 · 完整流程"
        subtitle="无论从「设置 → 会员方案」还是「公开 Pricing 页」点击「购买加油包 →」，都打开同一个弹窗；弹窗内部按账户状态承接是否可购买"
        description={
          <>
            <strong>入口已统一</strong>到「设置 → 会员方案」升级版列 CTA 下方与「公开 Pricing 页」升级版方案卡 CTA 下方两处紫色小字链接（与企业版「私有化部署 →」对称，详见章节 3 / 7）。本章节聚焦点击入口后<strong>打开的统一弹窗</strong>及其完整购买流程。
            <br />
            <strong>弹窗形态：</strong>对齐 PRD §❺③——左右分栏，左侧档位选择（<code style={{ background: '#F2F2F2', padding: '1px 6px', borderRadius: 4 }}>小包 500 ¥9.9</code> / <code style={{ background: '#F2F2F2', padding: '1px 6px', borderRadius: 4 }}>大包 1200 ¥19.9（主推默认选中）</code>），右侧支付宝二维码。切换档位时右侧二维码实时刷新对应金额。
            <br />
            <strong>状态分支：</strong>
            <br />
            · <strong>升级版用户</strong>：正常呈现档位 + 支付宝/微信双二维码，可完成购买（PRD §❺③）；用户在 App 内完成支付后，前端收到支付完成回调，直接弹出「购买成功 · 已到账 X 积分」（PRD §❺⑤），<strong>无中间等待态</strong>——技术集成上前端只能感知"已支付"，扫码-未支付期间没有可识别信号。
            <br />
            · <strong>免费版用户</strong>：弹窗壳一致，但右侧二维码区替换为「升级引导态」——档位区灰显作预览，右侧主 CTA「立即获取升级版 →」承接升级路径（与 PRD §❺①「按钮置灰 + Tooltip」精神一致，但形态更友好）。
          </>
        }
      >
        <DCArtboard
          id="bm-a" label="① 弹窗 · 升级版用户 · 默认态（PRD §❺③）" tag="主流程"
          caption="左右分栏 · 左侧两档（大包默选）+ 右侧支付宝二维码；金额 ¥19.9 跟随左侧档位实时变化"
          notes={[
            <>弹窗 720px 宽 / 左右分栏：左侧档位 + 说明，右侧二维码 + 金额；视觉与<strong>支付宝连续订阅扫码页</strong>保持一致（PRD §❺③）。</>,
            <>默认<strong>选中大包</strong>（更划算、主推）；切换档位后右侧二维码实时重新生成对应金额。</>,
            <>说明区两行小字：永久有效 / 取消订阅后冻结，续订后恢复可用。</>,
          ]}
          width={720} height={560}
        >
          <CH_BoosterModal />
        </DCArtboard>

        <DCArtboard
          id="bm-b" label="② 弹窗 · 免费版用户 · 升级引导态" tag="边缘态" tagVariant="edge"
          caption="弹窗外壳一致，左侧档位灰显作预览；右侧二维码区替换为升级引导卡 + 紫色「立即获取升级版 →」CTA"
          notes={[
            <>免费版用户点击「购买加油包 →」入口后<strong>仍打开同一弹窗</strong>，由弹窗内部承接「需先升级」状态，避免入口在两种账户间表现漂移。</>,
            <>档位卡保留两档但置灰（opacity 0.55 + cursor: not-allowed），让用户对升级后能买什么有预期。</>,
            <>右侧主 CTA「立即获取升级版 →」直接打通升级路径，副信息「升级版 ¥29.9 起 / 月」提示价格门槛。</>,
          ]}
          width={720} height={560}
        >
          <CH_BoosterModalFree />
        </DCArtboard>

        <DCArtboard
          id="bm-c" label="③ 购买成功（PRD §❺⑤）" tag="主流程"
          caption="紧凑型成功弹窗 · 🎉 + 「购买成功」+ 大号紫色「1200 积分」已到账 + 副信息「永久有效 · 可跨月滚存」+ 「开始使用」CTA"
          notes={[
            <>沿用连续订阅成功弹窗的视觉结构，<strong>不展示「下次自动续费」</strong>（加油包为一次性购买，PRD §❺⑤）。</>,
            <>核心信息「1200 积分已到账」用 18px 紫色加粗强化感知，让用户立即明确积分入账数。</>,
            <>「开始使用」CTA 关闭弹窗回到积分不足前的任务上下文（或保持在当前页面）。</>,
          ]}
          width={480} height={400}
        >
          <CH_BoosterSuccess />
        </DCArtboard>
      </DCSection>

      {/* Footer */}
      <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 · 积分订阅体系 ——</div>
          <div style={{ fontSize: 12.5, color: '#a0a094', lineHeight: 1.8 }}>
            桌面端对齐 officev3 SettingModal · 移动端对齐 mobile-v1-companion<br />
            内容来源：Pricing 2.0 PRD · 最近更新：2026-06-23
          </div>
        </div>
      </div>

    </DesignCanvas>
  );
}