/* global React */
function HowItWorks() {
  const steps = [
    {
      icon: 'target',
      eyebrow: '01 · Brief',
      title: 'Tell us the role.',
      body: 'A 15-minute call. Skills, seniority, comp, must-haves. No 40-page spec.'
    },
    {
      icon: 'cpu',
      eyebrow: '02 · Source & screen',
      title: 'We run the engine.',
      body: 'Our AI scans 10,000+ profiles, then our team verifies fit, comp, and availability.'
    },
    {
      icon: 'user-check',
      eyebrow: '03 · Interview',
      title: 'You meet 5 finalists.',
      body: 'Every candidate has been spoken to and pre-qualified. You decide who to hire.'
    }
  ];
  return (
    <section id="how" className="section section--light">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">How it works</div>
          <h2 className="h2">Three steps. No back and forth.</h2>
        </div>
        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.icon}>
              <div className="step__icon"><i data-lucide={s.icon}></i></div>
              <div className="step__eyebrow" dangerouslySetInnerHTML={{__html: s.eyebrow}} />
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </div>
          ))}
        </div>
        <div className="steps__connector" aria-hidden></div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;