/* ===== components/Hero — clip-path diagonal, vertical label, GSAP timeline ===== */
function Hero() {
  const scope = MT.useGsap(() => {
    const h1 = document.querySelector(".hero h1");
    const chars = MT.splitToChars(h1);

    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      gsap.set([".hero-eyebrow", chars, ".hero-sub", ".hero-actions .btn", ".hero-stats > div", ".hero-vlabel", ".scroll-cue"], { opacity: 1, y: 0, yPercent: 0 });
      return;
    }

    const tl = gsap.timeline({ delay: 0.15 });
    tl.from(".hero-overlay", { opacity: 0, duration: 0.8 }).
    from(".hero-bg", { scale: 1.12, duration: 1.6, ease: "power2.out" }, 0).
    from(".hero-eyebrow", { y: 24, opacity: 0, duration: 0.6 }, 0.3).
    from(chars, { yPercent: 110, opacity: 0, duration: 0.7, stagger: 0.018, ease: "power3.out" }, 0.35).
    from(".hero-sub", { y: 28, opacity: 0, duration: 0.7 }, "-=0.35").
    from(".hero-actions .btn", { y: 24, opacity: 0, duration: 0.55, stagger: 0.12 }, "-=0.3").
    from(".hero-stats > div", { y: 28, opacity: 0, duration: 0.6, stagger: 0.1 }, "-=0.25").
    from(".hero-vlabel", { opacity: 0, duration: 0.8 }, "-=0.5").
    from(".scroll-cue", { opacity: 0, duration: 0.6 }, "-=0.4");

    // subtle parallax on the bg as you scroll
    gsap.to(".hero-bg", {
      yPercent: 14, ease: "none",
      scrollTrigger: { trigger: document.querySelector(".hero"), start: "top top", end: "bottom top", scrub: true }
    });
  }, []);

  const STATS = [
  ["40", "+", "Anni di esperienza"],
  ["2025", "", "Anno di fondazione"],
  ["100", "%", "Controllo qualità"]];


  return (
    <section className="hero" id="home" ref={scope} data-screen-label="Hero">
      <img className="hero-bg" src="assets/mectec-110.jpg" alt="Reparto produttivo Pasini Tech" />
      <div className="hero-overlay"></div>
      <span className="mt-vlabel hero-vlabel">Esperienza & Innovazione</span>
      <div className="wrap hero-content">
        <div className="eyebrow accent-eyebrow hero-eyebrow">Meccanica di precisione · settore oleodinamico</div>
        <h1 data-text="Esperienza e innovazione|nella *meccanica di precisione*"></h1>
        <p className="hero-sub">
          Un'attività giovane e dinamica nel settore oleodinamico, con oltre quarant'anni di
          esperienza nella costruzione di distributori e blocchetti oleodinamici in alluminio, AVP e ghisa.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" onClick={() => navigate("contatti")}>Richiedi preventivo →</a>
          <a className="btn btn-ghost-light btn-lg" onClick={() => navigate("processo-produttivo")}>Il processo produttivo</a>
        </div>
        <div className="hero-stats">
          {STATS.map(([n, u, lab]) =>
          <div key={lab}>
              <span className="hs-num">{n}<span className="u">{u}</span></span>
              <span className="hs-lab">{lab}</span>
            </div>
          )}
        </div>
      </div>
      <div className="scroll-cue"><span>Scorri</span><span className="line"></span></div>
    </section>);

}

window.Hero = Hero;