// ============================================
// Process — 4 horizontal steps with diamond connectors
// ============================================

function Process() {
  const PC = window.PC;
  return (
    <section className="section process" id="process">
      <div className="backdrop-grid" aria-hidden="true"></div>
      <div className="wrap">
        <header className="section-head section-head--c">
          <span className="eyebrow eyebrow--c reveal">03 — The Process</span>
          <h2 className="h-1 reveal" data-d="1">
            From your files to <span className="serif it gold-text">cinematic delivery</span>.
          </h2>
          <p className="lead reveal" data-d="2" style={{margin: '0 auto'}}>
            A four-step pipeline tuned for production homebuilders. Predictable, transparent, and fast.
          </p>
        </header>

        <div className="process__rail">
          {PC.process.map((step, i) => (
            <React.Fragment key={step.id}>
              <div className="process__step reveal" data-d={i + 1}>
                <div className="process__head">
                  <span className="serif it process__num">{step.id}</span>
                  <span className="process__bar"></span>
                </div>
                <h3 className="h-3 process__title">{step.title}</h3>
                <p className="body process__desc">{step.desc}</p>
              </div>
              {i < PC.process.length - 1 && (
                <div className="process__connector reveal" data-d={i + 1} aria-hidden="true">
                  <span className="process__diamond"></span>
                  <span className="process__diamond"></span>
                  <span className="process__diamond"></span>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;