function Process() {
  const [open, setOpen] = React.useState(0);
  const steps = [
    { t: "Understand the need", d: "We partner closely with clients to understand business goals, culture, team dynamics, and success criteria." },
    { t: "Source exceptional talent", d: "Leverage our network, research capabilities, referrals, and market intelligence." },
    { t: "Expert evaluation", d: "Candidates are assessed by industry leaders and subject matter experts." },
    { t: "Validation & verification", d: "Technical expertise, leadership capability, communication, and organizational fit are evaluated." },
    { t: "Curated introduction", d: "Only the strongest candidates are presented." },
    { t: "Successful placement", d: "We support the hiring process through offer acceptance and onboarding." },
  ];
  const roman = ['i.','ii.','iii.','iv.','v.','vi.'];
  return (
    <section className="section section--paper" id="process">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">How Synvori works</div>
          <h2 className="section__title">Six stages from <em>brief to placement.</em></h2>
          <p className="section__lede">A retained engagement is sequenced, deliberate, and measured. Every introduction is earned.</p>
        </div>
        <div className="process__list">
          {steps.map((s, i) => (
            <div key={i} className={"process__step " + (open === i ? "open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="process__num">{roman[i]}</div>
              <div className="process__body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
              <div className="process__caret">+</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;