/* ===== pages/Settori — schede settore con descrizioni ===== */
const SETTORI_DETT = [
  ["Oleodinamica", "Lavorazioni su disegno del cliente di distributori oleodinamici partendo da barre. Offriamo anche trattamenti come fosfatazione, anodizzazione e zincatura affidandoci a fornitori esperti. Tutti i componenti vengono sbavati e controllati da personale qualificato."],
  ["Motori Elettrici", "Realizziamo componenti e ricambi nel settore dei motori elettrici, ricavati dal pieno sempre su disegno e specifiche del cliente."],
];

function PageSettori() {
  const scope = MT.useGsap(() => { MT.revealUp(scope.current, { stagger: 0.07 }); }, []);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Settori"
        title="Specialisti nel settore oleodinamico"
        sub="Con oltre 40 anni di esperienza, operiamo principalmente nei settori dell'oleodinamica e dei motori elettrici, producendo componenti di alta precisione."
        img="assets/16042026-mectec-34.jpg"
      />

      <section className="section" ref={scope} data-screen-label="Settori">
        <div className="wrap">
          <div className="setd-grid">
            {SETTORI_DETT.map(([t, d], i) => (
              <div className="setd-card section-animate" key={t}>
                <div className="setd-idx">{String(i + 1).padStart(2, "0")}</div>
                <h3>{t}</h3>
                <p>{d}</p>
                <div className="setd-bar"></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-darkest" data-screen-label="Settori CTA">
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="eyebrow accent-eyebrow" style={{ justifyContent: "center" }}>Hai un progetto specifico?</div>
          <h2 className="sec-title" style={{ color: "#fff", margin: "0 auto 28px", maxWidth: "20ch" }}>
            Raccontaci le tue esigenze, troviamo la soluzione
          </h2>
          <a className="btn btn-primary btn-lg" onClick={() => navigate("contatti")}>Richiedi un preventivo →</a>
        </div>
      </section>
    </React.Fragment>
  );
}
window.PageSettori = PageSettori;