function Process() {
  const steps = [
    {
      label: "Step 01",
      title: "Free Consultation",
      desc: "We visit your property, listen to your vision, and assess the space.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      ),
    },
    {
      label: "Step 02",
      title: "3D Design Plan",
      desc: "You'll see exactly what your finished project will look like — before we break ground.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
          <line x1="12" y1="22.08" x2="12" y2="12"/>
        </svg>
      ),
    },
    {
      label: "Step 03",
      title: "Expert Build",
      desc: "Our master craftsmen build to spec with daily updates and clean job sites.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
        </svg>
      ),
    },
    {
      label: "Step 04",
      title: "Walkthrough & Warranty",
      desc: "Final inspection, owner walkthrough, and our lifetime workmanship warranty.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          <polyline points="9 12 11 14 15 10"/>
        </svg>
      ),
    },
  ];

  const Arrow = () => (
    <div className="vp-process-arrow" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <line x1="3" y1="12" x2="19" y2="12" strokeDasharray="2 3" />
        <polyline points="14 6 20 12 14 18" />
      </svg>
    </div>
  );

  return (
    <section className="vp-section dark" id="process">
      <div className="vp-section-head">
        <div className="eyebrow">How We Work</div>
        <h2>From Vision to <span className="vp-underlined">Finished Build</span></h2>
        <p className="sub">A simple four-step process that keeps you informed and in control — from first call to final walkthrough.</p>
      </div>
      <div className="vp-process-track">
        {steps.map((s, i) => (
          <React.Fragment key={s.label}>
            <div className="vp-process-card">
              <div className="vp-process-icon-wrap">
                <div className="vp-process-icon">{s.icon}</div>
                <div className="vp-process-icon-ring" aria-hidden="true" />
              </div>
              <span className="vp-process-label">{s.label}</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
            {i < steps.length - 1 && <Arrow />}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}
window.Process = Process;