function Process() {
  const steps = [
    { n: '01', color: '#537EBE', icon: 'search',     title: 'Ascolto',    copy: 'Capiamo lo studio, le persone, i casi ricorrenti. Capire viene prima di proporre.' },
    { n: '02', color: '#E3AC21', icon: 'compass',    title: 'Configurazione', copy: 'Software TeamSystem, NetLex Cloud, firma remota: installiamo e configuriamo sulle tue esigenze.' },
    { n: '03', color: '#D3482F', icon: 'hammer',     title: 'Formazione', copy: 'Affianchiamo l\u2019avvocato e lo staff con corsi accreditati. Nessuno resta indietro.' },
    { n: '04', color: '#009458', icon: 'refresh-cw', title: 'Presidio',   copy: 'Assistenza PCT 4 ore, adeguamenti normativi, consulenza continua. Siamo qui dopo il go-live.' },
  ];
  return (
    <section id="process" className="process">
      <div className="container">
        <div className="section-head">
          <h2>Un metodo in quattro tempi.</h2>
          <span className="hash"># metodo</span>
        </div>
        <div className="process-steps">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div className="n">{s.n}</div>
              <div className="circle" style={{background: s.color}}>
                <i data-lucide={s.icon} style={{width:18, height:18}}></i>
              </div>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;