// Header — emergency announce bar + sticky main bar with Services + Industries mega menus const SFHeader = ({ lang, setLang, dark, setDark, accent, page, setPage }) => { const [scrolled, setScrolled] = React.useState(false); const [openMenu, setOpenMenu] = React.useState(null); // 'services' | 'industries' | null const closeTimer = React.useRef(null); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); React.useEffect(() => { setOpenMenu(null); }, [page]); const t = (en, zh) => sfT(lang, en, zh); const enter = (k) => { if (closeTimer.current) clearTimeout(closeTimer.current); setOpenMenu(k); }; const leave = () => { closeTimer.current = setTimeout(() => setOpenMenu(null), 140); }; const items = [ { k:'home', en:'Home', zh:'主頁' }, { k:'services', en:'Services', zh:'服務', mega:true }, { k:'industries', en:'Industries', zh:'行業', mega:true }, { k:'contact', en:'Contact', zh:'聯絡' }, ]; const isActive = (k) => page===k || (k==='services' && page.startsWith('pillar:')) || (k==='industries' && page.startsWith('industry:')); return (
{/* Emergency / IR hotline strip */}
{t('NOC operational · 24/7 incident response', 'NOC 運作中 · 24/7 緊急應變')} {t('Call Support Now', '即時聯絡支援')}
setPage('home')} style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer' }}>
{/* MEGA MENU PANELS */} {openMenu==='services' && (
enter('services')} onMouseLeave={leave} style={{ position:'absolute', left:0, right:0, top:'100%', background:'var(--bg-default)', borderBottom:'1px solid var(--border-subtle)', boxShadow:'0 24px 48px -16px rgba(0,0,0,.18)', zIndex:40, }}>
{SF_PILLAR_GROUPS.map(grp => (
{t(grp.en, grp.zh).toUpperCase()}
{grp.ids.map(pid => { const pp = SF_PILLARS[pid]; if (!pp) return null; const pt = lang==='en' ? pp.en : pp.zh; return ( setPage(`pillar:${pid}`)} style={{ display:'block', padding:'8px 0', cursor:'pointer', borderBottom:'1px solid var(--border-faint, transparent)', }}>
{pt.kicker}
{pt.title}
); })}
))}
{t('10 capabilities · usually a few, working together', '10 項能力 · 通常幾項並用')} setPage('services')} style={{ fontSize:12, color:accent, cursor:'pointer', fontWeight:600, fontFamily:'var(--font-mono)', }}>{t('See all services →','查看全部服務 →')}
)} {openMenu==='industries' && (
enter('industries')} onMouseLeave={leave} style={{ position:'absolute', left:0, right:0, top:'100%', background:'var(--bg-default)', borderBottom:'1px solid var(--border-subtle)', boxShadow:'0 24px 48px -16px rgba(0,0,0,.18)', zIndex:40, }}>
{t('INDUSTRIES WE SERVE','服務行業')}
{SF_INDUSTRY_LIST.map((id, i) => { const ind = SF_INDUSTRY_PAGES[id]; const x = lang==='en'?ind.en:ind.zh; return ( setPage(`industry:${id}`)} style={{ padding:'18px 18px', cursor:'pointer', background:'var(--bg-card)', borderRight: (i+1)%4!==0 ? '1px solid var(--border-subtle)' : 'none', borderBottom: i < SF_INDUSTRY_LIST.length-4 ? '1px solid var(--border-subtle)' : 'none', transition:'background 160ms', }} onMouseEnter={e=>e.currentTarget.style.background='var(--bg-fill-1)'} onMouseLeave={e=>e.currentTarget.style.background='var(--bg-card)'}>
{String(i+1).padStart(2,'0')}
{x.name}
{x.title}
); })}
{t('Each industry has different best-fit capabilities', '每個行業適合不同的服務組合')} setPage('industries')} style={{ fontSize:12, color:accent, cursor:'pointer', fontWeight:600, fontFamily:'var(--font-mono)', }}>{t('See all industries →','查看全部行業 →')}
)}
); }; const SFMark = ({ accent='#D9931C', dark=false, size=32 }) => ( ); window.SFHeader = SFHeader; window.SFMark = SFMark;