// Service grid — supports 3 card styles via tweak
const SFServices = ({ lang, accent, cardStyle='spec' }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  return (
    <section className="section" id="services" style={{ position:'relative', overflow:'hidden' }}>
      <SFNetworkCanvas accent={accent} opacity={0.1}/>
      <div className="container" style={{ position:'relative', zIndex:1 }}>
        <div className="eyebrow">{t('Services / 20+ across 6 categories', '服務 · 六大類別共 20+ 項')}</div>
        <h2 style={{ maxWidth:760, marginBottom:8 }}>
          {t('Everything for your IT and low-voltage layer.', '弱電與 IT 系統，一站式包辦。')}
        </h2>
        <p className="lede" style={{ marginBottom:48 }}>
          {t('From copper and fiber up to the AI workflow on top — all from one team.',
             '由銅纜光纖到 AI 流程 — 全部由我們團隊完成。')}
        </p>

        {SF_CATEGORIES.map((cat, ci) => (
          <div key={cat.id} style={{ marginBottom: ci===SF_CATEGORIES.length-1 ? 0 : 56 }}>
            <div style={{ display:'flex', alignItems:'baseline', gap:16, marginBottom:20, paddingBottom:12, borderBottom:'1px solid var(--border-subtle)' }}>
              <span className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em' }}>
                {String(ci+1).padStart(2,'0')} /
              </span>
              <h3 style={{ margin:0, fontSize:'var(--text-lg)' }}>{t(cat.en, cat.zh)}</h3>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap: cardStyle==='bordered' ? 0 : 12 }}>
              {cat.services.map(s => <SFServiceCard key={s.id} svc={s} lang={lang} accent={accent} cardStyle={cardStyle}/>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const SFServiceCard = ({ svc, lang, accent, cardStyle }) => {
  const t = (en, zh) => sfT(lang, en, zh);
  const icon = SF_ICONS[svc.id];
  const [hover, setHover] = React.useState(false);

  // ---- spec card (default) — terminal-style with mono spec line ----
  if (cardStyle === 'spec') {
    return (
      <div onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
        position:'relative', padding:'20px 20px 16px', background:'var(--bg-card)',
        border:'1px solid var(--border-subtle)',
        borderTop: hover ? `2px solid ${accent}` : '1px solid var(--border-subtle)',
        transition:'border-color 180ms', cursor:'pointer',
      }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14 }}>
          <div style={{ width:32, height:32, color: hover ? accent : 'var(--fg-default)', transition:'color 180ms' }}>{icon}</div>
          <span className="mono" style={{ fontSize:10, color:'var(--fg-subtle)', letterSpacing:'.06em' }}>
            {svc.id.toUpperCase()}
          </span>
        </div>
        <h4 style={{ margin:'0 0 6px', fontSize:15, fontWeight:600 }}>{t(svc.en, svc.zh)}</h4>
        <p style={{ margin:'0 0 14px', fontSize:13, color:'var(--fg-muted)', lineHeight:1.55 }}>
          {t(svc.descEn, svc.descZh)}
        </p>
        <div className="mono" style={{ fontSize:10, color:'var(--fg-subtle)', borderTop:'1px dashed var(--border-subtle)', paddingTop:10, letterSpacing:'.04em' }}>
          {svc.spec}
        </div>
      </div>
    );
  }

  // ---- bordered grid — flat, dense, separator-only ----
  if (cardStyle === 'bordered') {
    return (
      <div onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
        padding:'24px', background: hover ? 'var(--bg-fill-1)' : 'var(--bg-card)',
        borderRight:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)',
        transition:'background 180ms', cursor:'pointer',
      }}>
        <div style={{ width:28, height:28, color: hover ? accent : 'var(--fg-default)', marginBottom:14, transition:'color 180ms' }}>{icon}</div>
        <h4 style={{ margin:'0 0 4px', fontSize:14, fontWeight:600 }}>{t(svc.en, svc.zh)}</h4>
        <p style={{ margin:0, fontSize:12, color:'var(--fg-muted)', lineHeight:1.5 }}>
          {t(svc.descEn, svc.descZh)}
        </p>
      </div>
    );
  }

  // ---- minimal list — left-icon, no borders ----
  return (
    <div onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
      display:'flex', gap:14, padding:'16px 8px', cursor:'pointer',
      borderBottom:'1px solid var(--border-subtle)',
    }}>
      <div style={{ width:24, height:24, color: hover ? accent : 'var(--fg-default)', flexShrink:0, marginTop:2, transition:'color 180ms' }}>{icon}</div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', justifyContent:'space-between', gap:12, alignItems:'baseline' }}>
          <h4 style={{ margin:0, fontSize:14, fontWeight:600 }}>{t(svc.en, svc.zh)}</h4>
          <span className="mono" style={{ fontSize:10, color:'var(--fg-subtle)', flexShrink:0 }}>{svc.spec}</span>
        </div>
        <p style={{ margin:'4px 0 0', fontSize:12, color:'var(--fg-muted)' }}>
          {t(svc.descEn, svc.descZh)}
        </p>
      </div>
    </div>
  );
};

window.SFServices = SFServices;