/* ===== pages/ProcessoProduttivo — processo + materiali + capacità ===== */
const MATERIALI = [
  ["Alluminio", "S11 · leghe per oleodinamica"],
  ["Acciai AVP", "Alta resistenza per componenti critici"],
  ["Ghisa G25", "Ghisa grigia per blocchetti e distributori"],
  ["Acciai ad alta resistenza", "Per applicazioni meccaniche esigenti"],
  ["Acciai inox", "AISI 303 · 304 · 316"],
  ["Leghe speciali", "Su specifica del cliente"],
];

const CAPACITA = [
  ["5", "Assi simultanei"],
  ["Ø320", "Tornitura · mm"],
  ["±0.005", "Tolleranza · mm"],
  ["Ra 0.4", "Finitura superficiale"],
];

function PageProcessoProduttivo() {
  const scope = MT.useGsap(() => { MT.revealUp(scope.current, { stagger: 0.08 }); }, []);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Processo produttivo"
        title="Dal primo contatto alla spedizione"
        sub="Ogni fase del ciclo produttivo è gestita e tracciata internamente, garantendo qualità e puntualità su ogni commessa."
        img="assets/mectec-30.jpg"
        vlabel="Processo Produttivo"
      />

      <Process compact />

      <section className="section section-tint" ref={scope} data-screen-label="Materiali">
        <div className="wrap">
          <div className="lav-head">
            <div>
              <div className="eyebrow accent-eyebrow section-animate">Materiali</div>
              <h2 className="sec-title section-animate">I materiali che lavoriamo</h2>
            </div>
            <p className="sec-lead section-animate">
              Dall'alluminio alla ghisa, dagli acciai legati ai materiali AVP:
              selezioniamo il materiale in base alla funzione del componente oleodinamico.
            </p>
          </div>
          <div className="mat-grid section-animate">
            {MATERIALI.map(([n, m]) => (
              <div className="mat-cell" key={n}>
                <div className="mat-name"><span className="b"></span>{n}</div>
                <div className="mat-meta">{m}</div>
              </div>
            ))}
          </div>
          <div className="cap-row">
            {CAPACITA.map(([n, l]) => (
              <div className="cap-item section-animate" key={l}>
                <div className="cap-num">{n}</div>
                <div className="cap-lab">{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.PageProcessoProduttivo = PageProcessoProduttivo;