/* Process */

function Process() {
  const { t } = useT();
  return (
    <section className="process" id="process">
      <div className="shell">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">{t.process.eyebrow}</div>
            <h2>{t.process.h2a}<em>{t.process.h2b}</em>{t.process.h2c}</h2>
            <p>{t.process.sub}</p>
          </div>
        </Reveal>

        <div className="process-rail">
          {t.process.steps.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="process-step">
                <div className="num">{i + 1}</div>
                <div className="tag">{s.tag}</div>
                <h4>{s.title}</h4>
                <p>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });