function HowItWorks() {
  const steps = [
    { n: "01", icon: IconActivate, title: "Activate", body: "Register your kit online in under a minute." },
    { n: "02", icon: IconCollect,  title: "Collect",  body: "Take a small sample using the included materials and guide." },
    { n: "03", icon: IconMail,     title: "Mail",     body: "Drop the prepaid mailer in any mailbox — sent direct to lab." },
    { n: "04", icon: IconResults,  title: "Results",  body: "Receive your digital report with plain-language guidance." },
  ];
  return (
    <section id="how" className="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>How it works</div>
          <h2>From your countertop to an accredited lab — in four steps.</h2>
          <p className="lead">A guided process designed by environmental scientists, packaged for the home.</p>
        </div>

        <ol className="how-steps">
          {steps.map((s, i) => (
            <li key={s.n} className="how-step">
              <div className="how-step-head">
                <span className="how-num">{s.n}</span>
                <span className="how-icon"><s.icon size={26} stroke={1.3}/></span>
              </div>
              <div className="how-step-body">
                <h3>{s.title}</h3>
                <p className="muted">{s.body}</p>
              </div>
              {i < steps.length - 1 && <div className="how-step-rail" aria-hidden="true"></div>}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;