// Why Us + Clients wall (Industries strip removed from homepage)
const SFWhyUs = ({ lang, accent }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  const items = [
    { n:'01', en:'One team, end to end', zh:'一個團隊，由頭到尾',
      bodyEn:'Design, supply, install, support — never subcontracted.',
      bodyZh:'設計、供應、安裝、支援 — 絕不分判。' },
    { n:'02', en:'Fixed scope, fixed price', zh:'固定範圍，固定收費',
      bodyEn:'Quotes name parts and labour. SLAs name response time.',
      bodyZh:'報價列明器材與工時，SLA 列明回應時間。' },
    { n:'03', en:'Built for fault tolerance', zh:'為容錯而設計',
      bodyEn:'A/B feeds, N+1 cooling, redundant fabric — by default.',
      bodyZh:'A/B 雙路、N+1 冷卻、雙路網絡 — 預設標準。' },
    { n:'04', en:'24/7 SOC monitoring', zh:'24/7 SOC 監察',
      bodyEn:'SIEM-backed eyes on every site we hand over.',
      bodyZh:'每個交付場地由 SIEM 系統 24 小時監察。' },
  ];
  return (
    <section className="section section-inverse" style={{ position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent} opacity={0.5} inverse={true}/>
      <div className="container" style={{ position:'relative', zIndex:1 }}>
        <div className="eyebrow" style={{ color:'var(--cyber-300)' }}>{t('Why Sun Forest', '為何選擇SFL')}</div>
        <h2 style={{ maxWidth:760, marginBottom:48 }}>
          {t('You hire one team. It stays your team.', '一次合作，長久關係。')}
        </h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, borderTop:'1px solid rgba(255,255,255,0.12)' }}>
          {items.map((it, i)=>(
            <div key={i} style={{
              padding:'32px 24px 32px 0',
              borderRight: i<3 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              paddingLeft: i>0 ? 24 : 0,
            }}>
              <div className="mono" style={{ fontSize:11, color: accent, letterSpacing:'.08em', marginBottom:14 }}>{it.n}</div>
              <h4 style={{ color:'var(--fg-inverse)', fontSize:18, marginBottom:10 }}>{t(it.en, it.zh)}</h4>
              <p style={{ margin:0, color:'rgba(255,255,255,0.65)', fontSize:14, lineHeight:1.6 }}>
                {t(it.bodyEn, it.bodyZh)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SFClients = ({ lang, accent }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  return (
    <section className="section" style={{ position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent} opacity={0.5}/>
      <div className="container" style={{ position:'relative', zIndex:1 }}>
        <div className="eyebrow">{t('Trusted by', '信賴的客戶')}</div>
        <h2 style={{ maxWidth:760, marginBottom:8 }}>
          {t('500+ projects across HK, Macau, and the region.', '在港澳及大中華區完成超過 500 個項目。')}
        </h2>
        <p className="caption" style={{ marginBottom:32 }}>
          {t('Local ISPs · banks & FSI · schools · SMBs · hotels · government.',
             '本地 ISP · 銀行金融 · 學校 · 中小企業 · 酒店 · 政府部門。')}
        </p>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(150px, 1fr))', gap:0,
          border:'1px solid var(--border-subtle)',
        }}>
          {SF_CLIENTS.map((c, i)=>(
            <div key={i} style={{
              padding:'24px 12px', display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:13, fontWeight:500, color:'var(--fg-muted)',
              borderRight:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)',
              minHeight:80, textAlign:'center', fontFamily:'var(--font-mono)', letterSpacing:'.02em',
            }}>{c}</div>
          ))}
        </div>
        <p className="caption" style={{ marginTop:14, fontStyle:'italic' }}>
          {t(' ',
             ' ')}
        </p>
      </div>
    </section>
  );
};

// Industries strip — kept for non-homepage use (e.g. about page)
const SFIndustries = ({ lang, accent }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  return (
    <section style={{ padding:'56px 0', borderTop:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)', position:'relative', overflow:'hidden' }} className="tech-dots">
      <SFNetworkCanvas accent={accent} opacity={0.5}/>
      <div className="container" style={{ position:'relative', zIndex:1 }}>
        <div className="eyebrow">{t('Industries served', '服務行業')}</div>
        <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:8 }}>
          {SF_INDUSTRIES.map((c, i)=>(
            <span key={i} style={{
              padding:'8px 14px', fontSize:13, fontWeight:500,
              border:'1px solid var(--border-subtle)', background:'var(--bg-card)',
              fontFamily:'var(--font-mono)', letterSpacing:'.02em',
            }}>{t(c.en, c.zh)}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

window.SFIndustries = SFIndustries;
window.SFWhyUs = SFWhyUs;
window.SFClients = SFClients;