const Founders = ({ lang }) => {
  const t = window.DICT[lang].team;
  const p = [t.a, t.b];
  return (
    <section id="team" data-screen-label="05 Team" 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 style={{ fontFamily: "\"Cormorant Garamond\"" }}>{t.title2}</em></h2>
            <p style={{ marginTop: 24, fontSize: 16, color: 'var(--fg-dim)', lineHeight: 1.65, fontWeight: 400 }}>
              {t.intro}
            </p>
          </div>
        </div>

        <div className="founders">
          {p.map((f, i) =>
          <div key={i} className="founder">
              <div
              className={`founder-photo${f.photo ? ' has-photo' : ''}`}
              style={{
                width: "300px",
                height: "400px",
                ...(f.photo ? {
                  backgroundImage: `url('${f.photo}')`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat'
                } : {})
              }} />
            
              <div className="role">{f.role}</div>
              <h3>{f.name}</h3>
              <p>{f.bio}</p>
              {f.creds && f.creds.length > 0 &&
            <div className="credentials">
                  {f.creds.map((c, j) => <span key={j}>{c}</span>)}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

};

window.Founders = Founders;