/* global React, Icon */

// ═══════════════════════════════════════════════════════════════
// Features grid · Integrations · Pricing · FAQ · Footer
// ═══════════════════════════════════════════════════════════════

const FeaturesGrid = () => {
  const features = [
    { i:'bolt',    t:'毫秒级比价',      d:'上百个数据源并发拉取,结果聚合返回 < 400ms,销售报价永远比竞争对手快一步。', c:'#1677FF' },
    { i:'radar',   t:'舱位监控与告警',  d:'盯紧放舱动态,微信 / 邮件 / 企业微信 / 钉钉 / 自定义 Webhook 多通道推送。', c:'#00D4AA' },
    { i:'shield',  t:'熔断与风控',      d:'超预算自动停止、竞争过热自动退出、异常报价人工复核。不会让机器把钱跑光。', c:'#FF5A4E' },
    { i:'users',   t:'多人协作 · 权限', d:'销售 / 订舱 / 财务 / 审批多角色,按航线 / 客户 / 金额分级,所有操作留痕可审计。', c:'#7C5CFF' },
    { i:'doc',     t:'一键报价单',       d:'自动生成 PDF / Excel / 客户公众号 H5 链接,品牌头尾、条款、汇率全部可配。', c:'#FFB020' },
    { i:'plug',    t:'深度集成',         d:'对接 SAP、Kingdee、用友、自研 TMS;开放 REST + Webhook + SDK。', c:'#0A0F1C' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="feature-num">04 · 核心能力</span>
          <h2 className="display-2" style={{ margin: '12px 0' }}>不只是报价表,<br/>是完整的运价操作系统</h2>
          <p className="lead" style={{ margin: '0 auto' }}>
            六大核心能力,覆盖从询价、比价、抢单、报价单到对账复盘的完整业务闭环。
          </p>
        </div>
        <div className="grid grid-3">
          {features.map(f => (
            <div key={f.t} className="card card-hov" style={{ padding: 24 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: `${f.c}14`, color: f.c,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16,
              }}>
                <Icon name={f.i} size={20}/>
              </div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>{f.t}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.6 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Integrations = () => {
  const logos = [
    'SAP', 'Oracle', 'Kingdee', '用友 YonYou', 'SF TMS', 'Flexport API',
    'Maersk API', 'CMA CGM', 'COSCO', 'ONE', 'HMM', 'Evergreen',
    '企业微信', '钉钉', '飞书', 'Zapier', 'Slack', 'Webhook',
  ];
  return (
    <section className="section" id="integrations" style={{ background: 'var(--surface-2)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="feature-num">05 · 深度集成</span>
            <h2 className="display-3" style={{ marginTop: 6, marginBottom: 12 }}>接入你现有的系统,<br/>而不是替换它们</h2>
            <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.6, marginBottom: 20 }}>
              Rates 被设计为贴合你的工作流,而非重塑它。支持 100+ 船公司 API、
              主流 ERP/TMS/CRM,以及企业协作工具。
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="btn btn-primary">API 文档 <Icon name="arrow" size={14}/></button>
              <button className="btn btn-ghost">预约集成咨询</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
            {logos.map((l, i) => (
              <div key={l} style={{
                aspectRatio: '1.4 / 1',
                background: 'var(--surface)',
                border: '1px solid var(--line)',
                borderRadius: 10,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
                letterSpacing: '-0.01em', textAlign: 'center', padding: 6,
                transition: 'all 0.2s',
                cursor: 'default',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--brand)'; e.currentTarget.style.color = 'var(--brand)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.color = 'var(--ink-3)'; }}>
                {l}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Pricing = () => {
  const tiers = [
    {
      name:'Starter', price:'¥ 0', unit:'/ 月', desc:'适合 1–3 人团队、单一业务线试水', cta:'免费开始',
      feats:['5 个监控航线','每日 200 次询价','基础运价表','邮件告警','社区支持'],
    },
    {
      name:'Growth',  price:'¥ 2,880', unit:'/ 月', desc:'适合 5–20 人货代 / 船代团队', cta:'开始 14 天试用', popular: true,
      feats:['50 个监控航线','无限次询价','全部运价来源','抢舱订舱引擎','多用户 + 权限','API 3000 次/日','专属客户经理'],
    },
    {
      name:'Enterprise', price:'定制', unit:'', desc:'适合 50+ 人大型货代 / 供应链团队', cta:'联系销售',
      feats:['无限航线 + 私有部署','无限 API 调用','自定义策略引擎','SSO + 审计日志','SLA 99.95%','7×24 专属支持','开发者 IDE 插件'],
    },
  ];
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="feature-num">06 · 定价</span>
          <h2 className="display-2" style={{ margin: '12px 0' }}>按团队规模订阅,<br/>按价值扩展</h2>
          <p className="lead" style={{ margin: '0 auto' }}>
            14 天免费试用,全功能解锁,无需信用卡。随业务增长升级,随时降级退订。
          </p>
        </div>
        <div className="grid grid-3">
          {tiers.map(t => (
            <div key={t.name} className={`price-tier ${t.popular ? 'popular' : ''}`}>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{t.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-4)', marginBottom: 18 }}>{t.desc}</div>
              <div style={{ marginBottom: 24 }}>
                <span className="mono" style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.03em' }}>{t.price}</span>
                <span style={{ fontSize: 14, color: 'var(--ink-4)', marginLeft: 4 }}>{t.unit}</span>
              </div>
              <button className={`btn ${t.popular ? 'btn-brand' : 'btn-ghost'}`} style={{ width: '100%', justifyContent: 'center', marginBottom: 24 }}>
                {t.cta}
              </button>
              <div style={{ borderTop: '1px solid var(--line)', paddingTop: 16 }}>
                {t.feats.map(f => (
                  <div key={f} style={{ display: 'flex', gap: 10, fontSize: 13, padding: '5px 0' }}>
                    <span style={{ color: t.popular ? 'var(--brand)' : '#00D4AA', flexShrink: 0 }}>
                      <Icon name="check" size={14} stroke={2}/>
                    </span>
                    <span style={{ color: 'var(--ink-2)' }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const qs = [
    { q:'Soptallkinds 的运价数据来源可靠吗?', a:'我们直连 14 家主流船公司 API、聚合 42 家头部货代,并通过多源交叉验证确保数据一致性。历史报价可追溯、可审计。' },
    { q:'抢舱订舱会不会有风控风险?',   a:'内置预算熔断、竞争熔断、异常报价自动拦截。你可以随时用一键 Kill Switch 停止所有任务。' },
    { q:'我可以和 Foresight、Prospect 一起使用吗?', a:'可以。三款产品共享同一账号,数据互通。购买 Rates 套餐可叠加购买 Foresight AI 预测与 Prospect 拓客模块。' },
    { q:'是否支持私有化部署?', a:'Enterprise 套餐支持阿里云 / 华为云 / 腾讯云私有部署,以及本地机房部署。提供专属 SLA 与 7×24 支持。' },
    { q:'试用期结束会自动扣费吗?', a:'不会。14 天试用到期后会切换为只读模式,除非你主动选择付费升级,我们不会自动扣费。' },
    { q:'数据是否加密?谁能访问我的询价记录?', a:'全链路 TLS 加密 + 静态 AES-256 加密。基于 RBAC 权限控制,管理员可审计每一次查询与订舱。通过 ISO 27001 与 SOC 2 Type II 认证。' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" style={{ background: 'var(--surface-2)' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="feature-num">07 · 常见问题</span>
          <h2 className="display-2" style={{ margin: '12px 0' }}>你可能想知道</h2>
        </div>
        <div>
          {qs.map((x, i) => (
            <div key={i} className="card" style={{ marginBottom: 10, padding: 0, overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '18px 22px', background: 'transparent', border: 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                fontSize: 15, fontWeight: 500, color: 'var(--ink-1)', cursor: 'pointer', textAlign: 'left',
              }}>
                <span>{x.q}</span>
                <span style={{ transition: 'transform 0.2s', transform: open === i ? 'rotate(180deg)' : 'none' }}>
                  <Icon name="arrowDown" size={14} stroke={2}/>
                </span>
              </button>
              {open === i && (
                <div style={{ padding: '0 22px 20px', fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.6 }}>
                  {x.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const RatesPage3LegacyCTA = () => (
  <section style={{ padding: '96px 0' }}>
    <div className="container">
      <div style={{
        position: 'relative', overflow: 'hidden',
        padding: '64px 56px', borderRadius: 28,
        background: 'linear-gradient(135deg, #001E3C 0%, #0A2A5C 50%, #1677FF 130%)',
        color: '#fff',
      }}>
        <div style={{
          position:'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
          backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(0,212,170,0.3) 0%, transparent 40%), radial-gradient(circle at 20% 80%, rgba(79,163,255,0.35) 0%, transparent 40%)',
        }}/>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <h2 className="display-2" style={{ color: '#fff', marginBottom: 12 }}>
              把一周的询价,<br/>压缩到一杯咖啡。
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.75)', maxWidth: 560 }}>
              14 天免费试用 · 全功能解锁 · 无需信用卡。加入 1,200+ 货代团队,让数据替你工作。
            </p>
          </div>
          <div style={{ display:'flex', flexDirection: 'column', gap: 10, alignItems:'flex-start' }}>
            <button className="btn btn-lg" style={{ background: '#fff', color: '#001E3C', width: '100%', justifyContent: 'center', 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.25)', color: '#fff' }}>
              预约专属演示
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const RatesPage3LegacyFooter = () => {
  const cols = [
    { t: '产品', l: ['实时运价', '抢舱订舱', '趋势分析', '多人协作', '报价单', 'API'] },
    { t: '其他产品线', l: ['FreightIQ 官网 ↗', 'Foresight AI ↗', 'Prospect 拓客 ↗', 'AgenticX 平台 ↗'] },
    { t: '资源', l: ['文档', 'API 参考', '更新日志', '状态页', 'Webinar', '客户故事'] },
    { t: '关于',  l: ['公司介绍', '招聘', '联系销售', '合作伙伴', '媒体资源'] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)', gap: 32, marginBottom: 48 }}>
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <span className="logo-mark"/>
              FreightIQ <span style={{ color: 'var(--brand)' }}>Rates</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-4)', maxWidth: 300 }}>
              全球运价聚合与抢舱订舱。FreightIQ 产品矩阵中的运价业务线。
            </p>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-5)', marginTop: 16 }}>
              rates.freightiq.ai
            </div>
          </div>
          {cols.map(c => (
            <div key={c.t}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, color: 'var(--ink-2)' }}>{c.t}</div>
              {c.l.map(x => <a key={x} href="#">{x}</a>)}
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 28, borderTop: '1px solid var(--line)', display: 'flex', justifyContent:'space-between', fontSize: 12, color: 'var(--ink-4)', flexWrap:'wrap', gap: 12 }}>
          <span>© 2026 FreightIQ Technologies. 保留所有权利.</span>
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
            备案编号：津ICP备2023005990号-2
          </a>
          <span style={{ display:'flex', gap: 16 }}>
            <a href="#">隐私</a><a href="#">条款</a><a href="#">Cookie</a><a href="#">安全</a>
            <a href="/" style={{ color: 'var(--brand)', fontWeight: 500 }}>← 返回 FreightIQ 官网</a>
          </span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Integrations, Pricing, FAQ });