/* ===== components/Lavorazioni — service card grid, diagonal clip reveal ===== */
const LAVORAZIONI = [
  ["01", "Distributori oleodinamici", "Lavorazioni su disegno del cliente partendo da barre. Sbavatura e controllo da personale qualificato.",
    "assets/mectec-30.jpg", ["Su disegno", "Da barra", "Collaudo 100%"]],
  ["02", "Blocchetti in alluminio", "Fresatura e foratura di blocchetti oleodinamici in alluminio con morse multigrip su centri orizzontali e verticali.",
    "assets/mectec-50.jpg", ["Alluminio S11", "Multigrip", "Serie"]],
  ["03", "Lavorazioni AVP", "Componenti in acciaio AVP ad alta resistenza per applicazioni oleodinamiche esigenti.",
    "assets/16042026-mectec-34.jpg", ["Acciai AVP", "Alta resistenza", "Su disegno"]],
  ["04", "Lavorazioni in ghisa", "Componenti in ghisa G25 per il settore oleodinamico e motori elettrici, ricavati dal pieno.",
    "assets/photo-part-blocks.jpg", ["Ghisa G25", "Dal pieno", "Motori elettrici"]],
  ["05", "Trattamenti superficiali", "Fosfatazione, anodizzazione e zincatura affidandoci a fornitori esperti del settore.",
    "assets/mectec-140.jpg", ["Fosfatazione", "Anodizzazione", "Zincatura"]],
  ["06", "Controllo qualità", "Ogni componente viene sbavato e controllato da personale qualificato prima della spedizione.",
    "assets/mectec-90.jpg", ["Sbavatura", "Collaudo", "Tracciabilità"]],
];

function Lavorazioni() {
  const scope = MT.useGsap(() => { MT.revealUp(scope.current, { stagger: 0.1 }); }, []);

  return (
    <section className="section" id="lavorazioni" ref={scope} data-screen-label="Lavorazioni">
      <div className="wrap">
        <div className="lav-head">
          <div>
            <div className="eyebrow accent-eyebrow section-animate">Prodotti & lavorazioni</div>
            <h2 className="sec-title section-animate">Dalla materia prima<br/>al componente finito</h2>
          </div>
          <p className="sec-lead section-animate">
            Specializzati nella produzione di componenti per il settore oleodinamico,
            con un ciclo completo di lavorazioni gestito internamente.
            <br/><a className="accent" style={{ cursor: "pointer", fontWeight: 600 }} onClick={() => navigate("processo-produttivo")}>Scopri il processo produttivo →</a>
          </p>
        </div>
        <div className="lav-grid">
          {LAVORAZIONI.map(([num, title, desc, img, tags]) => (
            <article className="lav-card section-animate" key={num}>
              <img className="lav-img" src={img} alt={title} />
              <span className="lav-num">{num}</span>
              <div className="lav-body">
                <h3>{title}</h3>
                <p>{desc}</p>
                <div className="lav-tags">
                  {tags.map((t) => <span className="lav-tag" key={t}>{t}</span>)}
                </div>
                <div className="lav-bar"></div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Lavorazioni = Lavorazioni;