/* screens-desktop-settings.jsx — Pricing 2.0 · 桌面端设置弹窗
   A. 设置 → 资源用量 Tab · 升级版（积分 + 明细 + FAQ）
   B. 设置 → 资源用量 Tab · 免费版（购买按钮置灰 + Tooltip）
   C. 设置 → 会员方案 Tab · 免费版（三列对比全表 + 教育版 banner）
   D. 设置 → 会员方案 Tab · 已订阅（当前方案高亮 + CTA 置灰带 Tooltip）
*/
/* global React, Raccoon, Ic */

const S_W = 880, S_H = 620;

/* ---------- SettingModal 侧边栏 SVG 图标 ---------- */
function StIc({ children, size = 15, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none"
      stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {children}
    </svg>
  );
}
const SETTING_NAV_ITEMS = [
  {
    key: 'account', label: '我的账号',
    icon: (c) => <StIc color={c}><circle cx="8" cy="6" r="3" /><path d="M2 14c0-3.3 2.7-5 6-5s6 1.7 6 5" /></StIc>,
  },
  {
    key: 'function', label: '功能设置',
    icon: (c) => <StIc color={c}><circle cx="8" cy="8" r="2.5" /><path d="M8 2.5V4M8 12v1.5M2.5 8H4M12 8h1.5M4.3 4.3l1 1M10.7 10.7l1 1M11.7 4.3l-1 1M5.3 10.7l-1 1" /></StIc>,
  },
  {
    key: 'plan', label: '会员方案',
    icon: (c) => <StIc color={c}><path d="M8 2l1.6 3.2L13.5 5.8l-2.75 2.68.65 3.77L8 10.5l-3.4 1.75.65-3.77L2.5 5.8l3.9-.6L8 2z" /></StIc>,
  },
  {
    key: 'orders', label: '订单管理',
    icon: (c) => <StIc color={c}><rect x="3" y="2" width="10" height="12" rx="1.5" /><path d="M5.5 6h5M5.5 9h5M5.5 12h3" /></StIc>,
  },
  {
    key: 'resource', label: '资源用量',
    icon: (c) => <StIc color={c}><rect x="2" y="2" width="12" height="12" rx="1.5" /><path d="M5 12V8M8 12V5M11 12V9" /></StIc>,
  },
  {
    key: 'shortcuts', label: '快捷键',
    icon: (c) => <StIc color={c}><rect x="2" y="4" width="12" height="8" rx="1.5" /><path d="M5 9h2M9 9h2" /><path d="M5 7h1M8 7h1M11 7h1" /></StIc>,
  },
  {
    key: 'about', label: '关于我们',
    icon: (c) => <StIc color={c}><circle cx="8" cy="8" r="6" /><path d="M8 7v5M8 5.5v.5" /></StIc>,
  },
];

function SettingFrame({ activeNav, children }) {
  const P = '#8E6BF2', PD = '#6E45D9';
  const GRAD = 'linear-gradient(90deg, rgba(142,107,242,0.1) 0%, rgba(171,231,213,0.1) 100%)';
  return (
    <div style={{
      width: S_W, height: S_H,
      /* 简化 app 背景 + 深色遮罩 */
      background: 'linear-gradient(135deg, #F4F0FF 0%, #EFF9F5 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'Inter, "PingFang SC", sans-serif',
      position: 'relative',
    }}>
      {/* 背景装饰（模拟 app 侧边栏轮廓） */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.35)' }} />

      <div style={{
        width: 820, height: 560,
        display: 'flex',
        background: '#fff',
        borderRadius: 12,
        overflow: 'hidden',
        boxShadow: '0 24px 64px rgba(0,0,0,0.28)',
        position: 'relative', zIndex: 1,
      }}>
        {/* 左侧导航 */}
        <div style={{
          width: 180, background: '#F7F7F7', borderRight: '1px solid #EBEBEB',
          padding: '0 8px', paddingTop: 24, flexShrink: 0,
        }}>
          {/* "设置" 标题 */}
          <div style={{ fontSize: 18, fontWeight: 600, color: '#0A0A06', marginLeft: 8, marginBottom: 16 }}>设置</div>
          {/* 导航列表 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {SETTING_NAV_ITEMS.map(item => {
              const active = item.key === activeNav;
              const c = active ? P : '#2A2A2A';
              return (
                <div key={item.key} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '0 16px', height: 40, borderRadius: 12,
                  fontSize: 13.5,
                  color: c,
                  background: active ? GRAD : 'transparent',
                  border: `1px solid ${active ? P : 'transparent'}`,
                  fontWeight: active ? 500 : 400,
                  cursor: 'pointer',
                }}>
                  {item.icon(c)}
                  {item.label}
                </div>
              );
            })}
          </div>
        </div>
        {/* 右侧内容 */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ---------- 通用进度条 ---------- */
function ProgressBar({ pct, danger }) {
  const c = danger ? '#FF4D4F' : (pct > 80 ? '#FFAD47' : '#8E6BF2');
  return (
    <div style={{ height: 6, background: '#EBEBEB', borderRadius: 999, overflow: 'hidden', marginTop: 6 }}>
      <div style={{ height: '100%', width: `${Math.min(100, pct)}%`, background: c, borderRadius: 999 }} />
    </div>
  );
}

/* ---------- 总览卡片（对齐 Profile Menu 资源卡片视觉） ---------- */
function OverviewCard({ items }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12,
      padding: '16px 18px',
    }}>
      {items.map(({ label, val, pct, color, danger }, i) => (
        <div key={i} style={{ marginTop: i > 0 ? 14 : 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: '#1F1F1F' }}>
            <span>{label}</span>
            <span style={{ color: '#666', fontVariantNumeric: 'tabular-nums' }}>{val}</span>
          </div>
          <div style={{ height: 6, background: '#EBEBEB', borderRadius: 999, overflow: 'hidden', marginTop: 8 }}>
            <div style={{
              height: '100%',
              width: `${Math.min(100, pct)}%`,
              background: danger ? '#FF6B81' : (color || '#8E6BF2'),
              borderRadius: 999,
            }} />
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- 积分构成行 ---------- */
function CreditTypeRow({ label, amount, note, frozen }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 0', borderBottom: '1px solid #F5F5F5',
    }}>
      <div style={{ fontSize: 13.5, color: '#1F1F1F' }}>
        {label}
        {note && <span style={{ fontSize: 11.5, color: '#AAA', marginLeft: 8 }}>{note}</span>}
        {frozen && (
          <span style={{ fontSize: 11, color: '#FF8A00', marginLeft: 8, background: '#FFF3E0', padding: '1px 7px', borderRadius: 4 }}>
            升级版专享，升级后可用
          </span>
        )}
      </div>
      <span style={{ fontSize: 13.5, fontVariantNumeric: 'tabular-nums', fontWeight: 500, color: frozen ? '#C0C0C0' : '#1F1F1F' }}>
        {amount} 积分
      </span>
    </div>
  );
}

/* ---------- 区块小标题 ---------- */
function SectionTitle({ title, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      marginBottom: 10, marginTop: 24,
    }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: '#1F1F1F' }}>{title}</div>
      {right}
    </div>
  );
}

/* ---------- 积分明细流水 ---------- */
function CreditLogs() {
  const logs = [
    { label: '任务消耗',                                  time: '刚刚',              delta: -25,   in: false },
    { label: '每日积分发放',                               time: '2026-06-22 00:00',  delta: 500,   in: true  },
    { label: '加油包购买（大包）',                         time: '2026-06-20 14:32',  delta: 1200,  in: true  },
    { label: '奖励积分发放（2026-09-19 到期）',            time: '2026-06-20 09:00',  delta: 100,   in: true  },
    { label: '文档标题 · AI 内容编辑',                    time: '2026-06-20 10:15',  delta: -527,  in: false },
  ];
  return (
    <div style={{ marginTop: 20 }}>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: '#1F1F1F', marginBottom: 10 }}>积分明细</div>
      {/* Tab */}
      <div style={{ display: 'flex', borderBottom: '1px solid #F0F0F0', marginBottom: 10 }}>
        {['全部', '收入', '支出'].map((t, i) => (
          <div key={t} style={{
            padding: '6px 14px', fontSize: 13,
            color: i === 0 ? '#6E45D9' : '#888',
            fontWeight: i === 0 ? 600 : 400,
            borderBottom: i === 0 ? '2px solid #8E6BF2' : '2px solid transparent',
            marginBottom: -1,
          }}>{t}</div>
        ))}
      </div>
      {logs.map((log, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '8px 0', borderBottom: '1px solid #F8F8F8', fontSize: 13,
        }}>
          <div>
            <div style={{ color: '#1F1F1F', marginBottom: 2 }}>{log.label}</div>
            <div style={{ fontSize: 11.5, color: '#AAA' }}>{log.time}</div>
          </div>
          <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 500, color: log.in ? '#1DB998' : '#FF4D4F' }}>
            {log.in ? '+' : ''}{log.delta}
          </span>
        </div>
      ))}
      <div style={{ textAlign: 'center', padding: '10px 0', fontSize: 13, color: '#8E6BF2' }}>查看更多 ↓</div>
    </div>
  );
}

/* ---------- 常见问题 ---------- */
function FAQ() {
  const qs = [
    '什么是积分？',
    '积分怎么消耗？',
    '余额不足怎么办？',
    '加油包积分会过期吗？',
    '积分明细为什么没有展示全部？',
  ];
  return (
    <div style={{ marginTop: 20, borderTop: '1px solid #F0F0F0', paddingTop: 16 }}>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: '#1F1F1F', marginBottom: 8 }}>常见问题</div>
      {qs.map((q, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '10px 0', borderBottom: '1px solid #F5F5F5',
          fontSize: 13.5, color: '#333',
        }}>
          {q} <Ic.chevD size={14} color="#C0C0C0" />
        </div>
      ))}
    </div>
  );
}

/* ---------- 升级版购买按钮 ---------- */
function BuyBoosterBtn() {
  return (
    <button style={{
      height: 30, padding: '0 14px', borderRadius: 8, border: 'none',
      background: 'linear-gradient(135deg, #8E6BF2, #6E45D9)',
      color: '#fff', fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
    }}>购买加油包</button>
  );
}

/* ---------- 免费版置灰购买按钮 + Tooltip ---------- */
function BuyBoosterDisabled() {
  return (
    <div style={{ position: 'relative' }}>
      <button style={{
        height: 30, padding: '0 14px', borderRadius: 8, border: 'none',
        background: '#E8E8E8', color: '#AAAAAA', fontSize: 12.5, fontWeight: 600,
      }}>购买加油包 ⊘</button>
      <div style={{
        position: 'absolute', top: 38, right: 0,
        background: '#1A1A1A', color: '#fff',
        fontSize: 12, padding: '9px 14px', borderRadius: 7,
        lineHeight: 1.7, whiteSpace: 'nowrap',
        boxShadow: '0 4px 14px rgba(0,0,0,0.2)', zIndex: 5,
      }}>
        加油包仅限升级版用户购买，<br />
        <span style={{ color: '#C4B5FD', textDecoration: 'underline' }}>立即升级 →</span>
        <div style={{
          position: 'absolute', top: -6, right: 20,
          width: 10, height: 6,
          clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
          background: '#1A1A1A',
        }} />
      </div>
    </div>
  );
}

/* ===== A. 资源用量 · 升级版 ===== */
function ST_ResourcePro() {
  return (
    <SettingFrame activeNav="resource">
      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px 32px' }}>
        {/* 区块 1：总览 */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#1F1F1F' }}>总览</div>
        </div>
        <OverviewCard items={[
          { label: '可用积分',   val: '1820 积分',      pct: 30, color: '#8E6BF2' },
          { label: '存储空间',   val: '1.2 / 10 GB',    pct: 12, color: '#FFAD47' },
          { label: '知识库库容', val: '88 / 500 MB',    pct: 18, color: '#1DB998' },
        ]} />

        {/* 区块 2：积分构成 */}
        <SectionTitle title="积分构成" right={<BuyBoosterBtn />} />
        <div style={{ background: '#FAFAFA', border: '1px solid #EBEBEB', borderRadius: 12, padding: '0 14px 4px' }}>
          <CreditTypeRow label="每日额度"   amount="200"   note="每日 24:00 清零" />
          <CreditTypeRow label="每月额度"   amount="1200" />
          <CreditTypeRow label="奖励积分"   amount="120"   note="各笔到期日见明细" />
          <CreditTypeRow label="加油包"     amount="300" />
        </div>
        <div style={{ fontSize: 12, color: '#999', marginTop: 10, lineHeight: 1.6 }}>
          消耗顺序：每日额度 → 每月额度 → 奖励积分 / 加油包（按到期日）
        </div>

        {/* 区块 3：积分流水 */}
        <CreditLogs />

        {/* 区块 4：常见问题 */}
        <FAQ />
      </div>
    </SettingFrame>
  );
}

/* ===== B. 资源用量 · 免费版 · 购买按钮置灰 + Tooltip ===== */
function ST_ResourceFree() {
  return (
    <SettingFrame activeNav="resource">
      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px 32px' }}>
        {/* 区块 1：总览 */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#1F1F1F' }}>总览</div>
        </div>
        <OverviewCard items={[
          { label: '可用积分',   val: '200 积分',       pct: 20, color: '#8E6BF2' },
          { label: '存储空间',   val: '388 / 500 MB',   pct: 78, color: '#FFAD47' },
          { label: '知识库库容', val: '96.8 / 100 MB',  pct: 97, danger: true },
        ]} />

        {/* 区块 2：积分构成（免费版全为 0，购买按钮置灰） */}
        <SectionTitle title="积分构成" right={<BuyBoosterDisabled />} />
        <div style={{ background: '#FAFAFA', border: '1px solid #EBEBEB', borderRadius: 12, padding: '0 14px 4px' }}>
          <CreditTypeRow label="每日额度"   amount="200"  note="每日 24:00 清零" />
          <CreditTypeRow label="每月额度"   amount="0" />
          <CreditTypeRow label="奖励积分"   amount="0" />
          <CreditTypeRow label="加油包"     amount="0" />
        </div>
        <div style={{ fontSize: 12, color: '#999', marginTop: 10, lineHeight: 1.6 }}>
          消耗顺序：每日额度 → 每月额度 → 奖励积分 / 加油包（按到期日）
        </div>

        {/* 区块 3：常见问题（免费版没有积分流水） */}
        <FAQ />
      </div>
    </SettingFrame>
  );
}

/* ===== B'. 资源用量 · 免费版 · 加油包冻结（升级版退订回退） ===== */
function ST_ResourceFreeFrozen() {
  return (
    <SettingFrame activeNav="resource">
      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px 32px' }}>
        {/* 区块 1：总览（可用积分不含冻结加油包） */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#1F1F1F' }}>总览</div>
        </div>
        <OverviewCard items={[
          { label: '可用积分',   val: '200 积分',       pct: 20, color: '#8E6BF2' },
          { label: '存储空间',   val: '388 / 500 MB',   pct: 78, color: '#FFAD47' },
          { label: '知识库库容', val: '96.8 / 100 MB',  pct: 97, danger: true },
        ]} />

        {/* 区块 2：积分构成 */}
        <SectionTitle title="积分构成" right={<BuyBoosterDisabled />} />
        <div style={{ background: '#FAFAFA', border: '1px solid #EBEBEB', borderRadius: 12, padding: '0 14px 4px' }}>
          <CreditTypeRow label="每日额度"   amount="200"  note="每日 24:00 清零" />
          <CreditTypeRow label="每月额度"   amount="0" />
          <CreditTypeRow label="奖励积分"   amount="0" />
          <CreditTypeRow label="加油包"     amount="300" frozen />
        </div>
        <div style={{ fontSize: 12, color: '#999', marginTop: 10, lineHeight: 1.6 }}>
          消耗顺序：每日额度 → 每月额度 → 奖励积分 / 加油包（按到期日）
        </div>

        {/* 区块 3：常见问题 */}
        <FAQ />
      </div>
    </SettingFrame>
  );
}

/* ---------- 会员方案对比表 ---------- */
const COLS = [
  { key: 'free',    label: '个人免费版',   price: '¥0',         sub: '永久免费' },
  { key: 'pro',     label: '个人升级版',   price: '¥29.9起/月', sub: '支持月/年订阅', highlight: true },
  { key: 'biz',     label: '企业标准版',   price: '¥1599/人/年', sub: '年卡订阅' },
];

const PLAN_GROUPS = [
  {
    group: '积分与算力',
    rows: [
      { label: '每日赠送积分',   vals: ['200 积分/日', '500 积分/日', '1000 积分/人/日'] },
      { label: '每月赠送积分',   vals: ['—',           '5000 积分/月', '20000 积分/人/月'] },
      { label: '加油包',         vals: ['不可购买',    '可购买',       '可购买'] },
    ],
  },
  {
    group: 'AI 功能权益',
    rows: [
      { label: 'PPT 模式',       vals: ['仅标准模式',  '标准 + 创意模式', '标准 + 创意模式'] },
      { label: 'PPT 导出',       vals: ['仅 PDF',      'PDF、PPTX 源文件', 'PDF、PPTX 源文件'] },
      { label: 'PPT 模版',       vals: ['免费模版',    '自定义 + VIP 模版', '自定义 + VIP 模版'] },
      { label: '模型选择',       vals: ['标准模型',    '标准 + 升级模型', '标准 + 升级模型'] },
    ],
  },
  {
    group: '文件上传',
    rows: [
      { label: '文件预览', vals: ['✓', '✓', '✓'] },
      { label: '文件下载', vals: ['—', '✓', '✓'] },
      { label: '上传数量', vals: ['5 个/对话', '20 个/对话', '20 个/对话'] },
      { label: '文件大小', vals: ['80 MB', '200 MB', '200 MB'] },
    ],
  },
  {
    group: '知识管理',
    rows: [
      { label: '存储空间',     vals: ['500 MB',  '10 GB',  '200 GB/人'] },
      { label: '知识库容量',   vals: ['100 MB',  '500 MB', '2 GB/人'] },
    ],
  },
  {
    group: '我的文档',
    rows: [
      { label: '文档总数',   vals: ['100',  '1000',       '50000'] },
      { label: '附件数量',   vals: ['5 个/文档', '50 个/文档', '50 个/文档'] },
      { label: '快捷指令',   vals: ['3 个', '50 个', '—'] },
      { label: '技能模版',   vals: ['1 个', '50 个', '—'] },
    ],
  },
  {
    group: '管理支持',
    rows: [
      { label: '用量看板',   vals: ['—', '—', '✓'] },
      { label: '积分管理',   vals: ['—', '—', '✓'] },
      { label: 'SSO',        vals: ['—', '—', '✓'] },
    ],
  },
  {
    group: '用户支持',
    rows: [
      { label: '客户支持',       vals: ['社群答疑', '专属 VIP 客服', '专属大客户支持'] },
    ],
  },
];

function PlanTable({ currentPlan }) {
  const TH_W = 120;
  const TD_W = 152;

  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
        {/* 表头 */}
        <thead>
          <tr style={{ borderBottom: '2px solid #E5E5E5' }}>
            <th style={{ width: TH_W, textAlign: 'left', padding: '0 10px 12px 0', fontWeight: 400, color: '#888', fontSize: 12 }}></th>
            {COLS.map((col, i) => {
              const isCurrent = col.key === currentPlan;
              return (
                <th key={col.key} style={{
                  width: TD_W, textAlign: 'center', padding: '0 6px 12px',
                  fontWeight: 600,
                }}>
                  <div style={{
                    padding: '10px 8px 10px',
                    borderRadius: 8,
                    background: col.highlight ? 'linear-gradient(135deg, #F0EBFF, #E8E0FF)' : (isCurrent ? '#F5F5F5' : 'transparent'),
                    border: col.highlight ? '1.5px solid #C4B5FD' : (isCurrent ? '1.5px solid #D0D0D0' : 'none'),
                    position: 'relative',
                  }}>
                    {col.highlight && (
                      <div style={{
                        position: 'absolute', top: -8, left: '50%', transform: 'translateX(-50%)',
                        background: '#8E6BF2', color: '#fff',
                        fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 999,
                        whiteSpace: 'nowrap',
                      }}>推荐</div>
                    )}
                    {isCurrent && !col.highlight && (
                      <div style={{
                        position: 'absolute', top: -8, left: '50%', transform: 'translateX(-50%)',
                        background: '#555', color: '#fff',
                        fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 999,
                        whiteSpace: 'nowrap',
                      }}>当前方案</div>
                    )}
                    <div style={{ fontSize: 12, fontWeight: 700, color: col.highlight ? '#6E45D9' : '#1F1F1F', marginBottom: 4 }}>
                      {col.label}
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: col.highlight ? '#6E45D9' : '#1F1F1F' }}>{col.price}</div>
                    {col.sub && <div style={{ fontSize: 10.5, color: '#999', marginTop: 2 }}>{col.sub}</div>}
                    {/* CTA */}
                    <button title={isCurrent ? '已订阅，悬浮显示 Tooltip（文案沿用既有逻辑）' : undefined} style={{
                      marginTop: 8, height: 28, width: '100%', borderRadius: 6, border: 'none',
                      background: isCurrent ? '#ECECEC' : (col.highlight ? '#8E6BF2' : '#F0F0F0'),
                      color: isCurrent ? '#BBB' : (col.highlight ? '#fff' : '#555'),
                      fontSize: 11.5, fontWeight: 600,
                      cursor: isCurrent ? 'not-allowed' : 'pointer',
                    }}>
                      {col.key === 'free' ? '免费使用 →' :
                       col.key === 'pro'  ? '获取升级版 →' :
                                            '获取企业版 →'}
                    </button>
                    {col.key === 'biz' && !isCurrent && (
                      <div style={{ marginTop: 6, fontSize: 11, color: '#6E45D9', textAlign: 'center' }}>
                        私有化部署 →
                      </div>
                    )}
                  </div>
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {PLAN_GROUPS.map(group => (
            <React.Fragment key={group.group}>
              {/* 分组标题行 */}
              <tr>
                <td colSpan={4} style={{
                  padding: '12px 0 6px',
                  fontSize: 12, fontWeight: 700, color: '#888',
                  letterSpacing: '0.4px',
                  borderBottom: '1px solid #F0F0F0',
                }}>{group.group}</td>
              </tr>
              {group.rows.map((row, ri) => (
                <tr key={ri} style={{ borderBottom: '1px solid #F8F8F8' }}>
                  <td style={{ padding: '8px 10px 8px 0', fontSize: 12.5, color: '#555', width: TH_W }}>{row.label}</td>
                  {row.vals.map((v, ci) => {
                    const isH = COLS[ci].highlight;
                    return (
                      <td key={ci} style={{
                        textAlign: 'center', padding: '8px 6px',
                        fontSize: 12.5,
                        color: v === '✓' ? '#1DB998' : (v === '—' ? '#CCC' : (isH ? '#5C35B5' : '#1F1F1F')),
                        fontWeight: isH ? 600 : 400,
                        background: isH ? 'rgba(142,107,242,0.04)' : 'transparent',
                      }}>{v}</td>
                    );
                  })}
                </tr>
              ))}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---------- 教育版 banner（沿用线上） ---------- */
function EduBanner() {
  return (
    <div style={{
      background: 'linear-gradient(90deg, #F3EEFF 0%, #EDE5FF 100%)',
      borderRadius: 10,
      padding: '12px 16px',
      marginBottom: 16,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: '#1F1F1F' }}>合作院校同学可免费领取「专享教育版」</div>
      <div style={{ fontSize: 12, color: '#6E45D9', fontWeight: 500 }}>立即查看 →</div>
    </div>
  );
}

/* ===== C. 会员方案 · 免费版（未订阅） ===== */
function ST_PlanFree() {
  return (
    <SettingFrame activeNav="plan">
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px' }}>
        <EduBanner />
        <div style={{ fontSize: 16, fontWeight: 700, color: '#1F1F1F', marginBottom: 4 }}>会员方案</div>
        <div style={{ fontSize: 12.5, color: '#888', marginBottom: 16 }}>选择适合你的方案，解锁更多 AI 能力</div>
        <PlanTable currentPlan={null} />
      </div>
    </SettingFrame>
  );
}

/* ===== D. 会员方案 · 已订阅（升级版，当前方案高亮） ===== */
function ST_PlanSubscribed() {
  return (
    <SettingFrame activeNav="plan">
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px' }}>
        <EduBanner />
        <div style={{ fontSize: 16, fontWeight: 700, color: '#1F1F1F', marginBottom: 4 }}>会员方案</div>
        <div style={{ fontSize: 12.5, color: '#888', marginBottom: 16 }}>你当前使用的是 <strong>个人升级版（包年）</strong>，到期时间 2026-07-30</div>
        <PlanTable currentPlan="pro" />
      </div>
    </SettingFrame>
  );
}