/* ===== components/Settori — sectors served, orange triangle bullets (dark) ===== */
const SETTORI = [
  "Oleodinamica",
  "Motori Elettrici",
];

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

  return (
    <section className="section section-darkest" id="settori" ref={scope} data-screen-label="Settori">
      <div className="wrap">
        <div className="set-grid">
          <div className="set-left">
            <div className="eyebrow accent-eyebrow section-animate">Settori serviti</div>
            <h2 className="sec-title section-animate" style={{ color: "#fff" }}>
              Specialisti nel settore oleodinamico
            </h2>
            <p className="sec-lead section-animate">
              Operiamo con competenze consolidate nei settori dell'oleodinamica e dei motori
              elettrici, producendo componenti di precisione che rispondono alle esigenze
              più rigorose dell'industria.
            </p>
            <a className="btn btn-primary section-animate" style={{ marginTop: "28px" }} onClick={() => navigate("settori")}>
              Esplora i settori →
            </a>
          </div>
          <ul className="set-list section-animate" style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {SETTORI.map((s) => (
              <li className="set-item" key={s}><span className="set-bullet"></span>{s}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.Settori = Settori;