/* ===================================================================
   ROVIA — Transportation Process (horizontal route schematic)
   =================================================================== */

const STEPS = [
  { n: "01", title: "Consultation", icon: "consult", desc: "We discuss the project, your stone, budget and the result you have in mind." },
  { n: "02", title: "Site Assessment", icon: "survey", desc: "On-site measurement of surfaces, substrate and access — the basis of every drawing." },
  { n: "03", title: "Planning", icon: "draft", desc: "Detailed drawings, stone selection and a clear schedule with defined milestones." },
  { n: "04", title: "Installation", icon: "install", desc: "Our own masons set the stone to the drawing, course by course, on a clean site." },
  { n: "05", title: "Completion", icon: "check", desc: "Finishing, cleaning and a walk-through hand-over of the completed work." },
];

function Process() {
  const railRef = useRef(null);
  const [drawn, setDrawn] = useState(false);

  useInView(railRef, () => setDrawn(true), 0.25);

  return (
    <section className="section process-section" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker reveal">How It Works</span>
            <h2 className="h2 reveal d1">From consultation to completed stone</h2>
          </div>
          <p className="body section-head-sub reveal d2">
            A single workflow carries your project through five clear stages. The line draws as you
            arrive — the way a wall is built, one course at a time.
          </p>
        </div>

        <div className="process-rail" ref={railRef}>
          {/* schematic line */}
          <svg className="process-line" viewBox="0 0 1000 64" preserveAspectRatio="none" aria-hidden="true">
            <line
              x1="20" y1="32" x2="980" y2="32"
              stroke="#D99041" strokeWidth="2" strokeLinecap="round"
              strokeDasharray="3 9"
              style={{
                opacity: 0.42,
                clipPath: drawn ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
                transition: "clip-path 2000ms cubic-bezier(0.22,1,0.36,1)",
              }}
            />
          </svg>

          <div className="process-steps">
            {STEPS.map((s, i) => (
              <div
                className="process-step"
                key={s.n}
                style={{
                  opacity: drawn ? 1 : 0,
                  transform: drawn ? "translateY(0)" : "translateY(16px)",
                  transition: `opacity 500ms ease ${i * 300}ms, transform 500ms ease ${i * 300}ms`,
                }}
              >
                <div className="process-node">
                  <span className="process-node-ring" style={{ animationDelay: `${i * 300}ms` }} />
                  <Icon name={s.icon} size={32} stroke="#264653" sw={2} />
                </div>
                <div className="process-n mono">{s.n}</div>
                <h4 className="h5 process-title">{s.title}</h4>
                <p className="body-sm process-desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });