/* global React, Icon */

// ════════════════════════════════════════════════════════════════
//   FreightIQ 全集定价中心 — Pricing Hub
//   左 sticky sider + 右 panel,沿用主站 token + 现有产品定价数据
// ════════════════════════════════════════════════════════════════

const PRODUCT_COLOR = {
  rates:     { c: '#1677FF', c2: '#4FA3FF' },
  foresight: { c: '#00D4AA', c2: '#7C5CFF' },
  prospect:  { c: '#FFB020', c2: '#FF5A4E' },
};

// ───────── Sider 数据 ─────────
const SIDER = [
  { group: '概览', items: [
    { id: 'overview', icon: 'grid', label: '全部产品对照' },
  ]},
  { group: 'TOOLS', items: [
    { id: 'rates',     icon: 'ship',  label: 'FreightIQ Rates',     dot: '#1677FF', chip: { text: '运价', cls: 'brand-rates' } },
    { id: 'foresight', icon: 'brain', label: 'FreightIQ Foresight', dot: '#00D4AA', chip: { text: '新',   cls: 'brand-foresight' } },
    { id: 'prospect',  icon: 'target',label: 'FreightIQ Prospect',  dot: '#FFB020', chip: { text: '即将', cls: 'brand-prospect' } },
  ]},
  { group: 'PACKAGES', items: [
    { id: 'bundles', icon: 'layers', label: '全集捆绑' },
  ]},
  { group: '加购', items: [
    { id: 'addons', icon: 'plug', label: '数据源 / 实施' },
  ]},
];

// ───────────────── Hero ─────────────────
const PricingHero = ({ period, setPeriod }) => (
  <section className="ph-hero">
    <div className="container">
      <span className="ph-eyebrow"><Icon name="cube" size={11} stroke={2.2}/> 全集定价</span>
      <h1>一个账号,<br/>覆盖运价 / 情报 / 拓客全链路</h1>
      <p className="lead">
        三款产品独立定价、可单独订阅,也可打包享 -34% 优惠。
        所有套餐共享同一身份与组织,数据互通,跨产品工作流即装即用。
      </p>
      <div className="ph-period">
        <button className={period === 'monthly' ? 'active' : ''} onClick={() => setPeriod('monthly')}>月付</button>
        <button className={period === 'annual' ? 'active' : ''} onClick={() => setPeriod('annual')}>
          年付 <span className="save-chip">省 20%</span>
        </button>
      </div>
    </div>
  </section>
);

// ───────────────── Sider ─────────────────
const PricingSider = ({ active, setActive }) => (
  <aside className="ph-sider">
    {SIDER.map((group, gi) => (
      <div key={gi}>
        <div className="ph-sider-group">{group.group}</div>
        {group.items.map(item => (
          <button
            key={item.id}
            className={`ph-sider-item ${active === item.id ? 'active' : ''}`}
            onClick={() => setActive(item.id)}
          >
            {item.dot
              ? <span className="dot" style={{ background: item.dot }}/>
              : <Icon name={item.icon} size={14}/>}
            <span className="label">{item.label}</span>
            {item.chip && <span className={`chip-mini ${item.chip.cls}`}>{item.chip.text}</span>}
          </button>
        ))}
      </div>
    ))}
    <div style={{ marginTop: 12, padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 12, fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.6 }}>
      <div style={{ fontWeight: 600, color: 'var(--ink-2)', marginBottom: 4 }}>需要帮助选择套餐?</div>
      预约 30 分钟方案咨询 — 我们按你的团队规模、业务线、合规要求为你推荐组合。
      <a href="#" style={{ display: 'inline-flex', gap: 4, marginTop: 8, fontSize: 12, fontWeight: 600, color: 'var(--brand)' }}>
        联系销售 <Icon name="arrow" size={11}/>
      </a>
    </div>
  </aside>
);

// ───────────────── Overview Panel ─────────────────
const OVERVIEW_PRODUCTS = [
  {
    id: 'rates', icon: 'ship', name: 'FreightIQ Rates', tagline: '运价聚合 · 抢舱订舱 · 运营 BI',
    startPrice: '¥ 0', startUnit: '/ 月起',
    bullets: ['实时运价聚合 · 100+ 数据源', '抢舱订舱引擎 · 风控熔断', '运营 BI · 毛利 / KPI / 客户洞察'],
    cta: '查看 Rates 完整定价', href: '/rates-pricing', color: '#1677FF', color2: '#4FA3FF',
  },
  {
    id: 'foresight', icon: 'brain', name: 'FreightIQ Foresight', tagline: 'AI 多源数据情报 + 预警',
    startPrice: '$ 0', startUnit: '/ 月起',
    bullets: ['Ask 智能问答 · AgenticX 4 Agents', 'SRI 风险指数 · 智能预警', 'MCP Tools · BI 连接器 · 6 渠道'],
    cta: '查看 Foresight 完整定价', href: '/foresight-pricing', color: '#00D4AA', color2: '#7C5CFF',
  },
  {
    id: 'prospect', icon: 'target', name: 'FreightIQ Prospect', tagline: 'AI 航运拓客平台',
    startPrice: '即将', startUnit: '上线',
    bullets: ['航运企业数据库 · 4M+ 公司', 'AI 线索评分 · 触达序列', '与 Foresight 情报联动'],
    cta: '加入候补名单',
    href: '#prospect', color: '#FFB020', color2: '#FF5A4E', comingSoon: true,
  },
];

const OverviewPanel = ({ setActive }) => (
  <div className="ph-panel">
    <div className="ph-panel-head">
      <div>
        <h2>三款产品,各自独立成型</h2>
        <p>每款产品都能独立买、独立用,也能打通 — 看下面快照,然后从左侧切换到具体产品看完整套餐。</p>
      </div>
    </div>
    <div className="ph-overview-grid">
      {OVERVIEW_PRODUCTS.map(p => (
        <div key={p.id} className={`ph-overview-card ${p.comingSoon ? 'coming-soon' : ''}`}>
          <div className="top-bar" style={{ background: `linear-gradient(90deg, ${p.color}, ${p.color2})` }}/>
          <div className="head-row">
            <div className="icon-pill" style={{ background: `linear-gradient(135deg, ${p.color}, ${p.color2})` }}>
              <Icon name={p.icon} size={20}/>
            </div>
            <div>
              <div className="pname">{p.name}</div>
              <div className="tagline">{p.tagline}</div>
            </div>
          </div>
          <div className="start-price">
            <b>{p.startPrice}</b>{p.startUnit}
          </div>
          <div className="feats">
            {p.bullets.map((b, i) => (
              <div key={i}><Icon name="check" size={13} stroke={2.4}/><span>{b}</span></div>
            ))}
          </div>
          {p.comingSoon ? (
            <button
              className="cta"
              onClick={() => setActive('prospect')}
              style={{ color: '#B57500', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}
            >
              {p.cta} <Icon name="arrow" size={12}/>
            </button>
          ) : (
            <a href={p.href} className="cta" style={{ color: p.color }}>
              {p.cta} <Icon name="arrow" size={12}/>
            </a>
          )}
        </div>
      ))}
    </div>

    <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
      {[
        { i: 'shield', t: '14 天免费试用',     d: '全功能解锁,无需信用卡' },
        { i: 'users',  t: '一个账号 · 全产品',  d: '组织级权限,数据互通' },
        { i: 'plug',   t: '深度集成 100+ 系统', d: 'SAP / 用友 / TMS / Slack 等' },
        { i: 'lock',   t: 'SOC 2 + ISO 27001', d: 'TLS 加密 + 行级隔离' },
      ].map((b, i) => (
        <div key={i} style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--line)' }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: 'color-mix(in srgb, var(--brand) 12%, transparent)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
            <Icon name={b.i} size={15}/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-1)', marginBottom: 4 }}>{b.t}</div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.5 }}>{b.d}</div>
        </div>
      ))}
    </div>
  </div>
);

// ───────────────── Rates Panel ─────────────────
const RATES_TIERS = [
  {
    id: 'starter', name: 'Starter',
    monthly: 0, annual: 0,
    desc: '适合 1–3 人团队、单一业务线试水',
    cta: '免费开始', popular: false,
    feats: [
      '5 个监控航线',
      '每日 200 次询价',
      '基础运价表',
      '邮件告警',
      '社区支持',
    ],
  },
  {
    id: 'growth', name: 'Growth',
    monthly: 2880, annual: 2304,
    desc: '适合 5–20 人货代 / 船代团队',
    cta: '开始 14 天试用', popular: true,
    feats: [
      '50 个监控航线',
      '无限次询价',
      '全部运价来源',
      '抢舱订舱引擎',
      '多用户 + 权限',
      'API 3,000 次 / 日',
      '专属客户经理',
    ],
  },
  {
    id: 'enterprise', name: 'Enterprise',
    custom: true,
    desc: '适合 50+ 人大型货代 / 供应链团队',
    cta: '联系销售', popular: false,
    feats: [
      '无限航线 + 私有部署',
      '无限 API 调用',
      '自定义策略引擎',
      'SSO + 审计日志',
      'SLA 99.95%',
      '7×24 专属支持',
      '开发者 IDE 插件',
    ],
  },
];

const formatRMB = (v) => {
  if (v === 0) return '¥ 0';
  return '¥ ' + v.toLocaleString();
};

const RatesPanel = ({ period }) => (
  <div className="ph-panel">
    <div className="ph-panel-head" style={{ alignItems: 'flex-start' }}>
      <div className="ph-product-color-bar" style={{ background: 'linear-gradient(180deg, #1677FF, #4FA3FF)' }}/>
      <div style={{ flex: 1 }}>
        <h2>FreightIQ Rates · 按团队规模订阅</h2>
        <p>14 天免费试用,全功能解锁。3 阶套餐覆盖从单兵销售到大型货代团队的完整场景,随业务增长升级,随时降级退订。</p>
      </div>
      <a href="/rates-pricing" className="btn btn-ghost btn-sm" style={{ flexShrink: 0 }}>
        查看完整定价 <Icon name="arrow" size={12}/>
      </a>
    </div>
    <div className="ph-tier-grid cols-3">
      {RATES_TIERS.map(t => (
        <div key={t.id} className={`ph-tier ${t.popular ? 'popular' : ''}`}>
          <div className="name">{t.name}</div>
          <div className="desc">{t.desc}</div>
          <div className="price-row">
            {t.custom ? (
              <span className="price custom">定制</span>
            ) : (
              <>
                <span className="price">{formatRMB(period === 'annual' ? t.annual : t.monthly)}</span>
                <span className="unit">/ 月</span>
              </>
            )}
          </div>
          <div className="bill-line">
            {t.custom ? '按需定制 · 起步 12 个月'
              : period === 'annual'
                ? (t.annual === 0 ? '永久免费 · 无需信用卡' : '年付 ¥' + (t.annual * 12).toLocaleString() + ' · 立省 20%')
                : (t.monthly === 0 ? '永久免费 · 无需信用卡' : '月付 · 随时取消')}
          </div>
          <button className={`btn cta-btn ${t.popular ? 'btn-primary' : 'btn-ghost'}`}>
            {t.cta}
          </button>
          <div className="feats-head">每月包含</div>
          {t.feats.map((f, i) => (
            <div key={i} className="feat">
              <Icon name="check" size={13} stroke={2.4}/>
              <span>{f}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
    <div className="ph-note">
      <b>计费说明</b> · Rates 按席位 + 询价配额计费 · 年付为期 12 个月,享 -20% 折扣,中途取消按月退款 · Enterprise 起步 12 个月,具体由销售协商
    </div>
  </div>
);

// ───────────────── Foresight Panel ─────────────────
const FORESIGHT_TIERS = [
  {
    id: 'explorer', name: 'Explorer',
    monthly: 0, annual: 0,
    desc: '试用核心能力,适合个人研究 / 评估期',
    cta: '免费开始', popular: false,
    feats: [
      '50 Ask 积分 / 月',
      '1 Agent (Rate 单一)',
      'SRI 当前值 (无历史 / 无预警)',
      '每周 1 份摘要报告',
      '社区支持',
    ],
  },
  {
    id: 'analyst', name: 'Analyst',
    monthly: 299, annual: 239,
    desc: '单人深度使用,适合分析师 / 研究员',
    cta: '开始 14 天试用', popular: false,
    feats: [
      '500 Ask 积分 / 月',
      '4 Agents (Rate · Port · Risk · Fuel)',
      'SRI 1 年历史 + 100 预警 / 月',
      'REST API · 60 RPM',
      '3 通知渠道',
      'BI 连接器二选一',
    ],
  },
  {
    id: 'desk', name: 'Desk',
    monthly: 999, annual: 799,
    desc: '团队级 — 含 MCP / 全渠道 / Webhook',
    cta: '开始 14 天试用', popular: true,
    feats: [
      '2,500 Ask 积分 · 共享池',
      '4 + 自定义 2 Agents',
      'SRI 5 年 + 1,000 预警 / 月',
      'REST + GraphQL · 600 RPM',
      'Webhook (HMAC-SHA256)',
      'MCP Tools (Claude / Cursor)',
      '6 通知渠道 · 4 BI 连接器',
    ],
  },
  {
    id: 'enterprise', name: 'Enterprise',
    custom: true,
    desc: '企业级 — 私有部署 / SSO / RLS',
    cta: '联系销售', popular: false,
    feats: [
      '无限 Ask 积分',
      '专用模型微调',
      '高级数据源含 (任选 3)',
      'SSO + SAML + SCIM',
      'RLS 行级数据隔离',
      'VPC 私有部署',
      'SOC 2 / GDPR / ISO 27001',
    ],
  },
];

const formatUSD = (v) => {
  if (v === 0) return '$ 0';
  return '$ ' + v.toLocaleString();
};

const ForesightPanel = ({ period }) => (
  <div className="ph-panel">
    <div className="ph-panel-head" style={{ alignItems: 'flex-start' }}>
      <div className="ph-product-color-bar" style={{ background: 'linear-gradient(180deg, #00D4AA, #7C5CFF)' }}/>
      <div style={{ flex: 1 }}>
        <h2>FreightIQ Foresight · 按 credits 订阅</h2>
        <p>credits 是统一计量单位 — 1 次问答 = 1,Agent 工时 = 3,预警触发 = 0.05。任何团队成员共享同一池,不再为 "谁多用了" 而打架。</p>
      </div>
      <a href="/foresight-pricing" className="btn btn-ghost btn-sm" style={{ flexShrink: 0 }}>
        查看完整定价 <Icon name="arrow" size={12}/>
      </a>
    </div>
    <div className="ph-tier-grid cols-4">
      {FORESIGHT_TIERS.map(t => (
        <div key={t.id} className={`ph-tier ${t.popular ? 'popular' : ''}`}>
          <div className="name">{t.name}</div>
          <div className="desc">{t.desc}</div>
          <div className="price-row">
            {t.custom ? (
              <span className="price custom">联系销售</span>
            ) : (
              <>
                <span className="price">{formatUSD(period === 'annual' ? t.annual : t.monthly)}</span>
                <span className="unit">/ 月</span>
              </>
            )}
          </div>
          <div className="bill-line">
            {t.custom ? '按需定制 · 起步 12 个月'
              : period === 'annual'
                ? (t.annual === 0 ? '永久免费' : '年付 $' + (t.annual * 12).toLocaleString() + ' · 立省 20%')
                : (t.monthly === 0 ? '永久免费' : '月付 · 随时取消')}
          </div>
          <button className={`btn cta-btn ${t.popular ? 'btn-primary' : 'btn-ghost'}`}>
            {t.cta}
          </button>
          <div className="feats-head">每月包含</div>
          {t.feats.map((f, i) => (
            <div key={i} className="feat">
              <Icon name="check" size={13} stroke={2.4}/>
              <span>{f}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
    <div className="ph-note">
      <b>credits 公式</b> · Ask·1 + Agent·hr·3 + Alert·0.05 · Analyst / Desk 套餐月底未用 credits 滚存最多 2 个月,Explorer 不滚存 · 详细消耗追溯在账单页可看到每次 Ask / Agent 任务 / 预警触发
    </div>
  </div>
);

// ───────────────── Prospect Placeholder ─────────────────
const ProspectPanel = () => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email) setSubmitted(true);
  };
  return (
    <div className="ph-panel" style={{ padding: 0, background: 'transparent', border: 'none' }}>
      <div className="ph-prospect-card">
        <span className="badge-soon"><Icon name="bolt" size={10} stroke={2.4}/> 即将上线 · 2026 Q3</span>
        <h2>Prospect 子站正在路上</h2>
        <p className="sub">
          AI 航运拓客平台 — 把 Foresight 看到的贸易动向变成可执行的客户线索。
          子站正在最后阶段打磨,可能直接接入既有 CRM (Apollo / Clay / 自研) 也可能独立成站,我们会以最贴合的方式上线。
        </p>
        {submitted ? (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 20px', background: 'var(--surface)', border: '1px solid #00B58E', borderRadius: 999, color: '#008F73', fontSize: 14, fontWeight: 600, marginBottom: 28 }}>
            <Icon name="check" size={16} stroke={2.4}/>
            已加入候补名单 — 上线时 {email} 会收到通知
          </div>
        ) : (
          <form className="ph-waitlist-form" onSubmit={submit}>
            <input
              type="email"
              placeholder="留个邮箱 — 上线第一时间通知你"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <button type="submit">
              加入候补 <Icon name="arrow" size={13}/>
            </button>
          </form>
        )}
        <div className="ph-prospect-features">
          {[
            { i: 'db',     t: '航运企业数据库', d: '4M+ 全球货主 / 货代 / 制造业,实时贸易动态' },
            { i: 'sparkAi',t: 'AI 线索评分',     d: '基于贸易行为 + Foresight 情报的优先级排序' },
            { i: 'flow',   t: '自动触达序列',    d: '邮件 / LinkedIn / WhatsApp 多渠道节奏' },
            { i: 'chart',  t: '拓客漏斗分析',    d: '从线索到成单的转化率 BI · 与 Rates 联动' },
          ].map((f, i) => (
            <div key={i}>
              <div className="ic"><Icon name={f.i} size={14}/></div>
              <div className="t">{f.t}</div>
              <div className="d">{f.d}</div>
            </div>
          ))}
        </div>
        <div className="meta-row">
          <span><b>预计上线</b> 2026 Q3</span>
          <span><b>计费模式</b> 按席位 + 触达条数</span>
          <span><b>Beta 名额</b> 已开放 50 / 200</span>
          <span><b>含整合</b> 与 Foresight 情报双向打通</span>
        </div>
      </div>
    </div>
  );
};

// ───────────────── Bundles Panel ─────────────────
const BUNDLES = [
  {
    tag: '最受欢迎',
    title: 'Foresight + Rates',
    desc: '情报 + 决策一体化 — Foresight 看到风险即触发 Rates 策略调整,跨产品桥接零延迟。',
    products: [{ n: 'Foresight Desk', c: '#00D4AA' }, { n: 'Rates Pro',     c: '#1677FF' }],
    listPrice: 1499, bundle: 1099, save: '-27%',
  },
  {
    tag: '增长场景',
    title: 'Foresight + Prospect',
    desc: '情报驱动的客户拓展 — Foresight 识别贸易动向,Prospect 把它变成精准客户线索。',
    products: [{ n: 'Foresight Desk', c: '#00D4AA' }, { n: 'Prospect Pro',  c: '#FFB020' }],
    listPrice: 1979, bundle: 1599, save: '-19%',
    note: 'Prospect 上线后激活',
  },
  {
    tag: '全集套餐',
    title: 'Foresight + Rates + Prospect',
    desc: '三款产品打通 — 数据 / 决策 / 增长共用同一身份与组织,跨产品工作流即装即用。',
    products: [{ n: 'Foresight Desk', c: '#00D4AA' }, { n: 'Rates Pro', c: '#1677FF' }, { n: 'Prospect Pro', c: '#FFB020' }],
    listPrice: 3478, bundle: 2299, save: '-34%',
    note: 'Prospect 上线后激活',
  },
];

const BundlesPanel = () => (
  <div className="ph-panel">
    <div className="ph-panel-head">
      <div>
        <h2>全集捆绑 · 一起买更省</h2>
        <p>FreightIQ 三款产品共用同一组织、同一身份、同一计费 — 捆绑订阅最高 -34%。Prospect 在上线后自动激活,期间已订阅捆绑套餐的客户优先开放 Beta。</p>
      </div>
    </div>
    <div className="ph-bundle-grid">
      {BUNDLES.map(b => (
        <div key={b.title} className="ph-bundle-card">
          <span className="save-tag">{b.save}</span>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', color: 'var(--brand)', textTransform: 'uppercase', marginBottom: 4 }}>
            {b.tag}
          </div>
          <h3>{b.title}</h3>
          <div className="desc">{b.desc}</div>
          <div className="stack">
            {b.products.map((pr, i) => (
              <span key={i} className="pill">
                <span className="dot" style={{ background: pr.c }}/>
                {pr.n}
              </span>
            ))}
          </div>
          <div className="price-block">
            <div className="row strike"><span>市场价合计</span><span className="v">${b.listPrice.toLocaleString()} / 月</span></div>
            <div className="row save"><span>捆绑节省</span><span className="v">{b.save}</span></div>
            <div className="total">
              <span className="l">捆绑价 / 月</span>
              <span className="v">${b.bundle.toLocaleString()}</span>
            </div>
            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 14 }}>
              开始捆绑订阅 <Icon name="arrow" size={12}/>
            </button>
            {b.note && <div style={{ marginTop: 10, fontSize: 11, color: 'var(--ink-4)', textAlign: 'center' }}>※ {b.note}</div>}
          </div>
        </div>
      ))}
    </div>
    <div className="ph-note">
      <b>捆绑规则</b> · 捆绑套餐使用统一席位池 · 任意产品超额按对应单品的 add-on 价格计费 · 中途解绑可拆为单品订阅,差价按月退款 · Enterprise 客户可定制专属捆绑
    </div>
  </div>
);

// ───────────────── AddOns Panel ─────────────────
const ADDONS = [
  { code: 'lloyds-list',     vendor: "Lloyd's List Intelligence", kind: '新闻情报',   product: 'Foresight', price: 890,  unit: '/ 月', desc: '航运业权威新闻 + 1,200+ 港口动态 + 制裁名单' },
  { code: 'argus-bunker',    vendor: 'Argus Bunker',              kind: '燃油 / 能源', product: 'Foresight', price: 620,  unit: '/ 月', desc: '40+ 港口实时船燃价 + 月度展望' },
  { code: 'panjiva',         vendor: 'Panjiva (S&P)',             kind: '海关 / 贸易', product: 'Foresight', price: 1290, unit: '/ 月', desc: '美国 / 印度 / 巴西海关贸易记录 + 货主关联' },
  { code: 'marinetraffic-pro', vendor: 'MarineTraffic AIS Pro',   kind: '港口 / AIS',  product: 'Foresight', price: 480,  unit: '/ 月', desc: '历史轨迹 + 港口靠泊 / 离泊事件 + 船舶详情' },
  { code: 'xeneta',          vendor: 'Xeneta',                    kind: '运价指数',     product: 'Foresight', price: 2100, unit: '/ 月', desc: '160K+ 真实合同运价 · 短期 + 长期市场基准' },
  { code: 'ecmwf-hres',      vendor: 'ECMWF HRES',                kind: '气候 / 自然', product: 'Foresight', price: 1450, unit: '/ 月', desc: '欧洲中期天气预报 9km 全球网格 · 10 天展望' },
  { code: 'rates-impl',      vendor: 'Rates 实施服务',             kind: '专业服务',     product: 'Rates',     price: 8000, unit: '一次性', desc: '集成 SAP / 用友 / 自研 TMS · 含 4 周专家辅导' },
  { code: 'rates-train',     vendor: 'Rates 团队培训',             kind: '专业服务',     product: 'Rates',     price: 3200, unit: '一次性', desc: '订舱 / 销售 / 财务三个角色的实操培训' },
];

const AddOnsPanel = () => (
  <div className="ph-panel">
    <div className="ph-panel-head">
      <div>
        <h2>加购数据源与实施服务</h2>
        <p>除标准套餐外,可单独订阅高级数据源(passthrough 直通价格,无加价)或专业服务。所有加购按月计,可独立退订。</p>
      </div>
    </div>
    <table className="ph-addons-table">
      <thead>
        <tr>
          <th>编号</th>
          <th>来源 / 服务</th>
          <th>类型</th>
          <th>归属</th>
          <th>说明</th>
          <th style={{ textAlign: 'right' }}>单价</th>
        </tr>
      </thead>
      <tbody>
        {ADDONS.map(a => (
          <tr key={a.code}>
            <td className="code">{a.code}</td>
            <td style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{a.vendor}</td>
            <td className="kind"><span className="chip-k">{a.kind}</span></td>
            <td style={{ fontSize: 12, color: 'var(--ink-3)' }}>{a.product}</td>
            <td style={{ fontSize: 12, color: 'var(--ink-3)', maxWidth: 360, lineHeight: 1.5 }}>{a.desc}</td>
            <td className="price">${a.price.toLocaleString()}<span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500, marginLeft: 4 }}>{a.unit}</span></td>
          </tr>
        ))}
      </tbody>
    </table>
    <div className="ph-note">
      <b>passthrough 说明</b> · 数据源月费按供应商目录价直通,无加价 · 接入后 24h 内生效 · 可随时退订(按月按比例退款)· Enterprise 套餐可任选 3 项免费包含 · 实施 / 培训为一次性服务
    </div>
  </div>
);

// ───────────────── FAQ ─────────────────
const FAQ_ITEMS = [
  { q: '我可以只买其中一款产品吗?',
    a: '可以。Rates / Foresight / (Prospect 上线后) 三款产品独立定价,可单独订阅。打通使用时无须重新买,只要在同一组织下添加产品即可。' },
  { q: 'Rates 和 Foresight 的计费方式为什么不一样?',
    a: 'Rates 是高频操作工具,按席位 + 询价配额计费最贴近团队规模;Foresight 是情报与 AI 工具,按 credits (Ask + Agent + Alert) 计费让任何成员共享同一池。两套体系反映了产品的本质差异 — 一个看 "用了多少人",一个看 "消耗了多少智能"。' },
  { q: '14 天免费试用怎么算?',
    a: '所有付费套餐均提供 14 天全功能试用,无需信用卡。试用到期后会自动切换为只读模式,不会自动扣费 — 只有你主动选择付费升级时才会开始计费。' },
  { q: '年付和月付有什么区别?',
    a: '年付为期 12 个月,享 -20% 折扣。中途取消按月按比例退款。月付随时取消,但无折扣。Enterprise 套餐起步 12 个月,具体由销售协商。' },
  { q: '捆绑套餐怎么计费?',
    a: '捆绑套餐使用统一席位池 / credits 池,按整组合计费。任意单品超额按对应单品的 add-on 价格计费。中途解绑可拆为单品订阅,差价按月退款。' },
  { q: '数据是否加密?谁能访问我的数据?',
    a: '全链路 TLS 加密 + 静态 AES-256 加密。基于 RBAC 权限控制,管理员可审计每一次查询与订舱。已通过 SOC 2 Type II / ISO 27001 / GDPR 认证。Enterprise 套餐可选 RLS 行级隔离 + VPC 私有部署。' },
  { q: '私有化部署支持哪些云?',
    a: 'Enterprise 套餐支持 AWS / Azure / 阿里云 / 华为云 / 腾讯云 VPC 部署,以及本地机房部署。提供专属 SLA 99.95% 与 7×24 支持。' },
  { q: '学术 / NGO 折扣?',
    a: '学术认证邮箱 (.edu / .ac.cn / .ac.uk) 在 Foresight Analyst 套餐上享受 50% 折扣 · 注册 NGO 在 Rates Growth 套餐上享受 40% 折扣,均需每年重新认证。' },
];

const PricingFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="ph-faq-section">
      <div className="ph-faq-wrap">
        <div style={{ textAlign: 'center', marginBottom: 8 }}>
          <span className="ph-eyebrow"><Icon name="doc" size={11} stroke={2}/> 常见问题</span>
        </div>
        <h2>你可能想知道</h2>
        {FAQ_ITEMS.map((x, i) => (
          <div key={i} className={`ph-faq-item ${open === i ? 'open' : ''}`}>
            <button onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{x.q}</span>
              <span className="chev"><Icon name="arrowDown" size={14} stroke={2}/></span>
            </button>
            {open === i && <div className="ans">{x.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
};

// ───────────────── CTA ─────────────────
const PricingCTA = () => (
  <section style={{ padding: '80px 0' }}>
    <div className="container">
      <div style={{
        position: 'relative', overflow: 'hidden',
        padding: '56px 48px', borderRadius: 28,
        background: 'linear-gradient(135deg, #001E3C 0%, #0A2A5C 50%, #1677FF 130%)',
        color: '#fff',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center',
      }}>
        <div>
          <span style={{ display: 'inline-flex', padding: '4px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.1)', fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 18 }}>
            14 天试用 · 无需信用卡
          </span>
          <h2 style={{ fontSize: 36, color: '#fff', letterSpacing: '-0.025em', marginBottom: 14 }}>
            还在比较套餐?<br/>让我们的方案专家帮你选
          </h2>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6, maxWidth: 480 }}>
            30 分钟一对一咨询 — 按你的团队规模、业务线、合规要求给出推荐组合,含定制报价。
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="btn btn-lg" style={{ width: '100%', justifyContent: 'center', background: '#fff', color: '#001E3C', fontWeight: 600 }}>
            预约方案咨询 <Icon name="arrow" size={14}/>
          </button>
          <button className="btn btn-lg" style={{ width: '100%', justifyContent: 'center', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff' }}>
            查看 API 文档
          </button>
        </div>
      </div>
    </div>
  </section>
);

// ───────────────── Main Hub ─────────────────
const PricingHub = () => {
  const [active, setActive] = React.useState(() => {
    if (typeof window !== 'undefined') {
      const h = window.location.hash.replace('#', '');
      if (['overview', 'rates', 'foresight', 'prospect', 'bundles', 'addons'].includes(h)) return h;
    }
    return 'overview';
  });
  const [period, setPeriod] = React.useState('monthly');

  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      window.history.replaceState(null, '', '#' + active);
      window.scrollTo({ top: window.scrollY > 600 ? 360 : 0, behavior: 'smooth' });
    }
  }, [active]);

  return (
    <>
      <PricingHero period={period} setPeriod={setPeriod}/>
      <div className="ph-layout">
        <PricingSider active={active} setActive={setActive}/>
        <main>
          {active === 'overview'  && <OverviewPanel setActive={setActive}/>}
          {active === 'rates'     && <RatesPanel period={period}/>}
          {active === 'foresight' && <ForesightPanel period={period}/>}
          {active === 'prospect'  && <ProspectPanel/>}
          {active === 'bundles'   && <BundlesPanel/>}
          {active === 'addons'    && <AddOnsPanel/>}
        </main>
      </div>
      <PricingFAQ/>
      <PricingCTA/>
    </>
  );
};

Object.assign(window, {
  PricingHub, PricingHero, PricingSider,
  OverviewPanel, RatesPanel, ForesightPanel, ProspectPanel, BundlesPanel, AddOnsPanel,
  PricingFAQ, PricingCTA,
});