function Process() {
  const steps = [
    { n: "01", t: "Free consultation & quote", time: "60 seconds", b: "Tell us about your windows in our short form. We'll reach out within 24 hours to schedule your free in-home estimate — no pressure, no obligation." },
    { n: "02", t: "Choose & measure your windows", time: "1 visit", b: "A specialist visits your home, takes precise measurements, walks you through product options, and provides a detailed written quote on the spot." },
    { n: "03", t: "Professional installation", time: "1–2 days", b: "Our certified crew installs your new Anlin windows efficiently and neatly. One dedicated project manager from start to finish — fast, detail-oriented service." },
    { n: "04", t: "Post-installation cleanup & walkthrough", time: "Same day", b: "We leave your home spotless and walk you through everything. Your windows are backed by a double lifetime warranty — ready to enjoy from day one." },
  ];
  return (
    <section className="section" id="process">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2 className="h2">Four steps from <em>first call to new windows.</em></h2>
          <p className="lede">No mystery, no drawn-out projects. Here's exactly what your Elevate window replacement looks like.</p>
        </div>
        <div className="process-list">
          {steps.map(s => (
            <div className="process-step" key={s.n}>
              <div className="process-num">{s.n}</div>
              <div className="process-body">
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
              <div className="process-time">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;