/* global React, Icon, Eyebrow */
const STEPS = [
  { n: "1", icon: "upload", t: "Submit your documents", p: "Send clear scans or photographs by email or directly through Telegram." },
  { n: "2", icon: "receipt-text", t: "Receive a free quote", p: "We review your documents and provide a transparent quote with an estimated completion time." },
  { n: "3", icon: "scan-search", t: "Translation & review", p: "Your documents are translated and carefully reviewed for accuracy, consistency, and formatting." },
  { n: "4", icon: "file-check-2", t: "Receive your certified translation", p: "You receive the completed translation with a signed Certificate of Translation Accuracy." },
];
function Process() {
  return (
    <section id="process" className="cl-section cl-bg-white">
      <div className="cl-container">
        <div className="cl-section-head is-center">
          <Eyebrow center>Our process</Eyebrow>
          <h2 className="cl-h2">Four simple steps to a certified translation.</h2>
        </div>
        <div className="cl-grid-4">
          {STEPS.map((s) => (
            <div className="cl-card hover cl-step" key={s.n}>
              <span className="pico"><Icon name={s.icon} size={22} /></span>
              <div className="num">{s.n}</div>
              <h3 className="cl-h3">{s.t}</h3>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;