/* ===== components/ParcoMacchine — technical machine spec table ===== */
const MACCHINE = [
  ["Mori Seiki NHX5000", "Centro orizzontale", "500 × 500 mm · H800", "20.000 rpm · 90 bar", "60 utensili", "—"],
  ["Heller MC12", "Centro orizzontale", "400 × 400 mm · H800", "12.000 rpm", "60 utensili", "—"],
  ["Stama MC326/S", "Centro verticale", "500 × 350 mm · doppia tavola", "10.000 rpm", "32 utensili", "—"],
  ["MEP Shark 2500", "Sega a nastro automatica", "Ø max 250 mm", "—", "—", "—"],
];

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

  return (
    <section className="section section-tint" id="parco-macchine" ref={scope} data-screen-label="Parco Macchine">
      <div className="wrap">
        {!compact && <div className="pm-head">
          <div className="eyebrow accent-eyebrow section-animate">Parco macchine</div>
          <h2 className="sec-title section-animate">Tecnologia di ultima generazione</h2>
          <p className="sec-lead section-animate">
            Centri di lavoro orizzontali e verticali dotati di morse multigrip,
            con mandrini ad alta velocità e alta pressione per lavorazioni di precisione.
          </p>
        </div>}

        <div className="pm-table section-animate">
          <div className="pm-row head">
            <div className="pm-cell">Macchina</div>
            <div className="pm-cell">Pallet / capacità</div>
            <div className="pm-cell">Mandrino</div>
            <div className="pm-cell">Utensili</div>
            <div className="pm-cell">Note</div>
          </div>
          {MACCHINE.map(([name, lav, corsa, mand, tol, qty]) => (
            <div className="pm-row" key={name}>
              <div className="pm-cell name">{name}<span className="sub">{lav}</span></div>
              <div className="pm-cell mono" data-lab="Pallet / capacità">{corsa}</div>
              <div className="pm-cell mono" data-lab="Mandrino">{mand}</div>
              <div className="pm-cell mono" data-lab="Utensili">{tol}</div>
              <div className="pm-cell mono" data-lab="Note">{qty}</div>
            </div>
          ))}
        </div>
        <div className="pm-note section-animate">
          <span className="dot"></span>
          Dati indicativi del parco macchine — richiedi la scheda tecnica completa per il tuo progetto.
        </div>
      </div>
    </section>
  );
}

window.ParcoMacchine = ParcoMacchine;