// 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 (
    <section className="section section-alt" style={{ position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent} opacity={0.5}/>
      <style>{`
        @keyframes sfStoryIn { 0% { opacity:0; transform: translateY(12px); } 100% { opacity:1; transform: translateY(0); } }
        @keyframes sfBarFill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
        @keyframes sfMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .sf-story-in { animation: sfStoryIn 520ms cubic-bezier(.2,.7,.2,1) both; }
        .sf-bar-fill { transform-origin: left center; animation: sfBarFill linear forwards; }
        .sf-marquee-track { animation: sfMarquee 60s linear infinite; }
        .sf-marquee-track:hover { animation-play-state: paused; }
      `}</style>

      <div className="container" style={{ position:'relative', zIndex:1 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:24, flexWrap:'wrap', gap:16 }}>
          <div>
            <div className="eyebrow">{t('Client stories','客戶案例')}</div>
            <h2 style={{ maxWidth:760, margin:0 }}>
              {t('500+ projects across HK, Macau, and Greater China.', '在港澳及大中華區完成超過 500 個項目。')}
            </h2>
            <p className="caption" style={{ marginTop:10, marginBottom:0 }}>
              {t('Local ISPs · banking & FSI · schools · SMBs · hotels · government.',
                 '本地 ISP · 銀行金融 · 學校 · 中小企業 · 酒店 · 政府部門。')}
            </p>
          </div>
          <p style={{ color:'var(--fg-muted)', fontSize:13, maxWidth:360, margin:0 }}>
            {t('Auto-advancing — hover to pause. Ask us about any client; we will share the relevant case detail.',
               '自動播放 — 滑鼠停留可暫停。如需任何客戶的詳細案例，請隨時聯絡我們。')}
          </p>
        </div>

        {/* Carousel */}
        <div
          onMouseEnter={()=>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 */}
          <div style={{ position:'absolute', top:0, left:0, right:0, height:2, background:'var(--border-subtle)' }}>
            <div key={animKey} className={paused ? '' : 'sf-bar-fill'} style={{
              height:'100%', background:accent, width:'100%',
              animationDuration: `${SLIDE_MS}ms`,
            }}/>
          </div>

          {/* slide content */}
          <div key={animKey} className="sf-story-in" style={{
            display:'grid', gridTemplateColumns:'minmax(0, 280px) 1fr', gap:0,
          }}>
            {/* Left: client identity */}
            <div style={{
              padding:'40px 32px',
              borderRight:'1px solid var(--border-subtle)',
              background:'var(--bg-fill-1)',
              display:'flex', flexDirection:'column', justifyContent:'space-between',
              minHeight:280,
            }}>
              <div>
                <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.1em', marginBottom:14 }}>
                  {String(idx+1).padStart(2,'0')} / {String(total).padStart(2,'0')}
                </div>
                <div style={{ fontSize:32, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1.1, marginBottom:10 }}>
                  {cur.client}
                </div>
                <div className="mono" style={{ fontSize:11, color:'var(--fg-muted)', letterSpacing:'.06em' }}>
                  {cur.tag.toUpperCase()}
                </div>
              </div>
              {pillar && (
                <a onClick={()=>setPage(`pillar:${cur.pillar}`)} style={{
                  display:'inline-flex', alignItems:'center', gap:8, marginTop:24,
                  fontSize:12, color:accent, fontFamily:'var(--font-mono)', letterSpacing:'.04em',
                  cursor:'pointer',
                }}>
                  {pillarLabel} →
                </a>
              )}
            </div>

            {/* Right: outcome story */}
            <div style={{
              padding:'40px 36px', display:'flex', flexDirection:'column', justifyContent:'space-between',
              minHeight:280,
            }}>
              <p style={{
                fontSize:22, lineHeight:1.4, color:'var(--fg-default)', margin:0,
                fontFamily:'var(--font-display)', fontWeight:500, letterSpacing:'-0.01em',
                textWrap:'pretty', maxWidth:680,
              }}>
                {lang==='en' ? cur.en : cur.zh}
              </p>

              {/* Controls + dots */}
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, marginTop:32 }}>
                <div style={{ display:'flex', gap:6, alignItems:'center', flex:1, flexWrap:'wrap', maxWidth:'70%' }}>
                  {stories.map((_, i) => (
                    <button key={i} onClick={()=>go(i)} aria-label={`Story ${i+1}`} style={{
                      width: i===idx ? 18 : 6, height:6,
                      background: i===idx ? accent : 'var(--border-default)',
                      border:'none', borderRadius:0, padding:0, cursor:'pointer',
                      transition:'all 220ms ease',
                    }}/>
                  ))}
                </div>
                <div style={{ display:'flex', gap:6 }}>
                  <button onClick={()=>go(idx-1)} className="btn btn-ghost btn-sm" aria-label="Previous">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
                  </button>
                  <button onClick={()=>setPaused(p=>!p)} className="btn btn-ghost btn-sm" aria-label={paused?'Play':'Pause'}>
                    {paused ? (
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4l14 8-14 8V4z"/></svg>
                    ) : (
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
                    )}
                  </button>
                  <button onClick={()=>go(idx+1)} className="btn btn-ghost btn-sm" aria-label="Next">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Marquee — every client we've worked with */}
        <div style={{ marginTop:32, overflow:'hidden', position:'relative',
          maskImage:'linear-gradient(90deg, transparent, black 8%, black 92%, transparent)',
          WebkitMaskImage:'linear-gradient(90deg, transparent, black 8%, black 92%, transparent)' }}>
          <div className="caption" style={{ marginBottom:14 }}>
            {t('A partial list of clients we are proud to have served:',
               '我們有幸服務過的部分客戶：')}
          </div>
          <div className="sf-marquee-track" style={{ display:'flex', gap:0, width:'max-content' }}>
            {[...ALL_CLIENTS, ...ALL_CLIENTS].map((c, i) => (
              <span key={i} className="mono" style={{
                padding:'10px 22px', fontSize:13, color:'var(--fg-muted)',
                borderLeft: i===0 ? 'none' : '1px solid var(--border-subtle)',
                whiteSpace:'nowrap', letterSpacing:'.02em',
              }}>{c}</span>
            ))}
          </div>
        </div>

        <p className="caption" style={{ marginTop:14, fontStyle:'italic' }}>
          {t('* Customer references available on request — please contact us.',
             '* 如需客戶推薦人，請與我們聯絡。')}
        </p>
      </div>
    </section>
  );
};

const SFContact = ({ lang, accent, setPage }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="section" id="contact" style={{ position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent} opacity={0.5}/>
      <div className="container" style={{ position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start' }}>
        <div>
          <div className="eyebrow">{t('Contact', '聯絡')}</div>
          <h2 style={{ marginBottom:16 }}>
            {t('Book a free site survey.', '預約免費上門勘察。')}
          </h2>
          <p style={{ color:'var(--fg-body)', fontSize:17, marginBottom:32, maxWidth:480 }}>
            {t('We walk through, scope the work, and quote a fixed price within 5 working days. HK & Macau covered.',
               '我們會上門勘察、釐定範圍，並於 5 個工作天內提供固定報價。覆蓋香港及澳門。')}
          </p>
          <div style={{ display:'grid', gap:0, border:'1px solid var(--border-subtle)' }}>
            {[
              { 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)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'140px 1fr', gap:16, padding:'14px 18px',
                borderBottom: i<a.length-1 ? '1px solid var(--border-subtle)' : 'none',
              }}>
                <span className="mono" style={{ fontSize:11, color:'var(--fg-muted)', letterSpacing:'.04em' }}>{row.l}</span>
                <span style={{ fontSize:14, color:'var(--fg-default)', fontFamily: row.mono ? 'var(--font-mono)' : 'inherit' }}>{row.v}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          {!submitted ? (
            <form onSubmit={e=>{e.preventDefault(); setSubmitted(true);}} style={{
              padding:24, background:'var(--bg-card)', border:'1px solid var(--border-subtle)',
            }}>
              <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em', marginBottom:16 }}>
                FORM / SITE-SURVEY-REQUEST
              </div>
              {[
                {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=>(
                <div key={f.k} style={{ marginBottom:14 }}>
                  <label className="mono" style={{ display:'block', fontSize:11, color:'var(--fg-muted)', letterSpacing:'.04em', marginBottom:6 }}>{f.l}</label>
                  <input required placeholder={f.p} style={{
                    width:'100%', padding:'10px 12px', fontSize:14,
                    fontFamily: f.mono ? 'var(--font-mono)' : 'inherit',
                    background:'var(--bg-default)', color:'var(--fg-default)',
                    border:'1px solid var(--border-subtle)', borderRadius:0, outline:'none',
                  }} onFocus={e=>e.target.style.borderColor=accent} onBlur={e=>e.target.style.borderColor='var(--border-subtle)'}/>
                </div>
              ))}
              <div style={{ marginBottom:14 }}>
                <label className="mono" style={{ display:'block', fontSize:11, color:'var(--fg-muted)', letterSpacing:'.04em', marginBottom:6 }}>{t('Service interested in','感興趣的服務')}</label>
                <select style={{
                  width:'100%', padding:'10px 12px', fontSize:14,
                  background:'var(--bg-default)', color:'var(--fg-default)',
                  border:'1px solid var(--border-subtle)', borderRadius:0,
                }}>
                  {SF_CATEGORIES.flatMap(c=>c.services).map(s=>(
                    <option key={s.id}>{t(s.en, s.zh)}</option>
                  ))}
                </select>
              </div>
              <div style={{ marginBottom:18 }}>
                <label className="mono" style={{ display:'block', fontSize:11, color:'var(--fg-muted)', letterSpacing:'.04em', marginBottom:6 }}>{t('Site notes','場地備註')}</label>
                <textarea rows="3" placeholder={t('Floor area, users, deadlines…','面積、人數、預計完工日期…')} style={{
                  width:'100%', padding:'10px 12px', fontSize:14,
                  background:'var(--bg-default)', color:'var(--fg-default)',
                  border:'1px solid var(--border-subtle)', borderRadius:0, outline:'none', resize:'vertical', fontFamily:'inherit',
                }}/>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{ width:'100%', justifyContent:'center' }}>
                {t('Request site survey','索取上門勘察')} →
              </button>
            </form>
          ) : (
            <div style={{ padding:32, background:'var(--bg-card)', border:`2px solid ${accent}` }}>
              <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em', marginBottom:14 }}>
                ✓ STATUS / 200 OK
              </div>
              <h3 style={{ marginBottom:8 }}>{t('Got it — we will reply within 1 working day.','已收到 — 我們將於一個工作天內回覆。')}</h3>
              <p style={{ margin:0, color:'var(--fg-muted)' }}>
                {t('For urgent items, message us on WhatsApp at +852 6552 0772.',
                   '緊急事宜請使用 WhatsApp 聯絡 +852 6552 0772。')}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

const SFFooter = ({ lang, accent }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  return (
    <footer style={{ borderTop:'1px solid var(--border-subtle)', paddingTop:48, paddingBottom:32, background:'var(--bg-alt)', position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent || '#E36918'} opacity={0.5}/>
      <div className="container" style={{ position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, marginBottom:32 }}>
        <div>
          <div style={{ marginBottom:14 }}>
            <SFLogo height={48}/>
          </div>
          <p style={{ fontSize:13, color:'var(--fg-muted)', maxWidth:380, margin:0, lineHeight:1.7 }}>
            {t('IT infrastructure & low-voltage systems for Hong Kong businesses.',
               '為香港企業提供 IT 基建及弱電系統。')}
          </p>
        </div>
        {[
          { h:t('Services','服務'), items:['Cabling & Fiber','Wi-Fi 7','CCTV','Server Room','Cybersecurity','AI / RAG'] },
          { h:t('Company','公司'), items:[t('About','關於我們'),t('Projects','案例'),t('Careers','加入我們'),t('Contact','聯絡')] },
          { h:t('Office','辦公室'), items:['Unit 305, 3/F, Yen Sheng Centre','64 Hoi Yuen Road, Kwun Tong','+852 6552 0772','help@sfl.hk'] },
        ].map((c,i)=>(
          <div key={i}>
            <div className="mono" style={{ fontSize:11, color:'var(--fg-muted)', letterSpacing:'.06em', marginBottom:14 }}>{c.h.toUpperCase()}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:8 }}>
              {c.items.map((it,j)=><li key={j} style={{ fontSize:13, color:'var(--fg-body)' }}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="container" style={{ position:'relative', zIndex:1, borderTop:'1px solid var(--border-subtle)', paddingTop:20, display:'flex', justifyContent:'space-between', flexWrap:'wrap', fontSize:12, color:'var(--fg-muted)', fontFamily:'var(--font-mono)' }}>
        <span>© 2026 Sun Forest Limited</span>
        <span>v2.0 · BUILT WITH CARE IN HK</span>
      </div>
    </footer>
  );
};

window.SFFeatured = SFFeatured;
window.SFContact = SFContact;
window.SFFooter = SFFooter;
