/* global React, Container, Section, SectionIdx, useLang, t */

function Services() {
  useLang();
  const items = t('services.items');
  return (
    <Section id="services">
      <Container>
        <SectionIdx n="01" name={t('services.idx')} meta={`N=${items.length}`} />

        <div className="ea-section-head">
          <h2 className="ea-h2">{t('services.title')}</h2>
          <p className="ea-lead">{t('services.lead')}</p>
        </div>

        <div className="ea-services-list">
          {items.map((s, i) => (
            <article key={i} className="ea-service">
              <div className="ea-svc-num">— {String(i + 1).padStart(2, '0')}</div>
              <h3 className="ea-svc-title">
                <span className="ru">{s.title}</span>
                <span className="en">{s.en}</span>
              </h3>
              <div className="ea-svc-desc"><p>{s.desc}</p></div>
              <div className="ea-svc-meta">
                {s.spec.map(([k, v], j) => (
                  <div key={j} className="ea-svc-meta-row">
                    <span className="k">{k}</span>
                    <span className="v">{v}</span>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </Container>
    </Section>
  );
}

function Cases() {
  useLang();
  const items = t('cases.items');
  return (
    <Section id="cases">
      <Container>
        <SectionIdx n="02" name={t('cases.idx')} meta={t('cases.idxMeta')} />

        <div className="ea-section-head">
          <h2 className="ea-h2">{t('cases.title')}</h2>
          <p className="ea-lead">{t('cases.lead')}</p>
        </div>
      </Container>

      <div className="ea-cases-grid">
        {items.map((c, i) => (
          <article key={i} className="ea-case">
            <div className="ea-case-meta">
              <span>{c.industry}</span>
              <span>{c.period}</span>
            </div>
            <h4>{c.title}</h4>
            <p>{c.desc}</p>
            <div className="ea-case-numbers">
              {c.numbers.map(([k, v], j) => (
                <div key={j} className="ea-case-num">
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
            </div>
          </article>
        ))}
      </div>
    </Section>
  );
}

window.Services = Services;
window.Cases = Cases;