// Industries hub + individual industry pages
const SFIndustriesHub = ({ lang, accent, setPage }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  return (
    <main>
      <section style={{ position:'relative', overflow:'hidden', borderBottom:'1px solid var(--border-subtle)' }}>
        <SFNetworkCanvas accent={accent} opacity={0.18}/>
        <div className="tech-grid" style={{ position:'absolute', inset:0, opacity:0.5,
          maskImage:'radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%)',
          WebkitMaskImage:'radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%)' }}/>
        <div className="container" style={{ position:'relative', zIndex:1, paddingTop:80, paddingBottom:64 }}>
          <div className="eyebrow" style={{ color:accent }}>{t('Industries we serve','服務行業')}</div>
          <h1 style={{ maxWidth:920, marginBottom:24 }}>
            {t('Different industries. Different best-fit stacks.',
               '不同行業，不同的最佳方案。')}
          </h1>
          <p className="lede" style={{ fontSize:18, maxWidth:760 }}>
            {t('A bank does not need the same network as a restaurant. A clinic does not need the same security stack as a school. We pick the right combination for what you actually do.',
               '銀行不需要與餐廳相同的網絡，診所不需要與學校相同的安全方案。我們按您的實際業務挑選最合適的組合。')}
          </p>
        </div>
      </section>

      <section className="section" style={{ position:'relative', overflow:'hidden' }}>
        <SFNetworkCanvas accent={accent} opacity={0.1}/>
        <div className="container" style={{ position:'relative', zIndex:1 }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {SF_INDUSTRY_LIST.map((id, i) => {
              const ind = SF_INDUSTRY_PAGES[id];
              const x = lang==='en' ? ind.en : ind.zh;
              return (
                <a key={id} onClick={()=>setPage(`industry:${id}`)} style={{
                  padding:'32px', cursor:'pointer', background:'var(--bg-card)',
                  borderRight: i%2===0 ? '1px solid var(--border-subtle)' : 'none',
                  borderBottom: i < SF_INDUSTRY_LIST.length-2 ? '1px solid var(--border-subtle)' : 'none',
                  transition:'background 180ms',
                }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--bg-fill-1)'}
                onMouseLeave={e=>e.currentTarget.style.background='var(--bg-card)'}
                >
                  <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em', marginBottom:14 }}>
                    {String(i+1).padStart(2,'0')} / {SF_INDUSTRY_LIST.length}
                  </div>
                  <h3 style={{ fontSize:24, marginBottom:10, letterSpacing:'-0.01em' }}>{x.name}</h3>
                  <p style={{ fontSize:15, color:'var(--fg-body)', lineHeight:1.5, margin:'0 0 20px 0' }}>
                    {x.title}
                  </p>
                  <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
                    {ind.pillars.slice(0,4).map(pid => {
                      const pp = SF_PILLARS[pid]; if (!pp) return null;
                      const pt = lang==='en' ? pp.en : pp.zh;
                      return (
                        <span key={pid} className="mono" style={{
                          fontSize:10, padding:'4px 8px',
                          border:'1px solid var(--border-subtle)', color:'var(--fg-muted)',
                          letterSpacing:'.04em',
                        }}>{pt.kicker}</span>
                      );
                    })}
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <SFContact lang={lang} accent={accent} setPage={setPage}/>
    </main>
  );
};

const SFIndustryPage = ({ industryId, lang, accent, setPage }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  const ind = SF_INDUSTRY_PAGES[industryId];
  if (!ind) return null;
  const x = lang==='en' ? ind.en : ind.zh;

  return (
    <main>
      {/* HERO */}
      <section style={{ position:'relative', overflow:'hidden', borderBottom:'1px solid var(--border-subtle)' }}>
        <SFNetworkCanvas accent={accent} opacity={0.18}/>
        <div className="tech-grid" style={{ position:'absolute', inset:0, opacity:0.5,
          maskImage:'radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%)',
          WebkitMaskImage:'radial-gradient(ellipse at 80% 20%, #000 0%, transparent 65%)' }}/>
        <div className="container" style={{ position:'relative', zIndex:1, paddingTop:72, paddingBottom:72 }}>
          <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.1em', marginBottom:14 }}>
            {t('INDUSTRY','行業')} / {x.name.toUpperCase()}
          </div>
          <h1 style={{ maxWidth:920, marginBottom:24 }}>{x.title}</h1>
          <p className="lede" style={{ fontSize:19, maxWidth:780 }}>{x.lede}</p>
          <div style={{ display:'flex', gap:10, marginTop:32, flexWrap:'wrap' }}>
            <button onClick={()=>setPage('contact')} className="btn btn-primary btn-lg">
              {t('Book a free site survey','預約免費上門勘察')} →
            </button>
            <a href="tel:+85265520772" className="btn btn-secondary btn-lg">
              {t('Talk to an engineer','即時聯絡工程師')}
            </a>
          </div>
        </div>
      </section>

      {/* OUTCOMES */}
      <section className="section" style={{ position:'relative', overflow:'hidden' }}>
        <SFNetworkCanvas accent={accent} opacity={0.1}/>
        <div className="container" style={{ position:'relative', zIndex:1 }}>
          <div className="eyebrow">{t('What this looks like in practice','實際成果')}</div>
          <h2 style={{ maxWidth:760, marginBottom:32 }}>
            {t(`What we typically deliver for ${x.name.toLowerCase()} clients.`,
               `服務 ${x.name} 客戶的典型成果。`)}
          </h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {ind.outcomes.map((o, i) => (
              <div key={i} style={{
                padding:'28px 24px',
                borderRight: i<ind.outcomes.length-1 ? '1px solid var(--border-subtle)' : 'none',
                background:'var(--bg-card)',
              }}>
                <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.1em', marginBottom:14 }}>
                  ✓ {String(i+1).padStart(2,'0')}
                </div>
                <p style={{ margin:0, fontSize:16, lineHeight:1.5, color:'var(--fg-default)', fontWeight:500 }}>
                  {lang==='en' ? o.en : o.zh}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RECOMMENDED PILLARS */}
      <section className="section section-alt" style={{ position:'relative', overflow:'hidden' }}>
        <SFNetworkCanvas accent={accent} opacity={0.1}/>
        <div className="container" style={{ position:'relative', zIndex:1 }}>
          <div className="eyebrow">{t('Best-fit capabilities','最合適的服務')}</div>
          <h2 style={{ maxWidth:760, marginBottom:8 }}>
            {t(`The stack we usually deploy for ${x.name.toLowerCase()}.`,
               `為 ${x.name} 客戶常用的方案組合。`)}
          </h2>
          <p className="caption" style={{ marginBottom:32 }}>
            {t('Click any capability to learn more.',
               '點擊任何項目了解詳情。')}
          </p>
          <div style={{ display:'grid', gridTemplateColumns:`repeat(${ind.pillars.length}, 1fr)`, gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {ind.pillars.map((pid, i) => {
              const pp = SF_PILLARS[pid]; if (!pp) return null;
              const pt = lang==='en' ? pp.en : pp.zh;
              return (
                <a key={pid} onClick={()=>setPage(`pillar:${pid}`)} style={{
                  padding:'24px', cursor:'pointer', background:'var(--bg-card)',
                  borderRight: i<ind.pillars.length-1 ? '1px solid var(--border-subtle)' : 'none',
                  transition:'background 180ms',
                }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--bg-fill-1)'}
                onMouseLeave={e=>e.currentTarget.style.background='var(--bg-card)'}
                >
                  <div className="mono" style={{ fontSize:10, color:accent, letterSpacing:'.06em', marginBottom:10 }}>
                    {pp.cat?.toUpperCase()}
                  </div>
                  <h4 style={{ fontSize:15, fontWeight:600, marginBottom:6 }}>{pt.kicker}</h4>
                  <p style={{ fontSize:12, color:'var(--fg-muted)', margin:0, lineHeight:1.5 }}>
                    {pt.title}
                  </p>
                  <div style={{ marginTop:14, fontSize:11, color:accent, fontFamily:'var(--font-mono)' }}>
                    {t('Learn more →','了解更多 →')}
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <SFContact lang={lang} accent={accent} setPage={setPage}/>
    </main>
  );
};

window.SFIndustriesHub = SFIndustriesHub;
window.SFIndustryPage = SFIndustryPage;