/* Fr8ight website kit — shared content & reusable pieces.
   Loaded before app.jsx; everything is published on window.WK. */
const { useState, useEffect } = React;
const NS = window.Fr8ightHubDesignSystem_755aa6;
const { Button, Badge, ServiceCard, BlogCard, CaseStudyCard, TestimonialCard, AdvantageCard, Accordion, Input, Textarea, Select, Label } = NS;

const A = "assets/";
const LOGO = "https://horizons-cdn.hostinger.com/457d63a0-18ed-49b9-af58-38d2990c7e05/b1c10f6c071b7651ec712082ad46aba2.png";
const tri = (lang, en, tw, cn) => (lang === "zh_TW" ? tw : lang === "zh_CN" ? cn : en);

/* ---- CMS content store bridge (shared with the admin CMS via localStorage) ---- */
const CMS = window.Fr8CMS;
let STORE = CMS ? CMS.load() : { posts:[], cases:[], reviews:[], page:{} };
const setStore = (s) => { STORE = s; };
const getStore = () => STORE;
const pk = (lang, field) => CMS ? CMS.pick(lang, field) : (field && field.en) || field || "";
const resolveImg = (img) => !img ? "" : (/^(data:|https?:|blob:)/.test(img) ? img : A + img);

/* Real company data (unified brand: Fr8ight) */
const BRAND = {
  name: "Fr8ight",
  email: "fr8ight.hk@gmail.com",
  whatsapp: "+852 6441 0713",
  phone: "+852 3622 3466",
  facebook: "www.facebook.com/fr8ight",
  instagram: "fr8ight.hk",
  xhs: "Fr8ight一集式專業轉運代理",
  addr: { en: "Rm 1015, Ying Yip Industrial Bldg, 1-15 Kwai Fung Cres & 65-69 Container Port Rd, Kwai Chung",
          zh_TW: "葵涌葵豐街1-15號及貨櫃碼頭路65-69號盈業工業大廈1015室",
          zh_CN: "葵涌葵丰街1-15号及货柜码头路65-69号盈业工业大厦1015室" },
  hours: { en: "Mon–Fri 11:00–19:30 · Sat 11:00–18:30 · Sun & PH closed",
           zh_TW: "星期一至五 11:00–19:30 · 星期六 11:00–18:30（星期日及公眾假期休息）",
           zh_CN: "星期一至五 11:00–19:30 · 星期六 11:00–18:30（星期日及公众假期休息）" },
};

/* Nav + common UI strings */
const L = {
  en: { home:"Home", services:"Services", cases:"Case Studies", about:"About Us", blog:"Blog", contact:"Contact",
    quote:"Get a Quote", our:"Our Services", learn:"Learn More", viewAll:"View all cases", readMore:"Read More", viewDetails:"View Details",
    ready:"Ready to ship?", readyDesc:"Contact us today for a custom quote or consultation.", faq:"Frequently asked questions",
    name:"Name", email:"Email", service:"Service Type", message:"Message", send:"Send Enquiry", share:"Share",
    whyEyebrow:"Why Choose Us", whyTitle:"Why shippers choose Fr8ight", procEyebrow:"How it works", procTitle:"Our service process",
    payTitle:"Payment Methods", payDesc:"We fully support the major regional payment methods for your maximum convenience.", channelsTitle:"Official Channels", channelsDesc:"Reach us on any of our platforms",
    bookingTitle:"Online Booking", bookingDesc:"Scan the QR code to order via our official account" },
  zh_TW: { home:"首頁", services:"服務項目", cases:"案例分享", about:"關於我們", blog:"部落格", contact:"聯絡我們",
    quote:"獲取報價", our:"我們的服務", learn:"了解更多", viewAll:"查看所有案例", readMore:"閱讀更多", viewDetails:"查看詳情",
    ready:"準備好出貨了嗎？", readyDesc:"立即聯絡我們獲取客製化報價或諮詢。", faq:"常見問題",
    name:"姓名", email:"電子郵件", service:"服務類型", message:"訊息", send:"送出查詢", share:"分享",
    whyEyebrow:"為什麼選擇我們", whyTitle:"為什麼選擇 Fr8ight", procEyebrow:"服務流程", procTitle:"我們的服務流程",
    payTitle:"支付方式", payDesc:"我們全面支援主要的地區付款方式，為您提供最大便利。", channelsTitle:"官方渠道", channelsDesc:"歡迎在我們的平台上聯繫我們",
    bookingTitle:"線上下單", bookingDesc:"掃描二維碼，通過公眾號下單" },
  zh_CN: { home:"首页", services:"服务项目", cases:"案例分享", about:"关于我们", blog:"博客", contact:"联系我们",
    quote:"获取报价", our:"我们的服务", learn:"了解更多", viewAll:"查看所有案例", readMore:"阅读更多", viewDetails:"查看详情",
    ready:"准备好出货了吗？", readyDesc:"立即联系我们获取定制化报价或咨询。", faq:"常见问题",
    name:"姓名", email:"电子邮件", service:"服务类型", message:"信息", send:"发送查询", share:"分享",
    whyEyebrow:"为什么选择我们", whyTitle:"为什么选择 Fr8ight", procEyebrow:"服务流程", procTitle:"我们的服务流程",
    payTitle:"支付方式", payDesc:"我们全面支援主要的地区付款方式，为您提供最大便利。", channelsTitle:"官方渠道", channelsDesc:"欢迎在我们的平台上联系我们",
    bookingTitle:"在线下单", bookingDesc:"扫描二维码，通过公众号下单" },
};

/* Home hero slides */
const SLIDES = [
  { image:A+"freight-aerial.png",
    title:{en:"Seamless cross-border logistics",zh_TW:"無縫跨境物流體驗",zh_CN:"无缝跨境物流体验"},
    desc:{en:"Professional freight, moving and warehousing connecting Hong Kong and the Mainland.",zh_TW:"連接香港與內地的專業貨運、搬家及倉儲解決方案。",zh_CN:"连接香港与内地的专业货运、搬家及仓储解决方案。"} },
  { image:A+"banner-warehouse.jpg",
    title:{en:"Secure enterprise warehousing",zh_TW:"安全可靠的企業倉儲",zh_CN:"安全可靠的企业仓储"},
    desc:{en:"State-of-the-art facilities ensuring your goods are stored and dispatched with precision.",zh_TW:"最先進的設施確保您的貨物得到精確的存儲和發送。",zh_CN:"最先进的设施确保您的货物得到精确的存储和发送。"} },
  { image:A+"moving-office.png",
    title:{en:"Stress-free office relocation",zh_TW:"輕鬆無憂的辦公室搬遷",zh_CN:"轻松无忧的办公室搬迁"},
    desc:{en:"Our professional commercial moving team handles every detail, minimizing downtime.",zh_TW:"我們的專業商業搬遷團隊處理每一個細節，將停機時間降至最低。",zh_CN:"我们的专业商业搬迁团队处理每一个细节，将停机时间降至最低。"} },
];

/* Why choose us — 5 */
const WHY = [
  { n:"01", icon:"M12 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM15.5 13.5 17 22l-5-3-5 3 1.5-8.5",
    t:{en:"Expert Team",zh_TW:"專業團隊",zh_CN:"专业团队"}, d:{en:"Logistics specialists with decades of industry experience handling complex shipments.",zh_TW:"擁有數十年產業經驗的物流專家，專精處理複雜貨件。",zh_CN:"拥有数十年产业经验的物流专家，专精处理复杂货件。"} },
  { n:"02", icon:"M13 2 3 14h9l-1 8 10-12h-9l1-8Z",
    t:{en:"Fast Response",zh_TW:"快速回應",zh_CN:"快速回应"}, d:{en:"24/7 dedicated customer support so your questions are resolved right away.",zh_TW:"24/7 專屬客戶支援，確保您的問題立即獲得解決。",zh_CN:"24/7 专属客户支持，确保您的问题立即获得解决。"} },
  { n:"03", icon:"M20 7h-9M14 17H5M17 3l4 4-4 4M7 21l-4-4 4-4",
    t:{en:"One-Stop Service",zh_TW:"一站式服務",zh_CN:"一站式服务"}, d:{en:"End-to-end solutions from pickup and customs to last-mile delivery.",zh_TW:"端到端解決方案，涵蓋取件、清關至最後一哩配送。",zh_CN:"端到端解决方案，涵盖取件、清关至最后一里配送。"} },
  { n:"04", icon:"M22 12h-4l-3 9L9 3l-3 9H2",
    t:{en:"Real-Time Tracking",zh_TW:"即時追蹤",zh_CN:"实时追踪"}, d:{en:"Advanced tracking keeps you fully in control of your cargo at all times.",zh_TW:"先進的追蹤系統，讓您隨時全面掌握貨物動態。",zh_CN:"先进的追踪系统，让您随时全面掌握货物动态。"} },
  { n:"05", icon:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z",
    t:{en:"Safe & Reliable",zh_TW:"安全可靠",zh_CN:"安全可靠"}, d:{en:"Comprehensive insurance cover and careful handling for total peace of mind.",zh_TW:"全面的保險理賠與細心的處理，給您最大的安心。",zh_CN:"全面的保险理赔与细心的处理，给您最大的安心。"} },
];

/* Service process — 6 */
const PROCESS = [
  { t:{en:"Submit request",zh_TW:"提交需求",zh_CN:"提交需求"}, d:{en:"Send your request via WhatsApp, WeChat, our official account or the online form — we'll assign a dedicated contact.",zh_TW:"透過 WhatsApp、微信、公眾號或線上表單提交服務需求，我們將安排專人跟進。",zh_CN:"通过 WhatsApp、微信、公众号或在线表单提交服务需求，我们将安排专人跟进。"} },
  { t:{en:"Solution assessment",zh_TW:"方案評估",zh_CN:"方案评估"}, d:{en:"We propose a suitable logistics / distribution plan based on cargo type, destination and needs.",zh_TW:"根據貨物類型、配送地點及服務需求，提供合適的物流／配送方案。",zh_CN:"根据货物类型、配送地点及服务需求，提供合适的物流／配送方案。"} },
  { t:{en:"Confirm quote",zh_TW:"確認報價",zh_CN:"确认报价"}, d:{en:"Confirm scope, transport arrangements and quote, then complete your booking quickly.",zh_TW:"確認服務內容、運輸安排及報價後，即可快速完成預約下單。",zh_CN:"确认服务内容、运输安排及报价后，即可快速完成预约下单。"} },
  { t:{en:"Arrange service",zh_TW:"安排服務",zh_CN:"安排服务"}, d:{en:"Our team arranges warehousing, packing, distribution or transport to keep things running smoothly.",zh_TW:"專業團隊安排倉儲、包裝、配送或運輸流程，確保服務順利進行。",zh_CN:"专业团队安排仓储、包装、配送或运输流程，确保服务顺利进行。"} },
  { t:{en:"Transport & delivery",zh_TW:"運輸配送",zh_CN:"运输配送"}, d:{en:"Cargo is transported and delivered safely, tracked end-to-end for timeliness and quality.",zh_TW:"貨物安全運輸與配送，全程專人跟進，保障時效與服務品質。",zh_CN:"货物安全运输与配送，全程专人跟进，保障时效与服务品质。"} },
  { t:{en:"Completed delivery",zh_TW:"完成交付",zh_CN:"完成交付"}, d:{en:"Cargo arrives safely and delivery is completed, with full after-sales and customer support.",zh_TW:"貨物安全送達並完成交付，提供完善售後與客服支援。",zh_CN:"货物安全送达并完成交付，提供完善售后与客服支援。"} },
];

/* Order steps (About) */
const ORDER = [
  {en:"Contact us",zh_TW:"聯絡我們",zh_CN:"联系我们"},
  {en:"Needs assessment",zh_TW:"需求評估",zh_CN:"需求评估"},
  {en:"Quote confirmation",zh_TW:"報價確認",zh_CN:"报价确认"},
  {en:"Schedule service",zh_TW:"安排服務",zh_CN:"安排服务"},
  {en:"Completion",zh_TW:"服務完成",zh_CN:"服务完成"},
];

/* Four services + inner business + per-service FAQ */
const SERVICES = [
  { key:"moving", num:"01", image:A+"svc-moving.png",
    title:{en:"Cross-Border Moving",zh_TW:"跨境搬家服務",zh_CN:"跨境搬家服务"},
    tagline:{en:"Seamless Relocation",zh_TW:"無縫搬遷體驗",zh_CN:"无缝搬迁体验"},
    desc:{en:"Complete end-to-end relocation across the border with professional packing, transport and settling support.",zh_TW:"完整的跨境端到端搬遷服務，配有專業打包、運輸與安家支援。",zh_CN:"完整的跨境端到端搬迁服务，配有专业打包、运输与安家支援。"},
    sub:[{en:"Hong Kong → Mainland",zh_TW:"香港→內地",zh_CN:"香港→内地",img:A+"sub-hk-to-cn.png",d:{en:"Professional moving from HK to any mainland city.",zh_TW:"由香港專業搬遷至內地各城市。",zh_CN:"由香港专业搬迁至内地各城市。"}},{en:"Mainland → Hong Kong",zh_TW:"內地→香港",zh_CN:"内地→香港",img:A+"sub-cn-to-hk.png",d:{en:"Secure relocation from mainland China to Hong Kong.",zh_TW:"由內地安全搬遷至香港。",zh_CN:"由内地安全搬迁至香港。"}},{en:"Office relocation",zh_TW:"辦公室搬遷",zh_CN:"办公室搬迁",img:A+"sub-office-move.png",d:{en:"Minimal-downtime office relocation services.",zh_TW:"將停機時間降至最低的辦公室搬遷。",zh_CN:"将停机时间降至最低的办公室搬迁。"}},{en:"Premium items handling",zh_TW:"貴重物品處理",zh_CN:"贵重物品处理",img:A+"sub-valuables.png",d:{en:"Specialized handling for art, antiques and fragile items.",zh_TW:"針對藝術品、古董及易碎品的專門處理。",zh_CN:"针对艺术品、古董及易碎品的专门处理。"}},{en:"Packing & assembly",zh_TW:"打包與組裝",zh_CN:"打包与组装",img:A+"sub-packing.png",d:{en:"Full packing, unpacking and furniture assembly.",zh_TW:"完整打包、拆箱與傢俬組裝。",zh_CN:"完整打包、拆箱与家具组装。"}}] },
  { key:"freight", num:"02", image:A+"svc-consolidation.png",
    title:{en:"Consolidation & Logistics",zh_TW:"集運與物流",zh_CN:"集运与物流"},
    tagline:{en:"Efficient Groupage",zh_TW:"高效併櫃運輸",zh_CN:"高效并柜运输"},
    desc:{en:"Smart consolidation designed to lower shipping cost while maintaining high reliability and speed.",zh_TW:"智能集運服務，旨在降低運輸成本，同時保持高度可靠性與速度。",zh_CN:"智能集运服务，旨在降低运输成本，同时保持高度可靠性与速度。"},
    sub:[{en:"China–HK consolidation",zh_TW:"中港集運",zh_CN:"中港集运",img:A+"sub-zhonggang-consol.png",d:{en:"Combined China–HK shipments at lower cost.",zh_TW:"合併中港貨件，降低運費。",zh_CN:"合并中港货件，降低运费。"}},{en:"Overseas consolidation",zh_TW:"海外集運",zh_CN:"海外集运",img:A+"sub-overseas-consol.png",d:{en:"Consolidate overseas parcels into one shipment.",zh_TW:"將海外包裹併為一票運送。",zh_CN:"将海外包裹并为一票运送。"}},{en:"Cold-chain logistics",zh_TW:"冷凍物流",zh_CN:"冷冻物流",img:A+"sub-cold-chain.png",d:{en:"Temperature-controlled cold-chain transport.",zh_TW:"全程溫控的冷鏈運輸。",zh_CN:"全程温控的冷链运输。"}},{en:"Commercial delivery",zh_TW:"商業配送",zh_CN:"商业配送",img:A+"fleet-vans.png",d:{en:"Scheduled commercial B2B delivery.",zh_TW:"定期商業 B2B 配送。",zh_CN:"定期商业 B2B 配送。"}}] },
  { key:"warehouse", num:"03", image:A+"svc-warehousing.png",
    title:{en:"Warehousing & Distribution",zh_TW:"倉儲配送",zh_CN:"仓储配送"},
    tagline:{en:"Secure Storage",zh_TW:"安全的存儲空間",zh_CN:"安全的存储空间"},
    desc:{en:"State-of-the-art warehousing with integrated local distribution networks for immediate dispatch.",zh_TW:"最先進的倉儲設施與整合的本地配送網絡，確保貨物可隨時發送。",zh_CN:"最先进的仓储设施与整合的本地配送网络，确保货物可随时发送。"},
    sub:[{en:"Hong Kong warehousing",zh_TW:"香港倉儲",zh_CN:"香港仓储",img:A+"sub-hk-warehouse.png",d:{en:"Secure short- and long-term storage in Hong Kong.",zh_TW:"香港安全的短期與長期存儲。",zh_CN:"香港安全的短期与长期存储。"}},{en:"Dropshipping",zh_TW:"一件代發",zh_CN:"一件代发",img:A+"sub-dropship.png",d:{en:"Pick-pack-ship dropshipping fulfilment.",zh_TW:"揀貨、包裝、發貨的一件代發履約。",zh_CN:"拣货、包装、发货的一件代发履约。"}},{en:"Self-pickup",zh_TW:"自提",zh_CN:"自提",img:A+"sub-pickup.png",d:{en:"Convenient self-pickup collection points.",zh_TW:"便利的自提取貨點。",zh_CN:"便利的自提取货点。"}},{en:"Distribution",zh_TW:"配送",zh_CN:"配送",img:A+"sub-delivery.png",d:{en:"Fast local last-mile distribution.",zh_TW:"快速的本地最後一哩配送。",zh_CN:"快速的本地最后一里配送。"}}] },
  { key:"business", num:"04", image:A+"svc-enterprise.png",
    title:{en:"Enterprise Solutions",zh_TW:"企業方案",zh_CN:"企业方案"},
    tagline:{en:"B2B Logistics",zh_TW:"B2B 定製物流",zh_CN:"B2B 定制物流"},
    desc:{en:"Tailor-made supply chain solutions for businesses, optimizing freight operations at scale.",zh_TW:"為企業量身打造的供應鏈解決方案，大規模優化貨運營運。",zh_CN:"为企业量身打造的供应链解决方案，大规模优化货运营运。"},
    sub:[{en:"E-commerce logistics",zh_TW:"電商物流",zh_CN:"电商物流",img:A+"sub-ecommerce.jpg",d:{en:"End-to-end e-commerce logistics.",zh_TW:"端到端電商物流。",zh_CN:"端到端电商物流。"}},{en:"Exhibition logistics",zh_TW:"展會物流",zh_CN:"展会物流",img:A+"sub-exhibition.png",d:{en:"Exhibition freight and on-site handling.",zh_TW:"展會貨運與現場處理。",zh_CN:"展会货运与现场处理。"}},{en:"Long-term partnership",zh_TW:"長期合作",zh_CN:"长期合作",img:A+"sub-partnership.png",d:{en:"Dedicated long-term partnership plans.",zh_TW:"專屬的長期合作方案。",zh_CN:"专属的长期合作方案。"}}] },
];

const FAQ = [
  { q:{en:"Do you handle customs clearance?",zh_TW:"你們負責清關嗎？",zh_CN:"你们负责清关吗？"}, a:{en:"Yes — cross-border customs is included on every freight and moving job, with all documentation prepared by our team.",zh_TW:"是的 — 每一項貨運與搬家服務都包含跨境清關，所有文件由我們團隊準備。",zh_CN:"是的 — 每一项货运与搬家服务都包含跨境清关，所有文件由我们团队准备。"} },
  { q:{en:"How is shipping cost calculated?",zh_TW:"運費如何計算？",zh_CN:"运费如何计算？"}, a:{en:"By volumetric or actual weight, whichever is greater, plus any applicable customs duties.",zh_TW:"按體積重或實重取較大者，另加適用關稅。",zh_CN:"按体积重或实重取较大者，另加适用关税。"} },
  { q:{en:"Which regions do you cover?",zh_TW:"你們的服務範圍？",zh_CN:"你们的服务范围？"}, a:{en:"Hong Kong, Mainland China and the Greater Bay Area, with last-mile delivery across 11 cities.",zh_TW:"香港、中國內地及大灣區，最後一哩配送覆蓋 11 個城市。",zh_CN:"香港、中国内地及大湾区，最后一里配送覆盖 11 个城市。"} },
];

/* ---------- reusable components ---------- */
const SERVICE_FAQ = {
  moving: [
    { q:{en:"Do you pack everything for me?",zh_TW:"你們會幫我打包所有東西嗎？",zh_CN:"你们会帮我打包所有东西吗？"}, a:{en:"Yes. Our team provides full packing, wrapping and labelling, plus unpacking and furniture reassembly at your new address.",zh_TW:"是的。我們提供完整打包、包裹與標記，並在新居協助拆箱與傢俬重新組裝。",zh_CN:"是的。我们提供完整打包、包裹与标记，并在新居协助拆箱与家具重新组装。"} },
    { q:{en:"How are valuables and fragile items protected?",zh_TW:"貴重與易碎物品如何保護？",zh_CN:"贵重与易碎物品如何保护？"}, a:{en:"Fragile, antique and premium items get specialist crating and dedicated white-glove handling, with insurance cover available.",zh_TW:"易碎、古董與貴重物品採用專門木箱包裝與白手套處理，並可投保。",zh_CN:"易碎、古董与贵重物品采用专门木箱包装与白手套处理，并可投保。"} },
    { q:{en:"How long does a cross-border home move take?",zh_TW:"跨境搬家需要多久？",zh_CN:"跨境搬家需要多久？"}, a:{en:"Most HK–Mainland residential moves complete within 2–4 days depending on volume and customs; we confirm a schedule up front.",zh_TW:"多數港陸住宅搬遷視貨量與清關於 2–4 天完成，我們會事先確認時程。",zh_CN:"多数港陆住宅搬迁视货量与清关于 2–4 天完成，我们会事先确认时程。"} },
    { q:{en:"Can you handle office relocations after hours?",zh_TW:"辦公室搬遷可以在下班後進行嗎？",zh_CN:"办公室搬迁可以在下班后进行吗？"}, a:{en:"Yes — we schedule office moves over evenings and weekends, including IT reconnection, so business downtime is near zero.",zh_TW:"可以 — 我們安排晚間與週末搬遷，含 IT 重新接駁，讓停機時間趨近於零。",zh_CN:"可以 — 我们安排晚间与周末搬迁，含 IT 重新接驳，让停机时间趋近于零。"} },
  ],
  freight: [
    { q:{en:"Is there a minimum weight for consolidation?",zh_TW:"集運有最低重量限制嗎？",zh_CN:"集运有最低重量限制吗？"}, a:{en:"No hard minimum — small parcels are grouped with others so you still get an economical per-unit rate.",zh_TW:"沒有硬性下限 — 小件會與其他貨件併櫃，讓您仍享有划算的單位運價。",zh_CN:"没有硬性下限 — 小件会与其他货件并柜，让您仍享有划算的单位运价。"} },
    { q:{en:"How are freight charges and duties calculated?",zh_TW:"運費與關稅如何計算？",zh_CN:"运费与关税如何计算？"}, a:{en:"By volumetric or actual weight (whichever is greater), plus any applicable customs duties — quoted transparently before you book.",zh_TW:"按體積重或實重取較大者，另加適用關稅 — 下單前透明報價。","zh_CN":"按体积重或实重取较大者，另加适用关税 — 下单前透明报价。"} },
    { q:{en:"Do you offer cold-chain transport?",zh_TW:"你們提供冷鏈運輸嗎？",zh_CN:"你们提供冷链运输吗？"}, a:{en:"Yes — temperature-controlled lanes with sealed temperature logging keep perishables compliant from origin to destination.",zh_TW:"提供 — 溫控專線搭配封裝溫度記錄，讓生鮮貨物由起點到終點全程合規。",zh_CN:"提供 — 温控专线搭配封装温度记录，让生鲜货物由起点到终点全程合规。"} },
    { q:{en:"Can I track my consolidated shipment?",zh_TW:"我可以追蹤我的集運貨件嗎？",zh_CN:"我可以追踪我的集运货件吗？"}, a:{en:"Every shipment updates at each leg — pickup, consolidation, customs and delivery — so you always know where your cargo is.",zh_TW:"每票貨在取件、集併、清關與配送各階段更新，讓您隨時掌握貨物位置。",zh_CN:"每票货在取件、集并、清关与配送各阶段更新，让您随时掌握货物位置。"} },
  ],
  warehouse: [
    { q:{en:"What storage terms do you offer?",zh_TW:"你們提供哪些倉儲期限？",zh_CN:"你们提供哪些仓储期限？"}, a:{en:"Flexible short- and long-term storage in secure Hong Kong facilities, billed monthly with no long lock-in.",zh_TW:"香港安全設施提供彈性的短期與長期倉儲，按月計費，無長期綁約。",zh_CN:"香港安全设施提供弹性的短期与长期仓储，按月计费，无长期锁定。"} },
    { q:{en:"Can you fulfil dropshipping orders for my store?",zh_TW:"你們能為我的網店做一件代發嗎？",zh_CN:"你们能为我的网店做一件代发吗？"}, a:{en:"Yes — we receive, store and pick-pack-ship per order, so a small team can run high order volumes hands-free.",zh_TW:"可以 — 我們收貨、儲存並逐單揀貨包裝發貨，讓小團隊輕鬆處理大量訂單。",zh_CN:"可以 — 我们收货、储存并逐单拣货包装发货，让小团队轻松处理大量订单。"} },
    { q:{en:"Is self-pickup available?",zh_TW:"提供自提服務嗎？",zh_CN:"提供自提服务吗？"}, a:{en:"Yes — collect your goods at convenient pickup points, or switch to last-mile distribution whenever you need it.",zh_TW:"提供 — 可於便利的自提點取貨，或隨時改用最後一哩配送。",zh_CN:"提供 — 可于便利的自提点取货，或随时改用最后一里配送。"} },
    { q:{en:"Can I see my stock levels in real time?",zh_TW:"我可以即時查看庫存嗎？",zh_CN:"我可以实时查看库存吗？"}, a:{en:"Yes — real-time inventory visibility lets you track what's on hand and plan promotions with confidence.",zh_TW:"可以 — 即時庫存查詢讓您掌握現貨並自信規劃促銷。",zh_CN:"可以 — 实时库存查询让您掌握现货并自信规划促销。"} },
  ],
  business: [
    { q:{en:"Do you offer dedicated account management?",zh_TW:"你們提供專屬客戶經理嗎？",zh_CN:"你们提供专属客户经理吗？"}, a:{en:"Yes — enterprise clients get a dedicated contact and a supply-chain plan tailored to their freight volume and routes.",zh_TW:"提供 — 企業客戶享有專屬聯絡人，以及依貨量與路線量身打造的供應鏈方案。",zh_CN:"提供 — 企业客户享有专属联系人，以及依货量与路线定制的供应链方案。"} },
    { q:{en:"Can you integrate with our e-commerce platform?",zh_TW:"能否與我們的電商平台整合？",zh_CN:"能否与我们的电商平台整合？"}, a:{en:"We support end-to-end e-commerce logistics and can align warehousing, fulfilment and distribution with your sales channels.",zh_TW:"我們支援端到端電商物流，可將倉儲、履約與配送對接您的銷售渠道。",zh_CN:"我们支持端到端电商物流，可将仓储、履约与配送对接您的销售渠道。"} },
    { q:{en:"Do you handle exhibition and event logistics?",zh_TW:"你們處理展會與活動物流嗎？",zh_CN:"你们处理展会与活动物流吗？"}, a:{en:"Yes — booth freight, on-site delivery, temporary storage and post-show return, all timed to strict move-in/out windows.",zh_TW:"處理 — 展位貨運、現場配送、臨時倉儲與展後回程，全程配合嚴格進撤場時段。",zh_CN:"处理 — 展位货运、现场配送、临时仓储与展后回程，全程配合严格进撤场时段。"} },
    { q:{en:"What do long-term partnership plans include?",zh_TW:"長期合作方案包含什麼？",zh_CN:"长期合作方案包含什么？"}, a:{en:"Priority capacity, negotiated rates, consolidated cost-efficient runs and a single point of contact for your whole account.",zh_TW:"優先運力、協議費率、整合且具成本效益的班次，以及全帳戶單一聯絡窗口。",zh_CN:"优先运力、协议费率、整合且具成本效益的班次，以及全账户单一联系窗口。"} },
  ],
};

/* ---------- reusable components ---------- */
function Ic({ d, size=26, color="hsl(var(--primary))" }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>;
}

function PageHero({ title, subtitle, image }) {
  return (
    <section style={{ position:"relative", background:"hsl(var(--secondary))", overflow:"hidden" }}>
      {image && <img src={image} alt="" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", opacity:0.28 }} />}
      <div style={{ position:"absolute", inset:0, background:"var(--scrim-hero)" }} />
      <div className="wk-container" style={{ position:"relative", padding:"72px 24px" }}>
        <h1 style={{ color:"#fff", fontSize:44, fontWeight:800, letterSpacing:"-0.02em", margin:0 }}>{title}</h1>
        {subtitle && <p style={{ color:"rgba(255,255,255,0.82)", fontSize:18, lineHeight:1.5, margin:"14px 0 0", maxWidth:640 }}>{subtitle}</p>}
      </div>
    </section>
  );
}

/* Numbered flow-chart: orange circles on a connecting line, labels below */
function Flowchart({ steps, lang }) {
  const n = steps.length;
  return (
    <div style={{ position:"relative", display:"flex", gap:12 }}>
      <div style={{ position:"absolute", top:26, left:`${50/n}%`, right:`${50/n}%`, height:2, background:"hsl(var(--border))", zIndex:0 }} />
      {steps.map((s,i)=>(
        <div key={i} style={{ flex:1, position:"relative", zIndex:1, display:"flex", flexDirection:"column", alignItems:"center", textAlign:"center" }}>
          <div style={{ width:54, height:54, borderRadius:"50%", background:"hsl(var(--primary))", color:"#fff", fontWeight:700, fontSize:20, display:"flex", alignItems:"center", justifyContent:"center", boxShadow:"0 0 0 8px hsl(var(--background)), var(--shadow-md)" }}>{i+1}</div>
          <div style={{ fontSize:15, fontWeight:700, color:"hsl(var(--foreground))", marginTop:16 }}>{typeof s.t==="object"?tri(lang,s.t.en,s.t.zh_TW,s.t.zh_CN):s.t}</div>
          {s.d && <div style={{ fontSize:12.5, lineHeight:1.55, color:"hsl(var(--muted-foreground))", marginTop:6, maxWidth:170 }}>{tri(lang,s.d.en,s.d.zh_TW,s.d.zh_CN)}</div>}
        </div>
      ))}
    </div>
  );
}

function PaymentMethods({ t }) {
  const pays = [["pay-wechat.png","WeChat Pay"],["pay-alipay.png","Alipay"],["pay-unionpay.png","UnionPay"]];
  return (
    <section className="wk-section" style={{ paddingTop:56, paddingBottom:56 }}>
      <div className="wk-container" style={{ textAlign:"center" }}>
        <h3 style={{ fontSize:22, fontWeight:700, color:"hsl(var(--foreground))", marginBottom:8 }}>{t.payTitle}</h3>
        <p style={{ fontSize:15, color:"hsl(var(--muted-foreground))", margin:"0 auto 28px", maxWidth:520 }}>{t.payDesc}</p>
        <div style={{ display:"flex", justifyContent:"center", gap:24, flexWrap:"wrap" }}>
          {pays.map(([f,label])=>(
            <div key={f} style={{ height:56, padding:"0 20px", background:"hsl(var(--card))", border:"1px solid hsl(var(--border))", borderRadius:"var(--radius-md)", display:"flex", alignItems:"center", boxShadow:"var(--shadow-sm)" }}>
              <img src={A+f} alt={label} style={{ height:32, objectFit:"contain" }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Online booking QR block for service pages */
function OnlineBooking({ t, qr=A+"qr-official-account.jpg" }) {
  return (
    <section className="wk-section" style={{ background:"hsl(var(--muted))", paddingTop:56, paddingBottom:56 }}>
      <div className="wk-container" style={{ display:"flex", alignItems:"center", justifyContent:"center", gap:32, flexWrap:"wrap" }}>
        <img src={qr} alt="QR" style={{ width:150, height:150, borderRadius:"var(--radius-md)", background:"#fff", padding:8, boxShadow:"var(--shadow-sm)" }} />
        <div style={{ maxWidth:360 }}>
          <div className="wk-eyebrow">{t.bookingTitle}</div>
          <h3 style={{ fontSize:24, fontWeight:700, color:"hsl(var(--foreground))", margin:"8px 0" }}>{t.bookingTitle}</h3>
          <p style={{ fontSize:15, lineHeight:1.6, color:"hsl(var(--muted-foreground))", margin:0 }}>{t.bookingDesc}</p>
        </div>
      </div>
    </section>
  );
}

/* Official channels band — appears on every page above the footer */
function OfficialChannels({ t, lang }) {
  const ch = [
    { qr:A+"qr-miniprogram.jpg", name:tri(lang,"Official Mini Program","官方小程序","官方小程序"), desc:tri(lang,"Quick ordering & tracking","快速下單與追蹤","快速下单与追踪") },
    { qr:A+"qr-official-account.jpg", name:tri(lang,"Official WeChat Account","官方微信公眾號","官方微信公众号"), desc:tri(lang,"Fr8ight Freight Forwarding","Fr8ight 專業轉運","Fr8ight 专业转运") },
    { qr:A+"qr-support.jpg", name:tri(lang,"Dedicated Support","專屬客服","专属客服"), desc:tri(lang,"1-on-1 consultation · join for member perks","一對一專屬諮詢 · 加入社群領取福利","一对一专属咨询 · 加入社群领取福利") },
  ];
  return (
    <section style={{ background:"hsl(var(--muted))", borderTop:"1px solid hsl(var(--border))" }}>
      <div className="wk-container" style={{ padding:"56px 24px" }}>
        <div style={{ textAlign:"center", marginBottom:36 }}>
          <div className="wk-eyebrow">{t.channelsTitle}</div>
          <h2 className="wk-h2" style={{ fontSize:28 }}>{t.channelsDesc}</h2>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24, maxWidth:820, margin:"0 auto" }}>
          {ch.map((c,i)=>(
            <div key={i} style={{ background:"hsl(var(--card))", border:"1px solid hsl(var(--border))", borderRadius:"var(--radius-lg)", padding:24, textAlign:"center", boxShadow:"var(--shadow-sm)" }}>
              <img src={c.qr} alt={c.name} style={{ width:128, height:128, objectFit:"contain", background:"#fff", borderRadius:"var(--radius-md)", padding:6 }} />
              <div style={{ fontSize:15, fontWeight:700, color:"hsl(var(--foreground))", marginTop:14 }}>{c.name}</div>
              <div style={{ fontSize:13, color:"hsl(var(--muted-foreground))", marginTop:4 }}>{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Share buttons — link out to real social destinations */
function ShareButtons({ t }) {
  const items = [
    ["Facebook", A+"icon-facebook.png", "https://www.facebook.com/fr8ight"],
    ["Instagram", A+"icon-instagram.png", "https://instagram.com/fr8ight.hk"],
  ];
  return (
    <div style={{ display:"flex", alignItems:"center", gap:10 }}>
      <span style={{ fontSize:13, fontWeight:600, color:"hsl(var(--muted-foreground))" }}>{t.share}:</span>
      {items.map(([label,src,href])=>(
        <a key={label} href={href} target="_blank" rel="noreferrer" title={label}
           style={{ width:36, height:36, borderRadius:"50%", display:"flex", alignItems:"center", justifyContent:"center", background:"hsl(var(--muted))", border:"1px solid hsl(var(--border))", overflow:"hidden" }}>
          <img src={src} alt={label} style={{ width:20, height:20, objectFit:"contain" }} />
        </a>
      ))}
    </div>
  );
}

function ContactForm({ t, lang }) {
  const [sent, setSent] = useState(false);
  if (sent) return (
    <div style={{ textAlign:"center", padding:"32px 0" }}>
      <div style={{ fontSize:20, fontWeight:700, color:"hsl(var(--foreground))" }}>{tri("en","Thank you — we'll be in touch shortly.","感謝您 — 我們會盡快與您聯繫。","感谢您 — 我们会尽快与您联系。")}</div>
      <Button variant="outline" style={{ marginTop:16 }} onClick={()=>setSent(false)}>{t.send}</Button>
    </div>
  );
  return (
    <form onSubmit={(e)=>{e.preventDefault();setSent(true);}} style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:18 }}>
      <div><Label>{t.name}</Label><Input placeholder="Jane Chen" required /></div>
      <div><Label>{t.email}</Label><Input type="email" placeholder="you@company.com" required /></div>
      <div style={{ gridColumn:"1 / -1" }}><Label>{t.service}</Label>
        <Select options={SERVICES.map(s=>({value:s.key,label:tri(lang,s.title.en,s.title.zh_TW,s.title.zh_CN)}))} /></div>
      <div style={{ gridColumn:"1 / -1" }}><Label>{t.message}</Label><Textarea rows={4} /></div>
      <div style={{ gridColumn:"1 / -1" }}><Button type="submit" size="lg" style={{ width:"100%" }}>{t.send}</Button></div>
    </form>
  );
}

function Footer({ t, lang, go }) {
  const addr = tri(lang, BRAND.addr.en, BRAND.addr.zh_TW, BRAND.addr.zh_CN);
  const hours = tri(lang, BRAND.hours.en, BRAND.hours.zh_TW, BRAND.hours.zh_CN);
  return (
    <footer style={{ background:"hsl(var(--secondary))", color:"#fff" }}>
      <div className="wk-container" style={{ padding:"56px 24px" }}>
        <div style={{ display:"grid", gridTemplateColumns:"1.6fr 1fr 1.4fr", gap:40 }}>
          <div>
            <img src={LOGO} alt="Fr8ight" style={{ height:36, marginBottom:16, filter:"brightness(0) invert(1)" }} />
            <p style={{ fontSize:14, lineHeight:1.6, color:"rgba(255,255,255,0.7)", maxWidth:320 }}>
              {tri(lang,"Professional cross-border freight, moving and warehousing connecting Hong Kong and the Mainland.","專為跨境貨運、搬家及倉儲提供的專業物流解決方案，連接香港與內地。","专为跨境货运、搬家及仓储提供的专业物流解决方案，连接香港与内地。")}
            </p>
            <div style={{ display:"flex", gap:14, marginTop:16 }}>
              <a href={"https://"+BRAND.facebook} style={{ color:"rgba(255,255,255,0.75)" }} title="Facebook"><Ic d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3Z" size={18} color="currentColor" /></a>
              <a href={"https://instagram.com/"+BRAND.instagram} style={{ color:"rgba(255,255,255,0.75)" }} title="Instagram"><Ic d="M16 3H8a5 5 0 0 0-5 5v8a5 5 0 0 0 5 5h8a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM17.5 6.5h.01" size={18} color="currentColor" /></a>
            </div>
          </div>
          <div>
            <h4 style={{ fontSize:15, fontWeight:600, marginBottom:16 }}>{tri(lang,"Quick Links","快速連結","快速链接")}</h4>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10 }}>
              {[["services",t.services],["cases",t.cases],["about",t.about],["blog",t.blog],["contact",t.contact]].map(([k,l])=>(<li key={k}><a href="#" onClick={(e)=>{e.preventDefault();go&&go(k);}} style={{ fontSize:14, color:"rgba(255,255,255,0.7)" }}>{l}</a></li>))}
            </ul>
          </div>
          <div>
            <h4 style={{ fontSize:15, fontWeight:600, marginBottom:16 }}>{t.contact}</h4>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:9, fontSize:13.5, color:"rgba(255,255,255,0.7)", lineHeight:1.5 }}>
              <li>{addr}</li>
              <li>WhatsApp: {BRAND.whatsapp}</li>
              <li>{tri(lang,"Tel","電話","电话")}: {BRAND.phone}</li>
              <li>Email: {BRAND.email}</li>
              <li>{hours}</li>
            </ul>
          </div>
        </div>
        <div style={{ borderTop:"1px solid rgba(255,255,255,0.15)", marginTop:40, paddingTop:24, display:"flex", justifyContent:"space-between", fontSize:13, color:"rgba(255,255,255,0.6)", flexWrap:"wrap", gap:12 }}>
          <span>© 2026 Fr8ight. {tri(lang,"All rights reserved.","版權所有。","版权所有。")}</span>
          <span style={{ display:"flex", gap:24 }}><a href="#" style={{ color:"inherit" }}>{tri(lang,"Privacy","隱私政策","隐私政策")}</a><a href="#" style={{ color:"inherit" }}>{tri(lang,"Terms","服務條款","服务条款")}</a></span>
        </div>
      </div>
    </footer>
  );
}

/* Right-side floating contact widget: mini-program, support WeChat, official account, WhatsApp */
function FloatingWidget({ lang, go }) {
  const [openIdx, setOpenIdx] = useState(-1);
  const items = [
    { key:"mini", label:tri(lang,"Mini Program","微信小程序","微信小程序"), color:"#07C160", iconImg:A+"icon-miniprogram.png",
      qr:A+"qr-miniprogram.jpg", desc:tri(lang,"Quick ordering & tracking","快速下單與追蹤","快速下单与追踪") },
    { key:"support", label:tri(lang,"Support WeChat","客服微信","客服微信"), color:"#07C160", iconImg:A+"icon-wechat.png",
      qr:A+"qr-support.jpg", desc:tri(lang,"1-on-1 dedicated consultation","一對一專屬諮詢","一对一专属咨询") },
    { key:"account", label:tri(lang,"Official Account","官方公眾號","官方公众号"), color:"#E77E23",
      icon:"M4 4h16v12H5.2L4 17.2V4Z M8 9h8 M8 12h5",
      qr:A+"qr-official-account.jpg", desc:tri(lang,"Fr8ight Freight Forwarding","Fr8ight 專業轉運","Fr8ight 专业转运") },
    { key:"whatsapp", label:"WhatsApp", color:"#25D366", href:"https://wa.me/85264410713", iconImg:A+"icon-whatsapp.png",
      desc:BRAND.whatsapp } ];
  return (
    <div style={{ position:"fixed", right:16, top:"50%", transform:"translateY(-50%)", zIndex:60, display:"flex", flexDirection:"column", gap:12 }}>
      {items.map((it,i)=>(
        <div key={it.key} style={{ position:"relative" }} onMouseEnter={()=>setOpenIdx(i)} onMouseLeave={()=>setOpenIdx(-1)}>
          <a href={it.href||"#"} target={it.href?"_blank":undefined} rel="noreferrer"
             onClick={(e)=>{ if(!it.href){e.preventDefault(); setOpenIdx(openIdx===i?-1:i);} }}
             style={{ width:44, height:44, borderRadius:"50%", background:"hsl(var(--primary))", color:"#fff", boxShadow:"var(--shadow-lg)", display:"flex", alignItems:"center", justifyContent:"center", cursor:"pointer", overflow:"hidden" }} title={it.label}>
            {it.iconImg ? <img src={it.iconImg} alt={it.label} style={{ width:24, height:24, objectFit:"contain" }} /> : <Ic d={it.icon} size={20} color="#fff" />}
          </a>
          {openIdx===i && (
            <div style={{ position:"absolute", right:"56px", top:"50%", transform:"translateY(-50%)", background:"hsl(var(--card))", border:"1px solid hsl(var(--border))", borderRadius:"var(--radius-md)", boxShadow:"var(--shadow-xl)", padding:16, width: it.qr?170:210, textAlign:"center" }}>
              {it.qr && <img src={it.qr} alt={it.label} style={{ width:130, height:130, objectFit:"contain", background:"#fff", borderRadius:8 }} />}
              <div style={{ fontSize:14, fontWeight:700, color:"hsl(var(--foreground))", marginTop: it.qr?10:0 }}>{it.label}</div>
              <div style={{ fontSize:12.5, color:"hsl(var(--muted-foreground))", marginTop:4 }}>{it.desc}</div>
              {it.key==="whatsapp" && <a href={it.href} target="_blank" rel="noreferrer" style={{ display:"inline-block", marginTop:10, fontSize:13, fontWeight:600, color:"hsl(var(--primary))" }}>{tri(lang,"Chat now →","立即對話 →","立即对话 →")}</a>}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

window.WK = { A, LOGO, tri, BRAND, L, SLIDES, WHY, PROCESS, ORDER, SERVICES, FAQ, SERVICE_FAQ, CMS, getStore, setStore, pk, resolveImg,
  Ic, PageHero, Flowchart, PaymentMethods, OnlineBooking, OfficialChannels, ShareButtons, ContactForm, Footer, FloatingWidget,
  Button, Badge, ServiceCard, BlogCard, CaseStudyCard, TestimonialCard, AdvantageCard, Accordion, Input, Textarea, Select, Label };
