/* screens-public-pricing.jsx — Pricing 2.0 · 公开访问的 Pricing 页面
   对应线上 xiaohuanxiong.sensetime.com/pricing 的改版：
   从「次数配额」改为「积分制」叙事，三列方案卡 + 企业私有化 banner + 方案对比表。
   面向所有访客（包含未登录），需要在视觉上更接近线上 marketing 页面。
*/
/* global React */

const PP_W = 960, PP_H = 2520;

/* ===== 顶部导航（极简，对齐线上） ===== */
function PP_TopNav() {
  return (
    <div style={{
      height: 56, padding: '0 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: '1px solid rgba(10,10,6,0.06)', background: '#fff',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: 22, height: 22, borderRadius: 6,
            background: 'linear-gradient(135deg,#8E6BF2,#ABE7D5)',
          }} />
          <span style={{ fontSize: 14, fontWeight: 700, color: '#1F1F1F' }}>小浣熊家族</span>
          <span style={{ fontSize: 9, color: '#A9A9A9', marginLeft: 1, letterSpacing: 0.6 }}>Raccoon</span>
        </div>
        {['产品 ▾', '资源 ▾', '解决方案 ▾', '联系我们'].map(t => (
          <span key={t} style={{ fontSize: 12.5, color: '#555' }}>{t}</span>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 12, color: '#555' }}>简体中文 ▾</span>
        <div style={{
          width: 26, height: 26, borderRadius: '50%', background: '#F0EBFF',
          color: '#8E6BF2', fontSize: 11.5, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>R</div>
      </div>
    </div>
  );
}

/* ===== Hero + Tabs ===== */
function PP_Hero() {
  return (
    <div style={{ textAlign: 'center', padding: '52px 24px 28px' }}>
      <div style={{
        display: 'inline-block', padding: '4px 12px', borderRadius: 999,
        background: '#F3EFFD', color: '#6E45D9', fontSize: 11, fontWeight: 600,
        letterSpacing: 0.4, marginBottom: 14,
      }}>NEW · 积分订阅体系</div>
      <div style={{ fontSize: 32, fontWeight: 800, color: '#1F1F1F', letterSpacing: 0.5 }}>订阅与部署</div>
      <div style={{ fontSize: 13.5, color: '#888', marginTop: 10, lineHeight: 1.7 }}>
        一份订阅决定<strong style={{ color: '#1F1F1F' }}>权益层</strong>，积分控制每一次<strong style={{ color: '#1F1F1F' }}>算力消耗</strong><br />
        选择适合您和团队的方案，复杂任务也能可预期地用下去
      </div>
      {/* Tabs */}
      <div style={{
        marginTop: 26, display: 'inline-flex', padding: 4, gap: 4,
        background: '#F3F3F1', borderRadius: 999,
      }}>
        {['代码小浣熊', '办公小浣熊'].map((t, i) => (
          <div key={t} style={{
            padding: '7px 22px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
            background: i === 1 ? '#8E6BF2' : 'transparent',
            color: i === 1 ? '#fff' : '#666',
            boxShadow: i === 1 ? '0 2px 8px rgba(142,107,242,0.35)' : 'none',
          }}>{t}</div>
        ))}
      </div>
    </div>
  );
}

/* ===== 单张方案卡 ===== */
function PP_PlanCard({ plan }) {
  const isPro = plan.key === 'pro';
  return (
    <div style={{
      flex: 1, position: 'relative',
      background: '#fff',
      border: isPro ? '1.5px solid #C4B5FD' : '1px solid #ECECEC',
      borderRadius: 14,
      padding: '22px 22px 20px',
      boxShadow: isPro ? '0 10px 28px rgba(142,107,242,0.18)' : '0 2px 10px rgba(10,10,6,0.04)',
    }}>
      {isPro && (
        <div style={{
          position: 'absolute', top: -10, right: 16,
          background: 'linear-gradient(135deg,#8E6BF2,#6E45D9)',
          color: '#fff', fontSize: 10.5, fontWeight: 700,
          padding: '3px 10px', borderRadius: 999, letterSpacing: 0.4,
        }}>最受欢迎</div>
      )}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 15, fontWeight: 800, color: '#1F1F1F' }}>{plan.name}</div>
        {plan.redeem && (
          <span style={{ fontSize: 10.5, color: '#8E6BF2' }}>使用兑换码</span>
        )}
      </div>
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{ fontSize: 28, fontWeight: 800, color: '#1F1F1F' }}>{plan.price}</span>
        <span style={{ fontSize: 12, color: '#888' }}>{plan.unit}</span>
      </div>
      <div style={{ fontSize: 11.5, color: '#999', marginTop: 4 }}>{plan.sub}</div>

      {/* —— 积分高亮区 —— */}
      <div style={{
        marginTop: 14, padding: '12px 12px',
        borderRadius: 10,
        background: isPro
          ? 'linear-gradient(135deg,rgba(142,107,242,0.10),rgba(171,231,213,0.10))'
          : '#FAFAF7',
        border: '1px dashed ' + (isPro ? 'rgba(142,107,242,0.35)' : '#E8E8E3'),
      }}>
        <div style={{ fontSize: 11.5, color: '#666', fontWeight: 600, letterSpacing: 0.3 }}>积分赠送</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
          <span style={{ fontSize: 20, fontWeight: 800, color: isPro ? '#6E45D9' : '#1F1F1F' }}>{plan.dailyCredits}</span>
          <span style={{ fontSize: 11.5, color: '#888' }}>积分 / 日</span>
        </div>
        {plan.monthlyCredits && (
          <div style={{ fontSize: 11.5, color: '#666', marginTop: 4 }}>
            额外 <strong style={{ color: '#1F1F1F' }}>{plan.monthlyCredits}</strong> 积分 / 月
          </div>
        )}
        <div style={{ fontSize: 10.5, color: '#A9A9A9', marginTop: 6, lineHeight: 1.6 }}>
          {plan.creditNote}
        </div>
      </div>

      {/* 权益列表 */}
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {plan.benefits.map((b, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 7, fontSize: 12, color: '#444' }}>
            <span style={{ color: '#1DB998', marginTop: 1 }}>✓</span>
            <span dangerouslySetInnerHTML={{ __html: b }} />
          </div>
        ))}
      </div>

      <button style={{
        marginTop: 18, width: '100%', height: 36, border: 'none', borderRadius: 8,
        background: isPro ? 'linear-gradient(135deg,#8E6BF2,#6E45D9)'
                          : (plan.key === 'free' ? '#F3F3F1' : '#1F1F1F'),
        color: isPro ? '#fff' : (plan.key === 'free' ? '#444' : '#fff'),
        fontSize: 12.5, fontWeight: 700, cursor: 'pointer',
        boxShadow: isPro ? '0 6px 18px rgba(142,107,242,0.35)' : 'none',
      }}>{plan.cta} →</button>

      {plan.key === 'biz' && (
        <div style={{ fontSize: 11, color: '#6E45D9', textAlign: 'center', marginTop: 8 }}>
          私有化部署 →
        </div>
      )}
    </div>
  );
}

const PUBLIC_PLANS = [
  {
    key: 'free', name: '免费版', price: '¥0', unit: '/永久', sub: '适合个人轻度使用',
    dailyCredits: '200', monthlyCredits: null,
    creditNote: '每日 0 点重置 · 不累计 · 仅限标准模型',
    benefits: [
      'AI 对话 · <strong>标准模型</strong>',
      '文件上传 5 个/对话 · 80 MB',
      '存储空间 500 MB',
      '社群答疑支持',
    ],
    cta: '免费使用',
  },
  {
    key: 'pro', name: '个人升级版', price: '¥29.9', unit: '/月起', sub: '支持月 / 季 / 年订阅', redeem: true,
    dailyCredits: '500', monthlyCredits: '5000',
    creditNote: '日积分次日清零 · 月积分按月发放 · 可叠加加油包',
    benefits: [
      'AI 对话 · <strong>标准 + 升级模型</strong>',
      'PPT 创意模式 + PPTX 源文件导出',
      '文件上传 20 个/对话 · 200 MB',
      '存储空间 10 GB · 知识库 500 MB',
      '<strong>可购买加油包</strong> · 专属 VIP 客服',
    ],
    cta: '获取升级版',
  },
  {
    key: 'biz', name: '企业标准版', price: '¥1599', unit: '起 / 年 / 人', sub: '适合中大型团队', redeem: true,
    dailyCredits: '1000', monthlyCredits: '20000',
    creditNote: '按席位独立计算 · 管理员可在后台统一调配',
    benefits: [
      '包含个人升级版全部权益',
      '存储空间 200 GB / 人',
      '<strong>用量看板</strong> + <strong>积分管理</strong>',
      'SSO 单点登录 + 部门权限管理',
      '专属大客户支持 + 上专家培训',
    ],
    cta: '获取企业版',
  },
];

/* ===== 三列方案卡 ===== */
function PP_PlanCards() {
  return (
    <div style={{ padding: '0 32px', display: 'flex', gap: 18 }}>
      {PUBLIC_PLANS.map(p => <PP_PlanCard key={p.key} plan={p} />)}
    </div>
  );
}

/* ===== 加油包购买入口（Marketing 版） ===== */
const PP_BOOSTER_PACKS = [
  { name: '小包', credits: 500,  price: '¥9.9',  badge: null },
  { name: '大包', credits: 1200, price: '¥19.9', badge: '更划算 · 主推' },
];

function PP_BoosterSection() {
  return (
    <div style={{ padding: '32px 32px 0' }}>
      <div style={{
        padding: '24px 28px 26px',
        borderRadius: 16,
        background: 'linear-gradient(135deg,#FFFFFF 0%,#FBF9FF 100%)',
        border: '1px solid rgba(142,107,242,0.22)',
        boxShadow: '0 8px 24px rgba(142,107,242,0.06)',
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, marginBottom: 18 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 18, fontWeight: 800, color: '#1F1F1F' }}>加油包 · 按需补充积分</span>
              <span style={{
                fontSize: 10.5, fontWeight: 700, padding: '3px 9px', borderRadius: 4,
                background: '#F3EFFD', color: '#6E45D9', letterSpacing: 0.4,
              }}>升级版专享</span>
            </div>
            <div style={{ fontSize: 12.5, color: '#666', marginTop: 8, lineHeight: 1.7 }}>
              订阅周期内积分用完时，按需购买加油包补充算力；<strong style={{ color: '#1F1F1F' }}>永久有效</strong>。
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 14, maxWidth: 640 }}>
          {PP_BOOSTER_PACKS.map((pack, i) => {
            const recommended = !!pack.badge;
            return (
              <div key={i} style={{
                flex: 1, position: 'relative', padding: '18px 16px 18px',
                borderRadius: 12,
                border: `1.5px solid ${recommended ? '#C4B5FD' : '#ECECEC'}`,
                background: recommended ? 'linear-gradient(135deg,#F5F0FF,#EFE8FF)' : '#FFFFFF',
                textAlign: 'center',
                boxShadow: recommended ? '0 6px 18px rgba(142,107,242,0.18)' : 'none',
              }}>
                {pack.badge && (
                  <div style={{
                    position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)',
                    background: 'linear-gradient(135deg,#8E6BF2,#6E45D9)',
                    color: '#fff', fontSize: 10, fontWeight: 700,
                    padding: '3px 10px', borderRadius: 999, whiteSpace: 'nowrap',
                  }}>{pack.badge}</div>
                )}
                <div style={{ fontSize: 13, fontWeight: 700, color: '#1F1F1F', marginBottom: 8 }}>{pack.name}</div>
                <div style={{ fontSize: 26, fontWeight: 800, color: recommended ? '#6E45D9' : '#1F1F1F', lineHeight: 1 }}>
                  {pack.credits}
                </div>
                <div style={{ fontSize: 11, color: '#AAA', marginTop: 4, marginBottom: 10 }}>积分</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: recommended ? '#6E45D9' : '#1F1F1F' }}>{pack.price}</div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        }}>
          <div style={{ fontSize: 11.5, color: '#888' }}>
            未订阅升级版？先<span style={{ color: '#6E45D9', fontWeight: 700, cursor: 'pointer' }}>获取升级版 →</span> 即可购买加油包
          </div>
          <button style={{
            height: 38, padding: '0 22px', border: 'none', borderRadius: 999,
            background: 'linear-gradient(135deg,#8E6BF2,#6E45D9)', color: '#fff',
            fontSize: 12.5, fontWeight: 700, cursor: 'pointer',
            boxShadow: '0 6px 16px rgba(142,107,242,0.3)',
          }}>选择套餐购买 →</button>
        </div>
      </div>
    </div>
  );
}

/* ===== 积分常识小卡片（科普 strip） ===== */
function PP_CreditExplainer() {
  const items = [
    { title: '一次对话 ≈ 1~5 积分', desc: '常规问答消耗低，长上下文 / 升级模型按比例提升' },
    { title: '不同任务费率不同',   desc: 'PPT 生成、深度搜索、长文档解析按算力计费' },
    { title: '余额实时可见',       desc: '左下角 UserCard 与对话 Header 都会显示消耗' },
    { title: '加油包按需购买',     desc: '升级版与企业版可叠加加油包，永久有效' },
  ];
  return (
    <div style={{ margin: '36px 32px 0', padding: '20px 24px',
      background: 'linear-gradient(90deg,#F8F5FF,#F1FBF6)',
      border: '1px solid rgba(142,107,242,0.18)', borderRadius: 14,
    }}>
      <div style={{ fontSize: 13, fontWeight: 800, color: '#1F1F1F', marginBottom: 12 }}>
        积分怎么用？
        <span style={{ fontSize: 11.5, color: '#888', fontWeight: 500, marginLeft: 8 }}>
          一次充电、按需消耗 · 不再为「次数」算账
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 10, padding: '14px 16px', border: '1px solid rgba(10,10,6,0.04)' }}>
            <div style={{
              fontSize: 10, fontWeight: 700, color: '#6E45D9',
              letterSpacing: 0.6, marginBottom: 6,
            }}>0{i + 1}</div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: '#1F1F1F' }}>{it.title}</div>
            <div style={{ fontSize: 11, color: '#888', marginTop: 4, lineHeight: 1.55 }}>{it.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ===== 企业私有化部署 banner ===== */
function PP_EnterpriseBanner() {
  return (
    <div style={{ margin: '28px 32px 0', padding: '20px 24px', borderRadius: 14,
      background: 'linear-gradient(120deg,#EFE9FF 0%,#E6F7EE 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
    }}>
      <div>
        <div style={{ fontSize: 15, fontWeight: 800, color: '#1F1F1F' }}>企业私有化部署</div>
        <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>xiaohuanxiong@sensetime.com</div>
        <div style={{ display: 'flex', gap: 18, marginTop: 12, flexWrap: 'wrap' }}>
          {['所有企业版标准功能', '私有化部署（云端 / 本地）', '免费线上专家培训', '日志留档', '免费部署安装', '1 年内免费模型升级'].map(t => (
            <div key={t} style={{ fontSize: 11.5, color: '#444', display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ color: '#1DB998' }}>✓</span>{t}
            </div>
          ))}
        </div>
      </div>
      <button style={{
        height: 40, padding: '0 22px', border: 'none', borderRadius: 999,
        background: '#1F1F1F', color: '#fff', fontSize: 12.5, fontWeight: 700,
        cursor: 'pointer', whiteSpace: 'nowrap',
      }}>联系我们 →</button>
    </div>
  );
}

/* ===== 方案对比表（积分优先） ===== */
const COMPARE_COLS = [
  { key: 'free', label: '个人免费版',  price: '¥0 / 永久' },
  { key: 'pro',  label: '个人升级版',  price: '¥29.9 / 月起', highlight: true },
  { key: 'biz',  label: '企业标准版',  price: '¥1599 / 人 / 年' },
];

const COMPARE_GROUPS = [
  {
    group: '积分与算力', highlight: true,
    rows: [
      { label: '每日赠送积分',  vals: ['200',     '500',      '1000 / 人'] },
      { label: '每月赠送积分',  vals: ['—',       '5000',    '20000 / 人'] },
      { label: '加油包',        vals: ['不可购买', '可购买',   '可购买'] },
      { label: '积分有效期',    vals: ['日清零',  '次月底',   '次月底'] },
    ],
  },
  {
    group: '对话',
    rows: [
      { label: '可用模型',  vals: ['标准模型', '标准 + 升级模型', '标准 + 升级模型'] },
    ],
  },
  {
    group: '文件上传',
    rows: [
      { label: '上传数量', vals: ['10 个 / 对话', '20 个 / 对话', '20 个 / 对话'] },
      { label: '文件大小', vals: ['80 M / 对话',  '200 M / 对话', '200 M / 对话'] },
    ],
  },
  {
    group: '知识管理',
    rows: [
      { label: '存储空间',    vals: ['500 M', '10 G',  '200 G / 人'] },
      { label: '知识库容量',  vals: ['100 M', '500 M', '2 G / 人'] },
    ],
  },
  {
    group: '管理支持',
    rows: [
      { label: '用量看板',         vals: ['×', '×', '✓'] },
      { label: '部门与权限管理',   vals: ['×', '×', '✓'] },
      { label: 'SSO',              vals: ['×', '×', '✓'] },
    ],
  },
  {
    group: '用户支持',
    rows: [
      { label: '客户支持',     vals: ['社群答疑', '专属 VIP 客服', '专属大客户支持'] },
      { label: '官方社群答疑', vals: ['✓', '✓', '专属大客户支持'] },
    ],
  },
];

function PP_CompareTable() {
  return (
    <div style={{ padding: '40px 32px 0' }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#1F1F1F' }}>方案对比</div>
        <div style={{ fontSize: 12, color: '#888', marginTop: 6 }}>积分与算力为新版核心差异，已置顶</div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
        <thead>
          <tr>
            <th style={{ width: 140 }}></th>
            {COMPARE_COLS.map(c => (
              <th key={c.key} style={{
                padding: '12px 6px', textAlign: 'center', verticalAlign: 'bottom',
              }}>
                <div style={{
                  display: 'inline-block', padding: '10px 12px', borderRadius: 10,
                  background: c.highlight ? 'linear-gradient(135deg,#F0EBFF,#E8E0FF)' : 'transparent',
                  border: c.highlight ? '1.5px solid #C4B5FD' : '1px solid transparent',
                  minWidth: 140,
                }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: c.highlight ? '#6E45D9' : '#1F1F1F' }}>{c.label}</div>
                  <div style={{ fontSize: 11, color: c.highlight ? '#6E45D9' : '#888', marginTop: 4 }}>{c.price}</div>
                </div>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {COMPARE_GROUPS.map(g => (
            <React.Fragment key={g.group}>
              <tr>
                <td colSpan={5} style={{
                  padding: '14px 0 8px',
                  fontSize: 11.5, fontWeight: 700, letterSpacing: 0.4,
                  color: g.highlight ? '#6E45D9' : '#888',
                  borderBottom: '1px solid #F0F0F0',
                }}>
                  {g.group}
                  {g.highlight && <span style={{
                    marginLeft: 8, fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
                    background: '#F3EFFD', color: '#6E45D9',
                  }}>核心差异</span>}
                </td>
              </tr>
              {g.rows.map((row, ri) => (
                <tr key={ri} style={{ borderBottom: '1px solid #F8F8F8' }}>
                  <td style={{ padding: '10px 0 10px 0', fontSize: 12, color: '#555' }}>{row.label}</td>
                  {row.vals.map((v, vi) => {
                    const isH = COMPARE_COLS[vi].highlight;
                    const isMark = v === '✓' || v === '×';
                    return (
                      <td key={vi} style={{
                        textAlign: 'center', padding: '10px 6px',
                        fontSize: 12,
                        background: isH ? 'rgba(142,107,242,0.04)' : 'transparent',
                        color: v === '✓' ? '#1DB998'
                             : v === '×' ? '#CFCFCF'
                             : isH ? '#5C35B5' : '#1F1F1F',
                        fontWeight: isH && !isMark ? 600 : 400,
                      }}>{v}</td>
                    );
                  })}
                </tr>
              ))}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ===== ① 公开 Pricing 页 · 主流程（未登录访客视角） ===== */
function PP_PublicPage() {
  return (
    <div style={{ width: PP_W, height: PP_H, background: '#FBFAF7', fontFamily: 'Inter, "PingFang SC", sans-serif', overflow: 'hidden' }}>
      <PP_TopNav />
      <PP_Hero />
      <PP_PlanCards />
      <PP_BoosterSection />
      <PP_CreditExplainer />
      <PP_EnterpriseBanner />
      <PP_CompareTable />
      <div style={{ height: 40 }} />
    </div>
  );
}