/* global React, Icon, Sparkline */

// Lightweight i18n bridge for the restored static design pages under public/design.
// The Next.js site and these static pages share the same localStorage key.
const STATIC_LANG_STORAGE_KEY = 'fiq-lang';
const STATIC_DEFAULT_LANG = 'zh-CN';
const STATIC_SUPPORTED_LANGS = ['zh-CN', 'en'];
const staticNormalizeLang = (code) => STATIC_SUPPORTED_LANGS.includes(code) ? code : STATIC_DEFAULT_LANG;
const staticNormalizeText = (value) => String(value || '').replace(/\s+/g, ' ').trim();
var FIQ_APP_LINKS = window.FIQ_APP_LINKS || (window.FIQ_APP_LINKS = (() => {
  const hostname = window.location.hostname;
  const base = (hostname === '127.0.0.1' || hostname === 'localhost' || hostname === '::1')
    ? 'http://127.0.0.1:3000'
    : (hostname === 'test.tradedata-ai.com' || hostname.indexOf('test.') === 0)
      ? 'https://test.app.tradedata-ai.com'
      : 'https://app.tradedata-ai.com';
  return {
    home: base,
    leads: `${base}/leads/dashboard`,
    rates: `${base}/rates`,
    foresight: `${base}/foresight`,
    prospect: `${base}/leads/dashboard`,
    login: `${base}/login`
  };
})());

const STATIC_I18N_TEXT = {
  en: {
    '企业客户': 'Enterprise customers',
    '数据源': 'Data sources',
    '监控航线': 'Monitored lanes',
    '预测准确率': 'Forecast accuracy',
    '客户故事': 'Customer stories',
    '来自 1,200+ 团队的真实反馈': 'Real feedback from 1,200+ teams',
    '原本 3 位销售每天花 6 小时询价,现在 1 人 1 小时,订单毛利提升 2.4 个百分点。': 'Three sales reps used to spend six hours a day checking rates. Now one person finishes in an hour, and order margin is up 2.4 points.',
    '张经理 · COSCO 华南区销售总监': 'Manager Zhang · Sales Director, COSCO South China',
    '把 AIS、港口、燃油、舆情一张图看完,以前要 5 个分析师,现在 Foresight 替我们做。': 'AIS, ports, fuel, and market sentiment now come together in one view. Work that used to need five analysts is handled by Foresight.',
    'Chen Li · MAERSK 东北亚数据分析主管': 'Chen Li · Data Analytics Lead, MAERSK Northeast Asia',
    '抢单策略跑通第一周就锁定了 480 个柜,比过去一个月还多。': 'The booking strategy locked 480 containers in its first week, more than the previous full month.',
    '李总 · 顺丰国际 海运部负责人': 'Li · Head of Ocean Freight, SF Express International',
    '把运价、舱位、数据,': 'Hand rates, capacity, and data',
    '交给 FreightIQ。': 'to FreightIQ.',
    '14 天免费,全功能解锁。无需信用卡,无需对接,无需改造现有系统。': 'Start free for 14 days with every feature unlocked. No credit card, no integration project, no changes to your existing systems.',
    '免费开始': 'Start free',
    '预约解决方案专家': 'Talk to a solution expert',
    '产品': 'Products',
    '解决方案': 'Solutions',
    '资源': 'Resources',
    '定价': 'Pricing',
    '预约': 'Book a',
    '方案 Demo': 'solution demo',
    '产品矩阵': 'Product matrix',
    '平台与资源': 'Platform and resources',
    '即将推出': 'Coming soon',
    '一个账号 · 全线通用 · 数据互通': 'One account · all products · connected data',
    '查看全部产品': 'View all products',
    '全球运价与物流数据的智能中枢。 为货代、船公司、跨境团队而建。': 'The intelligence hub for global freight rates and logistics data. Built for forwarders, carriers, and cross-border teams.',
    '中文': 'Chinese',
    '产品': 'Products',
    'AgenticX 平台': 'AgenticX platform',
    '开放 API': 'Open API',
    '定价方案': 'Pricing plans',
    '货代': 'Forwarders',
    '船公司': 'Carriers',
    '跨境电商': 'Cross-border e-commerce',
    '制造出口': 'Manufacturing exporters',
    '制造业出口': 'Manufacturing exporters',
    '供应链团队': 'Supply chain teams',
    '文档': 'Docs',
    'API 参考': 'API reference',
    '博客': 'Blog',
    'Webinar': 'Webinars',
    '公司': 'Company',
    '关于我们': 'About',
    '招聘': 'Careers',
    '合作伙伴': 'Partners',
    '联系销售': 'Contact sales',
    '媒体资源': 'Press kit',
    '© 2026 FreightIQ Technologies. 保留所有权利.': '© 2026 FreightIQ Technologies. All rights reserved.',
    '备案编号：': 'ICP filing: ',
    '隐私': 'Privacy',
    '条款': 'Terms',
    '安全': 'Security',
    '运价聚合 · 抢舱订舱 · 运营 BI': 'Rate aggregation · booking engine · operations BI',
    'AI 多源数据情报': 'AI multi-source intelligence',
    'AI 航运拓客平台': 'AI shipping prospecting',
    '运价业务': 'Rate operations',
    '数据 AI': 'Data AI',
    '拓客增长': 'Growth',
    '实时运价聚合': 'Real-time rate aggregation',
    '抢舱订舱引擎': 'Capacity booking engine',
    '运营 BI 看板': 'Operations BI dashboards',
    '62+ 数据源接入': '62+ data sources',
    '运价/船期预测': 'Rate and schedule forecasts',
    '风险与异常告警': 'Risk and anomaly alerts',
    '航运企业数据库': 'Shipping company database',
    'AI 线索评分': 'AI lead scoring',
    '自动触达序列': 'Automated outreach sequences',
    '新': 'New',
    '数据底座': 'Data foundation',
    '对接 SAP / Kingdee / 自研 TMS': 'Connect SAP / Kingdee / custom TMS',
    '跨产品的智能体运行时': 'Agent runtime across products',
    '62+ 实时数据源目录': '62+ real-time data source catalog',
    'Language / 语言': 'Language',
    '切换语言': 'Switch language',

    '解决方案 — FreightIQ': 'Solutions — FreightIQ',
    '5 个行业,': '5 industries,',
    '5 套打法。': '5 playbooks.',
    '货代、船公司、跨境电商、制造业、供应链团队 — 不同岗位用 FreightIQ 的方式不一样。下面是按行业整理的真实部署。': 'Forwarders, carriers, cross-border e-commerce, manufacturers, and supply chain teams use FreightIQ in different ways. Here are real deployments organized by industry.',
    '行业': 'Industry',
    '· 行业': '· Industry',
    '01 · 行业': '01 · Industry',
    '02 · 行业': '02 · Industry',
    '03 · 行业': '03 · Industry',
    '04 · 行业': '04 · Industry',
    '05 · 行业': '05 · Industry',
    '货代 / Freight Forwarder': 'Freight Forwarder',
    '船公司 / Carrier': 'Carrier',
    '跨境电商 / Cross-border E-commerce': 'Cross-border E-commerce',
    '制造业出口 / Manufacturer Export': 'Manufacturer Export',
    '供应链团队 / Supply Chain Team': 'Supply Chain Team',
    '现状痛点': 'Current pain points',
    'FreightIQ 怎么解': 'How FreightIQ helps',
    '20+ 船公司询价靠人工,旺季每天 6 小时': '20+ carrier quote checks are still manual, taking six hours a day in peak season',
    '订舱抢不到 / 抢错价 / 老客户跑单': 'Teams miss capacity, lock the wrong price, or lose recurring customers',
    '毛利 / 客户 / 销售看不清,凭感觉调价': 'Margin, customer, and sales visibility is weak, so pricing depends on instinct',
    '把 50+ 船公司运价、舱位、订舱接口聚合到一个工作台,加上 AI 抢单与策略库,加上一套销售 / 客户 / 毛利 BI 看板。': 'Aggregate 50+ carrier rates, capacity, and booking interfaces into one workspace, then add AI booking strategies and sales, customer, and margin BI.',
    'Rates · 实时运价': 'Rates · Real-time rates',
    'Rates · 抢舱订舱': 'Rates · Capacity booking',
    'Rates · 运营 BI': 'Rates · Operations BI',
    '原本 3 位销售每天 6 小时询价,现在 1 人 1 小时,订单毛利 +2.4%。': 'Three sales reps used to spend six hours a day checking rates. Now one person finishes in an hour, and order margin is up 2.4%.',
    '询价时间': 'Quote time',
    '订单毛利': 'Order margin',
    '抢单/月': 'Bookings/month',
    '运价、舱位、燃油、舆情数据散在不同系统': 'Rate, capacity, fuel, and sentiment data are scattered across systems',
    '航线 / 港口 / 风险信号分析依赖外部分析师': 'Lane, port, and risk analysis depends on external analysts',
    '内部 BI 报表周期长 (T+7),无法支撑实时调价': 'Internal BI is slow (T+7) and cannot support real-time repricing',
    'Foresight 一图整合 AIS、运价指数、海关、燃油、新闻情报与气候数据,提供运价预测、风险预警、SRI 结构性风险指数。': 'Foresight combines AIS, freight indexes, customs, fuel, news, and climate data into one intelligence map with forecasts, alerts, and the SRI risk index.',
    'Foresight · 智能问答': 'Foresight · Ask',
    'Foresight · 数据洞察': 'Foresight · Insights',
    'Foresight · 智能预警': 'Foresight · Alerts',
    '人工分析师': 'Analysts',
    '预警提前': 'Earlier alerts',
    '预测准确': 'Forecast accuracy',
    '黑五 / 旺季舱位/价格剧烈波动,补货节奏踩不准': 'Black Friday and peak-season capacity and price swings make replenishment hard to plan',
    '物流费占毛利 8–15%,缺乏单 SKU 物流成本核算': 'Logistics costs take 8-15% of margin without SKU-level cost accounting',
    '多 3PL / 货代报价不透明,无法快速比对': '3PL and forwarder quotes are opaque and hard to compare quickly',
    'Rates 比价 + Foresight 趋势预测 + Prospect 拓客组合,从选品 → 询价 → 出货 → 补货 全链路给数据。': 'Combine Rates comparison, Foresight forecasting, and Prospect growth data across selection, quoting, shipping, and replenishment.',
    'Foresight · 趋势分析': 'Foresight · Trend analytics',
    '把舱位预测和补货节奏挂上 Foresight,我们 Q4 备货节省了 12% 物流支出。': 'By connecting capacity forecasts with replenishment planning in Foresight, we cut Q4 logistics spend by 12%.',
    '王总 · 某 DTC 品牌创始人': 'Wang · Founder of a DTC brand',
    '物流支出': 'Logistics spend',
    '滞港': 'Port delays',
    '准时交付': 'On-time delivery',
    '业务部门询价多,合同价 / 现货价对不上账': 'Business teams quote often, but contract and spot prices do not reconcile',
    'L/C 与提单时效要求苛刻,船期变动手忙脚乱': 'L/C and bill-of-lading timelines are strict, while schedule changes cause firefighting',
    'CFO 需要按合同 / 客户 / 项目核算物流成本': 'CFOs need logistics costs by contract, customer, and project',
    'Rates 合同管理 + Foresight 船期/到港预警 + 与 SAP / Kingdee / 自研 ERP 双向同步,把物流费用入账自动化。': 'Use Rates contract management, Foresight schedule and arrival alerts, and two-way SAP, Kingdee, or ERP sync to automate logistics cost posting.',
    'Rates · 合同与现货': 'Rates · Contract and spot',
    'Foresight · 船期预警': 'Foresight · Schedule alerts',
    'API · ERP 集成': 'API · ERP integration',
    '从询价到合同入账的链路从 5 个系统 / 12 步压到一个看板 / 3 步。': 'The quote-to-contract-accounting flow went from five systems and 12 steps to one dashboard and three steps.',
    '李 CFO · 某汽车零部件出口企业': 'Li, CFO · Auto parts exporter',
    '财务对账': 'Finance reconciliation',
    '提单延迟': 'B/L delay',
    '编制释放': 'Headcount released',
    '海运 / 空运 / 卡车多模态成本无法横向比对': 'Ocean, air, and trucking costs cannot be compared side by side',
    '风险监控全靠新闻 + 微信群,信号滞后': 'Risk monitoring depends on news and chat groups, so signals arrive late',
    '应急预案没有数据支撑,只能凭经验': 'Contingency planning lacks data and relies on experience',
    'Foresight 全模态数据汇总 + 智能预警 + 抢单工作台联动,真正做到"看到信号就有动作"。': 'Foresight brings multimodal data, intelligent alerts, and the booking workspace together so signals can trigger action.',
    'Rates · 抢舱工作台': 'Rates · Booking workspace',
    '红海事件爆发当天,Foresight 比我们的舆情群快了 3 小时,我们抢回了 14 个柜的舱位。': 'When the Red Sea incident broke out, Foresight was three hours ahead of our market chat groups and helped us win back 14 containers of space.',
    '某 500 强供应链总监': 'Supply Chain Director, Fortune 500 company',
    '信号提前': 'Earlier signal',
    '抢回': 'Recovered',
    '风险损失': 'Risk loss',
    '查看完整客户案例': 'View full customer stories',

    '博客 & 资源 — FreightIQ': 'Blog & Resources — FreightIQ',
    '博客 & 资源': 'Blog & resources',
    'FreightIQ 怎么想,': 'How FreightIQ thinks,',
    'FreightIQ 怎么做。': 'and how FreightIQ builds.',
    '产品发布 / 客户故事 / 行业洞察 / 工程实践 / Webinar 直播 — 一个地方更新。': 'Product updates, customer stories, industry insights, engineering notes, and webinars in one place.',
    '产品发布': 'Product update',
    '行业洞察': 'Industry insight',
    '工程实践': 'Engineering',
    '客户故事': 'Customer stories',
    'AI / 模型': 'AI / Models',
    '6 分钟': '6 min read',
    '5 分钟': '5 min read',
    '8 分钟': '8 min read',
    '4 分钟': '4 min read',
    '7 分钟': '7 min read',
    '3 分钟': '3 min read',
    'FreightIQ Foresight 2.0 发布:把 AIS、运价、舆情、燃油融为一个 SRI': 'FreightIQ Foresight 2.0: bringing AIS, rates, sentiment, and fuel into one SRI',
    '过去半年我们与 28 家船公司 + 6 个港口运营商一起验证了一个想法 — 物流行业需要一个像 VIX 之于股市那样的实时风险指数。': 'Over the past six months, we validated one idea with 28 carriers and six port operators: logistics needs a real-time risk index like the VIX for equities.',
    '精选': 'Featured',
    '阅读全文': 'Read more',
    '最新文章': 'Latest articles',
    '全部': 'All',
    '红海危机第 18 个月:航线、运价、保费的连锁反应': 'The Red Sea crisis after 18 months: lanes, rates, and insurance chain reactions',
    '从 5 分钟刷新到 12 秒推送:运价数据流的重构之路': 'From five-minute refreshes to 12-second pushes: rebuilding the rate data stream',
    'COSCO 华南:用 Rates 把销售人效提升 6 倍的细节': 'COSCO South China: how Rates lifted sales productivity by 6x',
    'SCFI 预测准确率 94.3%:我们做对了什么,还有什么没做对': 'SCFI forecast accuracy at 94.3%: what worked and what still needs work',
    '抢舱工作台 1.5:策略库 + 多账号池 + 风险熔断': 'Booking Workspace 1.5: strategy library, account pools, and risk circuit breakers',
    '中欧班列 2026:数据告诉我们的三件事': 'China-Europe rail in 2026: three things the data tells us',
    '加载更多': 'Load more',
    '即将举办的直播': 'Upcoming webinars',
    '线上 1 小时,讲一个具体场景,带演示和问答。免费报名,回放 24 小时上线。': 'One focused online hour with demo and Q&A. Free registration, replay available within 24 hours.',
    'Foresight 2.0 实战:从 SRI 到智能预警': 'Foresight 2.0 in practice: from SRI to intelligent alerts',
    '货代抢舱工作台:策略库设计 6 招': 'Forwarder booking workspace: six strategy-library patterns',
    '立即报名': 'Register now',
    '每两周一封,只发干货': 'One useful email every two weeks',
    '产品发布 · 行业洞察 · Webinar 提醒。已有 8,400+ 物流从业者订阅。随时退订。': 'Product updates, industry insights, and webinar reminders. Joined by 8,400+ logistics professionals. Unsubscribe anytime.',
    '已订阅,首封将在周一发到': 'Subscribed. The first issue will arrive Monday at',
    '订阅': 'Subscribe',

    '定价 — FreightIQ 全集': 'Pricing — FreightIQ Suite',
    '全集定价': 'Suite pricing',
    '一个账号,': 'One account,',
    '覆盖运价 / 情报 / 拓客全链路': 'covering rates, intelligence, and growth',
    '三款产品独立定价、可单独订阅,也可打包享 -34% 优惠。 所有套餐共享同一身份与组织,数据互通,跨产品工作流即装即用。': 'Three products are priced independently and can be subscribed to separately, or bundled for up to 34% off. Every plan shares the same identity, organization, connected data, and cross-product workflows.',
    '月付': 'Monthly',
    '年付': 'Annual',
    '省 20%': 'Save 20%',
    '概览': 'Overview',
    '全部产品对照': 'All product comparison',
    '运价': 'Rates',
    '即将': 'Coming ',
    '全集捆绑': 'Suite bundles',
    '加购': 'Add-ons',
    '数据源 / 实施': 'Data sources / services',
    '需要帮助选择套餐?': 'Need help choosing a plan?',
    '预约 30 分钟方案咨询 — 我们按你的团队规模、业务线、合规要求为你推荐组合。': 'Book a 30-minute consultation. We will recommend a package based on team size, business lines, and compliance needs. ',
    '三款产品,各自独立成型': 'Three complete products, each useful on its own',
    '每款产品都能独立买、独立用,也能打通 — 看下面快照,然后从左侧切换到具体产品看完整套餐。': 'Each product can be purchased and used independently, or connected together. Review the snapshot, then switch on the left for full packages.',
    '/ 月起': '/ mo',
    '实时运价聚合 · 100+ 数据源': 'Real-time rate aggregation · 100+ sources',
    '抢舱订舱引擎 · 风控熔断': 'Capacity booking engine · risk circuit breakers',
    '运营 BI · 毛利 / KPI / 客户洞察': 'Operations BI · margin, KPI, and customer insights',
    '查看 Rates 完整定价': 'View full Rates pricing',
    '查看完整定价': 'View full pricing',
    'AI 多源数据情报 + 预警': 'AI multi-source intelligence + alerts',
    'Ask 智能问答 · AgenticX 4 Agents': 'Ask intelligence · AgenticX 4 agents',
    'SRI 风险指数 · 智能预警': 'SRI risk index · intelligent alerts',
    'MCP Tools · BI 连接器 · 6 渠道': 'MCP tools · BI connectors · 6 channels',
    '查看 Foresight 完整定价': 'View full Foresight pricing',
    '上线': 'soon',
    '航运企业数据库 · 4M+ 公司': 'Shipping company database · 4M+ companies',
    'AI 线索评分 · 触达序列': 'AI lead scoring · outreach sequences',
    '与 Foresight 情报联动': 'Connected with Foresight intelligence',
    '加入候补名单': 'Join the waitlist',
    '14 天免费试用': '14-day free trial',
    '全功能解锁,无需信用卡': 'All features unlocked, no credit card',
    '一个账号 · 全产品': 'One account · all products',
    '组织级权限,数据互通': 'Organization permissions, connected data',
    '深度集成 100+ 系统': 'Deep integration with 100+ systems',
    'SAP / 用友 / TMS / Slack 等': 'SAP / Yonyou / TMS / Slack and more',
    'TLS 加密 + 行级隔离': 'TLS encryption + row-level isolation',
    'FreightIQ Rates · 按团队规模订阅': 'FreightIQ Rates · subscription by team size',
    '14 天免费试用,全功能解锁。3 阶套餐覆盖从单兵销售到大型货代团队的完整场景,随业务增长升级,随时降级退订。': 'Try every feature free for 14 days. Three tiers cover solo sales users through large forwarder teams, with easy upgrades or downgrades.',
    '适合 1–3 人团队、单一业务线试水': 'For 1-3 person teams testing one business line',
    '适合 5–20 人货代 / 船代团队': 'For 5-20 person forwarder or agent teams',
    '适合 50+ 人大型货代 / 供应链团队': 'For 50+ person forwarder or supply chain teams',
    '开始 14 天试用': 'Start 14-day trial',
    '联系销售': 'Contact sales',
    '5 个监控航线': '5 monitored lanes',
    '每日 200 次询价': '200 rate queries/day',
    '基础运价表': 'Basic rate table',
    '邮件告警': 'Email alerts',
    '社区支持': 'Community support',
    '50 个监控航线': '50 monitored lanes',
    '无限次询价': 'Unlimited rate queries',
    '全部运价来源': 'All rate sources',
    '抢舱订舱引擎': 'Capacity booking engine',
    '多用户 + 权限': 'Multi-user permissions',
    'API 3,000 次 / 日': '3,000 API calls/day',
    '专属客户经理': 'Dedicated customer manager',
    '无限航线 + 私有部署': 'Unlimited lanes + private deployment',
    '无限 API 调用': 'Unlimited API calls',
    '自定义策略引擎': 'Custom strategy engine',
    'SSO + 审计日志': 'SSO + audit logs',
    '7×24 专属支持': '24/7 dedicated support',
    '开发者 IDE 插件': 'Developer IDE plugin',
    '定制': 'Custom',
    '/ 月': '/ mo',
    '按需定制 · 起步 12 个月': 'Custom plan · 12-month minimum',
    '永久免费 · 无需信用卡': 'Free forever · no credit card',
    '永久免费': 'Free forever',
    '月付 · 随时取消': 'Monthly · cancel anytime',
    '每月包含': 'Included monthly',
    '计费说明': 'Billing notes',
    'Rates 按席位 + 询价配额计费 · 年付为期 12 个月,享 -20% 折扣,中途取消按月退款 · Enterprise 起步 12 个月,具体由销售协商': 'Rates is billed by seats plus query quota. Annual plans run 12 months with a 20% discount. Cancellations are refunded monthly. Enterprise starts at 12 months and is negotiated with sales.',
    '· Rates 按席位 + 询价配额计费 · 年付为期 12 个月,享 -20% 折扣,中途取消按月退款 · Enterprise 起步 12 个月,具体由销售协商': ' · Rates is billed by seats plus query quota. Annual plans run 12 months with a 20% discount. Cancellations are refunded monthly. Enterprise starts at 12 months and is negotiated with sales.',
    'FreightIQ Foresight · 按 credits 订阅': 'FreightIQ Foresight · subscription by credits',
    'credits 是统一计量单位 — 1 次问答 = 1,Agent 工时 = 3,预警触发 = 0.05。任何团队成员共享同一池,不再为 "谁多用了" 而打架。': 'Credits are the shared unit: one Ask = 1, one agent hour = 3, one alert trigger = 0.05. Everyone shares one pool, so usage stays transparent.',
    '试用核心能力,适合个人研究 / 评估期': 'Try core features for individual research or evaluation',
    '单人深度使用,适合分析师 / 研究员': 'Deep individual use for analysts and researchers',
    '团队级 — 含 MCP / 全渠道 / Webhook': 'Team tier with MCP, all channels, and webhooks',
    '企业级 — 私有部署 / SSO / RLS': 'Enterprise tier with private deployment, SSO, and RLS',
    '50 Ask 积分 / 月': '50 Ask credits/month',
    '1 Agent (Rate 单一)': '1 agent (Rate only)',
    'SRI 当前值 (无历史 / 无预警)': 'Current SRI only (no history or alerts)',
    '每周 1 份摘要报告': '1 weekly summary report',
    '500 Ask 积分 / 月': '500 Ask credits/month',
    'SRI 1 年历史 + 100 预警 / 月': '1 year SRI history + 100 alerts/month',
    '3 通知渠道': '3 notification channels',
    'BI 连接器二选一': 'Choose 1 BI connector',
    '2,500 Ask 积分 · 共享池': '2,500 shared Ask credits',
    '4 + 自定义 2 Agents': '4 agents + 2 custom agents',
    'SRI 5 年 + 1,000 预警 / 月': '5 years SRI + 1,000 alerts/month',
    '6 通知渠道 · 4 BI 连接器': '6 notification channels · 4 BI connectors',
    '无限 Ask 积分': 'Unlimited Ask credits',
    '专用模型微调': 'Dedicated model tuning',
    '高级数据源含 (任选 3)': 'Premium data sources included (choose 3)',
    'RLS 行级数据隔离': 'RLS row-level data isolation',
    'VPC 私有部署': 'VPC private deployment',
    'credits 公式': 'Credits formula',
    'Ask·1 + Agent·hr·3 + Alert·0.05 · Analyst / Desk 套餐月底未用 credits 滚存最多 2 个月,Explorer 不滚存 · 详细消耗追溯在账单页可看到每次 Ask / Agent 任务 / 预警触发': 'Ask x1 + agent hour x3 + alert x0.05. Unused credits in Analyst and Desk roll over up to two months; Explorer does not roll over. Usage details are visible on every Ask, agent task, and alert in billing.',
    '· Ask·1 + Agent·hr·3 + Alert·0.05 · Analyst / Desk 套餐月底未用 credits 滚存最多 2 个月,Explorer 不滚存 · 详细消耗追溯在账单页可看到每次 Ask / Agent 任务 / 预警触发': ' · Ask x1 + agent hour x3 + alert x0.05. Unused credits in Analyst and Desk roll over up to two months; Explorer does not roll over. Usage details are visible on every Ask, agent task, and alert in billing.',
    '即将上线 · 2026 Q3': 'Coming in 2026 Q3',
    'Prospect 子站正在路上': 'Prospect is on the way',
    'AI 航运拓客平台 — 把 Foresight 看到的贸易动向变成可执行的客户线索。 子站正在最后阶段打磨,可能直接接入既有 CRM (Apollo / Clay / 自研) 也可能独立成站,我们会以最贴合的方式上线。': 'The AI shipping prospecting product turns trade signals from Foresight into actionable customer leads. We are finishing the last details and may connect it directly to existing CRMs or launch it as a standalone product.',
    '已加入候补名单 — 上线时': 'You are on the waitlist. We will notify',
    '会收到通知': 'when it launches',
    '留个邮箱 — 上线第一时间通知你': 'Leave your email and get notified at launch',
    '加入候补': 'Join waitlist',
    '4M+ 全球货主 / 货代 / 制造业,实时贸易动态': '4M+ global shippers, forwarders, and manufacturers with live trade signals',
    '基于贸易行为 + Foresight 情报的优先级排序': 'Prioritization based on trade behavior and Foresight intelligence',
    '邮件 / LinkedIn / WhatsApp 多渠道节奏': 'Email, LinkedIn, and WhatsApp multichannel cadence',
    '拓客漏斗分析': 'Growth funnel analytics',
    '从线索到成单的转化率 BI · 与 Rates 联动': 'Lead-to-deal conversion BI connected with Rates',
    '预计上线': 'Expected launch',
    '计费模式': 'Billing model',
    '按席位 + 触达条数': 'Seats + outreach volume',
    'Beta 名额': 'Beta seats',
    '已开放 50 / 200': '50 / 200 open',
    '含整合': 'Includes integration',
    '与 Foresight 情报双向打通': 'Two-way connection with Foresight intelligence',
    '最受欢迎': 'Most popular',
    '增长场景': 'Growth scenario',
    '全集套餐': 'Full suite',
    '情报 + 决策一体化 — Foresight 看到风险即触发 Rates 策略调整,跨产品桥接零延迟。': 'Intelligence plus execution: Foresight risk signals can trigger Rates strategy changes with no cross-product delay.',
    '情报驱动的客户拓展 — Foresight 识别贸易动向,Prospect 把它变成精准客户线索。': 'Intelligence-led growth: Foresight identifies trade shifts and Prospect turns them into targeted leads.',
    '三款产品打通 — 数据 / 决策 / 增长共用同一身份与组织,跨产品工作流即装即用。': 'All three products connected: data, decisions, and growth share one identity and organization with ready cross-product workflows.',
    'Prospect 上线后激活': 'Activated when Prospect launches',
    '全集捆绑 · 一起买更省': 'Suite bundles · save more together',
    'FreightIQ 三款产品共用同一组织、同一身份、同一计费 — 捆绑订阅最高 -34%。Prospect 在上线后自动激活,期间已订阅捆绑套餐的客户优先开放 Beta。': 'FreightIQ products share one organization, identity, and billing model. Bundles save up to 34%. Prospect activates after launch, with beta priority for bundle customers.',
    '市场价合计': 'List price total',
    '捆绑节省': 'Bundle savings',
    '捆绑价 / 月': 'Bundle price / mo',
    '开始捆绑订阅': 'Start bundle subscription',
    '捆绑规则': 'Bundle rules',
    '捆绑套餐使用统一席位池 · 任意产品超额按对应单品的 add-on 价格计费 · 中途解绑可拆为单品订阅,差价按月退款 · Enterprise 客户可定制专属捆绑': 'Bundles use a shared seat pool. Product overages are billed by each product add-on. Unbundling splits the subscription and refunds the monthly difference. Enterprise bundles can be customized.',
    '· 捆绑套餐使用统一席位池 · 任意产品超额按对应单品的 add-on 价格计费 · 中途解绑可拆为单品订阅,差价按月退款 · Enterprise 客户可定制专属捆绑': ' · Bundles use a shared seat pool. Product overages are billed by each product add-on. Unbundling splits the subscription and refunds the monthly difference. Enterprise bundles can be customized.',
    '新闻情报': 'News intelligence',
    '燃油 / 能源': 'Fuel / Energy',
    '海关 / 贸易': 'Customs / Trade',
    '港口 / AIS': 'Ports / AIS',
    '运价指数': 'Rate indexes',
    '气候 / 自然': 'Climate / Nature',
    '专业服务': 'Professional services',
    '一次性': 'one-time',
    'Rates 实施服务': 'Rates implementation service',
    'Rates 团队培训': 'Rates team training',
    '航运业权威新闻 + 1,200+ 港口动态 + 制裁名单': 'Authoritative shipping news, 1,200+ port updates, and sanctions lists',
    '40+ 港口实时船燃价 + 月度展望': 'Real-time bunker prices for 40+ ports + monthly outlook',
    '美国 / 印度 / 巴西海关贸易记录 + 货主关联': 'US, India, and Brazil customs records + shipper matching',
    '历史轨迹 + 港口靠泊 / 离泊事件 + 船舶详情': 'Historical tracks, port arrival/departure events, and vessel details',
    '160K+ 真实合同运价 · 短期 + 长期市场基准': '160K+ real contract rates · short- and long-term benchmarks',
    '欧洲中期天气预报 9km 全球网格 · 10 天展望': 'ECMWF HRES 9km global grid · 10-day outlook',
    '集成 SAP / 用友 / 自研 TMS · 含 4 周专家辅导': 'SAP, Yonyou, or custom TMS integration with four weeks of expert coaching',
    '订舱 / 销售 / 财务三个角色的实操培训': 'Hands-on training for booking, sales, and finance roles',
    '加购数据源与实施服务': 'Add-on data sources and implementation services',
    '除标准套餐外,可单独订阅高级数据源(passthrough 直通价格,无加价)或专业服务。所有加购按月计,可独立退订。': 'Beyond standard plans, subscribe to premium data sources at pass-through pricing or add professional services. Add-ons are billed monthly and can be cancelled independently.',
    '编号': 'Code',
    '来源 / 服务': 'Source / service',
    '类型': 'Type',
    '归属': 'Product',
    '说明': 'Description',
    '单价': 'Unit price',
    'passthrough 说明': 'Pass-through notes',
    '数据源月费按供应商目录价直通,无加价 · 接入后 24h 内生效 · 可随时退订(按月按比例退款)· Enterprise 套餐可任选 3 项免费包含 · 实施 / 培训为一次性服务': 'Data source fees pass through at vendor list price with no markup, activate within 24 hours, and can be cancelled anytime with monthly prorated refunds. Enterprise plans include any three for free. Implementation and training are one-time services.',
    '· 数据源月费按供应商目录价直通,无加价 · 接入后 24h 内生效 · 可随时退订(按月按比例退款)· Enterprise 套餐可任选 3 项免费包含 · 实施 / 培训为一次性服务': ' · Data source fees pass through at vendor list price with no markup, activate within 24 hours, and can be cancelled anytime with monthly prorated refunds. Enterprise plans include any three for free. Implementation and training are one-time services.',
    '常见问题': 'FAQ',
    '你可能想知道': 'You may want to know',
    '我可以只买其中一款产品吗?': 'Can I buy only one product?',
    '可以。Rates / Foresight / (Prospect 上线后) 三款产品独立定价,可单独订阅。打通使用时无须重新买,只要在同一组织下添加产品即可。': 'Yes. Rates, Foresight, and Prospect are priced independently and can be subscribed to separately. To connect products, add them to the same organization.',
    'Rates 和 Foresight 的计费方式为什么不一样?': 'Why are Rates and Foresight billed differently?',
    'Rates 是高频操作工具,按席位 + 询价配额计费最贴近团队规模;Foresight 是情报与 AI 工具,按 credits (Ask + Agent + Alert) 计费让任何成员共享同一池。两套体系反映了产品的本质差异 — 一个看 "用了多少人",一个看 "消耗了多少智能"。': 'Rates is a high-frequency operations tool, so seats plus query quota matches team scale. Foresight is an intelligence and AI tool, so credits for Ask, agents, and alerts let everyone share one pool.',
    '14 天免费试用怎么算?': 'How does the 14-day free trial work?',
    '所有付费套餐均提供 14 天全功能试用,无需信用卡。试用到期后会自动切换为只读模式,不会自动扣费 — 只有你主动选择付费升级时才会开始计费。': 'All paid plans include a 14-day full-feature trial with no credit card. When the trial ends, the workspace becomes read-only and billing starts only after you choose to upgrade.',
    '年付和月付有什么区别?': 'What is the difference between annual and monthly?',
    '年付为期 12 个月,享 -20% 折扣。中途取消按月按比例退款。月付随时取消,但无折扣。Enterprise 套餐起步 12 个月,具体由销售协商。': 'Annual plans run 12 months with a 20% discount and monthly prorated refunds on cancellation. Monthly plans can be cancelled anytime. Enterprise starts at 12 months.',
    '捆绑套餐怎么计费?': 'How are bundles billed?',
    '捆绑套餐使用统一席位池 / credits 池,按整组合计费。任意单品超额按对应单品的 add-on 价格计费。中途解绑可拆为单品订阅,差价按月退款。': 'Bundles use one seat and credit pool and are billed as a package. Product overages use the relevant add-on price. Unbundling splits the plan and refunds the monthly difference.',
    '数据是否加密?谁能访问我的数据?': 'Is data encrypted? Who can access it?',
    '全链路 TLS 加密 + 静态 AES-256 加密。基于 RBAC 权限控制,管理员可审计每一次查询与订舱。已通过 SOC 2 Type II / ISO 27001 / GDPR 认证。Enterprise 套餐可选 RLS 行级隔离 + VPC 私有部署。': 'Data is protected with TLS in transit and AES-256 at rest. RBAC controls access, admins can audit every query and booking, and Enterprise can add RLS and VPC deployment.',
    '私有化部署支持哪些云?': 'Which clouds support private deployment?',
    'Enterprise 套餐支持 AWS / Azure / 阿里云 / 华为云 / 腾讯云 VPC 部署,以及本地机房部署。提供专属 SLA 99.95% 与 7×24 支持。': 'Enterprise supports AWS, Azure, Alibaba Cloud, Huawei Cloud, Tencent Cloud VPCs, and on-prem deployment with 99.95% SLA and 24/7 support.',
    '学术 / NGO 折扣?': 'Academic or NGO discounts?',
    '学术认证邮箱 (.edu / .ac.cn / .ac.uk) 在 Foresight Analyst 套餐上享受 50% 折扣 · 注册 NGO 在 Rates Growth 套餐上享受 40% 折扣,均需每年重新认证。': 'Verified academic emails receive 50% off Foresight Analyst. Registered NGOs receive 40% off Rates Growth. Verification renews annually.',
    '14 天试用 · 无需信用卡': '14-day trial · no credit card',
    '还在比较套餐?': 'Still comparing plans?',
    '让我们的方案专家帮你选': 'Let our solution expert help you choose',
    '30 分钟一对一咨询 — 按你的团队规模、业务线、合规要求给出推荐组合,含定制报价。': 'A 30-minute one-on-one consultation with recommendations based on team size, business lines, and compliance needs, including a custom quote.',
    '预约方案咨询': 'Book a consultation',
    '查看 API 文档': 'View API docs'
  }
};

const STATIC_I18N_PATTERNS = {
  en: [
    [/^产品矩阵 · (\d+) 条产品线$/, (_, count) => `Product matrix · ${count} product lines`],
    [/^预约 (.+) 方案 Demo$/, (_, industry) => `Book a ${staticTranslateText(industry, 'en')} solution demo`],
    [/^(\d+) · 行业$/, (_, idx) => `${idx} · Industry`],
    [/^备案编号：(.+)$/, (_, record) => `ICP filing: ${record}`],
    [/^([+−-]?\d+) 柜$/, (_, amount) => `${amount} containers`],
    [/^([+−-]?\d+) 名$/, (_, amount) => `${amount} people`],
    [/^([+−-]?\d+) 天$/, (_, amount) => `${amount} days`],
    [/^([+−-]?\d+) 小时$/, (_, amount) => `${amount} hours`],
    [/^(\d+) 分钟$/, (_, amount) => `${amount} minutes`],
    [/^年付 ¥(.+) · 立省 20%$/, (_, amount) => `Annual ¥${amount} · save 20%`],
    [/^年付 \$(.+) · 立省 20%$/, (_, amount) => `Annual $${amount} · save 20%`],
    [/^已加入候补名单 — 上线时 (.+) 会收到通知$/, (_, email) => `You are on the waitlist. We will notify ${email} at launch`],
    [/^已订阅,首封将在周一发到 (.+)$/, (_, email) => `Subscribed. The first issue will arrive Monday at ${email}`]
  ]
};

const STATIC_TEXT_ORIGINALS = new WeakMap();
const STATIC_TRANSLATABLE_ATTRS = ['title', 'placeholder', 'aria-label'];
let staticOriginalTitle = '';

function staticTranslateText(value, locale) {
  if (locale === STATIC_DEFAULT_LANG) return value;
  const key = staticNormalizeText(value);
  if (!key) return value;
  const dict = STATIC_I18N_TEXT[locale] || {};
  if (dict[key]) return dict[key];
  const patterns = STATIC_I18N_PATTERNS[locale] || [];
  for (const [pattern, replacer] of patterns) {
    const match = key.match(pattern);
    if (match) return replacer(...match);
  }
  return value;
}

function staticApplyText(node, locale) {
  if (!STATIC_TEXT_ORIGINALS.has(node)) STATIC_TEXT_ORIGINALS.set(node, node.nodeValue);
  const source = STATIC_TEXT_ORIGINALS.get(node) || '';
  const translated = staticTranslateText(source, locale);
  const leading = source.match(/^\s*/)?.[0] || '';
  const trailing = source.match(/\s*$/)?.[0] || '';
  node.nodeValue = locale === STATIC_DEFAULT_LANG ? source : `${leading}${translated}${trailing}`;
}

function staticApplyAttrs(el, locale) {
  STATIC_TRANSLATABLE_ATTRS.forEach((attr) => {
    if (!el.hasAttribute(attr)) return;
    const storeKey = `fiqI18n${attr.replace(/(^|-)([a-z])/g, (_, _dash, c) => c.toUpperCase())}`;
    if (!el.dataset[storeKey]) el.dataset[storeKey] = el.getAttribute(attr) || '';
    const source = el.dataset[storeKey] || '';
    el.setAttribute(attr, locale === STATIC_DEFAULT_LANG ? source : staticTranslateText(source, locale));
  });
}

function staticWalk(root, locale) {
  if (!root) return;
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
    acceptNode(node) {
      const parent = node.parentElement;
      if (!parent || ['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(parent.tagName)) return NodeFilter.FILTER_REJECT;
      if (parent.closest('[data-fiq-i18n-skip="true"]')) return NodeFilter.FILTER_REJECT;
      return staticNormalizeText(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    }
  });
  const nodes = [];
  while (walker.nextNode()) nodes.push(walker.currentNode);
  nodes.forEach((node) => staticApplyText(node, locale));
  if (root.nodeType === Node.ELEMENT_NODE) staticApplyAttrs(root, locale);
  root.querySelectorAll?.('*').forEach((el) => staticApplyAttrs(el, locale));
}

function staticApplyI18n(locale) {
  const lang = staticNormalizeLang(locale || localStorage.getItem(STATIC_LANG_STORAGE_KEY));
  document.documentElement.setAttribute('lang', lang);
  if (!staticOriginalTitle && document.title) staticOriginalTitle = document.title;
  if (staticOriginalTitle) document.title = lang === STATIC_DEFAULT_LANG ? staticOriginalTitle : staticTranslateText(staticOriginalTitle, lang);
  staticWalk(document.body, lang);
}

if (typeof window !== 'undefined') {
  let staticI18nFrame = 0;
  let staticI18nStarted = false;
  const scheduleStaticI18n = () => {
    cancelAnimationFrame(staticI18nFrame);
    staticI18nFrame = requestAnimationFrame(() => staticApplyI18n(window.FreightIQI18n.getLocale()));
  };
  window.FreightIQI18n = {
    getLocale() {
      return staticNormalizeLang(localStorage.getItem(STATIC_LANG_STORAGE_KEY));
    },
    setLocale(locale) {
      const lang = staticNormalizeLang(locale);
      localStorage.setItem(STATIC_LANG_STORAGE_KEY, lang);
      staticApplyI18n(lang);
      window.dispatchEvent(new CustomEvent('fiq:localechange', { detail: { locale: lang } }));
    },
    apply: staticApplyI18n,
    translate: staticTranslateText
  };
  const startStaticI18n = () => {
    if (staticI18nStarted) return;
    staticI18nStarted = true;
    staticApplyI18n(window.FreightIQI18n.getLocale());
    const root = document.getElementById('root');
    if (root) {
      new MutationObserver(scheduleStaticI18n).observe(root, {
        childList: true,
        subtree: true,
        characterData: true,
        attributes: true,
        attributeFilter: STATIC_TRANSLATABLE_ATTRS
      });
    }
    document.addEventListener('click', () => setTimeout(scheduleStaticI18n, 0));
    window.addEventListener('hashchange', scheduleStaticI18n);
  };
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startStaticI18n, { once: true });
  } else {
    startStaticI18n();
  }
}

// =========================================================
// Case studies + CTA + footer
// =========================================================
const Stats = () => {
  const items = [
  { v: '1,200+', l: '企业客户', c: '#1677FF' },
  { v: '62', l: '数据源', c: '#00D4AA' },
  { v: '248', l: '监控航线', c: '#7C5CFF' },
  { v: '94.3%', l: '预测准确率', c: '#FFB020' }];

  return (
    <section style={{ padding: '56px 0', background: 'var(--surface-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {items.map((s) =>
        <div key={s.l} style={{ textAlign: 'center' }}>
            <div className="mono" style={{ fontSize: 44, fontWeight: 600, color: s.c, letterSpacing: '-0.03em', lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-4)', marginTop: 8 }}>{s.l}</div>
          </div>
        )}
      </div>
    </section>);

};

const Cases = () => {
  const cases = [
  {
    logo: 'COSCO', quote: '原本 3 位销售每天花 6 小时询价,现在 1 人 1 小时,订单毛利提升 2.4 个百分点。',
    who: '张经理 · COSCO 华南区销售总监', tag: 'Rates', color: '#1677FF'
  },
  {
    logo: 'MAERSK NE', quote: '把 AIS、港口、燃油、舆情一张图看完,以前要 5 个分析师,现在 Foresight 替我们做。',
    who: 'Chen Li · MAERSK 东北亚数据分析主管', tag: 'Foresight', color: '#00D4AA'
  },
  {
    logo: 'SF EXPRESS', quote: '抢单策略跑通第一周就锁定了 480 个柜,比过去一个月还多。',
    who: '李总 · 顺丰国际 海运部负责人', tag: 'Rates', color: '#7C5CFF'
  }];

  return (
    <section className="section" id="cases">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow"><Icon name="users" size={14} /> 客户故事</span>
          <h2 className="display-2" style={{ marginTop: 16 }}>来自 1,200+ 团队的真实反馈</h2>
        </div>
        <div className="grid grid-3">
          {cases.map((c, i) =>
          <div key={i} className="card card-hov" style={{ padding: 28 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
                <span style={{ fontWeight: 700, fontSize: 15, letterSpacing: '-0.02em', color: 'var(--ink-3)' }}>{c.logo}</span>
                <span className="chip" style={{ background: `${c.color}14`, color: c.color, border: `1px solid ${c.color}33` }}>{c.tag}</span>
              </div>
              <div style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-1)', marginBottom: 24 }}>
                "{c.quote}"
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-4)', borderTop: '1px solid var(--line)', paddingTop: 14 }}>
                {c.who}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const CTA = () =>
<section style={{ padding: '96px 0' }}>
    <div className="container">
      <div style={{
      position: 'relative', overflow: 'hidden',
      padding: '64px 56px', borderRadius: 28,
      background: 'linear-gradient(135deg, #061428 0%, #0A2A5C 60%, #1677FF 130%)',
      color: '#fff'
    }}>
        <div style={{
        position: 'absolute', inset: 0, opacity: 0.4,
        backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(0,212,170,0.3) 0%, transparent 40%), radial-gradient(circle at 20% 80%, rgba(124,92,255,0.3) 0%, transparent 40%)',
        pointerEvents: 'none'
      }} />
        <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 />交给 FreightIQ。
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', maxWidth: 560 }}>
              14 天免费,全功能解锁。无需信用卡,无需对接,无需改造现有系统。
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
            <a className="btn btn-accent btn-lg" href="/contact?type=trial" style={{ width: '100%', justifyContent: 'center' }}>
              免费开始 <Icon name="arrow" size={14} />
            </a>
            <a className="btn btn-lg" href="/contact?type=demo" style={{ width: '100%', justifyContent: 'center', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff' }}>
              预约解决方案专家
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>;


const Footer = () => {
  const cols = [
  { t: '产品', l: [
    { t: 'FreightIQ Rates',     h: FIQ_APP_LINKS.rates, ext: true },
    { t: 'FreightIQ Foresight', h: FIQ_APP_LINKS.foresight, ext: true },
    { t: 'FreightIQ Prospect',  h: FIQ_APP_LINKS.prospect, ext: true },
    { t: 'AgenticX 平台',        h: '/about' },
    { t: '开放 API',             h: '/rates-integrations' },
    { t: '定价方案',             h: '/pricing' }
  ] },
  { t: '解决方案', l: [
    { t: '货代',         h: '/solutions#forwarder' },
    { t: '船公司',       h: '/solutions#carrier' },
    { t: '跨境电商',     h: '/solutions#ecommerce' },
    { t: '制造出口',     h: '/solutions#manufacturer' },
    { t: '供应链团队',   h: '/solutions#sct' }
  ] },
  { t: '资源', l: [
    { t: '文档',         h: '/rates-integrations' },
    { t: 'API 参考',     h: '/rates-integrations' },
    { t: '博客',         h: '/blog' },
    { t: '客户故事',     h: '/#cases' },
    { t: 'Webinar',     h: '/blog#webinars' }
  ] },
  { t: '公司', l: [
    { t: '关于我们',     h: '/about' },
    { t: '招聘',         h: '/about#careers' },
    { t: '合作伙伴',     h: '/contact?type=partner' },
    { t: '联系销售',     h: '/contact?type=sales' },
    { t: '媒体资源',     h: '/about#press' }
  ] }];

  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)', gap: 32, marginBottom: 48 }}>
          <div>
            <a href="/" className="logo" style={{ marginBottom: 14, cursor: 'pointer' }}>
              <span className="logo-mark" />
              FreightIQ
            </a>
            <p style={{ fontSize: 13, color: 'var(--ink-4)', maxWidth: 300 }}>
              全球运价与物流数据的智能中枢。
              为货代、船公司、跨境团队而建。
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
              {['中文', 'English'].map((l) =>
              <span key={l} className="chip" style={{ fontSize: 11 }}>{l}</span>
              )}
            </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.t} href={x.h} {...(x.ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{x.t}</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="/about#privacy">隐私</a><a href="/about#terms">条款</a><a href="/about#cookie">Cookie</a><a href="/about#security">安全</a>
          </span>
        </div>
      </div>
    </footer>);

};

// =========================================================
// Nav + Tweaks
// =========================================================
// Product registry — 可拓展:新增产品只需在此追加一项
const PRODUCT_REGISTRY = [
{
  id: 'rates', name: 'FreightIQ Rates', tagline: '运价聚合 · 抢舱订舱 · 运营 BI',
  icon: 'ship', color: '#1677FF', color2: '#4FA3FF',
  url: FIQ_APP_LINKS.rates,
  tag: '运价业务',
  bullets: ['实时运价聚合', '抢舱订舱引擎', '运营 BI 看板']
},
{
  id: 'foresight', name: 'FreightIQ Foresight', tagline: 'AI 多源数据情报',
  icon: 'brain', color: '#00D4AA', color2: '#7C5CFF',
  url: FIQ_APP_LINKS.foresight,
  tag: '数据 AI',
  bullets: ['62+ 数据源接入', '运价/船期预测', '风险与异常告警'],
  badge: '新'
},
{
  id: 'prospect', name: 'FreightIQ Prospect', tagline: 'AI 航运拓客平台',
  icon: 'target', color: '#FFB020', color2: '#FF5A4E',
  url: FIQ_APP_LINKS.prospect,
  tag: '拓客增长',
  bullets: ['航运企业数据库', 'AI 线索评分', '自动触达序列'],
  badge: 'Beta'
}
// 将来新增产品在此追加即可
];

const PRODUCT_GROUPS = [
{ k: '按业务线', items: PRODUCT_REGISTRY }];


const MORE_LINKS = [
{ t: '开放 API', d: '对接 SAP / Kingdee / 自研 TMS', i: 'api', h: '/rates-integrations' },
{ t: 'AgenticX 平台', d: '跨产品的智能体运行时', i: 'sparkAi', h: '/about' },
{ t: '数据底座', d: '62+ 实时数据源目录', i: 'layers', h: '/#data-sources' }];


const ProductsMenu = ({ open, onClose }) => {
  if (!open) return null;
  return (
    <div
      onMouseLeave={onClose}
      style={{
        position: 'fixed', top: 68, left: '50%', transform: 'translateX(-50%)',
        width: 'min(920px, calc(100vw - 48px))', background: 'var(--surface)',
        border: '1px solid var(--line)', borderRadius: 16,
        boxShadow: 'var(--shadow-lg)', zIndex: 200, overflow: 'hidden',
        animation: 'fadeIn 0.18s ease-out'
      }}>
      
      <div style={{ display: 'grid', gridTemplateColumns: '1.8fr 1fr' }}>
        {/* 左:产品矩阵 */}
        <div style={{ padding: 20 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
            产品矩阵 · {PRODUCT_REGISTRY.length} 条产品线
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, 1fr)', gap: 6 }}>
            {PRODUCT_REGISTRY.map((p) => {
              const isExternal = /^https?:/.test(p.url);
              return (
            <a
              key={p.id}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'grid', gridTemplateColumns: '40px 1fr auto',
                gap: 12, padding: 12, borderRadius: 10,
                transition: 'background 0.15s', cursor: 'pointer'
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-2)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              
                <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: `linear-gradient(135deg, ${p.color}, ${p.color2})`,
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: `0 6px 14px ${p.color}33`
              }}>
                  <Icon name={p.icon} size={18} />
                </div>
                <div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-1)' }}>{p.name}</span>
                    {p.badge &&
                  <span className="chip" style={{ padding: '1px 7px', fontSize: 10, background: `${p.color}1f`, color: p.color, border: `1px solid ${p.color}33` }}>{p.badge}</span>
                  }
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>{p.tagline}</div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 6, fontSize: 11, color: 'var(--ink-4)', flexWrap: 'wrap' }}>
                    {p.bullets.map((b) => <span key={b}>· {b}</span>)}
                  </div>
                </div>
                <div style={{ color: 'var(--ink-5)', display: 'flex', alignItems: 'center' }}>
                  <Icon name={isExternal ? 'arrow' : 'arrow'} size={14} />
                </div>
              </a>
              );
            })}
          </div>
        </div>

        {/* 右:平台/资源 */}
        <div style={{ padding: 20, background: 'var(--surface-2)', borderLeft: '1px solid var(--line)' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
            平台与资源
          </div>
          {MORE_LINKS.map((m) =>
          <a key={m.t} href={m.h || '#'}
          target="_blank"
          rel="noopener noreferrer"
          style={{ display: 'flex', gap: 10, padding: 10, borderRadius: 8, cursor: 'pointer' }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <Icon name={m.i} size={16} color="var(--brand)" />
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-1)' }}>{m.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2 }}>{m.d}</div>
              </div>
            </a>
          )}
          <div style={{ marginTop: 16, padding: 12, background: 'var(--surface)', borderRadius: 10, border: '1px dashed var(--line)' }}>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>即将推出</div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>Compliance · Carbon · TMS Cloud · Claims Agent</div>
          </div>
        </div>
      </div>

      {/* 底部 CTA */}
      <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line)', background: 'var(--surface-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>一个账号 · 全线通用 · 数据互通</span>
        <a href="/#products" target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, fontWeight: 600, color: 'var(--brand)', display: 'flex', alignItems: 'center', gap: 4 }}>
          查看全部产品 <Icon name="arrow" size={12} />
        </a>
      </div>
    </div>);

};

const LANGS = [
{ code: 'zh-CN', label: '简体中文', short: '中' },
{ code: 'en', label: 'English', short: 'EN' }];

const DEFAULT_LANG = 'zh-CN';
const LANG_STORAGE_KEY = 'fiq-lang';
const normalizeLang = (code) => LANGS.some((l) => l.code === code) ? code : DEFAULT_LANG;


const LangSwitcher = () => {
  const [open, setOpen] = React.useState(false);
  const [cur, setCur] = React.useState(() => normalizeLang(localStorage.getItem(LANG_STORAGE_KEY)));
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    document.addEventListener('click', h);
    return () => document.removeEventListener('click', h);
  }, []);
  React.useEffect(() => {
    document.documentElement.setAttribute('lang', cur);
    window.FreightIQI18n?.apply?.(cur);
  }, [cur]);
  const sel = LANGS.find((l) => l.code === cur) || LANGS[0];
  const pick = (code) => {
    const next = normalizeLang(code);
    setCur(next);setOpen(false);
    localStorage.setItem(LANG_STORAGE_KEY, next);
    document.documentElement.setAttribute('lang', next);
    window.FreightIQI18n?.setLocale?.(next);
  };
  return (
    <div ref={ref} data-fiq-i18n-skip="true" style={{ position: 'relative' }}>
      <button className="btn btn-ghost btn-sm" onClick={() => setOpen((o) => !o)}
      style={{ padding: '6px 10px', gap: 6 }} title="切换语言">
        <Icon name="globe" size={14} />
        <span style={{ fontWeight: 600, fontSize: 12, letterSpacing: '0.02em' }}>{sel.short}</span>
        <Icon name="arrowDown" size={10} />
      </button>
      {open &&
      <div style={{
        position: 'absolute', top: 'calc(100% + 8px)', right: 0,
        minWidth: 200, padding: 6,
        background: 'var(--surface)', border: '1px solid var(--line)',
        borderRadius: 12, boxShadow: 'var(--shadow-lg)',
        zIndex: 120, animation: 'fadeIn 0.15s ease-out'
      }}>
          <div style={{ padding: '6px 10px 4px', fontSize: 10, color: 'var(--ink-4)',
          textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
            Language / 语言
          </div>
          {LANGS.map((l) =>
        <button key={l.code} onClick={() => pick(l.code)}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px', borderRadius: 8, border: 'none',
          background: cur === l.code ? 'color-mix(in srgb, var(--brand) 10%, transparent)' : 'transparent',
          color: cur === l.code ? 'var(--brand)' : 'var(--ink-2)',
          fontSize: 13, fontWeight: cur === l.code ? 600 : 500,
          cursor: 'pointer', textAlign: 'left'
        }}
        onMouseEnter={(e) => {if (cur !== l.code) e.currentTarget.style.background = 'var(--surface-3)';}}
        onMouseLeave={(e) => {if (cur !== l.code) e.currentTarget.style.background = 'transparent';}}>
              <span style={{ minWidth: 24, fontSize: 12, fontWeight: 700 }}>{l.short}</span>
              <span style={{ flex: 1 }}>{l.label}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-5)' }}>{l.code}</span>
              {cur === l.code && <Icon name="check" size={12} color="var(--brand)" />}
            </button>
        )}
        </div>
      }
    </div>);

};

const Nav = () => {
  const [menu, setMenu] = React.useState(false);
  const wrapRef = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => {if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenu(false);};
    document.addEventListener('click', h);
    return () => document.removeEventListener('click', h);
  }, []);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="/" className="logo" style={{ cursor: 'pointer' }}>
          <span className="logo-mark" />
          FreightIQ
        </a>
        <div className="nav-links">
          <div ref={wrapRef} style={{ position: 'relative' }}
          onMouseEnter={() => setMenu(true)}>
            <a className={`nav-link ${menu ? 'active' : ''}`} onClick={() => setMenu((m) => !m)} style={{ cursor: 'pointer' }}>
              产品
              <Icon name="arrowDown" size={12} stroke={2}
              color={menu ? 'var(--brand)' : 'currentColor'} />
            </a>
            <ProductsMenu open={menu} onClose={() => setMenu(false)} />
          </div>
          <a className="nav-link" href="/solutions">解决方案</a>
          <a className="nav-link" href="/blog">资源</a>
          <a className="nav-link" href="/pricing">定价</a>
        </div>
        <div className="nav-cta">
          <LangSwitcher />
          <span style={{ width: 1, height: 20, background: 'var(--line)' }} />
          <a href="tel:4008881668" className="nav-hotline" aria-label="销售咨询热线 400-888-1668">
            <span className="nav-hotline-ico" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
              </svg>
            </span>
            <span className="nav-hotline-body">
              <span className="nav-hotline-label">销售咨询</span>
              <span className="nav-hotline-num mono">400-888-1668</span>
            </span>
          </a>
        </div>
      </div>
    </nav>);

};

const TweaksFab = ({ state, setState }) => {
  const [open, setOpen] = React.useState(false);

  // edit mode via host toolbar
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', handler);
    try {window.parent.postMessage({ type: '__edit_mode_available' }, '*');} catch (_) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    try {window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');} catch (_) {}
  };

  const swatches = [
  { k: '#1677FF', n: 'Blue' },
  { k: '#00D4AA', n: 'Teal' },
  { k: '#7C5CFF', n: 'Violet' },
  { k: '#FF5A4E', n: 'Coral' },
  { k: '#0A0F1C', n: 'Black' }];


  return (
    <>
      <button className="tweaks-fab" onClick={() => setOpen((o) => !o)} title="Tweaks">
        <Icon name={open ? 'close' : 'settings'} size={18} />
      </button>
      {open &&
      <div className="tweaks-panel">
          <div className="tweaks-title">Tweaks</div>

          <div className="tweaks-row">
            <div className="tweaks-label">品牌</div>
            <input
            type="text"
            value={state.brand || 'FreightIQ'}
            onChange={(e) => update({ brandName: e.target.value })}
            style={{ width: '100%', padding: '6px 10px', fontSize: 13, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--surface-2)', color: 'var(--ink-1)' }} />
          
          </div>

          <div className="tweaks-row">
            <div className="tweaks-label">主题色</div>
            <div className="tweaks-swatches">
              {swatches.map((s) =>
            <button
              key={s.k}
              title={s.n}
              className={state.accent === s.k ? 'active' : ''}
              style={{ background: s.k }}
              onClick={() => update({ accent: s.k })} />

            )}
            </div>
          </div>

          <div className="tweaks-row">
            <div className="tweaks-label">外观</div>
            <div className="tweaks-seg">
              {['light', 'dark'].map((m) =>
            <button key={m} className={state.theme === m ? 'active' : ''} onClick={() => update({ theme: m })}>
                  <Icon name={m === 'light' ? 'sun' : 'moon'} size={12} /> {m === 'light' ? '浅色' : '深色'}
                </button>
            )}
            </div>
          </div>

          <div className="tweaks-row">
            <div className="tweaks-label">Hero 布局</div>
            <div className="tweaks-seg">
              {[{ k: 'center', l: '居中' }, { k: 'split', l: '左右' }].map((m) =>
            <button key={m.k} className={state.heroLayout === m.k ? 'active' : ''} onClick={() => update({ heroLayout: m.k })}>
                  {m.l}
                </button>
            )}
            </div>
          </div>

          <div className="tweaks-row">
            <div className="tweaks-label">圆角</div>
            <div className="tweaks-seg">
              {[{ k: 'sharp', l: '方' }, { k: 'default', l: '默认' }, { k: 'round', l: '圆' }].map((m) =>
            <button key={m.k} className={state.radius === m.k ? 'active' : ''} onClick={() => update({ radius: m.k })}>
                  {m.l}
                </button>
            )}
            </div>
          </div>
        </div>
      }
    </>);

};

Object.assign(window, { Stats, Cases, CTA, Footer, Nav, TweaksFab });
