/* global React */
function NxServices({ lang, onNav }) {
  const t = window.NX_COPY[lang].services;
  return (
    <section className="nx-section nx-section--paper" id="services">
      <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>
        </div>
        <div className="nx-services">
          {t.items.map((s, i) => (
            <article key={s.num} className="nx-service">
              <div className="nx-service__top">
                <span className="nx-service__num">{s.num}</span>
                {i < t.items.length - 1 && <span className="nx-service__flow" aria-hidden>→</span>}
              </div>
              <div className="nx-service__sub">{s.sub}</div>
              <h3 className="nx-h3" style={{ margin: 0 }}>{s.title}</h3>
              <p className="nx-service__promise">{s.promise}</p>
              <ul className="nx-service__tags">
                {s.tags.map((tag) => <li key={tag}>{tag}</li>)}
              </ul>
            </article>
          ))}
        </div>
        <div className="nx-cta-card">
          <div className="nx-cta-card__copy">
            <div className="nx-cta-card__eyebrow">{t.combinedEyebrow}</div>
            <h3 className="nx-cta-card__h">{t.combinedHeadline}</h3>
            <p className="nx-cta-card__sub">{t.combinedBody}</p>
          </div>
          <div className="nx-cta-card__action">
            <button className="nx-cta-card__btn" onClick={() => onNav("contact")}>
              {t.combinedCta}<span aria-hidden>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxServices = NxServices;