const Services = ({ lang }) => {
  const t = window.DICT[lang].services;
  return (
    <section id="services" data-screen-label="02 Services">
      <div className="container">
        <div className="section-head">
          <div className="tag">
            <div className="eyebrow">{t.eyebrow}</div>
          </div>
          <div>
            <h2>{t.title1} <em>{t.title1b}</em> {t.title2}</h2>
            <p className="subhead-wide" style={{ whiteSpace: undefined, fontSize: undefined, lineHeight: undefined, color: undefined, marginTop: undefined }}>
              {t.intro}
            </p>
          </div>
        </div>

        <div className="svc-grid">
          {t.items.map((it, i) =>
          <div key={i} className="svc">
              <div className="mark" />
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              {it.subItems &&
            <ul style={{ listStyle: 'none', margin: '0 0 18px 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {it.subItems.map((s, k) =>
              <li key={k} style={{
                fontFamily: "'IBM Plex Mono', monospace",
                fontSize: 11,
                letterSpacing: '0.06em',
                color: 'var(--fg-dim)',
                paddingLeft: 14,
                position: 'relative'
              }}>
                      <span style={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', width: 6, height: 1, background: 'var(--accent)' }} />
                      {s}
                    </li>
              )}
                </ul>
            }
              <div className="tags" style={{ fontSize: "12px" }}>
                {it.tags.filter((tg) => tg && tg.trim()).map((tg, j) => <span key={j}>{tg}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

window.Services = Services;