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

/* screens-payment.jsx — 移动端 Pricing 2.0 · 支付与会员方案
   本文件由 mobile-v1-companion/screens-account.jsx 迁入。
   自本次起，移动端所有与支付、会员方案、订阅状态相关的交互稿一律以本项目为准，
   mobile-v1-companion 不再保留会员方案相关屏。

   包含：
   A. iOS 会员方案统一页（一套页面 · 多状态：首单优惠 / 标准价 / 续订中 / 已取消未到期 / 跨平台已订阅）
   B. 安卓会员方案统一页（结构对齐 iOS，多出「连续订阅 / 一次性」双 tab）
   C. 安卓支付方式选择 sheet（支付宝 / 微信）
   D. 购买成功弹窗（iOS / 安卓）

   相对迁入前的改动：
   1. 权益对比表换成 Pricing 2.0 积分口径（详见 BenefitTable 内注释）
   2. 连续订阅标准价对齐 Pricing 2.0 基础版 PRD：¥29.9/月、¥199/年

   待确认（沿用迁入前数值，未找到 Pricing 2.0 下的对应口径，勿直接引用）：
   - 首单优惠价 ¥28 首月 / ¥198 首年
   - 安卓一次性购买三档 ¥28 月 / ¥78 季 / ¥268 年
   - 购买成功弹窗里的 ¥298 年卡示例
*/
/* global React, Screen, Ic */

/* ---------- AppBar：与 mobile-v1-companion screens-account.jsx 保持一致 ---------- */
function AccountAppBar({ title }) {
  return (
    <div className="appbar" style={{ position: 'relative', justifyContent: 'center' }}>
      <div style={{ position: 'absolute', left: 14, display: 'flex', alignItems: 'center' }}>
        <Ic.back size={20} />
      </div>
      <div style={{ fontSize: 16, fontWeight: 600 }}>{title}</div>
    </div>);

}

/* —— ④ iOS 会员方案统一页（一套页面 · 多状态） ——
   状态:
   - freeFirst    免费版 · 首单可享优惠
   - freeStandard 免费版 · 已用过优惠（标准价）
   - renewingMonth / renewingYear   续订中（月 / 年）
   - cancelledMonth / cancelledYear 已取消未到期（月 / 年）
   - crossPlatform 其他平台已订阅
*/
function MemberIOSPage({ status = 'freeFirst' }) {
  const isFree = status === 'freeFirst' || status === 'freeStandard';
  const isRenewing = status === 'renewingMonth' || status === 'renewingYear';
  const isCancelled = status === 'cancelledMonth' || status === 'cancelledYear';
  const isCross = status === 'crossPlatform';
  const currentPlan = status === 'renewingMonth' || status === 'cancelledMonth' ? 'month' :
  status === 'renewingYear' || status === 'cancelledYear' ? 'year' : null;

  const renewDate = '2026-11-13';
  const expireDate = '2026-11-03';

  // CTA 文案
  const ctaLabel = isRenewing ? '管理订阅' : isCancelled ? '重新续订' : isCross ? null : '获取升级版';

  // 顶部副标题
  const subtitleByStatus = {
    freeFirst: null,
    freeStandard: '您已使用过首次优惠，当前为标准订阅价格',
    renewingMonth: `下次续订日期 ${renewDate}`,
    renewingYear: `下次续订日期 ${renewDate}`,
    cancelledMonth: `已取消订阅，有效期至 ${expireDate}`,
    cancelledYear: `已取消订阅，有效期至 ${expireDate}`,
    crossPlatform: '您的会员是在其他平台开通的，当前已生效'
  };
  const subtitle = subtitleByStatus[status];

  const levelLabel = isFree ? '个人免费版' : '升级版';

  return (
    <Screen>
      <div className="appbar">
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title" style={{ fontSize: 16 }}>会员方案</div>
        <div className="spacer" />
        {isFree ?
        <span style={{ fontSize: 13.5, color: 'var(--purple-dark)', fontWeight: 500, marginRight: 4 }}>恢复购买</span> :
        <div style={{ width: 32 }} />}
      </div>
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 顶部状态行 */}
          <div style={{ padding: '14px 16px 0', background: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'baseline' }}>
              <div style={{ flex: 1, fontSize: 18, fontWeight: 600, color: 'var(--t1)' }}>{levelLabel}</div>
            </div>
            {subtitle &&
            <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.6 }}>{subtitle}</div>
            }
            <div style={{ height: 14 }} />
          </div>

          {/* 权益对比卡 */}
          <div style={{ padding: '0 16px 4px', background: '#fff' }}>
            <BenefitTable />
          </div>

          {/* 价格方案区（跨平台态不显示） */}
          {!isCross &&
          <div style={{ padding: '16px 16px 0' }}>
              <div style={{ display: 'flex', gap: 10 }}>
                <PlanColumn
                title="月卡"
                price={status === 'freeFirst' ? '¥28' : '¥29.9'}
                unit="/月"
                hint={status === 'freeFirst' ? '续订后 ¥29.9/月' : '订阅后可随时取消'}
                selected={status === 'freeFirst' || status === 'freeStandard' ? false : currentPlan === 'month'}
                badge={currentPlan === 'month' ? '当前方案' : null}
                disabled={(isRenewing || isCancelled) && currentPlan !== 'month'} />
              
                <PlanColumn
                title="年卡"
                price={status === 'freeFirst' ? '¥198' : '¥199'}
                unit="/年"
                hint={status === 'freeFirst' ? '续订后 ¥199/年' : '订阅后可随时取消'}
                recommend={isFree}
                selected={isFree ? true : currentPlan === 'year'}
                badge={currentPlan === 'year' ? '当前方案' : null}
                disabled={(isRenewing || isCancelled) && currentPlan !== 'year'} />
              
              </div>
            </div>
          }

          {/* CTA */}
          {ctaLabel &&
          <div style={{ padding: '18px 16px 0' }}>
              <button style={{
              width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600
            }}>{ctaLabel}</button>
            </div>
          }

          {/* 跨平台态：单独说明卡（无 CTA） */}
          {isCross &&
          <div style={{ padding: '16px' }}>
              <div style={{
              padding: '20px 18px', background: '#fff',
              border: '1px solid var(--border)', borderRadius: 14,
              fontSize: 13, color: 'var(--t2)', lineHeight: 1.8
            }}>
                您的账号已在其他平台开通了会员，权益在所有平台通用，无需在 iOS 端重复购买。
                <br />如需调整订阅，请前往原平台管理。
              </div>
            </div>
          }

          {/* 同意条款（仅免费态可购） */}
          {isFree &&
          <div style={{ padding: '14px 20px 0', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
              <div style={{
              width: 16, height: 16, borderRadius: 4, marginTop: 2,
              border: '1.5px solid var(--border-strong)', background: '#fff', flexShrink: 0
            }} />
              <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.7 }}>
                已阅读并同意
                <span style={{ color: 'var(--purple-dark)' }}>《用户协议》</span>
                和
                <span style={{ color: 'var(--purple-dark)' }}>《隐私政策》</span>
              </div>
            </div>
          }

          {/* iTunes 自动续订条款（免费态展示，付费态以底部副标题代替） */}
          {isFree &&
          <p style={{ fontSize: 11.5, color: 'var(--muted)', padding: '10px 20px 0', lineHeight: 1.7 }}>
              购买确认后费用将从 iTunes 账户扣除。订阅自动续订，可在到期前 24 小时取消。您可在 Apple ID 设置中管理。
            </p>
          }

          {/* 法律链接 */}
          <div style={{ padding: '16px 20px 28px', display: 'flex', justifyContent: 'center', gap: 14 }}>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员订阅服务条款</span>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>·</span>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员自动续费服务条款</span>
          </div>
        </div>
      </div>
    </Screen>);

}

/* 权益对比表 */
function BenefitTable() {
  /* Pricing 2.0 口径：删除模型服务 / AI 对话 / 联网搜索 / 文件预览四行，
     新增积分两行与 PPT、模版、指令、客服五行；不出现加油包行（移动端不承载加油包） */
  const rows = [
  { fn: '每日赠送积分', free: '300 积分/日', pro: '500 积分/日' },
  { fn: '每月赠送积分', free: '—', pro: '10000 积分/月' },
  { divider: true },
  { fn: 'PPT 模式', free: '仅标准模式', pro: '标准 + 创意模式' },
  { fn: '自定义模版', free: '✗', pro: '✓' },
  { divider: true },
  { fn: '上传数量', free: '5 个/对话', pro: '20 个/对话' },
  { fn: '文件大小', free: '80MB/对话', pro: '200MB/对话' },
  { divider: true },
  { fn: '存储空间', free: '500MB', pro: '10GB' },
  { fn: '知识库容量', free: '100MB', pro: '500MB' },
  { divider: true },
  { fn: '文档总数', free: '100', pro: '1000' },
  { fn: '附件数量', free: '5 个/文档', pro: '20 个/文档' },
  { fn: '附件大小', free: '80MB/文档', pro: '200MB/文档' },
  { fn: '快捷指令', free: '3 个', pro: '50 个' },
  { fn: '技能模版', free: '1 个', pro: '50 个' },
  { divider: true },
  { fn: '专属 VIP 客服', free: '✗', pro: '✓' }];

  return (
    <div style={{
      background: 'linear-gradient(135deg, #8E6BF2 0%, #6E45D9 100%)',
      borderRadius: 14, padding: '16px 14px', color: '#fff'
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 11, fontWeight: 700, letterSpacing: '0.6px', opacity: 0.95, marginBottom: 12
      }}>
        OFFICE RACCOON <span style={{
          background: 'rgba(255,255,255,0.22)', padding: '2px 7px', borderRadius: 7,
          fontSize: 10, fontWeight: 700
        }}>升级版</span>
      </div>
      {/* 表头 */}
      <div style={{ display: 'flex', fontSize: 12, opacity: 0.92, fontWeight: 600, padding: '0 4px 8px' }}>
        <div style={{ flex: 1.2 }}>功能</div>
        <div style={{ flex: 1, textAlign: 'center' }}>免费版</div>
        <div style={{ flex: 1, textAlign: 'right' }}>升级版</div>
      </div>
      {rows.map((r, i) => r.divider ?
      <div key={i} style={{ height: 1, background: 'rgba(255,255,255,0.18)', margin: '6px 0' }} /> :

      <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '7px 4px', fontSize: 12.5 }}>
          <div style={{ flex: 1.2, opacity: 0.92 }}>{r.fn}</div>
          <div style={{ flex: 1, textAlign: 'center', opacity: 0.85 }}>{r.free}</div>
          <div style={{ flex: 1, textAlign: 'right', fontWeight: 600 }}>{r.pro}</div>
        </div>
      )}
    </div>);

}

/* 旧 PlanCard（仍被安卓页使用，单行卡片样式） */
function PlanCard({ title, price, hint, selected }) {
  return (
    <div style={{
      padding: '16px 18px', marginBottom: 10, borderRadius: 14,
      background: '#fff', display: 'flex', alignItems: 'center',
      border: '2px solid ' + (selected ? 'var(--purple)' : 'var(--border)')
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>{title}</div>
        {hint && <div style={{ fontSize: 12, color: 'var(--purple-dark)', marginTop: 4 }}>{hint}</div>}
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)' }}>{price}</div>
    </div>);

}

/* 套餐列（月/年并排，支持选中、推荐、当前方案、置灰） */
function PlanColumn({ title, price, unit, hint, recommend, selected, badge, disabled }) {
  return (
    <div style={{
      flex: 1, padding: '14px 14px 16px', borderRadius: 14, position: 'relative',
      background: disabled ? 'var(--bg-subtle)' : selected ? '#fff' : '#fff',
      border: '2px solid ' + (disabled ? 'var(--border)' : selected ? 'var(--purple)' : 'var(--border)'),
      opacity: disabled ? 0.55 : 1
    }}>
      {recommend && !badge &&
      <div style={{
        position: 'absolute', top: -10, right: 10,
        background: 'var(--purple)', color: '#fff',
        fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 8
      }}>推荐</div>
      }
      {badge &&
      <div style={{
        position: 'absolute', top: -10, right: 10,
        background: 'var(--purple)', color: '#fff',
        fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 8
      }}>{badge}</div>
      }
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--t1)' }}>{title}</div>
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontSize: 22, fontWeight: 700, color: disabled ? 'var(--muted)' : 'var(--purple-dark)' }}>{price}</span>
        <span style={{ fontSize: 12, color: 'var(--muted)', marginLeft: 2 }}>{unit}</span>
      </div>
      {hint && <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.6 }}>{hint}</div>}
    </div>);

}

/* —— ⑦ 安卓 · 会员方案统一页（结构对齐 iOS） ——
   状态：
   - freeFirst / freeStandard               免费版（默认连续订阅 tab，可切到一次性）
   - renewingMonth / renewingYear           连续订阅生效中（tab 锁定连续订阅）
   - cancelledMonth / cancelledYear         连续订阅已取消未到期（tab 锁定）
   - oneTimeActive                          一次性会员有效中（tab 锁定一次性）
*/
function MemberAndroidPage({ status = 'freeFirst', tab: tabProp }) {
  const isFree = status === 'freeFirst' || status === 'freeStandard';
  const isRenewing = status === 'renewingMonth' || status === 'renewingYear';
  const isCancelled = status === 'cancelledMonth' || status === 'cancelledYear';
  const isOneTime = status === 'oneTimeActive';
  // 当前订阅指向哪个套餐
  const currentSubPlan =
  status === 'renewingMonth' || status === 'cancelledMonth' ? 'month' :
  status === 'renewingYear' || status === 'cancelledYear' ? 'year' : null;
  // 一次性会员当前持有的套餐（演示默认为年卡）
  const currentOneTimePlan = isOneTime ? 'year' : null;

  // tab 选择：免费态可切换，付费态锁死。优先显示连续订阅
  const tab = isOneTime ? 'oneTime' : isRenewing || isCancelled ? 'continuous' : tabProp || 'continuous';

  const renewDate = '2026-11-13';
  const expireDate = '2026-11-03';

  const ctaLabel = isRenewing ? '管理订阅' : isCancelled ? '重新续订' : isOneTime ? '再次购买' : '立即开通';

  const subtitleByStatus = {
    freeFirst: null,
    freeStandard: null,
    renewingMonth: `下次扣费日期 ${renewDate}`,
    renewingYear: `下次扣费日期 ${renewDate}`,
    cancelledMonth: `已取消自动续费，有效期至 ${expireDate}`,
    cancelledYear: `已取消自动续费，有效期至 ${expireDate}`,
    oneTimeActive: `有效期至 ${expireDate}`
  };
  const subtitle = subtitleByStatus[status];
  const levelLabel = isFree ? '个人免费版' : '升级版';

  return (
    <Screen>
      <AccountAppBar title="会员方案" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 顶部状态行 */}
          <div style={{ padding: '14px 16px 0', background: '#fff' }}>
            <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--t1)' }}>{levelLabel}</div>
            {subtitle &&
            <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.6 }}>{subtitle}</div>
            }
            <div style={{ height: 14 }} />
          </div>

          {/* 权益对比卡（与 iOS 共用） */}
          <div style={{ padding: '0 16px 4px', background: '#fff' }}>
            <BenefitTable />
          </div>

          {/* 模式 tab：连续订阅 / 一次性（连续订阅优先） */}
          <div style={{ padding: '16px 16px 0' }}>
            <ModeTabs current={tab} disabled={!isFree} />
          </div>

          {/* 价格区 */}
          <div style={{ padding: '14px 16px 0' }}>
            {tab === 'continuous' ?
            <div style={{ display: 'flex', gap: 10 }}>
                <PlanColumn
                title="月卡"
                price={status === 'freeFirst' ? '¥28' : '¥29.9'}
                unit="/月"
                hint={status === 'freeFirst' ? '续订后 ¥29.9/月' : '订阅后可随时取消'}
                selected={isFree ? false : currentSubPlan === 'month'}
                badge={currentSubPlan === 'month' ? '当前方案' : null}
                disabled={(isRenewing || isCancelled) && currentSubPlan !== 'month'} />
              
                <PlanColumn
                title="年卡"
                price={status === 'freeFirst' ? '¥198' : '¥199'}
                unit="/年"
                hint={status === 'freeFirst' ? '续订后 ¥199/年' : '订阅后可随时取消'}
                recommend={isFree}
                selected={isFree ? true : currentSubPlan === 'year'}
                badge={currentSubPlan === 'year' ? '当前方案' : null}
                disabled={(isRenewing || isCancelled) && currentSubPlan !== 'year'} />
              
              </div> :

            <div style={{ display: 'flex', gap: 8 }}>
                <PlanColumn
                title="月卡"
                price="¥28"
                unit=""
                selected={isOneTime ? false : false}
                badge={currentOneTimePlan === 'month' ? '当前方案' : null}
                disabled={isOneTime && currentOneTimePlan !== 'month'} />
              
                <PlanColumn
                title="季卡"
                price="¥78"
                unit=""
                hint="平均 ¥26 / 月"
                selected={!isOneTime}
                recommend={!isOneTime}
                badge={currentOneTimePlan === 'quarter' ? '当前方案' : null}
                disabled={isOneTime && currentOneTimePlan !== 'quarter'} />
              
                <PlanColumn
                title="年卡"
                price="¥268"
                unit=""
                hint="平均 ¥22 / 月"
                selected={isOneTime && currentOneTimePlan === 'year'}
                badge={currentOneTimePlan === 'year' ? '当前方案' : null}
                disabled={isOneTime && currentOneTimePlan !== 'year'} />
              
              </div>
            }
          </div>

          {/* CTA */}
          <div style={{ padding: '18px 16px 0' }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600
            }}>{ctaLabel}</button>
          </div>

          {/* 同意条款（仅免费 / 续购态展示） */}
          {(isFree || isOneTime) &&
          <div style={{ padding: '14px 20px 0', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
              <div style={{
              width: 16, height: 16, borderRadius: 4, marginTop: 2,
              border: '1.5px solid var(--border-strong)', background: '#fff', flexShrink: 0
            }} />
              <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.7 }}>
                已阅读并同意
                <span style={{ color: 'var(--purple-dark)' }}>《用户协议》</span>
                和
                <span style={{ color: 'var(--purple-dark)' }}>《隐私政策》</span>
              </div>
            </div>
          }

          {/* 说明文案 */}
          {(isFree || isOneTime) &&
          <p style={{ fontSize: 11.5, color: 'var(--muted)', padding: '10px 20px 0', lineHeight: 1.7 }}>
              {tab === 'continuous' ?
            '订阅服务由小浣熊家族提供。连续订阅到期前 24 小时自动续费，您可以随时在「会员方案」中取消自动续费。' :
            '一次性购买不会自动续费，到期后会员权益失效，需要您手动续购。'}
            </p>
          }

          {/* 法律链接 */}
          <div style={{ padding: '16px 20px 28px', display: 'flex', justifyContent: 'center', gap: 14 }}>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员订阅服务条款</span>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>·</span>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员自动续费服务条款</span>
          </div>
        </div>
      </div>
    </Screen>);

}

/* 模式 tab：连续订阅 / 一次性（连续订阅优先） */
function ModeTabs({ current, disabled }) {
  const active = (key) => current === key;
  return (
    <div style={{
      display: 'inline-flex', padding: 3, background: '#fff',
      borderRadius: 10, border: '1px solid var(--border)'
    }}>
      <div style={{
        padding: '7px 18px', fontSize: 13,
        fontWeight: active('continuous') ? 600 : 500,
        background: active('continuous') ? 'var(--purple-bg)' : 'transparent',
        color: active('continuous') ? 'var(--purple-dark)' : 'var(--muted)',
        borderRadius: 8
      }}>连续订阅</div>
      <div style={{
        padding: '7px 18px', fontSize: 13,
        fontWeight: active('oneTime') ? 600 : 500,
        background: active('oneTime') ? 'var(--purple-bg)' : 'transparent',
        color: active('oneTime') ? 'var(--purple-dark)' : 'var(--muted)',
        borderRadius: 8,
        opacity: disabled && !active('oneTime') ? 0.5 : 1
      }}>一次性</div>
    </div>);

}

/* —— ⑧ 安卓分支 · 支付方式选择 sheet —— */
function MemberAndroidPay() {
  return (
    <Screen>
      <AccountAppBar title="会员方案" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 16, textAlign: 'center'
          }}>
            <div style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>免费版 · 升级解锁更多权益</div>
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.36)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          <div style={{
            background: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20,
            padding: '14px 16px calc(20px + env(safe-area-inset-bottom))'
          }}>
            <div style={{ width: 36, height: 4, background: '#e6e6e6', borderRadius: 2, margin: '0 auto 14px' }} />
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--t1)', textAlign: 'center', marginBottom: 10 }}>选择支付方式</div>
            <PayOption brand="alipay" name="支付宝" />
            <PayOption brand="wechat" name="微信支付" selected />
            <button style={{
              marginTop: 14, width: '100%', height: 52, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 16, fontWeight: 600
            }}>确认支付 ¥78</button>
          </div>
        </div>
      </div>
    </Screen>);

}

function BrandLogo({ brand }) {
  if (brand === 'alipay') {
    return (
      <svg width="26" height="26" viewBox="0 0 26 26" aria-label="支付宝">
        <rect width="26" height="26" rx="6" fill="#1677FF" />
        <path fill="#fff" d="M20.6 17.2c-1.5-.6-3-1.3-4.4-2 .5-.9.9-1.9 1.2-2.9h-2.5v-1.2h3v-.7h-3V8.5h-1.3v1.9h-3v.7h3v1.2H8.3v.7h4.9c-.2.7-.5 1.4-.8 2.1-1.9-.7-3.5-1.1-4.4-1.1-1.6 0-2.6.8-3 1.7-.6 1.3-.1 3 1.8 3.6 1.1.3 2.5 0 3.7-.6 1-.5 2-1.2 2.9-2.1 1.6.9 3.4 1.9 4.9 2.7-1.4 2.3-3.9 3.7-7 3.7-5 0-9-3.6-9-8.1S6.4 5 11.4 5c4.9 0 9 3.4 9.2 7.6.1 1.7-.3 3.3-.9 4.6zM7.1 17.2c-1-.2-1.4-1-1.2-1.7.2-.6.7-1.1 1.7-1.1.8 0 2 .3 3.5 1-1.3 1.3-2.7 2-4 1.8z" />
      </svg>);

  }
  if (brand === 'wechat') {
    return (
      <svg width="26" height="26" viewBox="0 0 26 26" aria-label="微信支付">
        <rect width="26" height="26" rx="6" fill="#07C160" />
        <path fill="#fff" d="M10.4 7.5c-3.2 0-5.8 2.2-5.8 4.8 0 1.5.8 2.8 2.2 3.7l-.5 1.7 2-1c.7.2 1.3.3 2 .3h.4c-.1-.4-.2-.8-.2-1.3 0-2.5 2.5-4.6 5.5-4.6h.4c-.5-2.1-2.9-3.6-5.7-3.6h-.3zM8.5 11c-.4 0-.7-.3-.7-.7s.3-.7.7-.7c.4 0 .7.3.7.7s-.3.7-.7.7zm4 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7c.4 0 .7.3.7.7s-.4.7-.7.7zM21.3 16c0-2.2-2.2-4-4.9-4-2.8 0-4.9 1.8-4.9 4s2.1 4 4.9 4c.6 0 1.1-.1 1.6-.2l1.6.8-.4-1.3c1.3-.7 2.1-1.9 2.1-3.3zm-6.5-.9c-.3 0-.6-.3-.6-.6s.3-.6.6-.6c.3 0 .6.3.6.6s-.3.6-.6.6zm3.2 0c-.3 0-.6-.3-.6-.6s.3-.6.6-.6c.3 0 .6.3.6.6s-.3.6-.6.6z" />
      </svg>);

  }
  return null;
}

function PayOption({ brand, name, selected }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 14px', borderRadius: 12,
      background: selected ? 'var(--purple-bg)' : '#fff',
      border: '1px solid ' + (selected ? 'var(--purple-border)' : 'var(--border)'),
      marginBottom: 8
    }}>
      <BrandLogo brand={brand} />
      <div style={{ flex: 1, fontSize: 14.5, color: 'var(--t1)', fontWeight: 500 }}>{name}</div>
      <div style={{
        width: 18, height: 18, borderRadius: '50%',
        border: '1.5px solid ' + (selected ? 'var(--purple)' : 'var(--border-strong)'),
        background: selected ? 'var(--purple)' : '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        {selected && <Ic.check size={12} color="#fff" />}
      </div>
    </div>);

}

/* —— ⑧½ 购买成功弹窗 ——
 * 支付完成（iOS Apple 内购 / 安卓支付宝 · 微信）回到会员页后展示；
 * 仅一个 CTA「开始使用」收起弹窗，回到会员页（此时状态已切换为续订中 / 一次性生效中）。 */
function MemberPurchaseSuccess({ platform = 'ios', planLabel = '年付 ¥298/年' }) {
  return (
    <Screen>
      <AccountAppBar title="会员方案" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          <div style={{
            margin: '14px 16px 0', padding: '20px 18px',
            background: '#fff', border: '1px solid var(--border)', borderRadius: 16, textAlign: 'center'
          }}>
            <div style={{ fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>升级版 · 已开通</div>
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.36)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 28px' }}>
          <div style={{
            background: '#fff', borderRadius: 20,
            padding: '28px 22px 22px', textAlign: 'center'
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: 'var(--purple)', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 14
            }}>
              <Ic.check size={28} color="#fff" />
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--t1)' }}>购买成功</div>
            <p style={{ fontSize: 13.5, color: 'var(--t3)', marginTop: 10, lineHeight: 1.7 }}>
              升级版已开通（{planLabel}），AI 对话次数、存储空间与联网搜索额度已全部解锁。
              {platform === 'ios' ?
              '可在 Apple ID 设置中管理订阅。' :
              '可在「会员方案」中查看与管理订阅。'}
            </p>
            <button style={{
              marginTop: 20, width: '100%', height: 48, borderRadius: 999,
              background: 'var(--purple)', color: '#fff',
              border: 'none', fontSize: 15.5, fontWeight: 600
            }}>开始使用</button>
          </div>
        </div>
      </div>
    </Screen>);

}


/* —— 画板预设 —— */
const MemberIOSFreeFirst = () => <MemberIOSPage status="freeFirst" />;
const MemberIOSFreeStandard = () => <MemberIOSPage status="freeStandard" />;
const MemberIOSRenewingMonth = () => <MemberIOSPage status="renewingMonth" />;
const MemberIOSRenewingYear = () => <MemberIOSPage status="renewingYear" />;
const MemberIOSCancelledMonth = () => <MemberIOSPage status="cancelledMonth" />;
const MemberIOSCancelledYear = () => <MemberIOSPage status="cancelledYear" />;
const MemberIOSCross = () => <MemberIOSPage status="crossPlatform" />;

const MemberAndFreeContinuous = () => <MemberAndroidPage status="freeFirst" tab="continuous" />;
const MemberAndFreeOneTime = () => <MemberAndroidPage status="freeFirst" tab="oneTime" />;
const MemberAndFreeStandard = () => <MemberAndroidPage status="freeStandard" tab="continuous" />;
const MemberAndRenewingMonth = () => <MemberAndroidPage status="renewingMonth" />;
const MemberAndRenewingYear = () => <MemberAndroidPage status="renewingYear" />;
const MemberAndCancelledMonth = () => <MemberAndroidPage status="cancelledMonth" />;
const MemberAndCancelledYear = () => <MemberAndroidPage status="cancelledYear" />;
const MemberAndOneTimeActive = () => <MemberAndroidPage status="oneTimeActive" />;

  Object.assign(NS, {
    MemberIOSPage, MemberAndroidPage, MemberAndroidPay, MemberPurchaseSuccess,
    MemberIOSFreeFirst, MemberIOSFreeStandard,
    MemberIOSRenewingMonth, MemberIOSRenewingYear,
    MemberIOSCancelledMonth, MemberIOSCancelledYear,
    MemberIOSCross,
    MemberAndFreeContinuous, MemberAndFreeOneTime, MemberAndFreeStandard,
    MemberAndRenewingMonth, MemberAndRenewingYear,
    MemberAndCancelledMonth, MemberAndCancelledYear,
    MemberAndOneTimeActive,
    MemberPurchaseSuccessIOS: () => <MemberPurchaseSuccess platform="ios" planLabel="年付 ¥199/年" />,
    MemberPurchaseSuccessAndroid: () => <MemberPurchaseSuccess platform="android" planLabel="一次性年卡 ¥268" />
  });
})();