/* ============ VETRA — App loader ============ */
const LOADER_FRAMES = [
  [14,7,0,8,6,13,20],[14,7,13,20,16,27,21],[14,20,27,21,34,24,28],
  [27,21,34,28,41,32,35],[34,28,41,35,48,40,42],[34,28,41,35,48,42,46],
  [34,28,41,35,48,42,38],[34,28,41,35,48,30,21],[34,28,41,48,21,22,14],
  [34,28,41,21,14,16,27],[34,28,21,14,10,20,27],[28,21,14,4,13,20,27],
  [28,21,14,12,6,13,20],[28,21,14,6,13,20,11],[28,21,14,6,13,20,10],
  [14,6,13,20,9,7,21],
];

const PREVIEW_FILES = [
  "Operaciones%20Preview%20Card.html",
  "Finanzas%20Preview%20Card.html",
  "Equipo%20Preview.html",
  "Clientes%20Preview%20Card.html",
  "Documentos%20Preview%20Card.html",
];

function AppLoader({ onDone }) {
  const [hiding, setHiding] = React.useState(false);
  const [gone, setGone] = React.useState(false);

  React.useEffect(() => {
    const minWait = new Promise(res => setTimeout(res, 1800));
    const pageLoad = new Promise(res => {
      if (document.readyState === "complete") res();
      else window.addEventListener("load", res, { once: true });
    });
    const prefetch = Promise.all(
      PREVIEW_FILES.map(f => fetch(f).then(r => r.text()).catch(() => null))
    );

    Promise.all([minWait, pageLoad, prefetch]).then(() => {
      setHiding(true);
      setTimeout(() => { setGone(true); onDone?.(); }, 580);
    });
  }, []);

  if (gone) return null;
  return (
    <div className={"app-loader" + (hiding ? " app-loader--hide" : "")}>
      <img src="assets/vetra-logo.svg" className="loader-logo" alt="VETRA" />
      <DotLoader frames={LOADER_FRAMES} duration={80} />
    </div>
  );
}

/* ============ VETRA — App ============ */
function App() {
  const [lang, setLangState] = React.useState(() => {
    try {
      const saved = localStorage.getItem("vetra_lang");
      if (saved) return saved;                       // respeta elección manual previa
      const nav = (navigator.languages && navigator.languages[0]) || navigator.language || "";
      return nav.toLowerCase().startsWith("es") ? "es" : "en";  // es-MX, es-ES, es-419... → es
    } catch (e) { return "es"; }
  });
  const setLang = (l) => {
    setLangState(l);
    try {localStorage.setItem("vetra_lang", l);} catch (e) {}
    document.documentElement.lang = l;
  };
  React.useEffect(() => {document.documentElement.lang = lang;}, [lang]);

  const t = window.COPY[lang];

  // scroll reveal
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    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 -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  return (
    <React.Fragment>
      <AppLoader />
      <Navbar t={t} lang={lang} setLang={setLang} />
      <Hero t={t} />
      <Problem t={t} />
      <Product t={t} lang={lang} />
      <How t={t} data-comment-anchor="ee546aaff4-span-258-15" />
      <Social t={t} />
      <CTA t={t} />
      <Footer t={t} />
    </React.Fragment>);

}

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