/* global React, ReactDOM, Navbar, Hero, AgencyAbout, AgencyServices, Projects, AgencyAutomation, Contact, FinalCTA, Footer, ChatWidget, WhatsAppFab, STAMINEX_CONFIG */
const { useEffect: useAppE } = React;

const WHATSAPP_NUMBER = STAMINEX_CONFIG.WHATSAPP_NUMBER;
const WA_MSG = encodeURIComponent("Hola STAMINEX Tech, quiero información sobre un proyecto para mi empresa.");

function App() {
  const openWhatsApp = () => {
    if (!WHATSAPP_NUMBER) {
      window.alert(`El número de WhatsApp aún no está configurado. Escríbenos a ${STAMINEX_CONFIG.CONTACT_EMAIL}.`);
      return;
    }
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${WA_MSG}`, "_blank", "noopener");
  };
  const goContact = () => {
    const el = document.getElementById("contacto");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
  };
  // Scroll-triggered motion with a native fallback.
  useAppE(() => {
    const elements = [...document.querySelectorAll(".reveal:not(.in)")];
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const gsap = window.gsap;
    const scrollTrigger = window.ScrollTrigger;

    if (reduceMotion) {
      elements.forEach((element) => element.classList.add("in"));
      return undefined;
    }

    if (gsap && scrollTrigger) {
      gsap.registerPlugin(scrollTrigger);
      scrollTrigger.config({ ignoreMobileResize: true });
      document.documentElement.classList.add("has-gsap");
      const triggers = scrollTrigger.batch(elements, {
        start: "top 88%",
        once: true,
        onEnter: (batch) => gsap.to(batch, {
          opacity: 1,
          y: 0,
          duration: .82,
          stagger: .08,
          ease: "power3.out",
          overwrite: true,
          onComplete: () => batch.forEach((element) => {
            element.classList.add("in");
            element.style.willChange = "auto";
          }),
        }),
      });
      return () => triggers.forEach((trigger) => trigger.kill());
    }

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -7% 0px" });
    elements.forEach((element) => io.observe(element));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Navbar onContact={goContact} />
      <main>
        <AgencyAutomation />
        <Hero onContact={goContact} />
        <AgencyServices />
        <Projects onContact={goContact} />
        <AgencyAbout />
        <Contact />
        <FinalCTA onDemo={goContact} onWhatsApp={openWhatsApp} />
      </main>
      <Footer />
      <ChatWidget waNumber={WHATSAPP_NUMBER} />
      <WhatsAppFab waNumber={WHATSAPP_NUMBER} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);