/* ===== components/Process — 5-step production timeline ===== */
const PROC_STEPS = [
  ["01", "Primo contatto", "Ricezione della richiesta tramite il canale telefonico o i canali web e primaria indicazione dell'attività effettuabile con sviluppo di un preventivo ad-hoc."],
  ["02", "Pianificazione", "A fronte dell'accettazione dell'offerta, l'ordine viene inserito a gestionale e viene generata la commessa. Fa seguito la pianificazione delle attività con verifica del materiale necessario."],
  ["03", "Produzione", "I materiali vengono tagliati e preparati, quindi avviati alle macchine per le lavorazioni meccaniche. Ogni pezzo viene accuratamente testato e collaudato per garantire la massima qualità."],
  ["04", "Eventuali trattamenti", "Passato il collaudo, se il tipo di lavorazione lo richiede, vengono effettuati eventuali lavorazioni conto terzi per affinare il prodotto e renderlo rispondente ai requisiti."],
  ["05", "Completamento e spedizione", "Ulteriori operazioni possono essere richieste prima dell'imballaggio e della spedizione del prodotto. Eventuali pezzi in esubero vengono destinati alle giacenze di magazzino."],
];

function Process({ dark, compact }) {
  const scope = MT.useGsap(() => {
    MT.revealUp(scope.current, { stagger: 0.1 });
    gsap.utils.toArray(scope.current.querySelectorAll(".step-bar span")).forEach((bar) => {
      gsap.fromTo(bar, { scaleX: 0 }, {
        scaleX: 1, duration: 0.8, ease: "power3.out",
        scrollTrigger: { trigger: bar, start: "top 90%", once: true },
      });
    });
  }, []);

  return (
    <section className={"section " + (dark ? "section-darkest" : "")} ref={scope} data-screen-label="Processo">
      <div className="wrap">
        {!compact && <div className="proc-head">
          <div className="eyebrow accent-eyebrow section-animate">Processo produttivo</div>
          <h2 className="sec-title section-animate" style={dark ? { color: "#fff" } : null}>
            Curiamo l'intero processo
          </h2>
          <p className="sec-lead section-animate">
            Dal primo contatto alla spedizione, ogni fase è gestita e tracciata internamente.
          </p>
        </div>}
        <div className="timeline">
          {PROC_STEPS.map(([n, t, d]) => (
            <div className="step section-animate" key={n}>
              <div className="step-num">{n}</div>
              <div className="step-bar"><span></span></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;