// Animated client-stories carousel — auto-advancing, pauses on hover const SF_STORIES = [ { client:'KMB', tag:'Transport', pillar:'wireless', en:'Depot Wi-Fi rollout across 12 bus depots — engineers and field tablets stay connected from yard to workshop.', zh:'12 個車廠的 Wi-Fi 部署 — 工程師及現場平板由停車場到維修廠保持連線。' }, { client:'MTR', tag:'Transport', pillar:'cabling', en:'Structured cabling and fibre backbone for station back-of-house — built around the operating timetable, no service impact.', zh:'車站後勤結構化佈線及光纖骨幹 — 配合營運時間表，不影響服務。' }, { client:'Hospital Authority', tag:'Healthcare', pillar:'serverroom', en:'Server room consolidation with A/B power feeds and HCI compute — clinical systems run uninterrupted across upgrades.', zh:'伺服器室整合，配備 A/B 雙路電源及 HCI 運算 — 升級期間臨床系統不間斷。' }, { client:'Macau Tower', tag:'Hospitality', pillar:'surveillance',en:'4K IP camera upgrade plus ANPR-driven carpark — every entry logged, every face searchable.', zh:'4K IP 攝影機升級及車牌辨識停車場 — 每次進出皆有紀錄，可即時搜尋。' }, { client:'BOC Hong Kong', tag:'Banking', pillar:'cybersec', en:'Branch-network firewall refresh with 24/7 SOC monitoring — TM-G-1 audit findings closed in one cycle.', zh:'分行網絡防火牆更新及 24/7 SOC 監察 — 一個審核週期內完成 TM-G-1 整改。' }, { client:'JPMorgan HK', tag:'Banking', pillar:'cabling', en:'Trading-floor recabling done overnight in cutover windows — desks live again before opening bell.', zh:'交易樓面通宵切換重新佈線 — 開市前完成所有座位上線。' }, { client:'Fusion Bank', tag:'Banking', pillar:'cloud', en:'Hybrid cloud landing zone and immutable backups — virtual bank stayed online through every cutover.', zh:'混合雲架構及不可變備份 — 虛擬銀行在每次切換中保持線上。' }, { client:'HKT', tag:'Telco', pillar:'cabling', en:'Carrier-grade fibre splice and termination at hub sites — certified to spec, documented for the regulator.', zh:'樞紐站電訊級光纖熔接 — 達規格認證，文件齊全。' }, { client:'China Mobile HK', tag:'Telco', pillar:'wireless', en:'Indoor Wi-Fi distribution to complement carrier 5G — 5,000 m² of seamless coverage, zero black spots.', zh:'室內 Wi-Fi 配合電訊商 5G — 5,000 平方米無縫覆蓋，零盲點。' }, { client:'HGC', tag:'Telco', pillar:'serverroom', en:'POP rack build-out with intelligent PDUs — every circuit metered, every breaker labelled.', zh:'POP 機櫃建設，配備智能 PDU — 每路電源計量，每個斷路器有標籤。' }, { client:'Microsoft Xbox', tag:'Tech', pillar:'wireless', en:'Pop-up event Wi-Fi for product launch — 1,200 simultaneous devices, social streams without buffering.', zh:'產品發佈活動快閃 Wi-Fi — 1,200 部裝置同時連線，社交直播無緩衝。' }, { client:'Schneider Electric', tag:'Industrial', pillar:'iot', en:'BMS integration and environmental sensors — facility-wide energy data feeding their own platform.', zh:'BMS 整合及環境感測器 — 全廠能源數據接入其平台。' }, { client:'Johnson Controls', tag:'Industrial', pillar:'iot', en:'Smart-building LoRaWAN deployment — temperature, occupancy, and energy on a single dashboard.', zh:'智能樓宇 LoRaWAN 部署 — 溫度、人流、能源於單一儀表板。' }, { client:'Carrier', tag:'Industrial', pillar:'iot', en:'Plant-floor connectivity and asset tracking — engineers locate any tool or fixture in seconds.', zh:'廠房連線及資產追蹤 — 工程師數秒內定位工具或設備。' }, { client:'Jebsen', tag:'Distribution', pillar:'business', en:'ERP rollout across HK and regional offices — finance, ops, and sales on one set of numbers.', zh:'ERP 於港及區域辦公室部署 — 財務、營運、銷售統一數字。' }, { client:'Shun Tak', tag:'Hospitality', pillar:'wireless', en:'Ferry-terminal Wi-Fi and digital signage — passengers connected from check-in to gate.', zh:'渡輪碼頭 Wi-Fi 及數碼顯示 — 旅客由登記到登船全程連線。' }, { client:'Turbojet', tag:'Transport', pillar:'surveillance',en:'CCTV refresh and access control across passenger areas — incident searches that used to take hours now take minutes.', zh:'客運區閉路電視更新及門禁 — 過往數小時的事件搜尋，現只需數分鐘。' }, { client:'Sun Ferry', tag:'Transport', pillar:'cabling', en:'Pier-side cabling and IP telephony — fully grounded, salt-air rated, built to last.', zh:'碼頭佈線及 IP 電話 — 完整接地、抗鹽霧、耐用設計。' }, { client:'Caritas', tag:'Community Org', pillar:'managed', en:'Multi-site managed IT for community service centres — one helpdesk number for every site.', zh:'社區服務中心多點託管 IT — 統一服務台電話。' }, { client:'HKFYG', tag:'Community Org', pillar:'managed', en:'Office IT modernisation on a community-org budget — Microsoft 365, right-sized hardware, real engineers.', zh:'社區機構預算下的辦公室 IT 現代化 — Microsoft 365、量身規劃硬件、真工程師。' }, { client:'Eu Yan Sang', tag:'Retail', pillar:'wireless', en:'Retail-store Wi-Fi and POS network rebuild — Saturdays no longer lose transactions to lag.', zh:'零售門店 Wi-Fi 及 POS 網絡重建 — 週六不再因延遲失單。' }, { client:'Fujifilm', tag:'Retail', pillar:'cabling', en:'Showroom and back-office cabling — single backbone supporting POS, signage, and conferencing.', zh:'陳列室及後勤佈線 — 單一骨幹支援 POS、顯示、會議。' }, { client:'Ricoh', tag:'Office', pillar:'managed', en:'Distributed office IT support and printer fleet management — one team for every site.', zh:'分散辦公室 IT 支援及打印機艦隊管理 — 一隊人服務全部。' }, { client:'ASL', tag:'Tech', pillar:'serverroom', en:'Co-located rack hand-off and power audit — A/B feeds verified, every patch documented.', zh:'託管機櫃移交及電源審核 — A/B 雙路驗證，每條接線記錄。' }, { client:'iTechTower', tag:'Real Estate', pillar:'iot', en:'Smart-building backbone for tenants — BMS, signage, and access control sharing one infrastructure.', zh:'租戶智能樓宇骨幹 — BMS、顯示、門禁共用基建。' }, { client:'Wi-Fi.HK', tag:'Public Wi-Fi', pillar:'wireless', en:'Public-area Wi-Fi engineering — captive portal, analytics, and reliability the public actually feels.', zh:'公共區域 Wi-Fi 工程 — 認證入口、分析、市民可感受到的穩定性。' }, { client:'TMEIC', tag:'Industrial', pillar:'serverroom', en:'Production-line server cabinets and monitoring — a stop-the-line failure becomes a 5-minute fix.', zh:'生產線伺服器機櫃及監察 — 過往停線故障，現 5 分鐘修復。' }, { client:'JSW Steel', tag:'Industrial', pillar:'cabling', en:'Heavy-industrial cabling rated for the environment — fibre survives the heat, the dust, and the years.', zh:'重工業環境級佈線 — 光纖耐熱、防塵、長年穩定。' }, { client:'Nexify', tag:'Tech', pillar:'cloud', en:'Cloud migration with rollback runbooks — every step rehearsed, every cut reversible.', zh:'附帶回退手冊的雲端遷移 — 每步演練，每次切換可還原。' }, ]; const SFFeatured = ({ lang, accent, setPage }) => { const t = (en, zh) => sfT(lang, en, zh); const stories = SF_STORIES; const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const [animKey, setAnimKey] = React.useState(0); const total = stories.length; const SLIDE_MS = 4500; React.useEffect(() => { if (paused) return; const id = setInterval(() => setIdx(i => (i + 1) % total), SLIDE_MS); return () => clearInterval(id); }, [paused, total]); React.useEffect(() => { setAnimKey(k => k + 1); }, [idx]); const go = (n) => setIdx((n + total) % total); const cur = stories[idx]; const pillar = SF_PILLARS?.[cur.pillar]; const pillarLabel = pillar ? (lang==='en' ? pillar.en.kicker : pillar.zh.kicker) : ''; // build a stable, large client list for the marquee const ALL_CLIENTS = [...new Set([...stories.map(s=>s.client), ...(window.SF_CLIENTS||[])])]; return (
{t('Client stories','客戶案例')}

{t('500+ projects across HK, Macau, and Greater China.', '在港澳及大中華區完成超過 500 個項目。')}

{t('Local ISPs · banking & FSI · schools · SMBs · hotels · government.', '本地 ISP · 銀行金融 · 學校 · 中小企業 · 酒店 · 政府部門。')}

{t(' ', ' ')}

{/* Carousel */}
setPaused(true)} onMouseLeave={()=>setPaused(false)} style={{ position:'relative', background:'var(--bg-card)', border:'1px solid var(--border-subtle)', minHeight:280, display:'grid', gridTemplateColumns:'1fr', }} > {/* progress bar */}
{/* slide content */}
{/* Left: client identity */} {/* Right: outcome story */}

{lang==='en' ? cur.en : cur.zh}

{/* Controls + dots */}
{stories.map((_, i) => (
{/* Marquee — every client we've worked with */}
{t('A partial list of clients we are proud to have served:', '我們有幸服務過的部分客戶：')}
{[...ALL_CLIENTS, ...ALL_CLIENTS].map((c, i) => ( {c} ))}

{t(' ', ' ')}

); }; const SFContact = ({ lang, accent, setPage }) => { const t = (en, zh) => sfT(lang, en, zh); const [submitted, setSubmitted] = React.useState(false); const [sending, setSending] = React.useState(false); const [sendError, setSendError] = React.useState(false); const handleSubmit = async (e) => { e.preventDefault(); setSending(true); setSendError(false); const fd = new FormData(e.target); const data = Object.fromEntries(fd.entries()); try { const res = await fetch('/api/smtp.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }); if (res.ok) { setSubmitted(true); } else { setSendError(true); } } catch { setSendError(true); } finally { setSending(false); } }; return (
{t('Contact', '聯絡')}

{t('Book a free site survey.', '預約免費上門勘察。')}

{t('We walk through, scope the work, and quote a fixed price within 5 working days. HK & Macau covered.', '我們會上門勘察、釐定範圍，並於 5 個工作天內提供固定報價。覆蓋香港及澳門。')}

{[ { l:t('Office','辦公室'), v:'Unit 305, 3/F, Yen Sheng Centre, 64 Hoi Yuen Road, Kwun Tong, Kowloon, HK' }, { l:t('Phone / WhatsApp','電話／WhatsApp'), v:'+852 6552 0772', mono:true }, { l:t('Email','電郵'), v:'help@sfl.hk', mono:true }, { l:t('Hours','辦公時間'), v:t('Mon–Fri 9:30am – 6:00pm','星期一至五 9:30 – 18:00') }, ].map((row,i,a)=>(
{row.l} {row.v}
))}
{!submitted ? (
FORM / SITE-SURVEY-REQUEST
{[ {k:'name', l:t('Name','姓名'), p:t('Chan Tai Man','陳大文')}, {k:'company', l:t('Company','公司'), p:'Acme Trading Ltd'}, {k:'phone', l:t('Phone','電話'), p:'+852 ...', mono:true}, {k:'email', l:t('Email','電郵'), p:'you@company.com', mono:true}, ].map(f=>(
e.target.style.borderColor=accent} onBlur={e=>e.target.style.borderColor='var(--border-subtle)'}/>
))}