/* ===== components/ChiSiamo — intro copy + animated stat counters ===== */
const CS_STATS = [
  ["+", 40, "", "Anni di esperienza"],
  ["+", 15, "", "Macchine CNC in linea"],
  ["+", 100, "", "Clienti attivi"],
];

function ChiSiamo({ compact }) {
  const scope = MT.useGsap(() => {
    MT.revealUp(scope.current);
    // reveal the diagonal-cut photo with a clip wipe
    gsap.from(".cs-media .reveal-mask img", {
      scale: 1.18, duration: 1.2, ease: "power3.out",
      scrollTrigger: { trigger: ".cs-media", start: "top 80%", once: true },
    });
    gsap.fromTo(".cs-media .reveal-mask",
      { clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)" },
      { clipPath: "var(--clip-cut-tr)", duration: 1.1, ease: "power3.inOut",
        scrollTrigger: { trigger: ".cs-media", start: "top 80%", once: true } });
    // counters
    document.querySelectorAll(".cs-stat .num .count").forEach((el) => {
      MT.counter(el, parseInt(el.dataset.target, 10));
    });
  }, []);

  return (
    <section className="chisiamo" id="chi-siamo" ref={scope} data-screen-label="Chi Siamo">
      <div className="wrap">
        <div className="cs-grid">
          <div className="cs-media section-animate">
            <div className="reveal-mask">
              <img src="assets/mectec-45.jpg" alt="Operatore Pasini Tech con componente lavorato" />
            </div>
            <div className="cs-badge"><span className="pre">EST.</span> ROLO · RE</div>
          </div>
          {!compact && <div className="cs-copy">
            <div className="eyebrow section-animate">Chi siamo</div>
            <h2 className="sec-title section-animate">Un'eredità di esperienza, uno sguardo al futuro</h2>
            <p className="section-animate">
              La <b>Pasini Tech s.r.l.</b> nasce nel 2025 dall'acquisizione della storica <b>Pasini F.lli snc</b>,
              ereditando oltre quarant'anni di esperienza nella meccanica di precisione.
            </p>
            <p className="section-animate">
              Specializzati nella costruzione di <b>distributori e blocchetti oleodinamici in alluminio,
              AVP e ghisa</b>, la qualità e l'affidabilità rappresentano i nostri valori fondamentali,
              con investimenti costanti nei processi e nella sicurezza.
            </p>
            <a className="btn btn-ghost section-animate" onClick={() => navigate("azienda")}>Scopri l'azienda →</a>
          </div>}
        </div>

        <div className="cs-stats">
          {CS_STATS.map(([pfx, target, sfx, lab]) => (
            <div className="cs-stat section-animate" key={lab}>
              <div className="num">
                <span className="pfx">{pfx}</span>
                <span className="count" data-target={target}>0</span>{sfx}
              </div>
              <div className="lab">{lab}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ChiSiamo = ChiSiamo;