function Process() {
  const steps = [
    {icon: "phone", n: "01", t: "Consult", b: "On-site visit, 45 min."},
    {icon: "clipboard", n: "02", t: "Design", b: "Scaled plan, materials samples."},
    {icon: "ruler", n: "03", t: "Proposal", b: "Line-item quote, fixed price."},
    {icon: "hammer", n: "04", t: "Install", b: "ICPI-spec base, then pavers."},
    {icon: "shieldCheck", n: "05", t: "Walkthrough", b: "Punch list, lifetime warranty."},
  ];
  return (
    <section style={{background: "var(--white)", padding: "96px 32px", borderTop: "1px solid var(--n-200)", borderBottom: "1px solid var(--n-200)"}}>
      <div style={{maxWidth: 1200, margin: "0 auto"}}>
        <div style={{maxWidth: 700, marginBottom: 48}}>
          <span className="eyebrow">How it works</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 12, textTransform: "uppercase"}}>
            The same five steps on every project.
          </h2>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, position: "relative"}}>
          <div style={{position: "absolute", top: 28, left: "10%", right: "10%", height: 1, background: "var(--n-200)"}}/>
          {steps.map((s, i) => (
            <div key={i} style={{position: "relative", padding: "0 14px", textAlign: "left"}}>
              <div style={{
                width: 56, height: 56, borderRadius: 999, background: "var(--white)",
                border: "1px solid var(--n-200)", display: "flex", alignItems: "center", justifyContent: "center",
                position: "relative", zIndex: 1, marginBottom: 18,
              }}>
                <Icon name={s.icon} size={22} stroke={1.5} color="var(--turf-700)"/>
              </div>
              <div style={{fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)"}}>{s.n}</div>
              <div style={{fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 800, marginTop: 4, letterSpacing: "-0.01em", textTransform: "uppercase"}}>{s.t}</div>
              <div style={{fontSize: 14, color: "var(--slate-600)", marginTop: 6, lineHeight: 1.5}}>{s.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;