// Pillar page renderer — content-rich with pain points, solutions, features, FAQ, related industries, internal cross-links
const SFPillarPage = ({ pillarId, lang, accent, setPage }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  const p = SF_PILLARS[pillarId];
  if (!p) return null;
  const txt = lang === 'en' ? p.en : p.zh;
  const relatedPillars = (p.relatedPillars || SF_PILLAR_LIST.filter(id=>id!==pillarId).slice(0,4));
  const relatedIndustries = (p.relatedIndustries || []);

  return (
    <main>
      {/* BREADCRUMB */}
      <div style={{ borderBottom:'1px solid var(--border-subtle)', background:'var(--bg-card)' }}>
        <div className="container" style={{ padding:'10px 0', fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'.04em', color:'var(--fg-muted)' }}>
          <a onClick={()=>setPage('home')} style={{ cursor:'pointer' }}>{t('HOME','主頁')}</a>
          <span style={{ margin:'0 8px' }}>/</span>
          <a onClick={()=>setPage('services')} style={{ cursor:'pointer' }}>{t('SERVICES','服務')}</a>
          <span style={{ margin:'0 8px' }}>/</span>
          <span style={{ color:'var(--fg-default)' }}>{txt.kicker}</span>
        </div>
      </div>

      {/* 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.4, pointerEvents:'none',
          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:64, paddingBottom:64 }}>
          <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.1em', marginBottom:14 }}>
            {p.cat?.toUpperCase()} / {txt.kicker}
          </div>
          <h1 style={{ maxWidth:920, marginBottom:24 }}>{txt.title}</h1>
          <p className="lede" style={{ fontSize:19, maxWidth:760 }}>{txt.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>

      {/* PAIN POINTS */}
      <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('The problem we solve','要解決的問題')}</div>
          <h2 style={{ maxWidth:760, marginBottom:32 }}>
            {t('Sound familiar?','聽起來熟悉嗎？')}
          </h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {txt.painPoints.map((pp, i) => (
              <div key={i} style={{
                padding:'28px 24px',
                borderRight: i<txt.painPoints.length-1 ? '1px solid var(--border-subtle)' : 'none',
                background:'var(--bg-default)',
              }}>
                <div className="mono" style={{ fontSize:11, color:'var(--orange-500, #E36918)', letterSpacing:'.1em', marginBottom:14 }}>
                  ✕ {t('PAIN','痛點')} {String(i+1).padStart(2,'0')}
                </div>
                <h3 style={{ fontSize:17, marginBottom:10, letterSpacing:'-0.005em' }}>{pp.h}</h3>
                <p style={{ margin:0, color:'var(--fg-body)', fontSize:14, lineHeight:1.6 }}>{pp.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SOLUTIONS */}
      <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 we deploy','我們的方案')}</div>
          <h2 style={{ maxWidth:760, marginBottom:32 }}>
            {t('A complete capability — not a single product.', '完整交付能力 — 而非單一產品。')}
          </h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {txt.solutions.map((s, i) => (
              <div key={i} style={{
                padding:'24px 24px',
                borderRight: i%2===0 ? '1px solid var(--border-subtle)' : 'none',
                borderBottom: i < txt.solutions.length-2 ? '1px solid var(--border-subtle)' : 'none',
                background:'var(--bg-card)',
              }}>
                <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em', marginBottom:10 }}>
                  {String(i+1).padStart(2,'0')} · {p.cat?.toUpperCase()}
                </div>
                <h3 style={{ fontSize:18, marginBottom:8 }}>{s.h}</h3>
                <p style={{ margin:0, fontSize:14, lineHeight:1.6, color:'var(--fg-body)' }}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES + VENDORS */}
      <section className="section section-alt" style={{ position:'relative', overflow:'hidden' }}>
        <SFNetworkCanvas accent={accent} opacity={0.1}/>
        <div className="container" style={{ position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48 }}>
          <div>
            <div className="eyebrow">{t('Features','功能特色')}</div>
            <h3 style={{ marginBottom:24 }}>{t('What sets our delivery apart.','我們的交付特色。')}</h3>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:'1px solid var(--border-subtle)' }}>
              {txt.features.map((f, i) => (
                <div key={i} style={{
                  padding:'18px 16px', background:'var(--bg-default)',
                  borderRight: i%2===0 ? '1px solid var(--border-subtle)' : 'none',
                  borderBottom: i < txt.features.length-2 ? '1px solid var(--border-subtle)' : 'none',
                }}>
                  <div style={{ fontSize:13, fontWeight:600, marginBottom:6 }}>{f.h}</div>
                  <div style={{ fontSize:12, color:'var(--fg-muted)', lineHeight:1.5 }}>{f.b}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow">{t('Vendors we deploy','合作的廠商')}</div>
            <h3 style={{ marginBottom:20 }}>{t('Major brands, sourced fairly.', '主流品牌 · 公平採購。')}</h3>
            <p style={{ color:'var(--fg-body)', fontSize:13, lineHeight:1.6, marginBottom:16 }}>
              {t("We're vendor-neutral. We pick the right brand for your scale, budget, and what your team already runs.",
                 '我們不偏向任何廠商，按您的規模、預算及現有環境選擇最合適的品牌。')}
            </p>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
              {p.vendors.map((v, i) => (
                <span key={i} className="mono" style={{
                  padding:'7px 11px', fontSize:11, fontWeight:500,
                  background:'var(--bg-default)', border:'1px solid var(--border-subtle)',
                  color:'var(--fg-default)', letterSpacing:'.02em',
                }}>{v}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{ position:'relative', overflow:'hidden' }}>
        <SFNetworkCanvas accent={accent} opacity={0.1}/>
        <div className="container" style={{ position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1fr 2fr', gap:48 }}>
          <div>
            <div className="eyebrow">{t('FAQ','常見問題')}</div>
            <h3 style={{ marginBottom:12 }}>{t('Questions clients usually ask.','客戶常問的問題。')}</h3>
            <p style={{ fontSize:13, color:'var(--fg-muted)', lineHeight:1.6 }}>
              {t('More questions? Call us — engineers, not salespeople.',
                 '更多問題？致電我們 — 由工程師接聽，並非銷售。')}
            </p>
          </div>
          <div style={{ border:'1px solid var(--border-subtle)' }}>
            {txt.faq.map((f, i) => (
              <div key={i} style={{
                padding:'20px 24px',
                borderBottom: i<txt.faq.length-1 ? '1px solid var(--border-subtle)' : 'none',
                background:'var(--bg-card)',
              }}>
                <div style={{ fontSize:14, fontWeight:600, marginBottom:8, color:'var(--fg-default)' }}>
                  Q. {f.q}
                </div>
                <div style={{ fontSize:14, color:'var(--fg-body)', lineHeight:1.6 }}>
                  {f.a}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RELATED INDUSTRIES */}
      {relatedIndustries.length > 0 && (
      <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('Industries that use this','常用此服務的行業')}</div>
          <h3 style={{ marginBottom:24 }}>
            {t('Where this capability is most often deployed.','此服務最常見於以下行業。')}
          </h3>
          <div style={{ display:'grid', gridTemplateColumns:`repeat(${relatedIndustries.length}, 1fr)`, gap:0,
            border:'1px solid var(--border-subtle)' }}>
            {relatedIndustries.map((iid, i) => {
              const ind = SF_INDUSTRY_PAGES[iid]; if (!ind) return null;
              const x = lang==='en' ? ind.en : ind.zh;
              return (
                <a key={iid} onClick={()=>setPage(`industry:${iid}`)} style={{
                  padding:'22px', cursor:'pointer', background:'var(--bg-default)',
                  borderRight: i<relatedIndustries.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-default)'}>
                  <div className="mono" style={{ fontSize:10, color:accent, letterSpacing:'.08em', marginBottom:10 }}>
                    {t('INDUSTRY','行業')}
                  </div>
                  <div style={{ fontSize:15, fontWeight:600, marginBottom:4 }}>{x.name}</div>
                  <div style={{ fontSize:12, color:'var(--fg-muted)', lineHeight:1.5 }}>{x.title}</div>
                  <div style={{ marginTop:12, fontSize:11, color:accent, fontFamily:'var(--font-mono)' }}>
                    {t('View industry page →','行業頁面 →')}
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
      )}

      {/* RELATED PILLARS */}
      <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('Related capabilities','相關服務')}</div>
          <h3 style={{ marginBottom:24 }}>{t('We do all of this — usually together.', '通常一併處理。')}</h3>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:'1px solid var(--border-subtle)' }}>
            {relatedPillars.slice(0,4).map((id, i) => {
              const rp = SF_PILLARS[id]; if (!rp) return null;
              const rt = lang==='en' ? rp.en : rp.zh;
              return (
                <a key={id} onClick={()=>setPage(`pillar:${id}`)} style={{
                  padding:'22px', cursor:'pointer', background:'var(--bg-card)',
                  borderRight: i<3 ? '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 }}>
                    {rp.cat?.toUpperCase()}
                  </div>
                  <div style={{ fontSize:14, fontWeight:600, marginBottom:4 }}>{rt.kicker}</div>
                  <div style={{ fontSize:12, color:'var(--fg-muted)', margin:0, lineHeight:1.5 }}>{rt.title}</div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

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

window.SFPillarPage = SFPillarPage;