/* global React */
const { useState: useStateC } = React;

function NxCareer({ lang }) {
  const t = window.NX_COPY[lang].career;
  const [email, setEmail] = useStateC("");
  const [sent, setSent] = useStateC(false);
  function submit(e) { e.preventDefault(); setSent(true); }
  const ct = window.NX_COPY[lang].contact;
  return (
    <section className="nx-section" id="career">
      <div className="nx-container nx-container--wide">
        <div className="nx-section__head">
          <div className="nx-eyebrow">C · {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">
            {sent ? (
              <div className="nx-cta-card__sent">
                <div className="nx-cta-card__sent-title">{ct.cvSent.title}</div>
                <div className="nx-cta-card__sent-body">{ct.cvSent.body}</div>
              </div>
            ) : (
              <form className="nx-cta-card__form" onSubmit={submit}>
                <input
                  type="email"
                  required
                  placeholder={t.cvField}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="nx-cta-card__input"
                />
                <button type="submit" className="nx-cta-card__btn">
                  {window.NX_COPY[lang].cta.requestCv}<span aria-hidden>→</span>
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxCareer = NxCareer;