const Clients = ({ lang }) => {
  const t = window.DICT[lang].clients;
  const icons = ['fund', 'crypto', 'startup', 'group', 'person', 'globe', 'growth', 'family'];
  return (
    <section id="clients" data-screen-label="03 Clients" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div className="tag">
            <div className="eyebrow">{t.eyebrow}</div>
          </div>
          <div style={{ width: '100%' }}>
            <h2>{t.title1} <em>{t.title2}</em></h2>
            <p className="subhead-wide">
              {t.intro}
            </p>
          </div>
        </div>

        <div className="clients">
          {t.items.map((it, i) => (
            <div key={i} className="client">
              <div className="client-glyph"><window.Icon name={icons[i]} size={22} /></div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Clients = Clients;