function Process() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) el.classList.add('is-in');
    }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const steps = [
    ["Short call", "We have a 15-minute chat so I understand what you need and whether we're a fit."],
    ["Brief + logo", "You fill in a short brief and send through your logo. That's everything I need."],
    ["Draft in 5–7 days", "I design, build, and write copy. You get a working draft in under a week."],
    ["Feedback", "Up to 2–3 rounds of revisions. Real feedback, not a committee."],
    ["Go live", "Site goes live under your domain. SSL, hosting, the lot — handled."],
  ];

  return (
    <section className="section process" id="process" ref={ref}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-kicker">— 02 / How it works</div>
            <h2 className="section-title">Five steps. <em>One week.</em></h2>
          </div>
          <div className="section-kicker" style={{maxWidth: 280}}>
            No project managers. No agency hand-offs. Just a single line of communication with the person doing the work.
          </div>
        </div>

        <div className="process-track">
          <div className="process-line">
            <div className="process-line-fill"></div>
          </div>
          {steps.map(([title, body], i) => (
            <div key={i} className="process-step">
              <div className="process-dot">0{i+1}</div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;