/* global React */
function NxCareer({ lang }) {
  const t = window.NX_COPY[lang].career;
  const mailto = `mailto:contact@nexentia.ltd?subject=${encodeURIComponent(t.cvMailto.subject)}&body=${encodeURIComponent(t.cvMailto.body)}`;
  return (
    <section className="nx-section" id="career">
      <div className="nx-container nx-container--wide">
        <div className="nx-section__head">
          <div className="nx-eyebrow">{t.eyebrow}</div>
          <h2 className="nx-h2">{t.headline}</h2>
          <p className="nx-lead">{t.sub}</p>
        </div>
        <div className="nx-cv">
          {t.items.map((it, i) => (
            <article key={it.period + it.client} className={`nx-cv-item ${it.current ? "is-current" : ""}`}>
              <div className="nx-cv-item__rail">
                <div className="nx-cv-item__dot" />
                <div className="nx-cv-item__period">{it.period}</div>
                {it.current && <span className="nx-cv-item__current-chip">{t.currentLabel}</span>}
              </div>
              <div className="nx-cv-item__main">
                <div className="nx-cv-item__sector">{it.sector}</div>
                <h3 className="nx-cv-item__client">{it.client}</h3>
                <div className="nx-cv-item__role">{it.role}</div>
                <p className="nx-cv-item__context">{it.context}</p>
                <ul className="nx-cv-item__hl">
                  {it.highlights.map((h, j) => <li key={j}>{h}</li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
        <div className="nx-cta-card nx-cta-card--cv">
          <div className="nx-cta-card__copy">
            <div className="nx-cta-card__eyebrow">{t.cvEyebrow}</div>
            <h3 className="nx-cta-card__h">{t.cvHeadline}</h3>
            <p className="nx-cta-card__sub">{t.cvBody}</p>
          </div>
          <div className="nx-cta-card__action">
            <a className="nx-cta-card__btn" href={mailto}>
              {window.NX_COPY[lang].cta.requestCv}<span aria-hidden>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxCareer = NxCareer;